:root {
      --bg: #ffffff;
      --panel: #ffffff;
      --panel-2: #fbf8f2;
      --text: #14283c;
      --muted: #7d7c77;
      --line: #e8dcc1;
      --dark: #11283c;
      --gold: #d8bb73;
      --gold-soft: #efe1b7;
      --gold-pale: #faf3df;
      --danger: #9e2f2f;
      --success: #275f40;
      --shadow: 0 20px 50px rgba(17,40,60,.10);
      --radius: 12px;
    }

    * { box-sizing: border-box; }

    html, body {
      min-height: 100%;
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    .hidden { display: none !important; }

    .auth-loading {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--bg);
      color: var(--text);
    }

    .auth-loading-inner {
      text-align: center;
    }

    .auth-loading-mark {
      width: 52px;
      height: 52px;
      margin: 0 auto 16px;
      border: 1px solid #cfcfc8;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: .08em;
      background: #fff;
    }

    .auth-loading-text {
      color: var(--muted);
      font-size: 13px;
    }

    .brand-logo {
      display: block;
      object-fit: contain;
      border-radius: 50%;
      background: white;
    }

    .brand-logo.loading {
      width: 96px;
      height: 96px;
      margin: 0 auto;
      border: 0;
      box-shadow: none;
    }


    .sidebar-monogram {
      width: 48px;
      height: 48px;
      flex: 0 0 48px;
      display: grid;
      place-items: center;
      border: 1.5px solid var(--gold);
      color: #ffffff;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .08em;
      border-radius: 8px;
      background: rgba(255,255,255,.025);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    }

    .brand-logo.sidebar {
      width: 82px;
      height: 82px;
      flex: 0 0 82px;
      border: 0;
      border-radius: 50%;
      background: white;
    }

    .brand-logo.login {
      width: 120px;
      height: 120px;
      margin-bottom: 20px;
      border: 4px solid rgba(216,187,115,.75);
      box-shadow: 0 12px 30px rgba(0,0,0,.18);
    }

    .brand-wordmark {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1.05;
    }

    .brand-wordmark .title {
      font-weight: 800;
      letter-spacing: .01em;
    }

    .brand-wordmark .subtitle {
      font-size: 11px;
      color: inherit;
      opacity: .62;
      letter-spacing: .16em;
      text-transform: uppercase;
    }


    /* LOGIN */
    .login-page {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
    }

    .brand-panel {
      background: linear-gradient(180deg, #11283c 0%, #0d2131 100%);
      color: white;
      padding: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .brand-mark {
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 700;
      letter-spacing: .02em;
    }

    .brand-mark.compact {
      align-items: center;
      flex-direction: row;
      text-align: left;
      gap: 12px;
    }

    .sidebar .brand-wordmark .title {
      display: block;
      color: #ffffff;
      font-size: 14px;
      line-height: 1.1;
      max-width: 128px;
    }

    .sidebar .brand-wordmark .subtitle {
      color: rgba(239,225,183,.82);
      font-size: 9px;
      letter-spacing: .17em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    .brand-box {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255,255,255,.35);
      display: none;
      place-items: center;
      font-size: 15px;
      letter-spacing: .08em;
    }

    .brand-copy { max-width: 600px; }

    .eyebrow {
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 12px;
      color: rgba(255,255,255,.80);
      margin-bottom: 22px;
    }

    .brand-copy h1 {
      font-family: inherit;
      font-weight: 400;
      font-size: clamp(44px, 6vw, 78px);
      line-height: .98;
      margin: 0 0 24px;
    }

    .brand-copy p {
      color: rgba(255,255,255,.76);
      font-size: 17px;
      line-height: 1.7;
      max-width: 500px;
    }

    .brand-footer {
      color: rgba(239,225,183,.60);
      font-size: 12px;
      position: absolute;
      left: 64px;
      bottom: 36px;
    }

    .login-panel {
      display: grid;
      place-items: center;
      padding: 40px;
    }

    .login-card {
      width: min(430px, 100%);
      background: var(--panel);
      padding: 44px;
      border: 1px solid var(--line);
      border-top: 5px solid var(--gold);
      box-shadow: var(--shadow);
    }


    .login-card-logo {
      width: 86px;
      height: 86px;
      object-fit: contain;
      display: block;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: white;
      border: 3px solid rgba(216,187,115,.55);
      box-shadow: 0 8px 18px rgba(17,40,60,.10);
    }

    .login-card h2 {
      margin: 0 0 8px;
      font-family: inherit;
      font-size: 34px;
      font-weight: 400;
    }

    .login-card .sub {
      color: var(--muted);
      margin: 0 0 32px;
      line-height: 1.6;
    }

    label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      margin: 0 0 8px;
    }

    .field { margin-bottom: 20px; }

    input, select, textarea {
      width: 100%;
      border: 1px solid #d9d9d2;
      background: white;
      padding: 12px 13px;
      outline: none;
      transition: .15s ease;
      border-radius: 6px;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(216,187,115,.20);
    }

    .primary-btn {
      border: 0;
      background: var(--dark);
      color: white;
      box-shadow: 0 8px 20px rgba(17,40,60,.18);
      padding: 12px 18px;
      cursor: pointer;
      transition: .15s ease;
      border-radius: 6px;
      font-weight: 700;
    }

    .primary-btn.full { width: 100%; padding: 14px 18px; }
    .primary-btn:hover { background: #1b3953; }
    .primary-btn:disabled { opacity: .55; cursor: wait; }

    .secondary-btn {
      border: 1px solid var(--gold-soft);
      background: white;
      color: var(--dark);
      padding: 10px 14px;
      border-radius: 6px;
      font-weight: 700;
    }

    .message {
      min-height: 22px;
      margin-top: 18px;
      font-size: 13px;
      line-height: 1.5;
    }

    .message.error { color: var(--danger); }
    .message.success { color: var(--success); }

    /* APP */
    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 245px 1fr;
    }

    .sidebar {
      background: var(--dark);
      color: white;
      box-shadow: 0 8px 20px rgba(17,40,60,.18);
      padding: 26px 18px;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .sidebar .brand-mark {
      padding: 2px 8px 22px;
      border-bottom: 1px solid rgba(255,255,255,.1);
      margin-bottom: 24px;
    }

    .nav-label {
      padding: 0 12px;
      margin: 12px 0 8px;
      color: rgba(239,225,183,.60);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .16em;
    }

    .nav-item {
      padding: 11px 12px;
      color: rgba(255,255,255,.82);
      text-decoration: none;
      font-size: 14px;
      border-left: 2px solid transparent;
      border-radius: 0 6px 6px 0;
      background: transparent;
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-item > span {
      min-width: 0;
      white-space: nowrap;
    }

    .nav-icon {
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
      display: block;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      opacity: .9;
    }

    .nav-item.active .nav-icon {
      color: var(--gold);
      opacity: 1;
    }

    .nav-item.active {
      color: white;
      background: rgba(216,187,115,.14);
      border-left-color: var(--gold);
    }

    .nav-item.disabled {
      opacity: .35;
      cursor: default;
    }

    .sidebar-user {
      margin-top: auto;
      border-top: 1px solid rgba(255,255,255,.1);
      padding: 20px 10px 0;
    }

    .sidebar-user .name {
      font-weight: 700;
      font-size: 14px;
    }

    .sidebar-user .role {
      color: rgba(239,225,183,.70);
      font-size: 12px;
      margin-top: 4px;
      text-transform: capitalize;
    }

    .signout {
      border: 0;
      padding: 0;
      margin-top: 14px;
      background: none;
      color: rgba(255,255,255,.80);
      cursor: pointer;
      font-size: 12px;
    }

    .main {
      min-width: 0;
      padding: 34px;
      background: #ffffff;
    }

    /* iOS-STYLE WORKSPACE TRANSITIONS */
    .main {
      overflow-x: hidden;
      scroll-behavior: smooth;
      perspective: 1200px;
    }

    .view.active {
      view-transition-name: crm-workspace;
      backface-visibility: hidden;
      transform: translateZ(0);
    }

    /* Keep the shell fixed; only the workspace snapshot animates. */
    ::view-transition-group(crm-workspace) {
      animation-duration: 430ms;
      animation-timing-function: cubic-bezier(.32,.72,0,1);
      overflow: clip;
    }

    /* MAIN NAVIGATION: soft iOS-style crossfade */
    html.vt-cross ::view-transition-old(crm-workspace) {
      animation: iosCrossOld 180ms ease-out both;
    }

    html.vt-cross ::view-transition-new(crm-workspace) {
      animation: iosCrossNew 260ms 35ms ease-out both;
    }

    @keyframes iosCrossOld {
      from { opacity: 1; transform: scale(1); }
      to   { opacity: 0; transform: scale(.992); }
    }

    @keyframes iosCrossNew {
      from { opacity: 0; transform: scale(1.006); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* PUSH FORWARD: list/hub -> detail */
    html.vt-forward ::view-transition-old(crm-workspace) {
      animation: iosPushOld 430ms cubic-bezier(.32,.72,0,1) both;
      z-index: 1;
    }

    html.vt-forward ::view-transition-new(crm-workspace) {
      animation: iosPushNew 430ms cubic-bezier(.32,.72,0,1) both;
      z-index: 2;
      box-shadow: -18px 0 34px rgba(17,40,60,.08);
    }

    @keyframes iosPushOld {
      from {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
      }
      to {
        opacity: .76;
        transform: translate3d(-24%,0,0) scale(.992);
      }
    }

    @keyframes iosPushNew {
      from {
        opacity: .96;
        transform: translate3d(100%,0,0);
      }
      to {
        opacity: 1;
        transform: translate3d(0,0,0);
      }
    }

    /* POP BACK: detail -> list/hub */
    html.vt-back ::view-transition-old(crm-workspace) {
      animation: iosPopOld 410ms cubic-bezier(.32,.72,0,1) both;
      z-index: 2;
      box-shadow: -18px 0 34px rgba(17,40,60,.08);
    }

    html.vt-back ::view-transition-new(crm-workspace) {
      animation: iosPopNew 410ms cubic-bezier(.32,.72,0,1) both;
      z-index: 1;
    }

    @keyframes iosPopOld {
      from {
        opacity: 1;
        transform: translate3d(0,0,0);
      }
      to {
        opacity: .96;
        transform: translate3d(100%,0,0);
      }
    }

    @keyframes iosPopNew {
      from {
        opacity: .76;
        transform: translate3d(-24%,0,0) scale(.992);
      }
      to {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
      }
    }

    /* Fallback when View Transitions are unavailable. */
    .view.ios-fallback-forward {
      display: block !important;
      animation: iosFallbackForward 390ms cubic-bezier(.32,.72,0,1) both;
    }

    .view.ios-fallback-back {
      display: block !important;
      animation: iosFallbackBack 390ms cubic-bezier(.32,.72,0,1) both;
    }

    .view.ios-fallback-cross {
      display: block !important;
      animation: iosFallbackCross 220ms ease-out both;
    }

    @keyframes iosFallbackForward {
      from { opacity: .92; transform: translate3d(40px,0,0); }
      to   { opacity: 1; transform: translate3d(0,0,0); }
    }

    @keyframes iosFallbackBack {
      from { opacity: .92; transform: translate3d(-28px,0,0); }
      to   { opacity: 1; transform: translate3d(0,0,0); }
    }

    @keyframes iosFallbackCross {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* iPhone-like modal/sheet feel */
    .modal-backdrop:not(.hidden) {
      animation: iosBackdropIn 220ms ease-out both;
      backdrop-filter: blur(2px);
    }

    .modal-backdrop:not(.hidden) .modal {
      animation: iosSheetIn 420ms cubic-bezier(.32,.72,0,1) both;
      transform-origin: center bottom;
    }

    @keyframes iosBackdropIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes iosSheetIn {
      from {
        opacity: 0;
        transform: translate3d(0,28px,0) scale(.975);
      }
      to {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1);
      }
    }

    .nav-item,
    button,
    .dashboard-kpi,
    .dashboard-panel,
    .profile-card,
    tbody tr {
      transition:
        transform 160ms cubic-bezier(.32,.72,0,1),
        box-shadow 180ms ease,
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
    }

    button:active:not(:disabled),
    .nav-item:active {
      transform: scale(.985);
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }



    .view { display: none; }
    .view.active { display: block; }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-bottom: 30px;
    }

    .topbar h1 {
      font-family: inherit;
      font-size: 38px;
      font-weight: 400;
      margin: 0;
    }

    .topbar p {
      color: var(--muted);
      margin: 7px 0 0;
    }

    .badge {
      border: 1px solid var(--gold-soft);
      background: var(--gold-pale);
      color: var(--dark);
      padding: 8px 11px;
      font-size: 12px;
      text-transform: capitalize;
      border-radius: 999px;
    }

    /* DASHBOARD */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .card {
      background: white;
      border: 1px solid var(--line);
      padding: 24px;
      border-radius: var(--radius);
    }

    .card .small {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .card .big {
      font-family: inherit;
      font-size: 42px;
      margin-top: 9px;
    }

    .next-card {
      margin-top: 18px;
      background: white;
      border: 1px solid var(--line);
      padding: 28px;
      border-radius: var(--radius);
    }

    .next-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .next-card p {
      color: var(--muted);
      margin: 0;
      line-height: 1.65;
    }


    .dashboard-controls {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dashboard-agent-select {
      min-width: 210px;
      border: 1px solid var(--line);
      background: white;
      color: var(--text);
      padding: 10px 12px;
      border-radius: 8px;
      font-weight: 700;
    }

    .agent-dashboard-top {
      display: grid;
      grid-template-columns: minmax(280px, .9fr) minmax(0, 2.8fr);
      gap: 16px;
      align-items: stretch;
    }

    .dashboard-panel {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      min-width: 0;
    }

    .dashboard-panel-header {
      min-height: 48px;
      padding: 14px 16px;
      border-bottom: 1px solid #eee8db;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .dashboard-panel-header h3 {
      margin: 0;
      font-size: 14px;
      color: var(--dark);
    }

    .dashboard-panel-header span {
      color: var(--muted);
      font-size: 11px;
    }

    .dashboard-panel-header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 9px;
      min-width: 0;
    }

    .dashboard-add-opportunity-btn {
      flex: 0 0 auto;
      border: 1px solid #18364d;
      border-radius: 8px;
      background: #18364d;
      color: #fff;
      padding: 7px 10px;
      font: inherit;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(24,54,77,.12);
      transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
    }

    .dashboard-add-opportunity-btn:hover {
      transform: translateY(-1px);
      background: #102b40;
      box-shadow: 0 5px 13px rgba(24,54,77,.17);
    }

    @media (max-width: 700px) {
      .dashboard-panel-header-actions {
        gap: 7px;
      }

      .dashboard-panel-header-actions > span {
        display: none;
      }

      .dashboard-add-opportunity-btn {
        padding: 7px 9px;
        font-size: 9.5px;
      }
    }

    .database-health-body {
      padding: 22px 18px 18px;
    }

    .health-donut-wrap {
      display: grid;
      place-items: center;
      padding: 5px 0 18px;
    }

    .health-donut {
      --a-end: 0deg;
      --b-end: 0deg;
      --c-end: 0deg;
      width: 188px;
      height: 188px;
      border-radius: 50%;
      position: relative;
      display: grid;
      place-items: center;
      background:
        conic-gradient(
          #2f7a51 0deg var(--a-end),
          #d8bb73 var(--a-end) var(--b-end),
          #d78c3c var(--b-end) var(--c-end),
          #d7d8d4 var(--c-end) 360deg
        );
    }

    .health-donut::before {
      content: "";
      position: absolute;
      inset: 27px;
      background: white;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px #eee8db;
    }

    .health-donut-center {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .health-donut-center strong {
      display: block;
      font-family: inherit;
      font-size: 38px;
      line-height: 1;
      font-weight: 400;
      color: var(--dark);
    }

    .health-donut-center span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
    }

    .health-legend {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 8px 12px;
    }

    .health-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      min-width: 0;
    }

    .health-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex: 0 0 9px;
    }

    .health-dot.a { background:#2f7a51; }
    .health-dot.b { background:#d8bb73; }
    .health-dot.c { background:#d78c3c; }
    .health-dot.d { background:#d7d8d4; }

    .health-legend-item strong {
      margin-left: auto;
      color: var(--dark);
    }

    .dashboard-kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }

    .dashboard-kpi {
      min-height: 122px;
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 17px 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .dashboard-kpi-label {
      color: var(--dark);
      font-size: 12px;
      font-weight: 800;
    }

    .dashboard-kpi-value {
      font-family: inherit;
      color: #171d22;
      font-size: 34px;
      line-height: 1.05;
      margin-top: 12px;
      overflow-wrap: anywhere;
    }

    .dashboard-kpi-sub {
      color: var(--muted);
      font-size: 10px;
      margin-top: 6px;
    }

    .agent-dashboard-bottom {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
      gap: 16px;
      margin-top: 16px;
      align-items: start;
    }

    .dashboard-scroll-panel {
      max-height: 590px;
      overflow: auto;
    }

    .dashboard-group {
      border-bottom: 1px solid #eee8db;
    }

    .dashboard-group:last-child {
      border-bottom: 0;
    }


    /* CRM 168: section totals for Opportunity Pipeline and Transactions */
    .dashboard-group-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 14px 12px;
      border-top: 1px solid #eee8db;
      background: #fbfcfc;
    }

    .dashboard-group-summary-count {
      color: #7f8d98;
      font-size: 10px;
      font-weight: 850;
    }

    .dashboard-group-summary-gci {
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
      color: #7f8d98;
      font-size: 9px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .025em;
      white-space: nowrap;
    }

    .dashboard-group-summary-gci strong {
      color: var(--dark);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: 0;
    }

    .dashboard-group-header {
      padding: 12px 14px 9px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .dashboard-status-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      letter-spacing: .03em;
      text-transform: uppercase;
      border: 1px solid transparent;
    }

    .dashboard-status-chip.active {
      color: #38612f;
      background: #edf5e9;
      border-color: #cfe0c7;
    }

    .dashboard-status-chip.coming_soon {
      color: #86531f;
      background: #fff1df;
      border-color: #efd4b3;
    }

    .dashboard-status-chip.potential {
      color: #9b3434;
      background: #fff0ef;
      border-color: #e8c2c0;
    }

    .dashboard-status-chip.pending {
      color: #17654a;
      background: #e8f5ef;
      border-color: #bedecd;
    }

    .dashboard-status-chip.closed {
      color: #6f716d;
      background: #f1f2ef;
      border-color: #d8d9d5;
    }

    .dashboard-group-count {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .dashboard-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .dashboard-table th {
      color: var(--muted);
      text-align: left;
      font-size: 10px;
      font-weight: 800;
      padding: 7px 12px;
      border-bottom: 1px solid #eee8db;
      background: #fff;
    }

    .dashboard-table td {
      font-size: 11px;
      padding: 10px 12px;
      border-bottom: 1px solid #f2eee5;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dashboard-table tr[data-client-id],
    .dashboard-table tr[data-transaction-id] {
      cursor: pointer;
    }

    .dashboard-table tr[data-client-id]:hover td,
    .dashboard-table tr[data-transaction-id]:hover td {
      background: #fcfaf5;
    }

    .dashboard-row-title {
      color: var(--dark);
      font-weight: 800;
    }

    .dashboard-empty {
      padding: 18px 14px 22px;
      color: var(--muted);
      font-size: 11px;
    }

    .dashboard-muted {
      color: var(--muted);
    }

    @media(max-width:1180px) {
      .agent-dashboard-top,
      .agent-dashboard-bottom {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:850px) {
      .dashboard-kpi-grid {
        grid-template-columns: 1fr 1fr;
      }

      .dashboard-controls {
        width: 100%;
      }

      .dashboard-agent-select {
        width: 100%;
      }
    }

    @media(max-width:560px) {
      .dashboard-kpi-grid {
        grid-template-columns: 1fr;
      }

      .health-legend {
        grid-template-columns: 1fr;
      }
    }


    .lead-toolbar {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      margin-bottom: 16px;
    }

    .lead-toolbar-row {
      display: grid;
      grid-template-columns: minmax(240px,1.5fr) repeat(4,minmax(130px,.65fr)) auto;
      gap: 10px;
      align-items: center;
    }

    .lead-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1050px;
    }

    .lead-table th,
    .lead-table td {
      padding: 11px 12px;
      border-bottom: 1px solid #eee8db;
      text-align: left;
      font-size: 12px;
      vertical-align: middle;
    }

    .lead-table th {
      background: #fcfbf8;
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .lead-table tbody tr {
      cursor: pointer;
    }

    .lead-table tbody tr:hover td {
      background: #fcfaf5;
    }

    .lead-name {
      color: var(--dark);
      font-weight: 900;
    }

    .lead-priority {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 7px;
      font-size: 9px;
      line-height: 1;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
      border: 1px solid var(--line);
      background: white;
    }

    .lead-priority.urgent { color:#9d2e2e; background:#fff0ef; border-color:#e8c2c0; }
    .lead-priority.high { color:#8a541a; background:#fff3e5; border-color:#edd0ad; }
    .lead-priority.normal { color:#365d77; background:#edf5fa; border-color:#c7dce8; }
    .lead-priority.low { color:#65706a; background:#f3f5f2; border-color:#d9ddd7; }
    .lead-priority.none { color:#777; background:#f8f8f6; border-color:#e3e3df; }

    .lead-status-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 7px;
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
      border: 1px solid transparent;
    }

    .lead-status-pill.new { color:#285c82; background:#eaf4fb; border-color:#c5dcec; }
    .lead-status-pill.working { color:#8a541a; background:#fff3e5; border-color:#edd0ad; }
    .lead-status-pill.nurture { color:#6c4d82; background:#f6effb; border-color:#ddcdea; }
    .lead-status-pill.converted { color:#246142; background:#eaf6ef; border-color:#c3dfcf; }
    .lead-status-pill.lost { color:#777; background:#f1f1ef; border-color:#dadad6; }

    @media(max-width:1200px) {
      .lead-toolbar-row {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    @media(max-width:700px) {
      .lead-toolbar-row {
        grid-template-columns: 1fr;
      }
    }


    /* FORMS + SETTINGS */
    .forms-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .form-launch-card {
      border: 1px solid var(--line);
      background: white;
      border-radius: var(--radius);
      padding: 20px;
      min-height: 170px;
      text-align: left;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
      transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
    }

    .form-launch-card:hover {
      border-color: #d6c28d;
      box-shadow: 0 10px 28px rgba(17,40,60,.06);
      background: #fffefa;
    }

    .form-launch-card .eyebrow {
      color: #9c7b2d;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 900;
    }

    .form-launch-card h3 {
      margin: 7px 0 7px;
      color: var(--dark);
      font-size: 20px;
    }

    .form-launch-card p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .form-launch-action {
      color: var(--dark);
      font-weight: 900;
      font-size: 12px;
    }

    .form-placeholder-card {
      cursor: default;
      opacity: .72;
      background: #faf9f5;
    }

    .form-placeholder-card:hover {
      border-color: var(--line);
      box-shadow: none;
      background: #faf9f5;
    }

    .workflow-shell {
      max-width: 1180px;
      margin: 0 auto;
    }

    .workflow-intro {
      border: 1px solid #dfd5b9;
      background: #fffaf0;
      border-radius: var(--radius);
      padding: 14px 16px;
      color: #65583b;
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    .workflow-intro strong {
      color: var(--dark);
    }

    .workflow-form {
      display: grid;
      gap: 16px;
    }

    .workflow-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .workflow-card-header {
      padding: 16px 18px 13px;
      border-bottom: 1px solid #eee8db;
    }

    .workflow-card-header h3 {
      margin: 0;
      color: var(--dark);
      font-size: 15px;
    }

    .workflow-card-header p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.5;
    }

    .workflow-card-body {
      padding: 18px;
    }

    .workflow-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }

    .workflow-grid.three {
      grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .workflow-field {
      display: grid;
      gap: 7px;
      align-content: start;
    }

    .workflow-field.span-2 {
      grid-column: 1 / -1;
    }

    .workflow-field label {
      color: var(--dark);
      font-size: 11px;
      font-weight: 900;
    }

    .workflow-field .help {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
      margin-top: -2px;
    }

    .workflow-field input,
    .workflow-field select,
    .workflow-field textarea {
      width: 100%;
      min-width: 0;
      border: 1px solid #d8d4ca;
      background: white;
      border-radius: 8px;
      padding: 11px 12px;
      color: var(--text);
      font: inherit;
      font-size: 12px;
      outline: none;
    }

    .workflow-field textarea {
      min-height: 105px;
      resize: vertical;
      line-height: 1.5;
    }

    .workflow-field input:focus,
    .workflow-field select:focus,
    .workflow-field textarea:focus {
      border-color: #bea55f;
      box-shadow: 0 0 0 3px rgba(216,187,115,.14);
    }

    .workflow-choice-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .workflow-choice {
      position: relative;
    }

    .workflow-choice input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .workflow-choice label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 14px;
      border: 1px solid #d9d5cb;
      border-radius: 999px;
      background: white;
      color: #5d6267;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      transition: .15s ease;
    }

    .workflow-choice input:checked + label {
      background: var(--dark);
      color: white;
      border-color: var(--dark);
    }

    .workflow-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 13px;
      border: 1px solid #e1ddd4;
      border-radius: 8px;
      background: #fcfbf8;
    }

    .workflow-check input {
      margin-top: 2px;
      width: 16px;
      height: 16px;
      accent-color: var(--dark);
      flex: 0 0 16px;
    }

    .workflow-check label {
      font-size: 11px;
      line-height: 1.5;
      color: #565b60;
      cursor: pointer;
    }


    .estimate-card { border-color:#d9c28d; box-shadow:0 10px 28px rgba(17,40,60,.04); }
    .estimate-card .workflow-card-header { background:linear-gradient(135deg,#11283c 0%,#18364d 100%); color:#fff; border-bottom:0; }
    .estimate-card .workflow-card-header h3 { color:#fff; }
    .estimate-card .workflow-card-header p { color:rgba(255,255,255,.72); margin:6px 0 0; }
    .estimate-mode-badge { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 9px; border-radius:999px; background:rgba(216,187,115,.16); color:#f3dfad; border:1px solid rgba(216,187,115,.32); font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
    .estimate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .estimate-summary { margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
    .estimate-summary-box { border:1px solid #e6dcc5; border-radius:10px; padding:13px 14px; background:#fffdf8; }
    .estimate-summary-box .label { color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
    .estimate-summary-box .value { margin-top:5px; color:var(--dark); font-size:20px; font-weight:900; }
    .estimate-summary-box.primary { background:var(--dark); border-color:var(--dark); }
    .estimate-summary-box.primary .label { color:#dfcfaa; }
    .estimate-summary-box.primary .value { color:#fff; }
    .estimate-help { margin-top:12px; padding:11px 13px; border-radius:9px; background:#faf7ef; color:#73684e; font-size:10px; line-height:1.55; border:1px solid #ece1c7; }
    .private-doc-list { display:grid; gap:9px; }
    .private-doc-row { border:1px solid #e8e2d5; border-radius:9px; padding:11px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; }
    .private-doc-copy { min-width:0; }
    .private-doc-copy strong { display:block; color:var(--dark); font-size:11px; overflow-wrap:anywhere; }
    .private-doc-copy span { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
    @media(max-width:900px){ .estimate-grid,.estimate-summary{grid-template-columns:1fr 1fr;} }
    @media(max-width:620px){ .estimate-grid,.estimate-summary{grid-template-columns:1fr;} }

    .workflow-submit-bar {
      position: sticky;
      bottom: 12px;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border: 1px solid #ded7c4;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(8px);
      border-radius: 11px;
      padding: 12px 14px;
      box-shadow: 0 12px 30px rgba(17,40,60,.09);
    }

    .workflow-submit-note {
      color: var(--muted);
      font-size: 10px;
      line-height: 1.4;
    }

    .workflow-submit-bar .primary-btn {
      min-width: 205px;
      min-height: 42px;
    }

    .workflow-success {
      max-width: 760px;
      margin: 45px auto;
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 34px;
      text-align: center;
    }

    .workflow-success-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #edf6ef;
      color: #2d6d45;
      font-size: 24px;
      margin: 0 auto 15px;
      font-weight: 900;
    }

    .workflow-success h2 {
      margin: 0;
      color: var(--dark);
      font-size: 25px;
    }

    .workflow-success p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
      margin: 9px auto 0;
      max-width: 590px;
    }

    .workflow-success-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .workflow-warning {
      margin: 16px auto 0;
      max-width: 580px;
      border: 1px solid #e7c99c;
      background: #fff7e8;
      color: #76501f;
      border-radius: 8px;
      padding: 11px 12px;
      text-align: left;
      font-size: 11px;
      line-height: 1.5;
    }

    .settings-stack {
      display: grid;
      gap: 16px;
      max-width: 920px;
    }

    .settings-role-row {
      display: grid;
      grid-template-columns: 1.15fr 1fr 1.35fr;
      gap: 12px;
      align-items: end;
    }

    .settings-summary {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.5;
      margin-top: 8px;
    }

    .settings-admin-note {
      border: 1px solid #dfd5b9;
      background: #fffaf0;
      border-radius: 8px;
      padding: 12px 13px;
      color: #65583b;
      font-size: 11px;
      line-height: 1.5;
    }

    @media(max-width: 980px) {
      .forms-grid {
        grid-template-columns: 1fr 1fr;
      }

      .workflow-grid.three {
        grid-template-columns: 1fr 1fr;
      }

      .settings-role-row {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width: 700px) {
      .forms-grid,
      .workflow-grid,
      .workflow-grid.three {
        grid-template-columns: 1fr;
      }

      .workflow-field.span-2 {
        grid-column: auto;
      }

      .workflow-submit-bar {
        position: static;
        flex-direction: column;
        align-items: stretch;
      }

      .workflow-submit-bar .primary-btn {
        width: 100%;
      }
    }


    /* MOBILE SIDEBAR / HAMBURGER */
    .mobile-menu-button {
      display: none;
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 1200;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(17,40,60,.12);
      border-radius: 10px;
      background: rgba(255,255,255,.96);
      color: var(--dark);
      box-shadow: 0 6px 18px rgba(17,40,60,.08);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(10px);
    }

    .mobile-menu-button:active {
      transform: scale(.97);
    }

    .mobile-menu-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1090;
      background: rgba(11,24,36,.38);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }

    body.mobile-menu-open .mobile-menu-overlay {
      opacity: 1;
      pointer-events: auto;
    }

    @media (max-width: 820px) {
      body {
        overflow-x: hidden;
      }

      .mobile-menu-button,
      .mobile-menu-overlay {
        display: flex;
      }

      .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1100;
        width: min(82vw, 300px) !important;
        height: 100dvh;
        transform: translate3d(-104%,0,0);
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        box-shadow: 18px 0 42px rgba(5,17,27,.22);
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      body.mobile-menu-open .sidebar {
        transform: translate3d(0,0,0);
      }

      .main {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0;
      }

      .topbar {
        padding-left: 56px !important;
      }

      .view {
        min-width: 0;
      }

      .client-table,
      .lead-table,
      .transaction-table,
      .dashboard-table {
        min-width: 760px;
      }

      .table-wrap,
      .lead-table-wrap,
      .dashboard-scroll-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    @media (max-width: 560px) {
      .mobile-menu-button {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
      }

      .topbar {
        padding-left: 52px !important;
      }

      .topbar h1 {
        font-size: 24px;
      }

      .topbar p {
        font-size: 11px;
      }

      .filter-bar {
        grid-template-columns: 1fr !important;
      }

      .profile-header,
      .transaction-profile-header {
        align-items: flex-start;
      }

      .workflow-card-body,
      .profile-card-body,
      .dashboard-panel-header {
        padding-left: 14px;
        padding-right: 14px;
      }
    }


    /* OPEN HOUSE FORM */
    .workflow-upload {
      border: 1.5px dashed #d6d0c2;
      border-radius: 10px;
      background: #fcfbf8;
      padding: 18px;
      text-align: center;
      cursor: pointer;
      transition: border-color .16s ease, background-color .16s ease;
    }

    .workflow-upload:hover {
      border-color: #bea55f;
      background: #fffaf0;
    }

    .workflow-upload input {
      display: none;
    }

    .workflow-upload-title {
      color: var(--dark);
      font-size: 12px;
      font-weight: 900;
    }

    .workflow-upload-sub {
      margin-top: 5px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
    }

    .workflow-file-list {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .workflow-file-pill {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      border: 1px solid #e6e0d4;
      border-radius: 8px;
      background: white;
      padding: 8px 10px;
      font-size: 10px;
      color: #555b60;
    }

    .workflow-file-pill strong {
      color: var(--dark);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .workflow-route-note {
      border-left: 3px solid var(--gold);
      padding-left: 11px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }


    /* FORM SUBMISSION HISTORY */
    .submission-history-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .submission-history-stat {
      border: 1px solid var(--line);
      background: white;
      border-radius: 10px;
      padding: 14px 16px;
    }

    .submission-history-stat span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .submission-history-stat strong {
      display: block;
      color: var(--dark);
      font-family: inherit;
      font-size: 28px;
      font-weight: 400;
      margin-top: 4px;
    }

    .submission-history-table td {
      vertical-align: middle;
    }

    .submission-form-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .03em;
      text-transform: uppercase;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .submission-form-chip.under_contract {
      background: #eaf4ef;
      border-color: #c8ded3;
      color: #236247;
    }

    .submission-form-chip.open_house {
      background: #fff3df;
      border-color: #ead5ad;
      color: #80551e;
    }

    .submission-email-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 800;
    }

    .submission-email-status.sent {
      color: #2e6c48;
    }

    .submission-email-status.issue {
      color: #9a5b29;
    }

    .submission-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px 18px;
    }

    .submission-detail-item {
      min-width: 0;
    }

    .submission-detail-item.span-2 {
      grid-column: 1 / -1;
    }

    .submission-detail-label {
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .submission-detail-value {
      color: var(--text);
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .submission-detail-section {
      border-top: 1px solid #eee8db;
      padding-top: 16px;
      margin-top: 16px;
    }

    .submission-detail-section h3 {
      margin: 0 0 12px;
      color: var(--dark);
      font-size: 13px;
    }

    .submission-detail-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    @media(max-width:700px) {
      .submission-history-summary {
        grid-template-columns: 1fr;
      }

      .submission-detail-grid {
        grid-template-columns: 1fr;
      }

      .submission-detail-item.span-2 {
        grid-column: auto;
      }
    }


    /* EXPANDED SETTINGS */
    .settings-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--line);
      margin-bottom: 18px;
      padding-bottom: 10px;
    }

    .settings-tab {
      border: 0;
      background: transparent;
      color: var(--muted);
      border-radius: 8px;
      padding: 9px 13px;
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }

    .settings-tab:hover {
      background: #f8f5ed;
      color: var(--dark);
    }

    .settings-tab.active {
      background: var(--dark);
      color: white;
    }

    .settings-panel {
      display: none;
    }

    .settings-panel.active {
      display: block;
      animation: settingsPanelIn .18s ease both;
    }

    @keyframes settingsPanelIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .settings-section {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .settings-section-header {
      padding: 16px 18px 13px;
      border-bottom: 1px solid #eee8db;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    .settings-section-header h3 {
      margin: 0;
      color: var(--dark);
      font-size: 14px;
    }

    .settings-section-header p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
    }

    .settings-section-body {
      padding: 18px;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 14px;
    }

    .settings-grid.three {
      grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .settings-toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 13px 0;
      border-bottom: 1px solid #f0ece3;
    }

    .settings-toggle-row:last-child {
      border-bottom: 0;
    }

    .settings-toggle-copy strong {
      display: block;
      color: var(--dark);
      font-size: 11px;
    }

    .settings-toggle-copy span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
    }

    .settings-switch {
      position: relative;
      flex: 0 0 auto;
      width: 42px;
      height: 24px;
    }

    .settings-switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .settings-switch span {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #d9d9d5;
      cursor: pointer;
      transition: .18s ease;
    }

    .settings-switch span::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 4px rgba(0,0,0,.18);
      transition: .18s ease;
    }

    .settings-switch input:checked + span {
      background: #315e49;
    }

    .settings-switch input:checked + span::after {
      transform: translateX(18px);
    }

    .settings-table {
      width: 100%;
      border-collapse: collapse;
    }

    .settings-table th {
      text-align: left;
      font-size: 9px;
      color: var(--muted);
      padding: 8px 9px;
      border-bottom: 1px solid #eee8db;
    }

    .settings-table td {
      padding: 9px;
      border-bottom: 1px solid #f1ede4;
      font-size: 10px;
      vertical-align: middle;
    }

    .settings-table input,
    .settings-table select {
      width: 100%;
      border: 1px solid #dad6cc;
      border-radius: 7px;
      padding: 8px 9px;
      font: inherit;
      color: var(--text);
      background: white;
    }

    .settings-table .tiny-input {
      width: 72px;
    }

    .settings-table-actions {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }

    .settings-small-btn {
      border: 1px solid #d9d4c8;
      background: white;
      color: var(--dark);
      border-radius: 7px;
      padding: 7px 9px;
      font-size: 9px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    .settings-small-btn:hover {
      background: #faf7ee;
    }

    .settings-small-btn.danger {
      color: #9b3c3c;
      border-color: #e6cccc;
    }

    .settings-add-row {
      display: flex;
      gap: 8px;
      align-items: end;
      margin-top: 13px;
      padding-top: 13px;
      border-top: 1px solid #eee8db;
    }

    .settings-add-row .workflow-field {
      flex: 1 1 auto;
    }

    .integration-status {
      display: grid;
      grid-template-columns: auto minmax(0,1fr);
      gap: 12px;
      align-items: center;
    }

    .integration-status-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-weight: 900;
      background: #f3f4f1;
      color: #777;
    }

    .integration-status-icon.connected {
      background: #eaf4ee;
      color: #2c6b47;
    }

    .integration-status strong {
      display: block;
      color: var(--dark);
      font-size: 12px;
    }

    .integration-status span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
    }

    .team-login-pill {
      display: inline-flex;
      padding: 4px 7px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 900;
    }

    .team-login-pill.connected {
      background: #eaf4ee;
      color: #286143;
    }

    .team-login-pill.pending {
      background: #f3f3f0;
      color: #777;
    }

    @media(max-width:800px) {
      .settings-grid,
      .settings-grid.three {
        grid-template-columns: 1fr;
      }

      .settings-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .settings-table {
        min-width: 680px;
      }

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


    /* TEAM USER MANAGEMENT */
    .team-settings-heading-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .login-action-btn {
      border: 1px solid #cfc7b3;
      background: #fffaf0;
      color: var(--dark);
      border-radius: 7px;
      padding: 7px 9px;
      font-size: 9px;
      font-weight: 900;
      cursor: pointer;
      white-space: nowrap;
    }

    .login-action-btn:hover {
      border-color: #baa35f;
      background: #fff7e4;
    }

    .login-action-btn:disabled {
      opacity: .55;
      cursor: wait;
    }

    .add-team-info {
      border: 1px solid #dfd5b9;
      background: #fffaf0;
      color: #65583b;
      border-radius: 8px;
      padding: 11px 12px;
      font-size: 10px;
      line-height: 1.5;
      margin-bottom: 14px;
    }

    .future-option {
      opacity: .58;
    }

    .future-option label {
      cursor: not-allowed !important;
    }


    /* EMAIL SIGNATURES + TEMPLATES */
    .email-template-row {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 10px;
      align-items: end;
      margin-top: 18px;
    }

    .email-signature-preview {
      margin-top: 12px;
      border-top: 1px solid #eee8db;
      padding-top: 12px;
      color: #606a70;
      font-size: 11px;
      line-height: 1.5;
      white-space: pre-wrap;
    }

    .email-signature-preview strong {
      display: block;
      color: var(--dark);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 6px;
    }

    .email-template-name {
      font-weight: 850;
      color: var(--dark);
    }

    .email-template-subject {
      color: var(--muted);
      font-size: 9px;
      margin-top: 3px;
    }

    .template-variable-help {
      border: 1px solid #e4dcc6;
      background: #fffaf0;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 10px;
      line-height: 1.5;
      color: #65583b;
    }

    .template-variable-help code {
      font-family: Consolas, monospace;
      font-size: 9px;
      background: rgba(17,40,60,.06);
      border-radius: 4px;
      padding: 2px 4px;
    }

    @media(max-width:700px) {
      .email-template-row {
        grid-template-columns: 1fr;
      }
    }


    /* IMAGE EMAIL SIGNATURES */
    .signature-image-uploader {
      border: 1px dashed #d7cbaa;
      background: #fffdf7;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .signature-image-preview-wrap {
      margin-top: 12px;
      border: 1px solid #ece6d8;
      background: white;
      border-radius: 8px;
      padding: 12px;
      min-height: 72px;
    }

    .signature-image-preview-wrap img {
      display: block;
      max-width: 520px;
      width: auto;
      max-height: 180px;
      height: auto;
      object-fit: contain;
    }

    .signature-image-preview-wrap.empty {
      color: var(--muted);
      font-size: 10px;
      display: flex;
      align-items: center;
    }

    .email-signature-preview img {
      display: block;
      max-width: 520px;
      width: auto;
      max-height: 180px;
      height: auto;
      margin-top: 8px;
    }

    .signature-image-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }


    /* TEAM PROFILE AVATARS */
    .team-avatar {
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 50%;
      overflow: hidden;
      background: #e8edf0;
      color: #314656;
      border: 1px solid #d6dee2;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: -.02em;
      vertical-align: middle;
      user-select: none;
    }

    .team-avatar img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team-avatar.avatar-sm {
      width: 32px;
      height: 32px;
      font-size: 10px;
    }

    .team-avatar.avatar-md {
      width: 40px;
      height: 40px;
      font-size: 12px;
    }

    .team-avatar.avatar-lg {
      width: 58px;
      height: 58px;
      font-size: 16px;
    }

    .agent-avatar-cell {
      width: 74px;
      text-align: center;
    }

    .agent-avatar-cell .team-avatar {
      cursor: default;
    }

    .team-member-name-with-avatar {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 170px;
    }

    .profile-photo-uploader {
      border: 1px dashed #d7cbaa;
      background: #fffdf7;
      border-radius: 10px;
      padding: 14px;
    }

    .profile-photo-preview {
      width: 128px;
      height: 128px;
      margin: 14px auto 4px;
      border-radius: 50%;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #e8edf0;
      border: 3px solid white;
      box-shadow: 0 0 0 1px #d6dee2;
      color: #314656;
      font-size: 26px;
      font-weight: 900;
    }

    .profile-photo-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .profile-photo-actions {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }


    /* PROFILE PHOTO CROPPER */
    .profile-cropper {
      display: none;
      margin-top: 14px;
    }

    .profile-cropper.active {
      display: block;
    }

    .profile-crop-stage {
      width: 320px;
      height: 320px;
      max-width: 100%;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      background: #dfe4e7;
      box-shadow: inset 0 0 0 1px #cfd7db;
      position: relative;
    }

    #profilePhotoCropCanvas {
      display: block;
      width: 100%;
      height: 100%;
      cursor: grab;
      touch-action: none;
    }

    #profilePhotoCropCanvas.dragging {
      cursor: grabbing;
    }

    .profile-crop-help {
      text-align: center;
      color: var(--muted);
      font-size: 10px;
      margin-top: 9px;
    }

    .profile-crop-zoom {
      max-width: 340px;
      margin: 14px auto 0;
    }

    .profile-crop-zoom label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--dark);
      font-size: 10px;
      font-weight: 850;
      margin-bottom: 6px;
    }

    .profile-crop-zoom input[type="range"] {
      width: 100%;
      accent-color: var(--dark);
    }

    .profile-current-photo-label {
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
      text-align: center;
      margin-top: 12px;
    }

    @media(max-width:520px) {
      .profile-crop-stage {
        width: min(320px, calc(100vw - 70px));
        height: min(320px, calc(100vw - 70px));
      }
    }

    /* CLIENT DATABASE */
    .client-toolbar {
      background: white;
      border: 1px solid var(--line);
      padding: 16px;
      border-radius: var(--radius);
      margin-bottom: 18px;
    }

    .toolbar-row {
      display: grid;
      grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr));
      gap: 10px;
      align-items: center;
    }

    .toolbar-row .search-wrap {
      position: relative;
    }

    .toolbar-row .search-wrap input {
      padding-left: 36px;
    }

    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #aaa;
      pointer-events: none;
    }

    .toolbar-meta {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
    }

    .group {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 14px;
    }

    .group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 15px 18px;
      background: linear-gradient(180deg, #fbf8f2 0%, #f9f4e8 100%);
      border-bottom: 1px solid var(--line);
    }

    .group-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      font-size: 14px;
    }

    .level-chip {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--dark);
      color: white;
      font-weight: 800;
      font-size: 12px;
    }

    .group-count {
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
    }

    .table-wrap {
      overflow-x: auto;
    }

    .client-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1020px;
    }

    .client-table th {
      text-align: left;
      padding: 10px 14px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      border-bottom: 1px solid var(--line);
      background: white;
      white-space: nowrap;
    }

    .client-table td {
      padding: 13px 14px;
      border-bottom: 1px solid #f0f0ec;
      font-size: 13px;
      vertical-align: middle;
    }

    .client-table tr:last-child td { border-bottom: 0; }

    .client-table tbody tr {
      cursor: pointer;
      transition: background .12s ease;
    }

    .client-table tbody tr:hover {
      background: var(--panel-2);
    }

    .client-name {
      font-weight: 800;
      color: var(--dark);
    }

    .client-search-name-wrap {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .client-level-mini-badge {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      color: white;
      font-size: 10px;
      line-height: 1;
      font-weight: 900;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    }

    .client-level-mini-badge.level-a { background: #16a34a; }
    .client-level-mini-badge.level-b { background: #eab308; }
    .client-level-mini-badge.level-c { background: #f97316; }
    .client-level-mini-badge.level-d { background: #778aa0; }
    .client-level-mini-badge.level-unassigned { background: #a3a3a3; }

    .client-search-results-group {
      margin-bottom: 14px;
    }

    .muted { color: var(--muted); }

    .status-pill {
      display: inline-flex;
      align-items: center;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--gold-pale);
      color: var(--dark);
      border: 1px solid var(--gold-soft);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }


    /* CLIENT RELATIONSHIP + STATUS COLORS */
    .group-header.group-level-a {
      background: linear-gradient(180deg, #edf7f0 0%, #e5f2e9 100%);
      border-bottom-color: #c8dfd0;
    }

    .group-header.group-level-b {
      background: linear-gradient(180deg, #fff9ea 0%, #fcf2d8 100%);
      border-bottom-color: #ead7a2;
    }

    .group-header.group-level-c {
      background: linear-gradient(180deg, #fff4e9 0%, #fbe9d7 100%);
      border-bottom-color: #e8c7a4;
    }

    .group-header.group-level-d {
      background: linear-gradient(180deg, #f5f6f3 0%, #eceee9 100%);
      border-bottom-color: #d7dad3;
    }

    .group-header.group-level-unassigned {
      background: linear-gradient(180deg, #fbfaf7 0%, #f4f2ec 100%);
    }

    .group-level-a .level-chip {
      background: #2f7a51;
      color: white;
    }

    .group-level-b .level-chip {
      background: #c29b43;
      color: white;
    }

    .group-level-c .level-chip {
      background: #c9792b;
      color: white;
    }

    .group-level-d .level-chip {
      background: #777c76;
      color: white;
    }

    .group-level-a .group-title { color: #285f42; }
    .group-level-b .group-title { color: #72581f; }
    .group-level-c .group-title { color: #7a481f; }
    .group-level-d .group-title { color: #555a55; }

    .status-pill.status-connected {
      color: #285f84;
      background: #eaf4fb;
      border-color: #c6ddea;
    }

    .status-pill.status-potential {
      color: #9b4141;
      background: #fff0ef;
      border-color: #e7c4c2;
    }

    .status-pill.status-coming-soon,
    .status-pill.status-coming_soon {
      color: #86541e;
      background: #fff1df;
      border-color: #ecd1aa;
    }

    .status-pill.status-active {
      color: #2c6846;
      background: #eaf5ee;
      border-color: #c5dece;
    }

    .status-pill.status-pending {
      color: #246178;
      background: #e8f4f8;
      border-color: #c1dce5;
    }

    .status-pill.status-previous-client,
    .status-pill.status-previous_client {
      color: #66517c;
      background: #f3eef8;
      border-color: #d9cee5;
    }

    .status-pill.status-closed {
      color: #4f6358;
      background: #edf2ef;
      border-color: #d0dad4;
    }

    .status-pill.status-cancelled,
    .status-pill.status-cancelled-lost,
    .status-pill.status-lost {
      color: #77716b;
      background: #f2f0ed;
      border-color: #dbd6d0;
    }

    .status-pill.status-default {
      color: var(--dark);
      background: var(--gold-pale);
      border-color: var(--gold-soft);
    }

    .empty-group {
      padding: 28px 18px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .empty-state {
      background: white;
      border: 1px dashed #ccc;
      border-radius: var(--radius);
      padding: 44px 28px;
      text-align: center;
    }

    .empty-state h3 {
      margin: 0 0 8px;
      font-size: 20px;
    }

    .empty-state p {
      margin: 0 auto;
      max-width: 600px;
      color: var(--muted);
      line-height: 1.6;
    }


    .transaction-toolbar {
      background: white;
      border: 1px solid var(--line);
      padding: 16px;
      border-radius: var(--radius);
      margin-bottom: 18px;
    }

    .transaction-toolbar-row {
      display: grid;
      grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr)) auto;
      gap: 10px;
      align-items: center;
    }

    .transaction-type-pill {
      display: inline-flex;
      align-items: center;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
      text-transform: capitalize;
      background: var(--panel-2);
      border: 1px solid var(--line);
      white-space: nowrap;
    }


    /* TRANSACTION TABLE VISUAL HIERARCHY */
    .transaction-property-primary {
      font-weight: 850;
      color: var(--dark);
      line-height: 1.35;
    }

    .transaction-client-secondary {
      color: #68747d;
      font-weight: 500;
      line-height: 1.35;
    }

    .transaction-table th[data-transaction-sort="name"] {
      min-width: 320px;
    }

    .transaction-table th[data-transaction-sort="client"] {
      min-width: 220px;
    }

    .transaction-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1050px;
    }

    .transaction-table th {
      text-align: left;
      padding: 10px 14px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }

    .transaction-table td {
      padding: 13px 14px;
      border-bottom: 1px solid #f0f0ec;
      font-size: 13px;
      vertical-align: middle;
    }

    .transaction-table tbody tr {
      cursor: pointer;
    }

    .transaction-table tbody tr:hover {
      background: var(--panel-2);
    }

    .profile-transaction-list {
      display: grid;
      gap: 8px;
    }

    .profile-transaction-row {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 14px;
      align-items: center;
      cursor: pointer;
    }

    .profile-transaction-row:hover {
      background: var(--panel-2);
    }

    .profile-transaction-title {
      font-weight: 800;
      font-size: 13px;
    }

    .profile-transaction-meta {
      margin-top: 5px;
      color: var(--muted);
      font-size: 11px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
    }

    @media (max-width: 1100px) {
      .transaction-toolbar-row {
        grid-template-columns: 1fr 1fr;
      }
    }


    .form-section-title {
      grid-column: 1 / -1;
      margin: 7px 0 0;
      padding-top: 16px;
      border-top: 1px solid var(--line);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .admin-financial-section {
      grid-column: 1 / -1;
      border: 1px solid #d8bb73;
      background: #faf3df;
      border-radius: 9px;
      padding: 16px;
      margin-top: 8px;
    }

    .admin-financial-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      font-weight: 900;
      font-size: 13px;
    }

    .admin-only-badge {
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 5px 7px;
      border-radius: 999px;
      background: #11283c;
      color: white;
    }

    .admin-financial-grid {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 14px;
    }

    .linked-client-select {
      min-height: 108px;
    }

    .checkbox-field {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 44px;
    }

    .checkbox-field input {
      width: auto;
      margin: 0;
    }

    .checkbox-field label {
      margin: 0;
    }

    .unlinked-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 7px;
      font-size: 10px;
      font-weight: 800;
      background: #fff4e5;
      color: #865b17;
      border: 1px solid #ecd09e;
    }

    @media(max-width:650px) {
      .admin-financial-grid { grid-template-columns: 1fr; }
    }


    .transaction-detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
      gap: 18px;
      align-items: start;
    }

    .transaction-detail-stack {
      display: grid;
      gap: 18px;
    }

    .transaction-summary-grid {
      display: grid;
      grid-template-columns: 160px minmax(0,1fr);
      gap: 0;
      font-size: 13px;
    }

    .transaction-summary-grid .key,
    .transaction-summary-grid .value {
      padding: 11px 0;
      border-bottom: 1px solid #f0eee8;
    }

    .transaction-summary-grid .key {
      color: var(--muted);
      font-weight: 800;
      padding-right: 18px;
    }

    .transaction-summary-grid .value {
      color: var(--text);
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .transaction-summary-grid .key:last-of-type,
    .transaction-summary-grid .value:last-of-type {
      border-bottom: 0;
    }

    .transaction-client-links {
      display: grid;
      gap: 9px;
    }

    .transaction-client-link {
      border: 1px solid var(--line);
      background: white;
      border-radius: 8px;
      padding: 11px 12px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      cursor: pointer;
      text-align: left;
      color: var(--text);
    }

    .transaction-client-link:hover {
      background: var(--panel-2);
    }

    .transaction-client-link strong {
      font-size: 13px;
    }

    .transaction-client-link span {
      color: var(--muted);
      font-size: 11px;
    }

    .transaction-financial-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 10px;
    }

    .transaction-money-box {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 14px;
      background: white;
    }

    .transaction-money-box .label {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      font-weight: 800;
    }

    .transaction-money-box .amount {
      margin-top: 6px;
      font-family: inherit;
      font-size: 23px;
      color: var(--dark);
    }

    .transaction-private-card {
      border-color: var(--gold);
      background: var(--gold-pale);
    }

    .transaction-private-card .profile-card-header {
      background: transparent;
      border-bottom-color: rgba(216,187,115,.55);
    }

    .transaction-note-block {
      margin-bottom: 18px;
    }

    .transaction-note-block:last-child {
      margin-bottom: 0;
    }

    .transaction-note-label {
      font-size: 10px;
      color: var(--muted);
      text-transform: uppercase;
      font-weight: 900;
      letter-spacing: .08em;
      margin-bottom: 7px;
    }

    .transaction-note-text {
      white-space: pre-wrap;
      line-height: 1.6;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .transaction-header-type {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 800;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 5px 8px;
      background: white;
    }

    @media(max-width:1050px) {
      .transaction-detail-layout {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:700px) {
      .transaction-financial-grid {
        grid-template-columns: 1fr 1fr;
      }

      .transaction-summary-grid {
        grid-template-columns: 1fr;
      }

      .transaction-summary-grid .key {
        border-bottom: 0;
        padding-bottom: 3px;
      }

      .transaction-summary-grid .value {
        padding-top: 0;
      }
    }


    .transaction-task-progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 11px;
      color: var(--muted);
    }

    .transaction-task-progress strong {
      color: var(--dark);
      font-size: 12px;
    }

    .transaction-task-list {
      display: grid;
      gap: 8px;
    }

    .transaction-task-row {
      display: grid;
      grid-template-columns: auto minmax(0,1fr) auto;
      gap: 10px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px;
      background: white;
    }

    .transaction-task-row.completed {
      background: #fafaf7;
    }

    .transaction-task-check {
      margin-top: 2px;
      width: 17px;
      height: 17px;
      accent-color: var(--dark);
      cursor: pointer;
    }

    .transaction-task-main {
      min-width: 0;
    }

    .transaction-task-title {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .transaction-task-row.completed .transaction-task-title {
      text-decoration: line-through;
      color: var(--muted);
    }

    .transaction-task-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;
      margin-top: 5px;
      color: var(--muted);
      font-size: 10px;
    }

    .transaction-task-notes {
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .transaction-task-due.overdue {
      color: var(--danger);
      font-weight: 900;
    }

    .task-edit-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      padding: 2px 0 2px 6px;
      cursor: pointer;
    }

    .task-edit-btn:hover {
      color: var(--dark);
    }

    .transaction-activity-list {
      max-height: 520px;
    }

    .transaction-activity-card .activity-composer {
      padding: 13px;
    }

    .transaction-activity-card .activity-composer textarea {
      min-height: 72px;
    }

    .danger-btn {
      border: 1px solid #e3bcbc;
      background: white;
      color: var(--danger);
      border-radius: 6px;
      padding: 10px 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .danger-btn:hover {
      background: #fff7f7;
    }

    .modal-footer.split {
      justify-content: space-between;
    }

    .modal-footer-right {
      display: flex;
      gap: 10px;
      margin-left: auto;
    }


    th.sortable-th {
      cursor: pointer;
      user-select: none;
      transition: background .15s ease, color .15s ease;
    }

    th.sortable-th:hover {
      background: #faf7ee;
      color: var(--dark);
    }

    .sort-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .sort-indicator {
      display: inline-block;
      min-width: 10px;
      color: #b8a77d;
      font-size: 10px;
    }

    th.sortable-th.active-sort .sort-indicator {
      color: var(--dark);
    }

    /* CLIENT PROFILE */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: transparent;
      padding: 0;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 13px;
    }

    .profile-header {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      margin-bottom: 18px;
    }

    .profile-header-top {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: flex-start;
    }

    .profile-header h1 {
      font-family: inherit;
      font-weight: 400;
      font-size: 36px;
      margin: 0;
    }

    .profile-meta {
      margin-top: 9px;
      color: var(--muted);
      font-size: 13px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 14px;
    }

    .profile-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
      gap: 18px;
      align-items: start;
    }

    .profile-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      margin-bottom: 18px;
      overflow: hidden;
    }

    .profile-card-header {
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .05em;
      background: var(--panel-2);
    }

    .profile-card-body { padding: 18px; }

    .info-grid {
      display: grid;
      grid-template-columns: 180px 1fr;
      row-gap: 13px;
      column-gap: 20px;
      font-size: 13px;
    }

    .info-grid .key {
      color: var(--muted);
      font-weight: 700;
    }

    .person-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      margin-bottom: 10px;
    }

    .person-card:last-child { margin-bottom: 0; }

    .person-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .person-name { font-weight: 800; }
    .person-role {
      color: var(--muted);
      text-transform: capitalize;
      font-size: 11px;
    }

    .person-details {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px 14px;
      color: var(--muted);
      font-size: 12px;
    }

    .activity-composer {
      padding: 15px;
      border-bottom: 1px solid var(--line);
    }

    .activity-composer textarea {
      min-height: 85px;
      resize: vertical;
    }

    .composer-actions {
      margin-top: 9px;
      display: flex;
      justify-content: flex-end;
    }

    .activity-list {
      max-height: calc(100vh - 360px);
      overflow-y: auto;
    }

    .activity-item {
      padding: 16px 18px;
      border-bottom: 1px solid #efefeb;
    }

    .activity-item:last-child { border-bottom: 0; }

    .activity-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }

    .activity-author {
      font-size: 12px;
      font-weight: 800;
    }

    .activity-date {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    .activity-type {
      color: var(--muted);
      text-transform: capitalize;
      font-size: 11px;
      margin-bottom: 5px;
    }

    .activity-body {
      white-space: pre-wrap;
      line-height: 1.55;
      font-size: 13px;
    }




    .file-upload-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .file-upload-note {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .file-list {
      display: grid;
      gap: 8px;
    }

    .file-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      background: white;
    }

    .file-main {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .file-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      background: var(--panel-2);
      border: 1px solid var(--line);
      font-size: 16px;
    }

    .file-copy {
      min-width: 0;
    }

    .file-name {
      font-size: 13px;
      font-weight: 800;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .file-meta {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    .file-actions {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .file-action-btn {
      border: 1px solid var(--gold-soft);
      background: white;
      color: var(--dark);
      padding: 7px 9px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .file-action-btn:hover { background: var(--panel-2); }

    .file-action-btn.danger {
      color: var(--danger);
    }

    .file-empty {
      color: var(--muted);
      font-size: 12px;
      padding: 5px 0;
    }

    .file-progress {
      font-size: 12px;
      min-height: 18px;
      margin-top: 8px;
    }

    .activity-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 9px;
    }

    .email-btn {
      border: 1px solid var(--gold-soft);
      background: white;
      color: var(--dark);
      padding: 10px 13px;
      border-radius: 6px;
      font-weight: 800;
    }

    .recipient-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: white;
    }

    .recipient-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border-bottom: 1px solid #eeeeea;
      cursor: pointer;
    }

    .recipient-option:last-child { border-bottom: 0; }

    .recipient-option input {
      width: auto;
      margin: 0;
    }

    .recipient-copy {
      min-width: 0;
      flex: 1;
    }

    .recipient-name {
      font-weight: 800;
      font-size: 13px;
    }

    .recipient-email {
      color: var(--muted);
      font-size: 12px;
      margin-top: 2px;
      word-break: break-all;
    }

    .email-connection {
      padding: 12px 14px;
      border: 1px solid var(--line);
      background: var(--panel-2);
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .email-connection strong { color: var(--text); }

    .email-meta-line {
      color: var(--muted);
      font-size: 11px;
      margin: 0 0 6px;
      line-height: 1.45;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .mini-btn {
      border: 1px solid var(--gold-soft);
      background: white;
      color: var(--dark);
      padding: 8px 11px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      text-transform: none;
      letter-spacing: normal;
    }

    .mini-btn:hover { background: #f7f7f3; }

    .profile-card-header.with-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .person-top-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .person-edit-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      padding: 0;
    }

    .person-edit-btn:hover { color: var(--text); }

    .contact-link {
      color: inherit;
      text-decoration: none;
    }

    .contact-link:hover { text-decoration: underline; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 22px;
    }

    .modal {
      width: min(700px, 100%);
      max-height: calc(100vh - 44px);
      overflow: auto;
      background: white;
      border-radius: 12px;
      border: 1px solid var(--line);
      box-shadow: 0 30px 90px rgba(0,0,0,.22);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 20px 22px;
      border-bottom: 1px solid var(--line);
    }

    .modal-header h2 {
      margin: 0;
      font-family: inherit;
      font-size: 28px;
      font-weight: 400;
    }

    .modal-close {
      border: 0;
      background: transparent;
      font-size: 24px;
      line-height: 1;
      color: var(--muted);
      padding: 2px 5px;
    }

    .modal-body { padding: 22px; }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 16px;
    }

    .form-grid .span-2 { grid-column: 1 / -1; }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 18px 22px;
      border-top: 1px solid var(--line);
      background: var(--panel-2);
    }

    .inline-message {
      font-size: 12px;
      min-height: 18px;
      margin-top: 10px;
    }

    .inline-message.error { color: var(--danger); }
    .inline-message.success { color: var(--success); }

    @media (max-width: 650px) {
      .form-grid { grid-template-columns: 1fr; }
      .form-grid .span-2 { grid-column: auto; }
      .profile-header-top { flex-direction: column; }
  
    .activity-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 9px;
    }

    .email-btn {
      border: 1px solid var(--gold-soft);
      background: white;
      color: var(--dark);
      padding: 10px 13px;
      border-radius: 6px;
      font-weight: 800;
    }

    .recipient-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: white;
    }

    .recipient-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border-bottom: 1px solid #eeeeea;
      cursor: pointer;
    }

    .recipient-option:last-child { border-bottom: 0; }

    .recipient-option input {
      width: auto;
      margin: 0;
    }

    .recipient-copy {
      min-width: 0;
      flex: 1;
    }

    .recipient-name {
      font-weight: 800;
      font-size: 13px;
    }

    .recipient-email {
      color: var(--muted);
      font-size: 12px;
      margin-top: 2px;
      word-break: break-all;
    }

    .email-connection {
      padding: 12px 14px;
      border: 1px solid var(--line);
      background: var(--panel-2);
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
    }

    .email-connection strong { color: var(--text); }

    .email-meta-line {
      color: var(--muted);
      font-size: 11px;
      margin: 0 0 6px;
      line-height: 1.45;
    }

    .header-actions { width: 100%; justify-content: space-between; }
    }

    @media (max-width: 1100px) {
      .toolbar-row {
        grid-template-columns: 1fr 1fr;
      }

      .profile-layout {
        grid-template-columns: 1fr;
      }

      .activity-list {
        max-height: none;
      }
    }

    @media (max-width: 850px) {
      .login-page { grid-template-columns: 1fr; }
      .brand-panel { display: none; }
      .login-panel { min-height: 100vh; padding: 22px; }
      .login-card { padding: 30px 24px; }

      .app-shell { grid-template-columns: 1fr; }
      .sidebar {
        position: static;
        height: auto;
        display: block;
        padding-bottom: 16px;
      }

      .sidebar-user {
        margin-top: 20px;
      }

      .main { padding: 22px 14px; }
      .grid { grid-template-columns: 1fr; }
      .toolbar-row { grid-template-columns: 1fr; }
      .topbar { align-items: flex-start; }
      .info-grid { grid-template-columns: 1fr; row-gap: 5px; }
      .info-grid .key { margin-top: 9px; }
      .person-details { grid-template-columns: 1fr; }
    }
  
    /* =========================================================
       MODERN / SLEEK / VIBRANT CRM REFRESH
       ========================================================= */

    :root {
      --navy-950: #0a1d2d;
      --navy-900: #102b42;
      --navy-800: #173a56;
      --navy-700: #24506f;

      --gold-500: #d8b45f;
      --gold-400: #e6c978;
      --gold-100: #fff7df;

      --canvas: #f5f7fa;
      --canvas-warm: #f8f7f3;
      --surface: rgba(255,255,255,.94);
      --surface-solid: #ffffff;
      --surface-soft: #f9fbfc;

      --text-strong: #10283c;
      --text: #31485c;
      --muted: #7f8c98;
      --line: #e6ebef;
      --line-strong: #d7dfe5;

      --shadow-sm: 0 2px 8px rgba(13, 39, 61, .055);
      --shadow-md: 0 12px 34px rgba(13, 39, 61, .09);
      --shadow-lg: 0 22px 60px rgba(13, 39, 61, .14);

      --radius-sm: 9px;
      --radius: 14px;
      --radius-lg: 20px;

      --blue: #4f83ff;
      --teal: #2aa198;
      --green: #31a66a;
      --orange: #f09a48;
      --red: #df6262;
      --purple: #8c68d7;
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--canvas);
    }

    body {
      background:
        radial-gradient(circle at 15% 0%, rgba(216,180,95,.085), transparent 30%),
        radial-gradient(circle at 95% 5%, rgba(79,131,255,.06), transparent 25%),
        linear-gradient(180deg, #f9fafb 0%, var(--canvas) 100%);
      color: var(--text);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
      letter-spacing: -.005em;
    }

    /* App shell */
    .app-shell,
    #appShell {
      min-height: 100vh;
      background: transparent;
    }

    .sidebar {
      background:
        linear-gradient(180deg, #0d2538 0%, #102e45 58%, #0b2234 100%) !important;
      border-right: 1px solid rgba(255,255,255,.05) !important;
      box-shadow: 12px 0 36px rgba(9,28,43,.08);
    }

    .sidebar-logo,
    .sidebar-brand {
      border-bottom-color: rgba(255,255,255,.08) !important;
    }

    .sidebar .eyebrow,
    .nav-section-label,
    .sidebar-section-title {
      color: rgba(230,201,120,.68) !important;
      letter-spacing: .13em !important;
      font-size: 9px !important;
      font-weight: 800 !important;
    }

    .sidebar nav button,
    .sidebar .nav-btn,
    .nav-item {
      border-radius: 11px !important;
      margin: 3px 10px !important;
      width: calc(100% - 20px) !important;
      padding: 11px 13px !important;
      color: rgba(255,255,255,.78) !important;
      font-weight: 650 !important;
      transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease,
        box-shadow .16s ease !important;
    }

    .sidebar nav button:hover,
    .sidebar .nav-btn:hover,
    .nav-item:hover {
      background: rgba(255,255,255,.075) !important;
      color: white !important;
      transform: translateX(2px);
    }

    .sidebar nav button.active,
    .sidebar .nav-btn.active,
    .nav-item.active {
      background:
        linear-gradient(90deg, rgba(216,180,95,.21), rgba(255,255,255,.08)) !important;
      color: white !important;
      box-shadow:
        inset 3px 0 0 var(--gold-400),
        0 8px 18px rgba(0,0,0,.10) !important;
    }

    .sidebar-user,
    .sidebar-footer {
      border-top-color: rgba(255,255,255,.08) !important;
    }

    /* Main workspace */
    .workspace,
    main {
      background: transparent !important;
    }

    .view {
      padding-top: 28px !important;
      animation: modernViewIn .18s ease both;
    }

    @keyframes modernViewIn {
      from { opacity: .75; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }

    .topbar {
      align-items: flex-start !important;
      margin-bottom: 24px !important;
      gap: 18px;
    }

    .topbar h1,
    .view h1,
    .profile-title,
    .transaction-profile-title {
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      font-weight: 760 !important;
      letter-spacing: -.038em !important;
      color: var(--text-strong) !important;
      line-height: 1.02 !important;
    }

    .topbar h1,
    .view h1 {
      font-size: clamp(30px, 3vw, 44px) !important;
    }

    .topbar p,
    .page-subtitle {
      color: #82909c !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      margin-top: 8px !important;
    }

    .badge {
      border-radius: 999px !important;
      padding: 8px 12px !important;
      background: linear-gradient(180deg, #fff9ea, #fff4d6) !important;
      border: 1px solid #efdba8 !important;
      color: #6c5725 !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      box-shadow: var(--shadow-sm);
    }

    /* Cards */
    .card,
    .dashboard-card,
    .settings-section,
    .form-launch-card,
    .table-wrap,
    .profile-panel,
    .transaction-profile-panel,
    .activity-panel,
    .modal,
    .filter-bar,
    .submission-history-stat {
      background: var(--surface) !important;
      border: 1px solid rgba(216,224,230,.88) !important;
      border-radius: var(--radius-lg) !important;
      box-shadow: var(--shadow-sm) !important;
      backdrop-filter: blur(10px);
    }

    .card:hover,
    .dashboard-card:hover,
    .form-launch-card:hover {
      box-shadow: var(--shadow-md) !important;
    }

    /* Buttons */
    .primary-btn,
    button.primary-btn,
    .topbar .primary-btn {
      background:
        linear-gradient(180deg, #153a56 0%, #102e45 100%) !important;
      border: 1px solid #0e2b40 !important;
      color: white !important;
      border-radius: 11px !important;
      padding: 11px 16px !important;
      font-weight: 760 !important;
      letter-spacing: -.01em !important;
      box-shadow:
        0 8px 18px rgba(16,46,69,.16),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
      transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease !important;
    }

    .primary-btn:hover,
    button.primary-btn:hover {
      transform: translateY(-1px);
      box-shadow:
        0 12px 26px rgba(16,46,69,.21),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
      filter: brightness(1.04);
    }

    .secondary-btn,
    .settings-small-btn,
    .login-action-btn {
      background: white !important;
      color: var(--text-strong) !important;
      border: 1px solid var(--line-strong) !important;
      border-radius: 10px !important;
      font-weight: 740 !important;
      box-shadow: 0 2px 5px rgba(13,39,61,.035);
    }

    .secondary-btn:hover,
    .settings-small-btn:hover,
    .login-action-btn:hover {
      background: #fbfcfd !important;
      border-color: #c7d0d7 !important;
      box-shadow: var(--shadow-sm);
    }

    /* Inputs */
    input,
    textarea,
    select {
      background: rgba(255,255,255,.96) !important;
      border: 1px solid #dce3e8 !important;
      border-radius: 11px !important;
      color: var(--text-strong) !important;
      font-family: inherit !important;
      transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease !important;
    }

    input:focus,
    textarea:focus,
    select:focus {
      outline: none !important;
      border-color: #8fa9ba !important;
      box-shadow: 0 0 0 4px rgba(49,95,127,.09) !important;
      background: white !important;
    }

    label {
      color: #284156 !important;
      font-weight: 760 !important;
    }

    .help {
      color: #95a0aa !important;
    }

    /* Filter bars */
    .filter-bar {
      padding: 12px !important;
      gap: 10px !important;
      margin-bottom: 16px !important;
    }

    .filter-bar input,
    .filter-bar select {
      min-height: 44px !important;
    }

    /* Tables */
    .table-wrap {
      overflow: hidden !important;
    }

    table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
      background: transparent !important;
    }

    thead th {
      background: #f8fafb !important;
      color: #83909b !important;
      font-size: 9px !important;
      font-weight: 850 !important;
      letter-spacing: .055em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #e5ebef !important;
      padding-top: 11px !important;
      padding-bottom: 11px !important;
    }

    tbody td {
      border-bottom: 1px solid #edf1f3 !important;
      color: #43586a !important;
      padding-top: 13px !important;
      padding-bottom: 13px !important;
      background: rgba(255,255,255,.7);
    }

    tbody tr {
      transition:
        background .13s ease,
        transform .13s ease !important;
    }

    tbody tr:hover td {
      background: #fbfcfd !important;
    }

    tbody tr:last-child td {
      border-bottom: 0 !important;
    }

    .dashboard-row-title,
    .client-name,
    .transaction-property-primary,
    .email-template-name {
      color: var(--text-strong) !important;
      font-weight: 760 !important;
      letter-spacing: -.015em;
    }

    .transaction-client-secondary {
      color: #83909b !important;
      font-weight: 560 !important;
    }

    /* Sort headers */
    .sortable-th {
      transition: color .15s ease, background .15s ease !important;
    }

    .sortable-th:hover {
      color: var(--navy-800) !important;
      background: #f4f7f9 !important;
    }

    /* Status pills - richer and more current */
    .status-pill,
    .transaction-type-pill,
    .lead-priority-pill,
    .lead-status-pill,
    .submission-form-chip,
    .team-login-pill,
    .level-chip,
    .unlinked-pill {
      border-radius: 999px !important;
      font-weight: 800 !important;
      letter-spacing: -.005em !important;
      border-width: 1px !important;
      box-shadow: none !important;
    }

    .status-pill.status-connected {
      background: #eaf4ff !important;
      color: #2c65a4 !important;
      border-color: #cbdff5 !important;
    }

    .status-pill.status-potential {
      background: #fff0f0 !important;
      color: #b34c4c !important;
      border-color: #f0cccc !important;
    }

    .status-pill.status-coming-soon,
    .status-pill.status-coming_soon {
      background: #fff3e7 !important;
      color: #b36b22 !important;
      border-color: #f1d7b7 !important;
    }

    .status-pill.status-active {
      background: #eaf8f0 !important;
      color: #28794e !important;
      border-color: #c8ead7 !important;
    }

    .status-pill.status-pending {
      background: #e9f7f7 !important;
      color: #237a78 !important;
      border-color: #c4e8e6 !important;
    }

    .status-pill.status-previous-client,
    .status-pill.status-previous_client {
      background: #f3effb !important;
      color: #7757b4 !important;
      border-color: #ded3f2 !important;
    }

    /* Relationship groups */
    .group-header {
      border-radius: 14px 14px 0 0 !important;
      padding: 13px 16px !important;
      margin-top: 18px !important;
    }

    .group-header.group-level-a {
      background:
        linear-gradient(90deg, #e9f8ef 0%, #f4fbf6 100%) !important;
      border-color: #cae8d4 !important;
    }

    .group-header.group-level-b {
      background:
        linear-gradient(90deg, #fff7de 0%, #fffaf0 100%) !important;
      border-color: #eedca9 !important;
    }

    .group-header.group-level-c {
      background:
        linear-gradient(90deg, #fff1e5 0%, #fff8f2 100%) !important;
      border-color: #f0d2b6 !important;
    }

    .group-header.group-level-d {
      background:
        linear-gradient(90deg, #f0f3f5 0%, #f8f9fa 100%) !important;
      border-color: #dbe1e5 !important;
    }

    .group-title {
      font-weight: 820 !important;
      letter-spacing: -.02em !important;
    }

    /* Avatars */
    .team-avatar {
      border: 2px solid white !important;
      box-shadow:
        0 0 0 1px #d7e0e6,
        0 4px 12px rgba(13,39,61,.11) !important;
      background:
        linear-gradient(145deg, #eaf0f4, #dce6ec) !important;
      color: #395469 !important;
    }

    .team-avatar.avatar-sm {
      width: 34px !important;
      height: 34px !important;
    }

    /* Dashboard KPI cards */
    .dashboard-grid {
      gap: 14px !important;
    }

    .dashboard-card {
      padding: 17px !important;
      min-height: 118px;
    }

    .dashboard-card .eyebrow,
    .dashboard-card-label {
      color: #8e9aa5 !important;
      font-size: 9px !important;
      font-weight: 850 !important;
      text-transform: uppercase;
      letter-spacing: .06em !important;
    }

    .dashboard-card strong,
    .dashboard-kpi,
    .submission-history-stat strong {
      font-family: inherit !important;
      color: var(--text-strong) !important;
      letter-spacing: -.04em !important;
      font-weight: 780 !important;
    }

    .submission-history-stat {
      padding: 16px 18px !important;
    }

    /* Forms hub */
    .form-launch-card {
      border-radius: 18px !important;
      padding: 20px !important;
      transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
    }

    .form-launch-card:hover {
      transform: translateY(-2px);
      border-color: #d3dce3 !important;
    }

    .form-launch-card h3 {
      font-family: inherit !important;
      font-weight: 780 !important;
      color: var(--text-strong) !important;
      letter-spacing: -.025em !important;
    }

    .form-launch-action {
      color: var(--navy-700) !important;
      font-weight: 780 !important;
    }

    /* Settings tabs */
    .settings-tabs {
      border-bottom: 0 !important;
      background: rgba(255,255,255,.72);
      border: 1px solid #e1e7eb;
      padding: 6px !important;
      border-radius: 14px;
      width: fit-content;
      max-width: 100%;
      box-shadow: var(--shadow-sm);
    }

    .settings-tab {
      border-radius: 9px !important;
      padding: 9px 13px !important;
      color: #7f8c97 !important;
      font-weight: 760 !important;
    }

    .settings-tab:hover {
      background: #f4f7f9 !important;
      color: var(--text-strong) !important;
    }

    .settings-tab.active {
      background:
        linear-gradient(180deg, #163a56, #102f47) !important;
      color: white !important;
      box-shadow: 0 5px 12px rgba(16,47,71,.17);
    }

    .settings-section-header {
      background: linear-gradient(180deg, rgba(249,251,252,.95), rgba(255,255,255,.95));
      border-bottom-color: #edf1f3 !important;
    }

    .settings-section-header h3 {
      font-size: 13px !important;
      font-weight: 790 !important;
      letter-spacing: -.02em;
    }

    /* Modals */
    .modal-backdrop {
      background: rgba(8,24,36,.48) !important;
      backdrop-filter: blur(8px);
    }

    .modal {
      box-shadow: var(--shadow-lg) !important;
      border: 1px solid rgba(255,255,255,.7) !important;
    }

    .modal-header {
      background:
        linear-gradient(180deg, #fbfcfd, #ffffff) !important;
      border-bottom: 1px solid #edf1f3 !important;
    }

    .modal-header h2 {
      font-family: inherit !important;
      font-weight: 790 !important;
      color: var(--text-strong) !important;
      letter-spacing: -.025em !important;
    }

    .modal-footer {
      background: #fafbfc !important;
      border-top: 1px solid #edf1f3 !important;
    }

    .modal-close {
      border-radius: 9px !important;
      background: #f4f6f8 !important;
      color: #6f7f8c !important;
    }

    /* Activity */
    .activity-item,
    .task-item {
      border-color: #e8edf0 !important;
      border-radius: 12px !important;
      background: #fcfdfd !important;
    }

    /* Login */
    .login-card {
      border-radius: 22px !important;
      border: 1px solid rgba(216,224,230,.9) !important;
      box-shadow: var(--shadow-lg) !important;
      background: rgba(255,255,255,.96) !important;
      backdrop-filter: blur(12px);
    }

    /* Mobile */
    @media(max-width:820px) {
      body {
        background: #f6f8fa !important;
      }

      .view {
        padding-top: 18px !important;
      }

      .topbar h1,
      .view h1 {
        font-size: 30px !important;
      }

      .filter-bar {
        border-radius: 16px !important;
      }

      .settings-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
      }

      .settings-tab {
        white-space: nowrap;
      }
    }

  

    /* =========================================================
       VIBRANT A / B / C / D DASHBOARD + GROUP COLORS
       ========================================================= */
    .health-donut {
      background:
        conic-gradient(
          #16a34a 0deg var(--a-end),
          #f0c419 var(--a-end) var(--b-end),
          #f97316 var(--b-end) var(--c-end),
          #8ea0b3 var(--c-end) 360deg
        ) !important;
      box-shadow: inset 0 0 0 1px rgba(16,40,60,.04);
    }

    .health-dot.a { background:#16a34a !important; }
    .health-dot.b { background:#f0c419 !important; }
    .health-dot.c { background:#f97316 !important; }
    .health-dot.d { background:#8ea0b3 !important; }

    .group-header.group-level-a {
      background: linear-gradient(90deg, #dbf8e5 0%, #effcf3 100%) !important;
      border-color: #8cddaa !important;
    }
    .group-header.group-level-b {
      background: linear-gradient(90deg, #fff0b8 0%, #fff8dc 100%) !important;
      border-color: #f0d160 !important;
    }
    .group-header.group-level-c {
      background: linear-gradient(90deg, #ffe0bf 0%, #fff2e4 100%) !important;
      border-color: #ffb66d !important;
    }
    .group-header.group-level-d {
      background: linear-gradient(90deg, #e7eef7 0%, #f4f8fc 100%) !important;
      border-color: #ccd6e3 !important;
    }

    .group-level-a .level-chip { background:#16a34a !important; color:#fff !important; }
    .group-level-b .level-chip { background:#eab308 !important; color:#fff !important; }
    .group-level-c .level-chip { background:#f97316 !important; color:#fff !important; }
    .group-level-d .level-chip { background:#778aa0 !important; color:#fff !important; }

    .group-level-a .group-title { color:#12783d !important; }
    .group-level-b .group-title { color:#8b6700 !important; }
    .group-level-c .group-title { color:#b45309 !important; }
    .group-level-d .group-title { color:#53667d !important; }

    .health-legend-item strong {
      color: #20384d !important;
    }

  
    /* EXACT WHITE KETZNER GROUP SIDEBAR WORDMARK */
    .sidebar .brand-mark.sidebar-wordmark-wrap {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: 2px 8px 22px !important;
      margin-bottom: 24px !important;
      min-height: 86px;
      border-bottom: 1px solid rgba(255,255,255,.09) !important;
    }

    .sidebar-wordmark-logo {
      display: block;
      width: 178px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
      object-position: left center;
      filter: none;
    }

    @media (max-width: 820px) {
      .sidebar .brand-mark.sidebar-wordmark-wrap {
        min-height: 80px;
        padding: 2px 10px 18px !important;
        margin-bottom: 20px !important;
      }

      .sidebar-wordmark-logo {
        width: 170px;
      }
    }

  
    /* =========================================================
       TEAM DIRECTORY + PRODUCTION DASHBOARD
       ========================================================= */
    .team-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .team-summary-card {
      position: relative;
      overflow: hidden;
      background: rgba(255,255,255,.96);
      border: 1px solid #dfe6eb;
      border-radius: 18px;
      padding: 17px 18px;
      box-shadow: var(--shadow-sm);
    }

    .team-summary-card::after {
      content: "";
      position: absolute;
      width: 84px;
      height: 84px;
      right: -28px;
      bottom: -34px;
      border-radius: 50%;
      background: rgba(216,180,95,.12);
    }

    .team-summary-label {
      color: #8a97a2;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .team-summary-value {
      color: var(--text-strong);
      font-size: 28px;
      line-height: 1;
      font-weight: 790;
      letter-spacing: -.045em;
      margin-top: 9px;
    }

    .team-summary-sub {
      color: #96a1aa;
      font-size: 9px;
      margin-top: 6px;
    }

    .team-directory-toolbar {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .team-directory-toolbar h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 790;
      color: var(--text-strong);
      letter-spacing: -.025em;
    }

    .team-directory-toolbar p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 10px;
    }

    .team-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .team-member-card {
      position: relative;
      overflow: hidden;
      background: rgba(255,255,255,.96);
      border: 1px solid #dfe6eb;
      border-radius: 20px;
      padding: 18px;
      box-shadow: var(--shadow-sm);
      transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
    }

    .team-member-card.can-open {
      cursor: pointer;
    }

    .team-member-card.can-open:hover {
      transform: translateY(-2px);
      border-color: #ccd7df;
      box-shadow: var(--shadow-md);
    }

    .team-member-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      background: linear-gradient(90deg, var(--gold-500), #f0d27f);
    }

    .team-member-card-top {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .team-member-card-identity {
      min-width: 0;
      flex: 1 1 auto;
    }

    .team-member-card-name {
      color: var(--text-strong);
      font-size: 14px;
      line-height: 1.15;
      font-weight: 790;
      letter-spacing: -.025em;
    }

    .team-member-card-role {
      color: #748591;
      font-size: 10px;
      font-weight: 700;
      margin-top: 4px;
    }

    .team-member-card-email {
      color: #8b99a4;
      font-size: 9px;
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-member-login-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 8.8px;
      font-weight: 850;
      white-space: nowrap;
    }

    .team-member-login-status.linked {
      background: #e9f8ef;
      color: #27774c;
    }

    .team-member-login-status.pending {
      background: #f2f4f6;
      color: #78848e;
    }

    .team-card-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 8px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #edf1f3;
    }

    .team-card-metric {
      min-width: 0;
    }

    .team-card-metric span {
      display: block;
      color: #97a2ab;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .team-card-metric strong {
      display: block;
      color: var(--text-strong);
      font-size: 15px;
      line-height: 1;
      margin-top: 5px;
      font-weight: 780;
      letter-spacing: -.025em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-level-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 5px;
      margin-top: 13px;
    }

    .team-level-mini {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 6px 5px;
      border-radius: 8px;
      font-size: 8px;
      font-weight: 850;
    }

    .team-level-mini.a { background:#dbf8e5; color:#137b3e; }
    .team-level-mini.b { background:#fff0b8; color:#8b6700; }
    .team-level-mini.c { background:#ffe0bf; color:#b45309; }
    .team-level-mini.d { background:#e7eef7; color:#53667d; }

    .team-private-note {
      margin-top: 15px;
      padding-top: 13px;
      border-top: 1px solid #edf1f3;
      color: #98a3ac;
      font-size: 9px;
      line-height: 1.45;
    }

    /* Team member detail */
    .team-member-hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      background:
        radial-gradient(circle at 92% 12%, rgba(216,180,95,.17), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
      border: 1px solid #dfe6eb;
      border-radius: 20px;
      padding: 20px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 16px;
    }

    .team-member-hero-left {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }

    .team-member-hero-name {
      color: var(--text-strong);
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -.035em;
      line-height: 1.05;
    }

    .team-member-hero-meta {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 7px;
    }

    .team-member-role-pill {
      display: inline-flex;
      padding: 6px 9px;
      border-radius: 999px;
      background: #eef4f8;
      color: #34546c;
      font-size: 9px;
      font-weight: 800;
    }

    .team-member-hero-email {
      color: #7f8d98;
      font-size: 10px;
    }

    .team-member-hero-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .team-detail-kpi-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .team-detail-kpi {
      background: white;
      border: 1px solid #e0e7eb;
      border-radius: 16px;
      padding: 14px;
      box-shadow: var(--shadow-sm);
      min-width: 0;
    }

    .team-detail-kpi span {
      display: block;
      color: #93a0aa;
      font-size: 8px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .team-detail-kpi strong {
      display: block;
      margin-top: 7px;
      color: var(--text-strong);
      font-size: 20px;
      font-weight: 790;
      letter-spacing: -.035em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .team-detail-level-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .team-detail-level {
      border-radius: 15px;
      padding: 14px 15px;
      border: 1px solid transparent;
    }

    .team-detail-level.a { background:#dbf8e5; border-color:#9ce0b4; color:#137b3e; }
    .team-detail-level.b { background:#fff0b8; border-color:#f0d160; color:#8b6700; }
    .team-detail-level.c { background:#ffe0bf; border-color:#ffbb77; color:#b45309; }
    .team-detail-level.d { background:#e7eef7; border-color:#ccd6e3; color:#53667d; }

    .team-detail-level span {
      display: block;
      font-size: 9px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .team-detail-level strong {
      display: block;
      font-size: 22px;
      line-height: 1;
      font-weight: 800;
      margin-top: 7px;
    }

    .team-detail-columns {
      display: grid;
      grid-template-columns: minmax(0,.78fr) minmax(0,1.35fr);
      gap: 14px;
      align-items: start;
    }

    .team-detail-panel {
      background: white;
      border: 1px solid #dfe6eb;
      border-radius: 18px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .team-detail-panel-header {
      padding: 14px 16px;
      border-bottom: 1px solid #edf1f3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .team-detail-panel-header h3 {
      margin: 0;
      color: var(--text-strong);
      font-size: 12px;
      font-weight: 790;
    }

    .team-detail-panel-header span {
      color: #95a1aa;
      font-size: 9px;
    }

    .team-pipeline-list {
      padding: 5px 16px;
    }

    .team-pipeline-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 11px 0;
      border-bottom: 1px solid #eef2f4;
    }

    .team-pipeline-row:last-child {
      border-bottom: 0;
    }

    .team-pipeline-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #536778;
      font-size: 10px;
      font-weight: 700;
    }

    .team-pipeline-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    .team-pipeline-row strong {
      color: var(--text-strong);
      font-size: 12px;
      font-weight: 800;
    }

    .team-recent-transactions {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .team-recent-transactions th {
      padding: 10px 12px;
      background: #f8fafb;
      color: #8b98a3;
      font-size: 8px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .05em;
      border-bottom: 1px solid #e8edf0;
      text-align: left;
    }

    .team-recent-transactions td {
      padding: 11px 12px;
      border-bottom: 1px solid #eef2f4;
      color: #516678;
      font-size: 9px;
    }

    .team-recent-transactions tbody tr {
      cursor: pointer;
    }

    .team-recent-transactions tbody tr:hover td {
      background: #fbfcfd;
    }

    .team-recent-transactions tbody tr:last-child td {
      border-bottom: 0;
    }

    .team-recent-property {
      color: var(--text-strong) !important;
      font-weight: 760;
    }

    @media(max-width:1180px) {
      .team-card-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .team-detail-kpi-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
      }
    }

    @media(max-width:820px) {
      .team-summary-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .team-card-grid {
        grid-template-columns: 1fr;
      }

      .team-member-hero {
        flex-direction: column;
        align-items: stretch;
      }

      .team-member-hero-actions {
        justify-content: flex-start;
      }

      .team-detail-kpi-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .team-detail-level-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .team-detail-columns {
        grid-template-columns: 1fr;
      }
    }

  
    /* =========================================================
       INDEX 35 — CONNECTED DATABASE DESKTOP DETAILS
       Wide desktop table with horizontal scrolling for spouse/contact details
       ========================================================= */
    @media (min-width: 701px) {
      #clientsView .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        scrollbar-gutter: stable;
        overscroll-behavior-x: contain;
      }

      #clientsView .client-table {
        width: 100%;
        min-width: 1920px !important;
      }

      #clientsView .client-table th,
      #clientsView .client-table td {
        white-space: nowrap;
      }

      #clientsView .table-wrap::-webkit-scrollbar {
        height: 11px;
      }

      #clientsView .table-wrap::-webkit-scrollbar-track {
        background: #f2f5f7;
        border-radius: 999px;
      }

      #clientsView .table-wrap::-webkit-scrollbar-thumb {
        background: #bdc9d1;
        border: 2px solid #f2f5f7;
        border-radius: 999px;
      }

      #clientsView .table-wrap::-webkit-scrollbar-thumb:hover {
        background: #98aab6;
      }

      #clientsView .client-table th:nth-child(1),
      #clientsView .client-table td:nth-child(1) { min-width: 230px; }
      #clientsView .client-table th:nth-child(6),
      #clientsView .client-table td:nth-child(6) { min-width: 230px; }
      #clientsView .client-table th:nth-child(8),
      #clientsView .client-table td:nth-child(8),
      #clientsView .client-table th:nth-child(12),
      #clientsView .client-table td:nth-child(12) { min-width: 190px; }
    }

    /* =========================================================
       IPHONE / MOBILE TABLE CARDS
       Desktop remains normal tables. On phones, records become
       stacked touch-friendly cards instead of wide spreadsheets.
       ========================================================= */
    @media (max-width: 700px) {
      /* Remove desktop table chrome on the main record tables. */
      .client-table,
      .transaction-table,
      .lead-table,
      .submission-history-table,
      .dashboard-client-table,
      .dashboard-transaction-table,
      .team-recent-transactions {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
      }

      .client-table thead,
      .transaction-table thead,
      .lead-table thead,
      .submission-history-table thead,
      .dashboard-client-table thead,
      .dashboard-transaction-table thead,
      .team-recent-transactions thead {
        display: none !important;
      }

      .client-table tbody,
      .transaction-table tbody,
      .lead-table tbody,
      .submission-history-table tbody,
      .dashboard-client-table tbody,
      .dashboard-transaction-table tbody,
      .team-recent-transactions tbody {
        display: grid !important;
        gap: 10px !important;
        padding: 10px !important;
        width: 100% !important;
      }

      .client-table tbody tr,
      .transaction-table tbody tr,
      .lead-table tbody tr,
      .submission-history-table tbody tr,
      .dashboard-client-table tbody tr,
      .dashboard-transaction-table tbody tr,
      .team-recent-transactions tbody tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        background: #fff !important;
        border: 1px solid #e1e7eb !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        box-shadow: 0 3px 12px rgba(13,39,61,.055) !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      .client-table tbody tr:active,
      .transaction-table tbody tr:active,
      .lead-table tbody tr:active,
      .submission-history-table tbody tr:active,
      .dashboard-client-table tbody tr:active,
      .dashboard-transaction-table tbody tr:active,
      .team-recent-transactions tbody tr:active {
        transform: scale(.995);
        background: #fafcfd !important;
      }

      .client-table tbody td,
      .transaction-table tbody td,
      .lead-table tbody td,
      .submission-history-table tbody td,
      .dashboard-client-table tbody td,
      .dashboard-transaction-table tbody td,
      .team-recent-transactions tbody td {
        display: grid !important;
        grid-template-columns: 104px minmax(0,1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 9px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #eef2f4 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 11px !important;
      }

      .client-table tbody td:last-child,
      .transaction-table tbody td:last-child,
      .lead-table tbody td:last-child,
      .submission-history-table tbody td:last-child,
      .dashboard-client-table tbody td:last-child,
      .dashboard-transaction-table tbody td:last-child,
      .team-recent-transactions tbody td:last-child {
        border-bottom: 0 !important;
      }

      .client-table tbody td::before,
      .transaction-table tbody td::before,
      .lead-table tbody td::before,
      .submission-history-table tbody td::before,
      .dashboard-client-table tbody td::before,
      .dashboard-transaction-table tbody td::before,
      .team-recent-transactions tbody td::before {
        color: #94a0aa;
        font-size: 8px;
        font-weight: 850;
        line-height: 1.2;
        letter-spacing: .05em;
        text-transform: uppercase;
      }

      /* The primary record field becomes a prominent card header. */
      .client-table tbody td:first-child,
      .transaction-table tbody td:first-child,
      .lead-table tbody td:first-child,
      .submission-history-table tbody td:nth-child(3),
      .dashboard-client-table tbody td:first-child,
      .dashboard-transaction-table tbody td:first-child,
      .team-recent-transactions tbody td:first-child {
        display: block !important;
        padding: 13px 12px 11px !important;
        background: #f8fafb !important;
      }

      .client-table tbody td:first-child::before,
      .transaction-table tbody td:first-child::before,
      .lead-table tbody td:first-child::before,
      .submission-history-table tbody td:nth-child(3)::before,
      .dashboard-client-table tbody td:first-child::before,
      .dashboard-transaction-table tbody td:first-child::before,
      .team-recent-transactions tbody td:first-child::before {
        display: block;
        margin-bottom: 5px;
      }

      .client-table .client-name,
      .transaction-table .transaction-property-primary,
      .lead-table .lead-name,
      .submission-history-table .dashboard-row-title,
      .dashboard-client-table .dashboard-row-title,
      .dashboard-transaction-table .dashboard-row-title,
      .team-recent-transactions .team-recent-property {
        display: block !important;
        color: var(--text-strong) !important;
        font-size: 13px !important;
        font-weight: 790 !important;
        line-height: 1.3 !important;
      }

      /* CLIENT labels */
      .client-table td:nth-child(1)::before { content:"Client"; }
      .client-table td:nth-child(2)::before { content:"Agent"; }
      .client-table td:nth-child(3)::before { content:"Status"; }
      .client-table td:nth-child(4)::before { content:"Source"; }
      .client-table td:nth-child(5)::before { content:"Ownership"; }
      .client-table td:nth-child(6)::before { content:"Mailing Address"; }
      .client-table td:nth-child(7)::before { content:"Phone"; }
      .client-table td:nth-child(8)::before { content:"Email"; }

      /* TRANSACTION labels */
      .transaction-table td:nth-child(1)::before { content:"Property Address"; }
      .transaction-table td:nth-child(2)::before { content:"Client"; }
      .transaction-table td:nth-child(3)::before { content:"Type"; }
      .transaction-table td:nth-child(4)::before { content:"Status"; }
      .transaction-table td:nth-child(5)::before { content:"Agent"; }
      .transaction-table td:nth-child(6)::before { content:"Sale Price"; }
      .transaction-table td:nth-child(7)::before { content:"GCI"; }
      .transaction-table td:nth-child(8)::before { content:"Closing Date"; }

      /* LEAD labels */
      .lead-table td:nth-child(1)::before { content:"Lead"; }
      .lead-table td:nth-child(2)::before { content:"Status"; }
      .lead-table td:nth-child(3)::before { content:"Priority"; }
      .lead-table td:nth-child(4)::before { content:"Source"; }
      .lead-table td:nth-child(5)::before { content:"Agent"; }
      .lead-table td:nth-child(6)::before { content:"Phone"; }
      .lead-table td:nth-child(7)::before { content:"Email"; }
      .lead-table td:nth-child(8)::before { content:"Added"; }

      /* FORM SUBMISSION labels */
      .submission-history-table td:nth-child(1)::before { content:"Submitted"; }
      .submission-history-table td:nth-child(2)::before { content:"Form"; }
      .submission-history-table td:nth-child(3)::before { content:"Property"; }
      .submission-history-table td:nth-child(4)::before { content:"Agent"; }
      .submission-history-table td:nth-child(5)::before { content:"Detail"; }
      .submission-history-table td:nth-child(6)::before { content:"Notification"; }

      /* DASHBOARD CLIENT labels */
      .dashboard-client-table td:nth-child(1)::before { content:"Client"; }
      .dashboard-client-table td:nth-child(2)::before { content:"Level"; }
      .dashboard-client-table td:nth-child(3)::before { content:"Source"; }

      /* DASHBOARD TRANSACTION labels */
      .dashboard-transaction-table td:nth-child(1)::before { content:"Property"; }
      .dashboard-transaction-table td:nth-child(2)::before { content:"Client"; }
      .dashboard-transaction-table td:nth-child(3)::before { content:"Type"; }
      .dashboard-transaction-table td:nth-child(4)::before { content:"Sale Price"; }
      .dashboard-transaction-table td:nth-child(5)::before { content:"GCI"; }
      .dashboard-transaction-table td:nth-child(6)::before { content:"Closing"; }

      /* TEAM RECENT TRANSACTION labels */
      .team-recent-transactions td:nth-child(1)::before { content:"Property"; }
      .team-recent-transactions td:nth-child(2)::before { content:"Status"; }
      .team-recent-transactions td:nth-child(3)::before { content:"Type"; }
      .team-recent-transactions td:nth-child(4)::before { content:"Sale Price"; }
      .team-recent-transactions td:nth-child(5)::before { content:"Closing"; }

      /* Avatars no longer inherit desktop fixed widths. */
      .client-table .agent-avatar-cell,
      .transaction-table .agent-avatar-cell {
        width: 100% !important;
        text-align: left !important;
      }

      /* Make contact links easy to tap. */
      .lead-table .contact-link,
      .client-table a,
      .transaction-table a {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
      }

      /* Main wrappers should not force horizontal scroll anymore. */
      .table-wrap:has(.client-table),
      .table-wrap:has(.transaction-table),
      .table-wrap:has(.lead-table),
      .table-wrap:has(.submission-history-table) {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      .dashboard-scroll-panel {
        max-height: none !important;
        overflow: visible !important;
      }

      .dashboard-group {
        overflow: visible !important;
      }

      /* Filters are much easier as full-width controls on iPhone. */
      .filter-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      .filter-bar input,
      .filter-bar select {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
      }

      /* More breathing room around grouped client cards. */
      .group-header {
        position: relative !important;
        top: auto !important;
      }

      .group .table-wrap {
        border-radius: 0 0 15px 15px !important;
      }

      /* Keep editable admin settings as scrollable tables. */
      .settings-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px;
      }

      .settings-table {
        min-width: 680px !important;
      }
    }

  
    /* =========================================================
       MOBILE CLIENT DATABASE — NAME + OWNER PHOTO ONLY
       Desktop is unchanged. On iPhone/mobile, each client is one
       compact row: client name left, assigned owner's avatar right.
       ========================================================= */
    @media (max-width: 700px) {
      .client-table tbody {
        display: grid !important;
        gap: 8px !important;
        padding: 8px 10px 12px !important;
      }

      .client-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 58px !important;
        padding: 0 !important;
        border: 1px solid #e1e7eb !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(13,39,61,.045) !important;
        overflow: hidden !important;
      }

      /* Hide everything except Client + Agent avatar. */
      .client-table tbody td:nth-child(n+3) {
        display: none !important;
      }

      .client-table tbody td:nth-child(1),
      .client-table tbody td:nth-child(2) {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 11px 12px !important;
        border: 0 !important;
        background: transparent !important;
      }

      .client-table tbody td:nth-child(1) {
        justify-content: flex-start !important;
      }

      .client-table tbody td:nth-child(2) {
        justify-content: flex-end !important;
        padding-left: 4px !important;
      }

      /* Remove the mobile field labels ("Client", "Agent"). */
      .client-table tbody td:nth-child(1)::before,
      .client-table tbody td:nth-child(2)::before {
        content: none !important;
        display: none !important;
      }

      .client-table .client-name {
        display: block !important;
        color: var(--text-strong) !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 780 !important;
        letter-spacing: -.015em !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
      }

      .client-table .agent-avatar-cell {
        width: auto !important;
        min-width: auto !important;
        text-align: right !important;
      }

      .client-table .agent-avatar {
        flex: 0 0 auto !important;
      }

      /* Keep each relationship group visually tight. */
      .group .client-table tbody {
        padding-top: 7px !important;
      }
    }

  
    /* MOBILE CLIENT ROW — OWNER AVATAR LEFT, CLIENT NAME RIGHT */
    @media (max-width: 700px) {
      .client-table tbody tr {
        grid-template-columns: auto minmax(0, 1fr) !important;
      }

      .client-table tbody td:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
        padding: 10px 4px 10px 12px !important;
      }

      .client-table tbody td:nth-child(1) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
        padding: 10px 12px 10px 6px !important;
        background: transparent !important;
      }

      .client-table .agent-avatar-cell {
        text-align: left !important;
      }

      .client-table .client-name {
        font-size: 14px !important;
        font-weight: 780 !important;
      }
    }

  
    /* =========================================================
       MOBILE SEND EMAIL — RESPONSIVE IPHONE SHEET
       ========================================================= */

    /* Signature images can never exceed the container width. */
    .email-signature-preview,
    .signature-image-preview-wrap {
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }

    .email-signature-preview img,
    .signature-image-preview-wrap img {
      display: block;
      width: auto;
      max-width: min(520px, 100%) !important;
      height: auto;
      object-fit: contain;
    }

    .email-signature-preview {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    @media (max-width: 700px) {
      #emailModalBackdrop {
        place-items: end center !important;
        padding: 0 !important;
        overflow: hidden !important;
      }

      #emailModalBackdrop .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 94dvh !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop .modal-header {
        position: sticky;
        top: 0;
        z-index: 4;
        gap: 12px !important;
        padding: 16px 17px !important;
        background: rgba(255,255,255,.98) !important;
        backdrop-filter: blur(12px);
      }

      #emailModalBackdrop .modal-header h2 {
        font-size: 22px !important;
      }

      #emailModalBackdrop .modal-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 15px 16px 18px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop .field,
      #emailModalBackdrop .email-template-row,
      #emailModalBackdrop .recipient-list,
      #emailModalBackdrop .email-connection,
      #emailModalBackdrop .email-signature-preview,
      #emailModalBackdrop .inline-message {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop input,
      #emailModalBackdrop select,
      #emailModalBackdrop textarea {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop #emailBody {
        min-height: 180px !important;
        resize: vertical;
      }

      #emailModalBackdrop .email-template-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
#emailModalBackdrop .email-signature-preview {
        padding-top: 12px !important;
        overflow: hidden !important;
      }

      #emailModalBackdrop .email-signature-preview img {
        width: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        object-fit: contain !important;
      }

      #emailModalBackdrop .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 4;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding:
          12px
          16px
          calc(12px + env(safe-area-inset-bottom))
          !important;
        background: rgba(250,251,252,.98) !important;
        backdrop-filter: blur(12px);
      }

      #emailModalBackdrop .modal-footer button {
        width: 100% !important;
        min-height: 46px !important;
      }
    }

  
    /* =========================================================
       MOBILE DASHBOARD HEADER FIX
       Keep the greeting readable and move the agent selector
       underneath instead of squeezing it beside the title.
       ========================================================= */
    @media (max-width: 700px) {
      #dashboardView > .topbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        padding-left: 58px !important;
        margin-bottom: 22px !important;
      }

      #dashboardView > .topbar > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
      }

      #dashboardView #welcomeHeading {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: clamp(36px, 10vw, 46px) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
        white-space: normal !important;
      }

      #dashboardView #dashboardSubtitle {
        width: 100% !important;
        max-width: 330px !important;
        margin-top: 10px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
      }

      #dashboardView .dashboard-controls {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
        gap: 8px !important;
      }

      #dashboardView .dashboard-agent-select {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 11px 14px !important;
        border-radius: 13px !important;
        font-size: 15px !important;
        font-weight: 750 !important;
        box-sizing: border-box !important;
      }

      #dashboardView .dashboard-agent-select.hidden {
        display: none !important;
      }

      #dashboardView #roleBadge {
        flex: 0 0 auto;
        align-self: center;
      }
    }

    @media (max-width: 430px) {
      #dashboardView > .topbar {
        padding-left: 56px !important;
        gap: 14px !important;
      }

      #dashboardView #welcomeHeading {
        font-size: 39px !important;
      }
    }

  
    /* =========================================================
       MOBILE EMAIL COMPOSER — SCROLL FIX
       The previous version used sticky header/footer + a constrained
       inner scroller. On iPhone that could trap the sheet.
       This version lets the BACKDROP be the single vertical scroller.
       ========================================================= */
    @media (max-width: 700px) {
      #emailModalBackdrop {
        display: block !important;
        padding:
          10px
          8px
          calc(18px + env(safe-area-inset-bottom))
          !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop .modal {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        border-radius: 18px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop .modal-header {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        padding: 16px !important;
        background: #fff !important;
        backdrop-filter: none !important;
      }

      #emailModalBackdrop .modal-body {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 14px 16px 18px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop .modal-footer {
        position: static !important;
        bottom: auto !important;
        z-index: auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding:
          12px
          16px
          calc(12px + env(safe-area-inset-bottom))
          !important;
        background: #fafbfc !important;
        backdrop-filter: none !important;
      }

      #emailModalBackdrop .field,
      #emailModalBackdrop .email-template-row,
      #emailModalBackdrop .recipient-list,
      #emailModalBackdrop .email-connection,
      #emailModalBackdrop .email-signature-preview,
      #emailModalBackdrop .inline-message {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop input,
      #emailModalBackdrop select,
      #emailModalBackdrop textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop #emailBody {
        min-height: 190px !important;
        resize: none !important;
      }

      #emailModalBackdrop .email-signature-preview {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
      }

      #emailModalBackdrop .email-signature-preview img {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 180px !important;
        object-fit: contain !important;
        object-position: left center !important;
      }
    }

  
    /* =========================================================
       MOBILE EMAIL RECIPIENT ROW FIX
       Keep checkboxes compact; name/email get the remaining width.
       ========================================================= */
    @media (max-width: 700px) {
      #emailModalBackdrop .recipient-list {
        overflow: hidden !important;
      }

      #emailModalBackdrop .recipient-option {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 13px 14px !important;
        box-sizing: border-box !important;
      }

      #emailModalBackdrop .recipient-option input[type="checkbox"] {
        display: block !important;
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      #emailModalBackdrop .recipient-copy {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
      }

      #emailModalBackdrop .recipient-name {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
      }

      #emailModalBackdrop .recipient-email {
        display: block !important;
        width: 100% !important;
        margin-top: 3px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: var(--muted) !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
      }
    }

  
    /* =========================================================
       MOBILE EMAIL VISIBILITY FIX
       Respect the app's hidden state. The mobile display:block
       rule must never force the email modal open by itself.
       ========================================================= */
    #emailModalBackdrop.hidden {
      display: none !important;
    }

    @media (max-width: 700px) {
      #emailModalBackdrop.hidden {
        display: none !important;
      }

      #emailModalBackdrop:not(.hidden) {
        display: block !important;
      }
    }

  
    /* =========================================================
       CLIENT DATABASE — INTERACTIVE MAP
       ========================================================= */
    .client-view-switch {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px;
      border: 1px solid #dce4e9;
      border-radius: 12px;
      background: #f5f8fa;
    }

    .client-view-switch button {
      border: 0;
      background: transparent;
      color: #738491;
      min-height: 34px;
      padding: 7px 13px;
      border-radius: 9px;
      font-size: 10px;
      font-weight: 800;
      cursor: pointer;
    }

    .client-view-switch button.active {
      background: #fff;
      color: var(--text-strong);
      box-shadow: 0 2px 8px rgba(14,38,57,.08);
    }

    .client-map-shell {
      position: relative;
      overflow: hidden;
      background: #fff;
      border: 1px solid #dfe6eb;
      border-radius: 20px;
      box-shadow: var(--shadow-sm);
      min-height: 620px;
    }

    .client-map-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 13px;
      border-bottom: 1px solid #e8edf0;
      background: rgba(255,255,255,.97);
    }

    .client-map-status {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
      color: #748590;
      font-size: 9px;
      font-weight: 700;
    }

    .map-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 9px;
      border-radius: 999px;
      background: #f2f5f7;
      color: #60717d;
      font-size: 8px;
      font-weight: 850;
      white-space: nowrap;
    }

    .map-status-pill.good {
      background: #e8f7ee;
      color: #217348;
    }

    .map-status-pill.warn {
      background: #fff4d8;
      color: #8a6814;
    }

    .client-map-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 7px;
    }

    .client-map-actions button {
      min-height: 35px;
      padding: 7px 11px;
      font-size: 9px;
    }

    #clientMap {
      width: 100%;
      height: 620px;
      background:
        radial-gradient(circle at 40% 35%, rgba(216,187,115,.1), transparent 32%),
        #eef3f5;
    }

    .client-map-empty {
      position: absolute;
      inset: 56px 0 0;
      z-index: 3;
      display: grid;
      place-items: center;
      padding: 30px;
      pointer-events: none;
    }

    .client-map-empty-card {
      pointer-events: auto;
      max-width: 430px;
      width: calc(100% - 28px);
      padding: 22px;
      border: 1px solid #dce4e8;
      border-radius: 18px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 14px 40px rgba(15,37,55,.12);
      text-align: center;
    }

    .client-map-empty-card h3 {
      margin: 0 0 7px;
      color: var(--text-strong);
      font-size: 17px;
    }

    .client-map-empty-card p {
      margin: 0;
      color: #71828e;
      font-size: 10px;
      line-height: 1.55;
    }

    .client-map-progress {
      height: 5px;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 999px;
      background: #e9eef1;
    }

    .client-map-progress > span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #d8bb73, #b9923a);
      transition: width .2s ease;
    }

    .map-info-card {
      min-width: 225px;
      max-width: 285px;
      padding: 3px 2px 2px;
      font-family: Inter, system-ui, sans-serif;
    }

    .map-info-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 9px;
    }

    .map-info-avatar {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: 50%;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #edf2f5;
      border: 2px solid #fff;
      box-shadow: 0 2px 7px rgba(12,33,49,.14);
      color: #5f7180;
      font-size: 10px;
      font-weight: 850;
    }

    .map-info-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .map-info-name {
      color: #10283b;
      font-size: 13px;
      line-height: 1.18;
      font-weight: 800;
    }

    .map-info-owner {
      color: #83919b;
      font-size: 9px;
      margin-top: 2px;
    }

    .map-info-meta {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .map-info-badge {
      display: inline-flex;
      padding: 4px 7px;
      border-radius: 999px;
      background: #f0f4f6;
      color: #61737f;
      font-size: 8px;
      font-weight: 800;
    }

    .map-info-address {
      color: #637784;
      font-size: 9px;
      line-height: 1.4;
      margin: 0 0 10px;
    }

    .map-info-open {
      width: 100%;
      border: 0;
      border-radius: 9px;
      padding: 8px 10px;
      background: #11283c;
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      cursor: pointer;
    }

    @media (max-width: 700px) {
      .client-toolbar .toolbar-meta {
        align-items: stretch !important;
      }

      .client-view-switch {
        width: 100%;
      }

      .client-view-switch button {
        flex: 1 1 50%;
        min-height: 42px;
        font-size: 11px;
      }

      .client-map-shell {
        min-height: calc(100dvh - 245px);
        border-radius: 16px;
      }

      .client-map-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 10px;
      }

      .client-map-actions {
        justify-content: stretch;
      }

      .client-map-actions button {
        flex: 1 1 auto;
        min-height: 40px;
      }

      #clientMap {
        height: calc(100dvh - 310px);
        min-height: 430px;
      }

      .client-map-empty {
        inset: 104px 0 0;
      }
    }

  
    /* =========================================================
       MAP-ONLY RELATIONSHIP LEVEL FILTER
       Multi-select A/B/C/D. Defaults to A + B.
       ========================================================= */
    .map-level-filter {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .map-level-filter-button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 35px;
      padding: 7px 11px;
      border: 1px solid #dce4e9;
      border-radius: 10px;
      background: #fff;
      color: var(--text-strong);
      font-size: 9px;
      font-weight: 800;
      cursor: pointer;
    }

    .map-level-filter-menu {
      position: absolute;
      top: calc(100% + 7px);
      right: 0;
      z-index: 20;
      width: 200px;
      padding: 8px;
      border: 1px solid #dce4e9;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 14px 34px rgba(15,37,55,.14);
    }

    .map-level-filter-option {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 8px;
      border-radius: 9px;
      color: #536778;
      font-size: 10px;
      font-weight: 750;
      cursor: pointer;
    }

    .map-level-filter-option:hover {
      background: #f6f8fa;
    }

    .map-level-filter-option input {
      width: 16px;
      height: 16px;
      margin: 0;
      flex: 0 0 16px;
    }

    .map-level-filter-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex: 0 0 auto;
    }

    .map-level-filter-dot.a { background:#16a34a; }
    .map-level-filter-dot.b { background:#eab308; }
    .map-level-filter-dot.c { background:#f97316; }
    .map-level-filter-dot.d { background:#778aa0; }

    @media (max-width: 700px) {
      .map-level-filter {
        width: 100%;
      }

      .map-level-filter-button {
        width: 100%;
        justify-content: space-between;
        min-height: 40px;
      }

      .map-level-filter-menu {
        left: 0;
        right: 0;
        width: 100%;
      }
    }

  
    /* =========================================================
       AUTH PASSWORD SETUP / RECOVERY
       ========================================================= */
    .password-setup-page {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 20% 15%, rgba(216,187,115,.12), transparent 28%),
        linear-gradient(160deg, #0d2233 0%, #11283c 55%, #18374f 100%);
    }

    .password-setup-card {
      width: min(430px, 100%);
      background: #fff;
      border-radius: 22px;
      padding: 26px;
      box-shadow: 0 24px 70px rgba(0,0,0,.24);
    }

    .password-setup-card h1 {
      margin: 0;
      color: var(--text-strong);
      font-size: 26px;
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .password-setup-card p {
      margin: 9px 0 20px;
      color: #73848f;
      font-size: 11px;
      line-height: 1.5;
    }

    .password-setup-card .field {
      margin-bottom: 13px;
    }

    .password-setup-card input {
      width: 100%;
      min-height: 46px;
      box-sizing: border-box;
    }

    @media (max-width: 700px) {
      .password-setup-page {
        padding: 16px;
      }

      .password-setup-card {
        padding: 22px 18px;
        border-radius: 18px;
      }
    }

      .team-member-card-tenure {
      margin-top: 2px;
      font-size: 10px;
      color: var(--muted);
      font-weight: 750;
    }



    /* =========================================================
       QA MOBILE FIXES
       ========================================================= */
    @media (max-width: 700px) {
      /* Action buttons no longer squeeze page titles beside the hamburger. */
      #clientsView > .topbar,
      #leadsView > .topbar,
      #transactionsView > .topbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-left: 0 !important;
      }

      #clientsView > .topbar > div:first-child,
      #leadsView > .topbar > div:first-child,
      #transactionsView > .topbar > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 56px !important;
      }

      #clientsView > .topbar > .primary-btn,
      #leadsView > .topbar > .primary-btn,
      #transactionsView > .topbar > .primary-btn {
        width: 100% !important;
        min-height: 46px !important;
        align-self: stretch !important;
      }

      /* iOS zooms the viewport when focused controls use text smaller than 16px. */
      input,
      select,
      textarea,
      .workflow-field input,
      .workflow-field select,
      .workflow-field textarea,
      .settings-table input,
      .settings-table select {
        font-size: 16px !important;
      }

      /* Better keyboard / browser-bar behavior on modern mobile browsers. */
      .modal:not(#emailModalBackdrop .modal) {
        max-height: calc(100dvh - 20px) !important;
      }
    }

  

    @media (max-width: 700px) {
      .client-search-name-wrap {
        width: 100%;
        justify-self: stretch;
      }

      .client-search-name-wrap .client-name {
        min-width: 0;
        overflow-wrap: anywhere;
      }
    }

  
    /* Keep client phone numbers readable on one line on desktop. */
    @media (min-width: 701px) {
      .client-table th:nth-child(7),
      .client-table td:nth-child(7) {
        white-space: nowrap;
        min-width: 118px;
        width: 118px;
      }

      .client-table td:nth-child(7) {
        font-variant-numeric: tabular-nums;
      }
    }

  
    #forgotPasswordButton {
      min-height: 44px;
    }

  

    /* Dashboard health legend: keep all A/B/C/D rows flush and aligned. */
    .health-legend {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 5px !important;
      width: 100%;
    }

    .health-legend-item {
      display: grid !important;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 7px !important;
      min-height: 20px;
      width: 100%;
      font-size: 10.5px !important;
      line-height: 1.2;
    }

    .health-legend-label {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #52687b;
    }

    .health-legend-stats {
      margin-left: 0 !important;
      min-width: 55px;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      font-size: 10.5px;
    }

  
    .fun-nav-icon {
      width: 18px;
      height: 18px;
      flex-basis: 18px;
      stroke-width: 1.8;
      transition: transform .16s ease, opacity .16s ease;
    }

    .nav-item:hover .fun-nav-icon {
      transform: translateY(-1px) scale(1.06);
    }

    .nav-item.active .fun-nav-icon {
      transform: scale(1.05);
    }

    .money-bag-icon {
      width: 19px;
      height: 19px;
      flex-basis: 19px;
    }

  
    /* AGENT TOOLS HUB */

    .indicators-view {
      max-width: none;
      padding-bottom: 28px;
    }

    .indicators-hero {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 22px;
      margin-bottom: 18px;
      padding: 22px 24px;
      border: 1px solid rgba(216,187,115,.38);
      border-radius: 16px;
      background:
        radial-gradient(circle at 92% -20%, rgba(216,187,115,.22), transparent 34%),
        linear-gradient(135deg,#11283c 0%,#173a56 100%);
      color: #fff;
      box-shadow: 0 14px 34px rgba(17,40,60,.08);
    }

    .indicators-hero-copy {
      min-width: 0;
    }

    .indicators-kicker {
      color: #e4c87f;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .indicators-hero h1 {
      margin: 7px 0 5px;
      color: #fff;
      font-size: clamp(27px, 3vw, 38px);
      letter-spacing: -.035em;
    }

    .indicators-hero p {
      margin: 0;
      max-width: 720px;
      color: rgba(255,255,255,.72);
      font-size: 11px;
      line-height: 1.55;
    }

    .indicators-save-state {
      flex: 0 0 auto;
      min-width: 88px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.78);
      font-size: 9px;
      font-weight: 900;
      text-align: center;
    }

    .indicators-save-state.saving {
      color: #f4dc9e;
    }

    .indicators-save-state.saved {
      color: #bde2c9;
    }

    .indicators-toolbar {
      display: grid;
      grid-template-columns: minmax(170px,1fr) minmax(130px,.55fr) minmax(180px,.7fr) auto;
      align-items: end;
      gap: 12px;
      margin-bottom: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 5px 18px rgba(17,40,60,.035);
    }

    .indicators-toolbar .field {
      margin: 0;
    }

    .indicators-toolbar .field label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .indicator-period-tabs {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px;
      border: 1px solid #ded9cc;
      border-radius: 9px;
      background: #faf9f6;
    }

    .indicator-period-tab {
      min-height: 32px;
      padding: 6px 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
    }

    .indicator-period-tab.active {
      background: var(--dark);
      color: #fff;
    }

    .indicator-summary-strip {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .indicator-summary-card {
      padding: 13px 14px;
      border: 1px solid #e6e1d6;
      border-radius: 11px;
      background: #fff;
    }

    .indicator-summary-card span {
      display: block;
      color: var(--muted);
      font-size: 8px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .indicator-summary-card strong {
      display: block;
      margin-top: 5px;
      color: var(--dark);
      font-size: 19px;
      letter-spacing: -.02em;
    }

    .indicators-sheet-shell {
      overflow: hidden;
      border: 1px solid #dcd8ce;
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(17,40,60,.04);
    }

    .indicators-sheet-scroll {
      overflow-x: hidden;
      overscroll-behavior-inline: contain;
    }

    .indicators-sheet {
      width: 100%;
      min-width: 0;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      font-size: 8px;
      color: var(--dark);
    }

    .indicators-sheet th,
    .indicators-sheet td {
      min-width: 0;
      width: auto;
      height: 30px;
      padding: 2px 2px;
      border-right: 1px solid #e4e1da;
      border-bottom: 1px solid #e7e4dd;
      text-align: center;
      vertical-align: middle;
      background: #fff;
      overflow: hidden;
    }

    .indicators-sheet th.week-number,
    .indicators-sheet td.week-number {
      min-width: 36px;
      width: 36px;
    }

    .indicators-sheet th.week-dates,
    .indicators-sheet td.week-dates {
      min-width: 72px;
      width: 72px;
      white-space: nowrap;
      font-size: 7.5px;
    }

    .indicators-sheet thead th {
      position: sticky;
      top: 0;
      z-index: 4;
      font-weight: 900;
      line-height: 1.12;
    }

    .indicators-sheet .indicator-category-row th {
      height: 24px;
      padding: 4px 6px;
      border-bottom: 0;
      color: #182635;
      font-size: 8.5px;
      letter-spacing: .02em;
    }

    .indicators-sheet .indicator-category-row .category-meta {
      background: #d8d1ee;
    }

    .indicators-sheet .indicator-category-row .category-generation {
      background: #e98986;
    }

    .indicators-sheet .indicator-category-row .category-additions {
      background: #f3a61b;
    }

    .indicators-sheet .indicator-category-row .category-followup {
      background: #f1e80f;
    }

    .indicators-sheet .indicator-column-row th {
      top: 24px;
      z-index: 5;
      height: 48px;
      background: #fff;
      color: #2f3a43;
      font-size: 6.2px;
      line-height: 1.08;
      padding: 5px 3px;
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
      hyphens: none;
    }

    .indicators-sheet .sticky-week {
      position: sticky;
      left: 0;
      z-index: 7;
      background: #fff;
      box-shadow: 1px 0 0 #ddd9d0;
    }

    .indicators-sheet .sticky-dates {
      position: sticky;
      left: 36px;
      z-index: 7;
      background: #fff;
      box-shadow: 1px 0 0 #d4d0c7;
    }

    .indicators-sheet thead .sticky-week,
    .indicators-sheet thead .sticky-dates {
      z-index: 10;
    }

    .indicators-sheet tbody tr:nth-child(even):not(.indicator-total-row):not(.indicator-goal-row):not(.indicator-difference-row) td {
      background: #fbfbfa;
    }

    .indicators-sheet tbody tr:nth-child(even) .sticky-week,
    .indicators-sheet tbody tr:nth-child(even) .sticky-dates {
      background: #fbfbfa;
    }

    .indicator-cell-input {
      width: calc(100% - 4px);
      min-width: 0;
      height: 23px;
      padding: 1px 3px;
      border: 1px solid #d7dde2;
      border-radius: 3px;
      background: #fff;
      color: var(--dark);
      font: inherit;
      font-size: 8px;
      font-weight: 750;
      text-align: center;
      outline: none;
      margin: 0 auto;
      display: block;
    }

    /* Desktop fit: keep all 19 indicator columns visible without horizontal scrolling. */
    .indicators-sheet th:nth-child(n+3),
    .indicators-sheet td:nth-child(n+3) {
      width: calc((100% - 108px) / 15);
    }

    .indicator-cell-input:hover {
      border-color: #ddd7c9;
      background: #fff;
    }

    .indicator-cell-input:focus {
      border-color: #cdb167;
      background: #fffdf7;
      box-shadow: 0 0 0 2px rgba(216,187,115,.14);
    }

    .indicator-cell-input:disabled {
      border-color: transparent;
      background: transparent;
      color: #4b555d;
      cursor: default;
    }

    .indicator-goal-row td,
    .indicator-goal-row .sticky-week,
    .indicator-goal-row .sticky-dates {
      background: #f5f2ea !important;
      font-weight: 900;
    }

    .indicator-total-row td,
    .indicator-total-row .sticky-week,
    .indicator-total-row .sticky-dates {
      background: #eef0f1 !important;
      font-weight: 950;
      border-top: 1.5px solid #202f3b;
    }

    .indicator-difference-row td,
    .indicator-difference-row .sticky-week,
    .indicator-difference-row .sticky-dates {
      background: #fff !important;
      font-weight: 900;
      border-bottom: 0;
    }

    .indicator-diff-good {
      color: #168348;
    }

    .indicator-diff-behind {
      color: #b05245;
    }

    .indicator-sheet-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 13px;
      border-top: 1px solid #e7e3da;
      background: #faf9f6;
      color: var(--muted);
      font-size: 8.5px;
    }

    @media (max-width: 900px) {
      .indicators-sheet-scroll {
        overflow-x: auto;
      }

      .indicators-sheet {
        width: max-content;
        min-width: 980px;
      }

      .indicators-sheet th:nth-child(n+3),
      .indicators-sheet td:nth-child(n+3) {
        width: 58px;
      }

      .indicators-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
      }

      .indicators-toolbar {
        grid-template-columns: 1fr 1fr;
      }

      .indicator-summary-strip {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 600px) {
      .indicators-toolbar {
        grid-template-columns: 1fr;
      }

      .indicator-period-tabs {
        width: 100%;
        overflow-x: auto;
      }

      .indicator-period-tab {
        flex: 1 0 auto;
      }

      .indicator-summary-strip {
        grid-template-columns: 1fr 1fr;
      }

      .indicators-sheet th,
      .indicators-sheet td {
        min-width: 68px;
      }
    }

    .agent-tools-view{max-width:1440px;margin:0 auto}
    .agent-tools-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px;padding:28px 30px;border:1px solid rgba(216,187,115,.42);border-radius:18px;background:radial-gradient(circle at 90% 0%,rgba(216,187,115,.24),transparent 34%),linear-gradient(135deg,#11283c 0%,#173a56 100%);box-shadow:0 18px 44px rgba(17,40,60,.10)}
    .agent-tools-kicker,.agent-tools-section-kicker{color:#a4802c;font-size:10px;line-height:1;font-weight:950;letter-spacing:.10em;text-transform:uppercase}
    .agent-tools-hero .agent-tools-kicker{color:#e6cb83}
    .agent-tools-hero h1{margin:8px 0 6px;color:#fff;font-size:clamp(30px,4vw,44px);line-height:1.05;letter-spacing:-.035em}
    .agent-tools-hero p{margin:0;max-width:650px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55}
    .agent-tools-hero-mark{width:92px;height:92px;flex:0 0 92px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:24px;background:rgba(255,255,255,.08);transform:rotate(4deg)}
    .agent-tools-hero-mark svg{width:54px;height:54px;fill:none;stroke:#e7cc84;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .agent-tools-section{margin-top:26px}
    .agent-tools-section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:13px;padding:0 2px}
    .agent-tools-section-heading h2{margin:5px 0 3px;color:var(--dark);font-size:21px;letter-spacing:-.02em}
    .agent-tools-section-heading p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
    .agent-tools-primary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .agent-action-card{position:relative;overflow:hidden;min-height:290px;padding:24px;border:1px solid var(--line);border-radius:17px;background:#fff;text-align:left;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(17,40,60,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
    .agent-action-card::after{content:"";position:absolute;width:210px;height:210px;right:-80px;bottom:-105px;border-radius:50%;pointer-events:none;opacity:.55}
    .agent-action-card.under-contract::after{background:rgba(22,163,74,.10)}
    .agent-action-card.open-house::after{background:rgba(48,113,167,.11)}
    .agent-action-card:hover{transform:translateY(-3px);border-color:#d8c384;box-shadow:0 18px 38px rgba(17,40,60,.10)}
    .agent-action-card:focus-visible{outline:3px solid rgba(216,187,115,.28);outline-offset:3px}
    .agent-action-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}
    .agent-action-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:15px}
    .under-contract .agent-action-icon{color:#14783b;background:#eaf8ef;border:1px solid #cdebd7}
    .open-house .agent-action-icon{color:#215e8c;background:#edf6fc;border:1px solid #d1e7f5}
    .agent-action-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .agent-action-time{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border:1px solid #e6dfcf;border-radius:999px;background:#fbfaf7;color:#7c715c;font-size:10px;font-weight:900;white-space:nowrap}
    .agent-action-copy{position:relative;z-index:1}
    .agent-action-eyebrow{margin-bottom:6px;color:#987628;font-size:9px;font-weight:950;letter-spacing:.09em;text-transform:uppercase}
    .agent-action-copy h3{margin:0 0 8px;color:var(--dark);font-size:23px;line-height:1.2;letter-spacing:-.02em}
    .agent-action-copy p{margin:0;max-width:560px;color:#617589;font-size:12px;line-height:1.55}
    .agent-action-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
    .agent-action-meta span{padding:6px 9px;border:1px solid #e5e1d7;border-radius:999px;background:rgba(250,248,243,.85);color:#6a7781;font-size:9.5px;font-weight:800}
    .agent-action-cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:22px;color:var(--dark);font-size:12px;font-weight:950}
    .agent-action-cta span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--dark);color:#fff;font-size:15px;transition:transform .18s ease}
    .agent-action-card:hover .agent-action-cta span{transform:translateX(2px)}
    .agent-resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
    .agent-resource-card{position:relative;min-height:188px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 7px 22px rgba(17,40,60,.04);display:flex;flex-direction:column;gap:12px}
    .agent-resource-card.property-taxes{background:linear-gradient(180deg,rgba(250,243,223,.66),#fff 55%)}
    .agent-resource-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#f7f3e8;font-size:20px}
    .agent-resource-copy h3{margin:0 0 5px;color:var(--dark);font-size:14px;line-height:1.25}
    .agent-resource-copy p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.5}
    .agent-resource-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
    .agent-resource-pills span{padding:5px 7px;border-radius:999px;background:#f6f3ec;color:#6c6a62;font-size:8.5px;font-weight:850}
    .agent-resource-status,.agent-tools-coming-note{display:inline-flex;align-items:center;width:max-content;margin-top:auto;padding:5px 8px;border:1px solid #e5dfcf;border-radius:999px;background:#fbfaf7;color:#92846a;font-size:8.5px;font-weight:900;white-space:nowrap}
    .agent-tools-coming-note{margin-top:0}
    .agent-tools-recent-section{margin-bottom:20px}
    .agent-tools-section-heading.recent{align-items:center}
    .agent-tools-history-button{min-height:38px;padding:9px 13px;border:1px solid #d9d4c8;border-radius:9px;background:#fff;color:var(--dark);cursor:pointer;font-size:10.5px;font-weight:900;white-space:nowrap;transition:border-color .15s ease,background-color .15s ease}
    .agent-tools-history-button:hover{border-color:#cfb66e;background:#fffdf7}
    .agent-tools-recent-list{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 7px 22px rgba(17,40,60,.04)}
    .agent-tools-recent-loading,.agent-tools-recent-empty{padding:26px 20px;color:var(--muted);font-size:11px;text-align:center}
    .agent-tools-recent-row{width:100%;min-height:68px;display:grid;grid-template-columns:38px minmax(0,1.6fr) minmax(125px,.7fr) auto;align-items:center;gap:13px;padding:12px 16px;border:0;border-bottom:1px solid #eee9df;background:#fff;color:inherit;text-align:left;cursor:pointer;transition:background-color .15s ease}
    .agent-tools-recent-row:last-child{border-bottom:0}.agent-tools-recent-row:hover{background:#fcfbf7}
    .agent-tools-recent-type-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:15px}
    .agent-tools-recent-type-icon.under_contract{background:#eaf8ef}.agent-tools-recent-type-icon.open_house{background:#edf6fc}
    .agent-tools-recent-main{min-width:0}.agent-tools-recent-main strong{display:block;overflow:hidden;color:var(--dark);font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}
    .agent-tools-recent-main span,.agent-tools-recent-detail{display:block;margin-top:3px;color:var(--muted);font-size:9.5px;line-height:1.3}
    .agent-tools-recent-status{justify-self:end}
    @media(max-width:1050px){.agent-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media(max-width:760px){
      .agent-tools-view{max-width:none}.agent-tools-hero{margin-top:0;padding:22px 18px;border-radius:15px}.agent-tools-hero-mark{display:none}.agent-tools-hero h1{font-size:29px}
      .agent-tools-primary-grid,.agent-resource-grid{grid-template-columns:1fr}.agent-action-card{min-height:260px;padding:19px}.agent-action-copy h3{font-size:20px}
      .agent-tools-section-heading,.agent-tools-section-heading.recent{align-items:flex-start;flex-direction:column}.agent-tools-coming-note{display:none}.agent-tools-history-button{width:100%}
      .agent-tools-recent-row{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding:12px}.agent-tools-recent-detail{display:none}.agent-tools-recent-status{transform:scale(.92);transform-origin:right center}
    }

  
    /* Live Agent Resource Cards */
    .agent-resource-card.interactive {
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      text-align: left;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

    button.agent-resource-card.interactive {
      width: 100%;
      font: inherit;
    }

    .agent-resource-card.interactive:hover {
      transform: translateY(-2px);
      border-color: #d7c07e;
      box-shadow: 0 13px 30px rgba(17,40,60,.08);
    }

    .agent-resource-card.interactive:focus-visible {
      outline: 3px solid rgba(216,187,115,.28);
      outline-offset: 3px;
    }

    .agent-resource-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .agent-resource-open-mark {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #f7f4ec;
      color: var(--dark);
      font-size: 13px;
      font-weight: 950;
      transition: transform .16s ease;
    }

    .agent-resource-card.interactive:hover .agent-resource-open-mark {
      transform: translate(1px,-1px);
    }

    .agent-resource-ready,
    .agent-tools-live-note {
      display: inline-flex;
      align-items: center;
      width: max-content;
      margin-top: auto;
      padding: 5px 8px;
      border-radius: 999px;
      background: #eef7f1;
      color: #287044;
      border: 1px solid #d5eadc;
      font-size: 8.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .agent-tools-live-note {
      margin-top: 0;
    }

    /* Property Tax Resource Picker */
    .property-tax-modal {
      width: min(720px, calc(100vw - 28px));
      max-height: min(760px, calc(100dvh - 28px));
      overflow: auto;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 30px 80px rgba(17,40,60,.24);
      border: 1px solid rgba(216,187,115,.25);
    }

    .property-tax-modal-header {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      padding: 22px 22px 17px;
      border-bottom: 1px solid #eee8db;
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(10px);
    }

    .property-tax-modal-header h2 {
      margin: 6px 0 4px;
      color: var(--dark);
      font-size: 24px;
      letter-spacing: -.025em;
    }

    .property-tax-modal-header p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .property-tax-state-tabs {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 8px;
      padding: 16px 22px 8px;
    }

    .property-tax-state-tab {
      min-height: 52px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border: 1px solid #ded9cd;
      border-radius: 11px;
      background: #faf9f6;
      color: #607285;
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
      transition: .15s ease;
    }

    .property-tax-state-tab.active {
      border-color: #cfb66e;
      background: #fff9e9;
      color: var(--dark);
      box-shadow: 0 0 0 2px rgba(216,187,115,.10);
    }

    .property-tax-state-icon {
      font-size: 18px;
    }

    .property-tax-state-count {
      margin-left: auto;
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: white;
      border: 1px solid #e2ddcf;
      font-size: 9px;
    }

    .property-tax-county-grid {
      display: grid;
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 9px;
      padding: 12px 22px 22px;
    }

    .property-tax-county-card {
      min-height: 72px;
      display: grid;
      grid-template-columns: 34px minmax(0,1fr) 22px;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border: 1px solid #e4dfd4;
      border-radius: 12px;
      background: white;
      color: inherit;
      text-decoration: none;
      transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
    }

    .property-tax-county-card:hover {
      transform: translateY(-1px);
      border-color: #d2b96e;
      background: #fffdf8;
    }

    .property-tax-county-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: #f7f3e8;
      font-size: 15px;
    }

    .property-tax-county-card strong {
      display: block;
      color: var(--dark);
      font-size: 11px;
      line-height: 1.25;
    }

    .property-tax-county-card small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.3;
    }

    .property-tax-external {
      color: #9a7b2f;
      font-weight: 900;
      font-size: 13px;
      justify-self: end;
    }

    .property-tax-modal-footer {
      margin: 0 22px 22px;
      padding: 11px 12px;
      border-radius: 10px;
      background: #f6f8fa;
      color: #718293;
      font-size: 9.5px;
      line-height: 1.4;
      text-align: center;
    }

    @media(max-width:700px) {
      .property-tax-state-tabs,
      .property-tax-county-grid {
        grid-template-columns: 1fr;
      }

      .property-tax-modal-header,
      .property-tax-state-tabs,
      .property-tax-county-grid {
        padding-left: 15px;
        padding-right: 15px;
      }

      .property-tax-modal-footer {
        margin-left: 15px;
        margin-right: 15px;
      }

      .property-tax-modal-header h2 {
        font-size: 21px;
      }
    }

  
    /* TEAM CALENDAR */
    .nav-subitem{position:relative;width:calc(100% - 12px);margin-left:12px;padding-left:14px;font-size:12.5px;opacity:.86}
    .nav-subitem::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;border-radius:999px;background:rgba(255,255,255,.13)}
    .nav-subitem .nav-icon{width:16px;height:16px;flex-basis:16px}
    .nav-subitem.active{opacity:1}

    .team-calendar-view{max-width:1440px;margin:0 auto}
    .team-calendar-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:16px;padding:22px 24px;border:1px solid rgba(216,187,115,.40);border-radius:17px;background:radial-gradient(circle at 94% -20%,rgba(216,187,115,.30),transparent 34%),linear-gradient(135deg,#11283c 0%,#173a56 100%);box-shadow:0 16px 38px rgba(17,40,60,.09)}
    .team-calendar-title-wrap{display:flex;align-items:center;gap:16px;min-width:0}
    .team-calendar-logo{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.08);color:#e8cc82}
    .team-calendar-logo svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    .team-calendar-kicker{color:#e6cb83;font-size:9px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
    .team-calendar-hero h1{margin:5px 0 4px;color:#fff;font-size:29px;line-height:1.1;letter-spacing:-.03em}
    .team-calendar-hero p{margin:0;color:rgba(255,255,255,.68);font-size:11px;line-height:1.45}
    .team-calendar-google-link{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;padding:9px 13px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-size:10.5px;font-weight:900;transition:background-color .15s ease,transform .15s ease}
    .team-calendar-google-link:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}

    .team-calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:0 2px}
    .team-calendar-view-switcher{display:inline-flex;padding:3px;border:1px solid #dfd9cc;border-radius:10px;background:#f7f5ef}
    .team-calendar-view-button{min-width:74px;min-height:32px;padding:6px 11px;border:0;border-radius:7px;background:transparent;color:#6c7a86;cursor:pointer;font-size:10px;font-weight:900;transition:.15s ease}
    .team-calendar-view-button.active{background:#fff;color:var(--dark);box-shadow:0 2px 8px rgba(17,40,60,.08)}
    .team-calendar-live-pill{display:inline-flex;align-items:center;gap:6px;color:#66798b;font-size:9.5px;font-weight:850}
    .team-calendar-live-dot{width:7px;height:7px;border-radius:50%;background:#22a559;box-shadow:0 0 0 4px rgba(34,165,89,.09)}

    .team-calendar-shell{position:relative;overflow:hidden;min-height:720px;border:1px solid #e2ddd2;border-radius:16px;background:#fff;box-shadow:0 12px 34px rgba(17,40,60,.055)}
    .team-calendar-accent{height:4px;background:linear-gradient(90deg,#d8bb73,#ead9a9 50%,#d8bb73)}
    .team-calendar-frame{display:block;width:100%;height:716px;border:0;background:#fff}
    .team-calendar-footer-note{display:flex;align-items:center;gap:7px;margin-top:10px;padding:0 3px;color:#82909a;font-size:9.5px;line-height:1.4}

    @media(max-width:760px){
.team-calendar-hero{align-items:flex-start;flex-direction:column;padding:18px}
      .team-calendar-title-wrap{align-items:flex-start}
      .team-calendar-logo{width:48px;height:48px;flex-basis:48px;border-radius:13px}
      .team-calendar-logo svg{width:27px;height:27px}
      .team-calendar-hero h1{font-size:25px}
      .team-calendar-google-link{width:100%}
      .team-calendar-toolbar{align-items:stretch;flex-direction:column}
      .team-calendar-view-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
      .team-calendar-live-pill{align-self:flex-end}
      .team-calendar-shell{min-height:620px;border-radius:13px}
      .team-calendar-frame{height:616px}
    }

  
    /* =========================================================
       CONNECTED DATABASE — RELATIONSHIP CARD LAYOUT
       ========================================================= */

    .client-relationship-selector {
      display: grid;
      grid-template-columns: 1.25fr repeat(5, minmax(0,1fr));
      gap: 10px;
      margin: 14px 0 14px;
    }

    .client-relationship-card {
      position: relative;
      min-width: 0;
      min-height: 112px;
      padding: 14px 14px 13px;
      border: 1px solid #e0ddd5;
      border-radius: 13px;
      background: white;
      color: var(--dark);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 5px 18px rgba(17,40,60,.035);
      transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
    }

    .client-relationship-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 11px 24px rgba(17,40,60,.07);
    }

    .client-relationship-card.active {
      border-color: currentColor;
      box-shadow:
        0 0 0 2px color-mix(in srgb, currentColor 13%, transparent),
        0 10px 24px rgba(17,40,60,.06);
    }

    .client-relationship-card.all {
      color: #284459;
      background: linear-gradient(145deg,#ffffff,#f6f8fa);
    }

    .client-relationship-card.level-a {
      color: #168344;
      background: linear-gradient(145deg,#ffffff,#f1fbf4);
    }

    .client-relationship-card.level-b {
      color: #a57d00;
      background: linear-gradient(145deg,#ffffff,#fffbea);
    }

    .client-relationship-card.level-c {
      color: #c85d12;
      background: linear-gradient(145deg,#ffffff,#fff5ed);
    }

    .client-relationship-card.level-d {
      color: #607487;
      background: linear-gradient(145deg,#ffffff,#f3f6f8);
    }

    .client-relationship-card.no-level {
      color: #6f7780;
      background: linear-gradient(145deg,#ffffff,#f5f5f4);
    }

    .client-relationship-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }

    .client-relationship-letter,
    .client-relationship-all-icon {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: color-mix(in srgb, currentColor 10%, white);
      border: 1px solid color-mix(in srgb, currentColor 18%, white);
      color: currentColor;
      font-size: 12px;
      font-weight: 950;
    }

    .client-relationship-all-icon {
      font-size: 17px;
    }

    .client-relationship-count {
      color: currentColor;
      font-size: 18px;
      line-height: 1;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .client-relationship-card strong {
      display: block;
      overflow: hidden;
      color: var(--dark);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .client-relationship-card small {
      display: block;
      overflow: hidden;
      margin-top: 4px;
      color: #82909b;
      font-size: 9px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .client-continuous-list {
      margin-top: 0;
    }

    .client-list-context {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border: 1px solid var(--line);
      border-bottom: 0;
      border-radius: 13px 13px 0 0;
      background: #fbfaf7;
    }

    .client-list-context strong {
      color: var(--dark);
      font-size: 10.5px;
      font-weight: 900;
    }

    .client-list-context span {
      color: var(--muted);
      font-size: 9.5px;
      font-weight: 800;
    }

    .client-continuous-list .table-wrap {
      border-radius: 0 0 13px 13px;
    }

    @media (max-width: 1050px) {
      .client-relationship-selector {
        grid-template-columns: repeat(3, minmax(0,1fr));
      }
    }

    @media (max-width: 700px) {
      .client-relationship-selector {
        display: flex;
        gap: 8px;
        margin: 10px -2px 12px;
        padding: 2px 2px 7px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .client-relationship-selector::-webkit-scrollbar {
        display: none;
      }

      .client-relationship-card {
        flex: 0 0 138px;
        min-height: 96px;
        padding: 11px;
        border-radius: 12px;
      }

      .client-relationship-card.all {
        flex-basis: 154px;
      }

      .client-relationship-card-top {
        margin-bottom: 8px;
      }

      .client-relationship-letter,
      .client-relationship-all-icon {
        width: 27px;
        height: 27px;
      }

      .client-relationship-count {
        font-size: 16px;
      }

      .client-relationship-card strong {
        font-size: 11px;
      }

      .client-list-context {
        margin-bottom: 0;
        padding: 9px 11px;
      }
    }

  
    /* =========================================================
       DASHBOARD INLINE PIPELINE EDITING — CLEAN TEXT VERSION
       Client | Status | Buyer/Seller | Potential GCI
       ========================================================= */

    .dashboard-group-heading-wrap {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .dashboard-quick-edit-hint {
      color: #87939d;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: .015em;
      white-space: nowrap;
    }

    .dashboard-client-name-cell {
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }

    .dashboard-client-primary {
      display: block;
      width: max-content;
      max-width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--dark);
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      line-height: 1.3;
      font-weight: 950;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dashboard-client-primary:hover {
      color: #8c7338;
    }

    .dashboard-client-primary:focus-visible,
    .dashboard-deal-open:focus-visible,
    .dashboard-deal-text-select:focus-visible {
      outline: 2px solid rgba(216,187,115,.30);
      outline-offset: 2px;
      border-radius: 3px;
    }

    .dashboard-deal-secondary-wrap {
      min-width: 0;
      margin-top: 3px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .dashboard-deal-secondary-wrap .dashboard-deal-secondary {
      flex: 1 1 auto;
    }

    .dashboard-remove-potential {
      flex: 0 0 auto;
      margin: 0;
      padding: 1px 0;
      border: 0;
      background: transparent;
      color: #b24b4b;
      font: inherit;
      font-size: 7.5px;
      line-height: 1.2;
      font-weight: 850;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
      opacity: .72;
    }

    .dashboard-remove-potential:hover,
    .dashboard-remove-potential:focus-visible {
      color: #922f2f;
      opacity: 1;
    }

    .dashboard-deal-secondary,
    .dashboard-deal-text-select {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #8c98a2;
      font: inherit;
      font-size: 8.5px;
      line-height: 1.3;
      font-weight: 750;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      outline: none;
    }

    .dashboard-deal-secondary.new-opportunity {
      color: #a89055;
      font-style: italic;
    }

    .dashboard-deal-open {
      cursor: pointer;
    }

    .dashboard-deal-open:hover {
      color: #647482;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .dashboard-deal-text-select {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
    }

    .dashboard-inline-edit-cell {
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }

    /* Plain-text editable controls — fully borderless */
    .dashboard-client-status-select,
    .dashboard-buy-sell-select,
    .dashboard-potential-gci-input {
      width: 100%;
      min-width: 0;
      height: 28px;
      margin: 0;
      padding: 3px 2px;
      border: none !important;
      outline: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      -webkit-appearance: none;
      appearance: none;
      color: var(--dark);
      font: inherit;
      font-size: 9.5px;
      font-weight: 900;
      box-shadow: none !important;
      transition:
        color .14s ease,
        background-color .14s ease,
        opacity .14s ease;
    }

    .dashboard-client-status-select,
    .dashboard-buy-sell-select {
      cursor: pointer;
      padding-right: 2px;
    }

    .dashboard-client-status-select:hover,
    .dashboard-buy-sell-select:hover,
    .dashboard-potential-gci-input:hover {
      background: rgba(216,187,115,.045) !important;
    }

    .dashboard-client-status-select:focus,
    .dashboard-buy-sell-select:focus,
    .dashboard-potential-gci-input:focus {
      background: rgba(216,187,115,.065) !important;
    }

    .dashboard-client-status-select.saving,
    .dashboard-buy-sell-select.saving,
    .dashboard-potential-gci-input.saving {
      opacity: .5;
      cursor: wait;
    }

    .dashboard-potential-gci-input.invalid {
      color: #b84747;
      background: rgba(207,93,93,.05) !important;
    }

    .dashboard-client-status-select.potential {
      color: #7554a6;
    }

    .dashboard-client-status-select.coming-soon,
    .dashboard-client-status-select.coming_soon {
      color: #a06c14;
    }

    .dashboard-client-status-select.active {
      color: #237044;
    }

    .dashboard-client-status-select.pending {
      color: #3d6f96;
    }

    .dashboard-buy-sell-select {
      color: #314c61;
      font-weight: 950;
    }

    .dashboard-gci-input-wrap {
      position: relative;
      min-width: 0;
    }

    .dashboard-potential-gci-input {
      padding-right: 22px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .dashboard-inline-saved {
      position: absolute;
      right: 2px;
      top: 50%;
      transform: translateY(-50%);
      color: #229258;
      font-size: 10px;
      font-weight: 950;
      pointer-events: none;
    }

    @media (max-width: 700px) {
      .dashboard-quick-edit-hint {
        display: none;
      }

      .dashboard-client-table thead {
        display: none;
      }

      .dashboard-client-table tbody {
        display: grid;
        gap: 8px;
        padding: 8px;
      }

      .dashboard-client-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px 12px;
        align-items: end;
        padding: 12px;
        border: 1px solid #e4e7e8;
        border-radius: 12px;
        background: white;
      }

      .dashboard-client-table tbody td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
      }

      .dashboard-client-table tbody td:nth-child(1) {
        grid-column: 1 / -1;
        padding-bottom: 2px !important;
      }

      .dashboard-client-primary {
        font-size: 12px;
      }

      .dashboard-deal-secondary,
      .dashboard-deal-text-select {
        font-size: 9px;
      }

      .dashboard-client-status-select,
      .dashboard-buy-sell-select,
      .dashboard-potential-gci-input {
        height: 34px;
        font-size: 10.5px;
      }

      .dashboard-client-table tbody td:nth-child(2)::before,
      .dashboard-client-table tbody td:nth-child(3)::before,
      .dashboard-client-table tbody td:nth-child(4)::before {
        display: block;
        margin-bottom: 2px;
        color: #8c969e;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
      }

      .dashboard-client-table tbody td:nth-child(2)::before {
        content: "Status";
      }

      .dashboard-client-table tbody td:nth-child(3)::before {
        content: "Buy / Sell";
      }

      .dashboard-client-table tbody td:nth-child(4)::before {
        content: "Potential GCI";
      }
    }


    /* =========================================================
       TRANSACTIONS — CLICKUP COLUMN SET + ADMIN INLINE EDITING
       ========================================================= */

    .transaction-toolbar .toolbar-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .transaction-edit-mode-note {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 9px;
      font-weight: 850;
      color: #81909c;
    }

    .transaction-edit-mode-note.admin::before {
      content: "✓";
      color: #258452;
      font-weight: 950;
    }

    .transaction-edit-mode-note.readonly::before {
      content: "◦";
      color: #8d99a3;
      font-weight: 950;
    }

    .transaction-table-scroll {
      overflow-x: auto !important;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #c3c8cb transparent;
    }

    .transaction-table {
      table-layout: fixed;
      width: max-content !important;
      min-width: 100% !important;
    }

    .transaction-table.admin-expanded {
      min-width: 2510px !important;
    }

    .transaction-table.agent-readonly {
      min-width: 1580px !important;
    }

    .transaction-table th,
    .transaction-table td {
      box-sizing: border-box;
    }

    /* Freeze Agent + Transaction columns while the rest scrolls horizontally. */
    .transaction-table th:nth-child(1),
    .transaction-table td:nth-child(1) {
      position: sticky;
      left: 0;
      z-index: 4;
      background: #fff;
    }

    .transaction-table th:nth-child(2),
    .transaction-table td:nth-child(2) {
      position: sticky;
      left: 64px;
      z-index: 4;
      background: #fff;
      box-shadow: 1px 0 0 #e3e8eb;
    }

    .transaction-table th:nth-child(1),
    .transaction-table th:nth-child(2) {
      z-index: 7;
      background: #f7f9fa;
    }

    .transaction-table tbody tr:not(.transaction-status-group-row):hover td:nth-child(1),
    .transaction-table tbody tr:not(.transaction-status-group-row):hover td:nth-child(2) {
      background: #f8fafb;
    }

    .transaction-table th {
      height: 43px;
      padding: 10px 12px;
      background: #f7f9fa;
      color: #73818c;
      font-size: 9.5px;
      letter-spacing: .045em;
    }

    .transaction-table td {
      height: 48px;
      padding: 6px 12px;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .transaction-table .transaction-admin-column {
      background-color: #fffdf7;
    }

    .transaction-table th.transaction-admin-column {
      background: #faf6e9;
    }

    .transaction-private-label {
      display: inline-flex;
      align-items: center;
      margin-left: 4px;
      padding: 2px 4px;
      border-radius: 999px;
      background: #eee4c5;
      color: #7b672f;
      font-size: 6.5px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
      vertical-align: middle;
    }

    .transaction-name-inline-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .transaction-inline-open {
      flex: 0 0 auto;
      padding: 2px 0;
      border: 0;
      background: transparent;
      color: #a18742;
      cursor: pointer;
      font-size: 8px;
      font-weight: 900;
      opacity: 0;
      transition: opacity .12s ease;
    }

    .transaction-table tbody tr:hover .transaction-inline-open,
    .transaction-inline-open:focus-visible {
      opacity: 1;
    }

    .transaction-row-open {
      width: 100%;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--dark);
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 900;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .transaction-row-open:hover {
      color: #866e34;
    }

    .transaction-inline-fallback {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      color: #9aa3aa;
      font-size: 8px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .transaction-agent-readonly {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .transaction-agent-readonly > span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .transaction-inline-control {
      display: block;
      width: 100%;
      min-width: 0;
      height: 29px;
      margin: 0;
      padding: 4px 3px;
      border: 0 !important;
      border-bottom: 1px solid transparent !important;
      border-radius: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      color: #243746;
      font: inherit;
      font-size: 10px;
      font-weight: 760;
      box-shadow: none !important;
      text-overflow: ellipsis;
      transition:
        background-color .12s ease,
        border-color .12s ease,
        opacity .12s ease;
    }

    select.transaction-inline-control {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      padding-right: 3px;
    }

    .transaction-inline-control:hover {
      background: rgba(216,187,115,.055) !important;
      border-bottom-color: rgba(192,166,94,.45) !important;
    }

    .transaction-inline-control:focus {
      background: rgba(216,187,115,.08) !important;
      border-bottom-color: #b99a45 !important;
    }

    .transaction-inline-control.saving {
      opacity: .45;
      cursor: wait;
    }

    .transaction-inline-control.saved {
      background: rgba(38,145,88,.07) !important;
    }

    .transaction-inline-control.invalid {
      color: #b84747;
      background: rgba(207,93,93,.06) !important;
      border-bottom-color: #cf5d5d !important;
    }

    .transaction-inline-money {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .transaction-inline-money.admin-money {
      color: #725f2e;
    }

    .transaction-inline-date {
      min-width: 112px;
    }

    .transaction-table .unlinked-pill {
      font-size: 8px;
    }

    /* Transaction Type visual distinction: Buyer = light, Seller = dark. */
    .transaction-type-pill {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: auto !important;
      min-width: 76px !important;
      max-width: 118px !important;
      min-height: 27px !important;
      height: 27px !important;
      padding: 4px 10px !important;
      border: 0 !important;
      border-radius: 7px !important;
      font-size: 10.5px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      text-align: center !important;
      text-align-last: center !important;
      white-space: nowrap !important;
      box-shadow: none !important;
    }

    .transaction-type-seller,
    .transaction-type-seller:hover,
    .transaction-type-seller:focus {
      background: #52585d !important;
      color: #e5e7e9 !important;
      border-bottom-color: transparent !important;
    }

    .transaction-type-buyer,
    .transaction-type-buyer:hover,
    .transaction-type-buyer:focus {
      background: #e3e5e7 !important;
      color: #343a40 !important;
      border-bottom-color: transparent !important;
    }

    .transaction-type-other {
      background: transparent !important;
      color: #243746 !important;
    }

    select.transaction-type-pill {
      appearance: none !important;
      -webkit-appearance: none !important;
      cursor: pointer;
    }

    select.transaction-type-pill option {
      background: #ffffff;
      color: #243746;
      font-weight: 700;
      text-align: left;
    }

    @media (max-width: 700px) {
      /* Existing mobile table-card rules are kept, but labels now come
         directly from the rendered columns so admin/private columns stay correct. */
      .transaction-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
      }

      .transaction-table th:first-child,
      .transaction-table td:first-child {
        position: static !important;
        box-shadow: none !important;
      }

      .transaction-table td::before {
        content: attr(data-label) !important;
      }

      .transaction-table td.transaction-admin-column {
        background: #fffdf8 !important;
      }

      .transaction-inline-control {
        height: 34px;
        font-size: 11px;
      }

      .transaction-inline-open {
        opacity: 1;
      }
    }

  
    /* =========================================================
       TRANSACTION STATUS GROUPS
       Pending -> Closed -> Cancelled -> Withdrawn -> Other
       ========================================================= */

    .transaction-status-group-row td {
      position: static !important;
      height: auto !important;
      padding: 11px 12px 7px !important;
      border-bottom: 0 !important;
      background: #fff !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .transaction-status-group-row:first-child td {
      padding-top: 9px !important;
    }

    .transaction-status-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .transaction-status-group-pill,
    .transaction-status-pill,
    .transaction-status-inline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 25px;
      padding: 4px 10px;
      border: 0 !important;
      border-radius: 7px !important;
      font-size: 9px;
      line-height: 1;
      font-weight: 950 !important;
      letter-spacing: .025em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: none !important;
    }

    /* ClickUp-style status colors. Same status = same color everywhere. */
    .tx-status-potential {
      background: #ed4f5b !important;
      color: #ffffff !important;
    }

    .tx-status-coming-soon {
      background: #f0a13a !important;
      color: #ffffff !important;
    }

    .tx-status-active {
      background: #3d86d8 !important;
      color: #ffffff !important;
    }

    .tx-status-pending {
      background: #33a86b !important;
      color: #ffffff !important;
    }

    .tx-status-closed {
      background: #6f7881 !important;
      color: #ffffff !important;
    }

    .tx-status-cancelled {
      background: #b94747 !important;
      color: #ffffff !important;
    }

    .tx-status-withdrawn {
      background: #8b65b5 !important;
      color: #ffffff !important;
    }

    .tx-status-other,
    .tx-status-default {
      background: #7f8d99 !important;
      color: #ffffff !important;
    }

    /* Admin status remains a real editable select, but visually reads as a status tag. */
    select.transaction-status-inline {
      width: auto !important;
      min-width: 92px;
      max-width: 125px;
      height: 27px !important;
      padding: 4px 9px !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      cursor: pointer;
      text-align: center;
      text-align-last: center;
    }

    select.transaction-status-inline:hover,
    select.transaction-status-inline:focus {
      filter: brightness(.95);
      background-image: none !important;
    }

    select.transaction-status-inline option {
      background: #ffffff;
      color: #243746;
      text-transform: none;
      font-weight: 700;
    }

    .transaction-status-group-count {
      color: #88959f;
      font-size: 9.5px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .transaction-status-group-row + tr td {
      border-top: 1px solid #eef1f2;
    }

    @media (max-width: 700px) {
      .transaction-status-group-row {
        display: block !important;
        margin-top: 10px;
      }

      .transaction-status-group-row td {
        display: block !important;
        padding: 7px 4px 5px !important;
        background: transparent !important;
      }

      .transaction-status-group-row td::before {
        content: none !important;
        display: none !important;
      }

      .transaction-status-group-header {
        padding: 0 2px;
      }
    }

  
    /* =========================================================
       TRANSACTIONS — COMPACT DENSITY + AVATAR ASSIGNEE
       ========================================================= */

    .transaction-table.admin-expanded {
      min-width: 2000px !important;
    }

    .transaction-table.agent-readonly {
      min-width: 1465px !important;
    }

    .transaction-table th {
      height: 41px !important;
      padding: 7px 8px !important;
      font-size: 11.5px !important;
      letter-spacing: .02em !important;
    }

    .transaction-table td {
      height: 47px !important;
      padding: 5px 8px !important;
      font-size: 12.5px !important;
    }

    .transaction-table .sort-label {
      gap: 3px !important;
    }

    .transaction-private-label {
      margin-left: 2px !important;
      padding: 1px 3px !important;
      font-size: 5.5px !important;
    }

    .transaction-inline-control {
      height: 30px !important;
      padding: 2px 2px !important;
      font-size: 12px !important;
    }

    select.transaction-status-inline {
      min-width: 92px !important;
      max-width: 120px !important;
      height: 29px !important;
      padding: 3px 8px !important;
      font-size: 10.5px !important;
    }

    .transaction-status-group-row td {
      padding: 7px 7px 4px !important;
    }

    .transaction-status-group-pill {
      min-height: 26px !important;
      padding: 4px 8px !important;
      font-size: 9.5px !important;
    }

    .transaction-status-group-count {
      font-size: 11px !important;
    }

    .transaction-assignee-avatar {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      margin: 0 auto;
      vertical-align: middle;
    }

    .transaction-assignee-avatar .team-avatar.avatar-sm {
      width: 28px !important;
      height: 28px !important;
      font-size: 8px !important;
      border-width: 1px !important;
    }

    .transaction-assignee-avatar.editable {
      cursor: pointer;
    }

    .transaction-assignee-avatar.editable:hover .team-avatar {
      box-shadow: 0 0 0 2px rgba(216,187,115,.25);
    }

    .transaction-assignee-native-select {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 0;
      cursor: pointer;
    }

    .transaction-table th[data-transaction-sort="agent"],
    .transaction-table td:nth-child(1) {
      text-align: center !important;
    }

    .transaction-name-inline-wrap {
      gap: 4px !important;
    }

    .transaction-inline-open {
      font-size: 9.5px !important;
    }

    .transaction-inline-fallback {
      margin-top: 2px !important;
      font-size: 10px !important;
    }

    @media (max-width: 700px) {
      .transaction-assignee-avatar {
        margin: 0;
      }

      .transaction-assignee-avatar .team-avatar.avatar-sm {
        width: 30px !important;
        height: 30px !important;
      }

      .transaction-table td {
        font-size: 13px !important;
      }

      .transaction-inline-control {
        height: 35px !important;
        font-size: 12px !important;
      }
    }

  
    .transaction-table .transaction-inline-text,
    .transaction-table .transaction-row-open {
      font-size: 12.5px !important;
      font-weight: 850 !important;
    }

    .transaction-table th .sort-label {
      font-weight: 900 !important;
    }

  
    /* =========================================================
       ACTIVE OPPORTUNITY -> UNDER CONTRACT -> PENDING
       ========================================================= */

    .workflow-active-opportunity-hint {
      margin-top: 6px;
      color: #81909a;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.45;
    }

    #ucActiveOpportunity {
      border-color: #d9c78e;
      background: #fffdf7;
      font-weight: 800;
    }

    #ucActiveOpportunity:focus {
      border-color: #b99a45;
      box-shadow: 0 0 0 3px rgba(216,187,115,.13);
    }

    .transaction-status-readonly-wrap {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .transaction-go-pending {
      padding: 0;
      border: 0;
      background: transparent;
      color: #9b7d31;
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }

    .transaction-go-pending:hover,
    .transaction-go-pending:focus-visible {
      color: #745c20;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    @media (max-width: 700px) {
      .transaction-status-readonly-wrap {
        flex-wrap: wrap;
      }

      .transaction-go-pending {
        font-size: 9.5px;
      }
    }

  
    /* Under Contract choice buttons — selected state readability */
    .workflow-field .workflow-choice input:checked + label,
    .workflow-choice input:checked + label {
      background: var(--dark) !important;
      border-color: var(--dark) !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 1 !important;
    }

    .workflow-field .workflow-choice input:not(:checked) + label {
      background: #ffffff !important;
      color: var(--dark) !important;
      -webkit-text-fill-color: var(--dark) !important;
    }

  
    /* Dashboard opportunity pipeline is transaction-driven.
       One row represents one deal, even when clients own multiple deals. */
    .dashboard-unlinked-client {
      color: #8b969e !important;
      cursor: default !important;
      font-style: italic;
    }

  
    .dashboard-potential-gci-input::placeholder {
      color: #9aa3aa;
      opacity: 1;
      font-weight: 800;
    }

  
    /* Dashboard Buyer / Seller visual tags */
    .dashboard-buy-sell-select {
      width: auto !important;
      min-width: 74px !important;
      max-width: 92px !important;
      height: 26px !important;
      padding: 4px 10px !important;
      border: 0 !important;
      border-radius: 7px !important;
      background: transparent !important;
      color: var(--dark) !important;
      text-align: center;
      text-align-last: center;
      font-weight: 900 !important;
      box-shadow: none !important;
      appearance: none !important;
      -webkit-appearance: none !important;
    }

    .dashboard-buy-sell-select.is-seller {
      background: #4b4f54 !important;
      color: #e2e5e7 !important;
      -webkit-text-fill-color: #e2e5e7 !important;
    }

    .dashboard-buy-sell-select.is-buyer {
      background: #e8eaec !important;
      color: #34383d !important;
      -webkit-text-fill-color: #34383d !important;
    }

    .dashboard-buy-sell-select:not(.is-buyer):not(.is-seller) {
      background: transparent !important;
      color: #7f8991 !important;
      -webkit-text-fill-color: #7f8991 !important;
    }

    .dashboard-buy-sell-select:hover,
    .dashboard-buy-sell-select:focus {
      filter: brightness(.97);
      box-shadow: none !important;
    }

    .dashboard-buy-sell-select option {
      background: #ffffff;
      color: #243746;
      -webkit-text-fill-color: #243746;
    }

  
    /* =========================================================
       BUYER CONTRACT-TO-CLOSE CHECKLIST
       ========================================================= */

    .transaction-checklist-section {
      margin-top: 12px;
      overflow: hidden;
      border: 1px solid #e5e9eb;
      border-radius: 12px;
      background: #fff;
    }

    .transaction-checklist-section:first-child {
      margin-top: 0;
    }

    .transaction-checklist-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 39px;
      padding: 8px 12px;
      border-bottom: 1px solid #e8ecee;
      background: #f7f9fa;
    }

    .transaction-checklist-section-header > div {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .transaction-checklist-section-title {
      color: #263d4f;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .035em;
    }

    .transaction-checklist-section-count {
      min-width: 28px;
      padding: 2px 6px;
      border-radius: 999px;
      background: #e9edef;
      color: #6d7b85;
      font-size: 8px;
      font-weight: 900;
      text-align: center;
    }

    .transaction-checklist-section-tasks
      .transaction-task-row {
      border-bottom: 1px solid #eef1f2;
    }

    .transaction-checklist-section-tasks
      .transaction-task-row:last-child {
      border-bottom: 0;
    }

    .transaction-task-title-line {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .transaction-task-type-badge {
      flex: 0 0 auto;
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 7px;
      font-weight: 950;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .transaction-task-type-badge.email {
      background: #edf4fb;
      color: #3f6f98;
    }

    .transaction-task-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    .task-email-btn {
      padding: 5px 8px;
      border: 1px solid #dccb96;
      border-radius: 7px;
      background: #fffaf0;
      color: #876c28;
      cursor: pointer;
      font-size: 8px;
      font-weight: 900;
    }

    .task-email-btn:hover {
      background: #f9f0d8;
    }

    .transaction-checklist-empty {
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px dashed #d4dadd;
      border-radius: 10px;
      background: #fafbfb;
      color: #71808a;
      font-size: 10px;
      line-height: 1.45;
    }

    .transaction-checklist-empty strong {
      color: #2b4152;
      font-size: 11px;
    }

    .transaction-checklist-empty .secondary-btn {
      width: max-content;
      margin-top: 3px;
    }

    #emailContextNote:not(:empty) {
      margin-top: 6px;
      padding: 7px 9px;
      border-radius: 7px;
      background: #fff8e8;
      color: #80672e;
      line-height: 1.4;
    }

    #emailAttachmentNote {
      margin-top: 5px;
    }

    @media (max-width: 700px) {
      .transaction-task-row {
        grid-template-columns: auto minmax(0,1fr);
      }

      .transaction-task-actions {
        grid-column: 2;
        justify-self: start;
      }

      .task-email-btn,
      .task-edit-btn {
        min-height: 30px;
      }
    }

  
    /* Keep status section label visible during horizontal scrolling. */
    .transaction-status-group-row > td {
      position: relative !important;
      left: auto !important;
      z-index: 2 !important;
      background: #fff !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    .transaction-status-group-sticky {
      position: sticky;
      left: 8px;
      z-index: 8;
      width: max-content;
      max-width: calc(100vw - 340px);
      background: #fff;
      padding-right: 12px;
    }

    .transaction-status-group-header {
      width: max-content !important;
    }

    /* Frozen columns need clear separation from scrolling content. */
    .transaction-table td:nth-child(2),
    .transaction-table th:nth-child(2) {
      border-right: 1px solid #e5eaed;
    }

    @media (max-width: 700px) {
      .transaction-table th:nth-child(1),
      .transaction-table td:nth-child(1),
      .transaction-table th:nth-child(2),
      .transaction-table td:nth-child(2) {
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
      }

      .transaction-status-group-sticky {
        position: static !important;
        max-width: none;
        padding-right: 0;
      }
    }

  
    /* Exact frozen-column geometry: prevents the subtle sticky "snap" on scroll. */
    .transaction-table th:nth-child(1),
    .transaction-table td:nth-child(1) {
      width: 64px !important;
      min-width: 64px !important;
      max-width: 64px !important;
      left: 0 !important;
      transform: translateZ(0);
    }

    .transaction-table th:nth-child(2),
    .transaction-table td:nth-child(2) {
      width: 410px !important;
      min-width: 410px !important;
      max-width: 410px !important;
      left: 64px !important;
      transform: translateZ(0);
    }

    .transaction-agent-header .sort-label {
      justify-content: center !important;
      min-height: 1px;
    }

    .transaction-agent-header .sort-indicator {
      display: none !important;
    }

  
    /* Full transaction address + expandable checklist preview */
    .transaction-table td:nth-child(2) .transaction-inline-text,
    .transaction-table td:nth-child(2) .transaction-row-open,
    .transaction-table td:nth-child(2) .transaction-inline-fallback {
      overflow: visible !important;
      text-overflow: clip !important;
      white-space: nowrap !important;
    }

    .transaction-name-inline-wrap,
    .transaction-name-readonly-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .transaction-checklist-toggle {
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 20px;
      height: 24px;
      margin-left: -2px;
      padding: 0;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: #82909a;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
    }

    .transaction-checklist-toggle:hover,
    .transaction-checklist-toggle:focus-visible {
      background: #edf1f3;
      color: #30495b;
    }

    .transaction-checklist-preview-row > td {
      position: static !important;
      left: auto !important;
      height: auto !important;
      padding: 0 !important;
      background: #f8fafb !important;
      box-shadow:
        inset 0 1px 0 #e5eaed,
        inset 0 -1px 0 #e5eaed !important;
      overflow: visible !important;
    }

    .transaction-checklist-preview-loading,
    .transaction-checklist-preview-empty {
      padding: 14px 18px;
      color: #75838d;
      font-size: 10.5px;
      font-weight: 700;
      text-align: left;
    }

    .transaction-checklist-preview {
      width: min(980px, calc(100vw - 330px));
      margin: 0;
      padding: 12px 18px 14px 18px;
      text-align: left;
    }

    .transaction-checklist-preview-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 9px;
      color: #283f50;
      font-size: 10px;
      text-align: left;
    }

    .transaction-checklist-open-full {
      padding: 0;
      border: 0;
      background: transparent;
      color: #9b7d31;
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
    }

    .transaction-checklist-open-full:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .transaction-checklist-preview-columns {
      display: grid;
      grid-template-columns: 64px minmax(320px, 1fr) 130px;
      align-items: center;
      gap: 10px;
      padding: 0 0 6px 0;
      border-bottom: 1px solid #dfe5e8;
      color: #85919a;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .045em;
      text-transform: uppercase;
      text-align: left;
    }

    .transaction-checklist-preview-section {
      margin-top: 10px;
      text-align: left;
    }

    .transaction-checklist-preview-section-title {
      margin-bottom: 4px;
      color: #7a8790;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: left;
    }

    .transaction-checklist-preview-task {
      display: grid;
      grid-template-columns: 64px minmax(300px, 1fr) 130px;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      padding: 3px 0;
      border-bottom: 1px solid #edf0f2;
      color: #334b5c;
      font-size: 10px;
      text-align: left;
      border-radius: 6px;
    }

    .transaction-checklist-preview-task.email-clickable {
      cursor: pointer;
    }

    .transaction-checklist-preview-task.email-clickable:hover,
    .transaction-checklist-preview-task.email-clickable:focus-visible {
      background: #fffaf0;
      outline: none;
    }

    .transaction-checklist-preview-task:last-child {
      border-bottom: 0;
    }

    .transaction-checklist-preview-task-name {
      overflow: hidden;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }

    .transaction-checklist-preview-date {
      color: #7f8d96;
      font-size: 9px;
      font-weight: 800;
      white-space: nowrap;
      text-align: left;
    }

    .transaction-checklist-preview-date.overdue {
      color: #b54848;
      font-weight: 900;
    }

    .transaction-checklist-preview-assignee {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-width: 0;
    }

    .transaction-checklist-preview-assignee .team-avatar.avatar-sm {
      width: 28px !important;
      height: 28px !important;
      font-size: 8px !important;
      border-width: 1px !important;
    }

    .transaction-checklist-unassigned {
      color: #a0a9af;
      font-size: 10px;
      font-weight: 800;
    }

    @media (max-width: 700px) {
      .transaction-checklist-preview {
        width: 100%;
        padding: 12px;
      }

      .transaction-checklist-preview-loading,
      .transaction-checklist-preview-empty {
        padding: 12px;
      }

      .transaction-checklist-preview-columns {
        display: none;
      }

      .transaction-checklist-preview-task {
        grid-template-columns: 42px minmax(0,1fr);
      }

      .transaction-checklist-preview-assignee {
        grid-column: 1;
        grid-row: 1 / span 2;
      }

      .transaction-checklist-preview-task-name {
        grid-column: 2;
        grid-row: 1;
      }

      .transaction-checklist-preview-date {
        grid-column: 2;
        grid-row: 2;
      }
    }

  
    /* =========================================================
       ADMIN VIEW AS PREVIEW
       ========================================================= */

    .view-as-banner {
      position: sticky;
      top: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 0 0 12px;
      padding: 9px 14px;
      border: 1px solid #d8c178;
      border-radius: 10px;
      background: #fff8df;
      color: #4f452a;
      box-shadow: 0 5px 18px rgba(17,40,60,.08);
      font-size: 10.5px;
      font-weight: 850;
    }

    .view-as-banner.hidden {
      display: none !important;
    }

    .view-as-banner-copy {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .view-as-eye {
      color: #9a7b2d;
      font-size: 13px;
    }

    .view-as-readonly {
      padding: 2px 6px;
      border-radius: 999px;
      background: #efe3b8;
      color: #725d23;
      font-size: 7px;
      font-weight: 950;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    #exitViewAsButton {
      flex: 0 0 auto;
      padding: 6px 10px;
      border: 1px solid #a68a3e;
      border-radius: 7px;
      background: #fff;
      color: #725d23;
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
    }

    #exitViewAsButton:hover {
      background: #f8efcf;
    }

    .view-as-member-btn {
      border-color: #cad8e1 !important;
      background: #f5f9fb !important;
      color: #3e6178 !important;
    }

    @media (max-width: 700px) {
      .view-as-banner {
        position: sticky;
        flex-direction: column;
        align-items: stretch;
      }

      #exitViewAsButton {
        width: 100%;
      }
    }

  
    .transaction-preview-email-badge {
      display: inline-flex;
      align-items: center;
      margin-left: 6px;
      padding: 2px 5px;
      border-radius: 999px;
      background: #edf4fb;
      color: #4f7694;
      font-size: 7px;
      font-weight: 950;
      letter-spacing: .03em;
      text-transform: uppercase;
      vertical-align: middle;
    }

    .transaction-task-email-title {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font: inherit;
      font-weight: inherit;
      text-align: left;
    }

    .transaction-task-email-title:hover,
    .transaction-task-email-title:focus-visible {
      color: #8a6d25;
      text-decoration: underline;
      text-underline-offset: 2px;
      outline: none;
    }

  
    /* =========================================================
       PREFERRED TRANSACTION CONTACTS
       ========================================================= */

    .preferred-contact-settings-grid {
      display: grid;
      gap: 18px;
    }

    .preferred-contact-settings-card {
      padding: 15px;
      border: 1px solid #e2e7ea;
      border-radius: 12px;
      background: #fbfcfc;
    }

    .preferred-contact-settings-title {
      margin-bottom: 12px;
      color: #223a4b;
      font-size: 11px;
      font-weight: 950;
    }

    .buyer-contact-block + .buyer-contact-block {
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid #e7ebed;
    }

    .buyer-contact-heading {
      margin-bottom: 10px;
      color: #20394a;
      font-size: 11px;
      font-weight: 950;
    }

    .buyer-contact-choice-row {
      margin-bottom: 9px;
    }

    .buyer-contact-summary {
      margin-top: 7px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #f5f8f9;
      color: #6f7f89;
      font-size: 9.5px;
      line-height: 1.45;
    }

    .buyer-title-warning {
      margin: 10px 0;
      padding: 10px 12px;
      border: 1px solid #e7bc7b;
      border-radius: 9px;
      background: #fff5e7;
      color: #8a5418;
      font-size: 10px;
      line-height: 1.45;
    }

    .title-exception-choice label {
      max-width: 330px;
    }

    /* =========================================================
       UNDER CONTRACT - NEW CLIENT BUILDER
       ========================================================= */

    .new-client-builder {
      padding: 14px;
      border: 1px solid #e2e8eb;
      border-radius: 12px;
      background: #fafcfc;
    }

    .new-client-additional-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 16px;
      padding-top: 15px;
      border-top: 1px solid #e6ebed;
    }

    .new-client-additional-header > div {
      display: grid;
      gap: 3px;
    }

    .new-client-additional-header strong {
      color: #263f51;
      font-size: 10.5px;
    }

    .new-client-additional-header span {
      color: #82909a;
      font-size: 9px;
    }

    .uc-additional-people-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }

    .uc-additional-person {
      padding: 12px;
      border: 1px solid #dde4e8;
      border-radius: 10px;
      background: #fff;
    }

    .uc-additional-person-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .uc-additional-person-top select {
      width: auto;
      min-width: 150px;
    }

    .uc-remove-person {
      padding: 5px 8px;
      border: 1px solid #e0c7c7;
      border-radius: 7px;
      background: #fff;
      color: #9b4d4d;
      cursor: pointer;
      font-size: 8px;
      font-weight: 900;
    }

    .generated-client-name {
      margin-top: 12px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #eef6f1;
      color: #496b57;
      font-size: 9.5px;
    }

    @media (max-width: 700px) {
      .new-client-additional-header {
        align-items: stretch;
        flex-direction: column;
      }

      .new-client-additional-header .secondary-btn {
        width: 100%;
      }
    }

  

    /* =========================================================
       EMAIL COMPOSER — CANONICAL STYLES
       ========================================================= */

    #emailModalBackdrop {
      z-index: 10000 !important;
    }

    .google-connection-subtle {
      color: #7f8c94;
      font-size: 9px;
      font-weight: 650;
    }

    .email-compact-recipient-field {
      margin-top: 9px !important;
      margin-bottom: 9px !important;
    }

    .email-compact-recipient-field label,
    .email-quick-contact-field label {
      margin-bottom: 5px !important;
    }

    .email-compact-recipient-field input {
      min-height: 42px !important;
      height: 42px !important;
      padding: 8px 12px !important;
      font-size: 14px !important;
      border-radius: 9px !important;
    }

    #emailQuickContactWrap {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: relative;
      z-index: 20;
      min-height: 54px;
      margin-top: 6px !important;
      margin-bottom: 7px !important;
    }

    #emailQuickContactWrap .help {
      margin-top: 4px !important;
      font-size: 8.5px !important;
    }

    #emailQuickContacts {
      display: flex !important;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px !important;
      min-height: 32px;
      overflow: visible !important;
      pointer-events: auto !important;
      position: relative;
      z-index: 21;
    }

    #emailQuickContacts .email-quick-contact.hidden,
    #emailQuickContactEmpty.hidden {
      display: none !important;
    }

    #emailQuickContacts .email-quick-contact {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: auto !important;
      min-height: 32px !important;
      padding: 6px 10px !important;
      border: 1px solid #ccd8df !important;
      border-radius: 999px !important;
      background: #fff !important;
      color: #29475b !important;
      cursor: pointer !important;
      pointer-events: auto !important;
      touch-action: manipulation !important;
      user-select: none;
      position: relative;
      z-index: 22;
      font-size: 8.5px;
      font-weight: 900;
    }

    #emailQuickContacts .email-quick-contact * {
      pointer-events: none !important;
    }

    #emailQuickContacts .email-quick-contact small {
      color: #81909a;
      font-size: 6.5px !important;
      font-weight: 850;
      text-transform: uppercase;
    }

    #emailQuickContacts .email-quick-contact:hover {
      border-color: #c9a94d !important;
      background: #fff8df !important;
    }

    #emailQuickContacts .email-quick-contact.selected {
      border-color: #c9a94d !important;
      background: #fff0b9 !important;
      color: #6c5414 !important;
      box-shadow: inset 0 0 0 1px rgba(201,169,77,.18);
    }

    #emailQuickContacts .email-quick-contact.selected small {
      color: #80671f !important;
    }

    .email-quick-contact-empty {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      color: #8a969e;
      font-size: 9px;
      font-weight: 700;
    }

    @media (max-width: 700px) {
      #emailQuickContacts .email-quick-contact {
        width: 100% !important;
        justify-content: space-between;
      }
    }

  
    /* =========================================================
       TEAM GOOGLE / EMAIL READINESS
       ========================================================= */

    .team-email-status-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 12px;
      padding: 11px 13px;
      border: 1px solid #e0e6e9;
      border-radius: 10px;
      background: #f9fbfb;
    }

    .team-email-summary-main {
      display: grid;
      gap: 2px;
    }

    .team-email-summary-main strong {
      color: #263f51;
      font-size: 10.5px;
    }

    .team-email-summary-main span {
      color: #7c8992;
      font-size: 9px;
    }

    .team-email-summary-stats {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .team-email-summary-stats span {
      padding: 5px 8px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #e1e7ea;
      color: #6c7c86;
      font-size: 8px;
      font-weight: 800;
    }

    .team-google-status-cell {
      display: grid;
      gap: 3px;
      min-width: 118px;
    }

    .team-google-status-pill {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      gap: 5px;
      padding: 4px 7px;
      border-radius: 999px;
      font-size: 8px;
      font-weight: 950;
      white-space: nowrap;
    }

    .team-google-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    .team-google-status-pill.connected {
      background: #edf8f1;
      color: #267a48;
    }

    .team-google-status-pill.needs_google {
      background: #fff5dd;
      color: #956f16;
    }

    .team-google-status-pill.no_login,
    .team-google-status-pill.no_email {
      background: #f1f3f4;
      color: #7c878e;
    }

    .team-google-status-email {
      max-width: 180px;
      overflow: hidden;
      color: #687984;
      font-size: 7.5px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-google-status-checked {
      color: #a0a9af;
      font-size: 7px;
      white-space: nowrap;
    }

    @media (max-width: 700px) {
      .team-email-status-summary {
        align-items: stretch;
        flex-direction: column;
      }

      .team-email-summary-stats {
        flex-wrap: wrap;
      }
    }

  
    /* =========================================================
       GOOGLE-ONLY CRM LOGIN
       ========================================================= */

    .google-login-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 48px;
      margin-top: 22px;
      border: 0;
      border-radius: 10px;
      background: #11283c;
      color: #ffffff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(17,40,60,.16);
      transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
    }

    .google-login-btn:hover {
      background: #18364f;
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(17,40,60,.20);
    }

    .google-login-btn:active {
      transform: translateY(0);
    }

    .google-login-btn:disabled {
      cursor: wait;
      opacity: .7;
    }

    .google-login-mark {
      display: grid;
      place-items: center;
      flex: 0 0 25px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #ffffff;
      color: #11283c;
      font-size: 12px;
      font-weight: 950;
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    .google-login-btn.loading .google-login-mark {
      animation: google-login-pulse .9s ease-in-out infinite alternate;
    }

    @keyframes google-login-pulse {
      from { opacity: .45; }
      to { opacity: 1; }
    }

    .google-login-domain {
      margin-top: 10px;
      color: #8a969d;
      font-size: 8px;
      text-align: center;
    }

    .google-team-login-note {
      display: grid;
      gap: 3px;
      padding: 10px 12px;
      border: 1px solid #dce5e8;
      border-radius: 9px;
      background: #f7fafb;
    }

    .google-team-login-note strong {
      color: #29485c;
      font-size: 9.5px;
    }

    .google-team-login-note span {
      color: #7d8b94;
      font-size: 8.5px;
      line-height: 1.45;
    }

  
    /* =========================================================
       MOBILE TRANSACTIONS — AGENT + TRANSACTION + CLIENT ONLY
       Desktop table remains unchanged.
       ========================================================= */
    @media (max-width: 700px) {
      #transactionsView .transaction-table-scroll {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      #transactionsView .transaction-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }

      #transactionsView .transaction-table thead {
        display: none !important;
      }

      #transactionsView .transaction-table tbody {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px 10px 12px !important;
      }

      /* Status group headings stay full width and clean. */
      #transactionsView .transaction-status-group-row {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 2px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
      }

      #transactionsView .transaction-status-group-row > td {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
      }

      #transactionsView .transaction-status-group-row > td::before {
        display: none !important;
        content: none !important;
      }

      #transactionsView .transaction-status-group-sticky {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
      }

      /* Each actual transaction becomes one compact mobile row. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 66px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #e1e7eb !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(13,39,61,.045) !important;
        overflow: hidden !important;
      }

      #transactionsView .transaction-table tbody tr[data-transaction-id]:active {
        transform: scale(.995);
        background: #fafcfd !important;
      }

      /* Current rendered order:
         1 = Agent
         2 = Transaction
         3 = Client
         Hide everything after that on mobile. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(4),
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(n+6) {
        display: none !important;
      }

      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(1),
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(2),
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(3),
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(5) {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
        box-shadow: none !important;
      }

      /* Remove generic mobile table field labels. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(1)::before,
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(2)::before,
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(3)::before,
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(5)::before {
        display: none !important;
        content: none !important;
      }

      /* Agent photo left, spanning transaction + client lines. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        justify-content: center !important;
        align-self: stretch !important;
        padding: 10px 2px 10px 10px !important;
      }

      #transactionsView .transaction-assignee-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: 0 0 32px !important;
      }

      #transactionsView .transaction-assignee-avatar .team-avatar.avatar-sm {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 9px !important;
      }

      /* Transaction/address is the primary line. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: flex-start !important;
        align-self: end !important;
        padding: 10px 12px 2px 6px !important;
      }

      #transactionsView .transaction-name-inline-wrap,
      #transactionsView .transaction-name-readonly-wrap {
        width: 100% !important;
        min-width: 0 !important;
        gap: 4px !important;
      }

      #transactionsView .transaction-table td:nth-child(2) .transaction-inline-text,
      #transactionsView .transaction-table td:nth-child(2) .transaction-row-open,
      #transactionsView .transaction-table td:nth-child(2) .transaction-inline-fallback {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: var(--text-strong) !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-align: left !important;
      }

      /* Make admin inline name editing read visually like the mobile list. */
      #transactionsView .transaction-table td:nth-child(2) .transaction-inline-text {
        min-height: 26px !important;
        padding: 1px 2px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      #transactionsView .transaction-inline-open {
        display: none !important;
      }

      #transactionsView .transaction-checklist-toggle {
        width: 18px !important;
        height: 24px !important;
        margin: 0 !important;
        flex: 0 0 18px !important;
      }

      /* Status stays visible as a compact pill in the upper-right. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-content: flex-end !important;
        align-self: center !important;
        justify-self: end !important;
        width: auto !important;
        max-width: 92px !important;
        margin: 0 !important;
        padding: 9px 11px 2px 4px !important;
        pointer-events: none !important;
        z-index: 4 !important;
      }

      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(5) .transaction-inline-select,
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(5) select {
        width: auto !important;
        max-width: 92px !important;
        min-width: 0 !important;
        height: 24px !important;
        min-height: 24px !important;
        padding: 3px 20px 3px 8px !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        font-size: 8.5px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        pointer-events: none !important;
        appearance: none !important;
        background-image: none !important;
        text-align: center !important;
      }

      /* Give the transaction name room so it doesn't run underneath status. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(2) {
        padding-right: 104px !important;
      }

      /* Linked client is the smaller secondary line. */
      #transactionsView .transaction-table tbody tr[data-transaction-id] > td:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
        align-self: start !important;
        padding: 1px 12px 10px 28px !important;
        color: #78858e !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
      }

      #transactionsView .transaction-table td:nth-child(3) .transaction-client-secondary,
      #transactionsView .transaction-table td:nth-child(3) .unlinked-pill {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      /* Admin client selector should look like secondary text, not a big form field. */
      #transactionsView .transaction-table td:nth-child(3) select.transaction-inline-select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 24px !important;
        height: 24px !important;
        padding: 0 22px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: #78858e !important;
        font-size: 10.5px !important;
        font-weight: 650 !important;
      }

      /* Expanded checklist remains available below a mobile transaction row. */
      #transactionsView .transaction-checklist-preview-row {
        display: block !important;
        width: 100% !important;
        margin: -2px 0 4px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: #f8fafb !important;
        box-shadow: none !important;
        overflow: hidden !important;
      }

      #transactionsView .transaction-checklist-preview-row > td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        position: static !important;
        left: auto !important;
      }

      #transactionsView .transaction-checklist-preview-row > td::before {
        display: none !important;
        content: none !important;
      }

      /* Toolbar is also kept from forcing sideways scrolling. */
      #transactionsView .transaction-toolbar-row {
        grid-template-columns: 1fr !important;
      }

      #transactionsView .transaction-toolbar-row > * {
        width: 100% !important;
        min-width: 0 !important;
      }

      #transactionsView .toolbar-meta {
        gap: 5px !important;
        flex-wrap: wrap !important;
      }

      #transactionsView #transactionEditModeNote {
        display: none !important;
      }
    }

  
    /* =========================================================
       MOBILE TRANSACTIONS — READ ONLY, FULL ROW OPENS
       ========================================================= */

    .transaction-mobile-name,
    .transaction-mobile-address,
    .transaction-mobile-client,
    .transaction-mobile-status {
      display: none;
    }

    @media (max-width: 700px) {
      #transactionsView .transaction-table tbody tr[data-transaction-id] {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        min-height: 82px !important;
        cursor: pointer !important;
      }

      /* Phone list is view-only. Open the full transaction to make changes. */
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-name-inline-wrap,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-name-readonly-wrap,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-inline-fallback,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-inline-client-select,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-client-secondary,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .unlinked-pill,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-status-inline,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-status-readonly-wrap,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-checklist-toggle,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-inline-open,
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        .transaction-row-open {
        display: none !important;
      }

      #transactionsView .transaction-mobile-address,
      #transactionsView .transaction-mobile-client {
        display: block !important;
      }

      #transactionsView .transaction-mobile-status {
        display: inline-flex !important;
      }

      /* Address block: street first, city/state/zip directly below. */
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        > td:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        padding: 10px 12px 4px 7px !important;
      }

      #transactionsView .transaction-mobile-address {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
      }

      #transactionsView .transaction-mobile-street {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        color: var(--text-strong) !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      #transactionsView .transaction-mobile-locality {
        display: block !important;
        width: 100% !important;
        margin-top: 2px !important;
        overflow: hidden !important;
        color: #7f8c96 !important;
        font-size: 10.25px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      /* Bottom row: linked client on left, status centered in its pill on right. */
      #transactionsView .transaction-table tbody tr[data-transaction-id]
        > td:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
        align-self: center !important;
        padding: 3px 94px 10px 7px !important;
        color: #78858e !important;
      }

      #transactionsView .transaction-mobile-client {
        width: 100% !important;
        overflow: hidden !important;
        color: #78858e !important;
        font-size: 10.5px !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      #transactionsView .transaction-table tbody tr[data-transaction-id]
        > td:nth-child(5) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: center !important;
        justify-self: end !important;
        width: auto !important;
        max-width: 88px !important;
        margin: 0 !important;
        padding: 0 11px 8px 4px !important;
        pointer-events: none !important;
      }

      #transactionsView .transaction-mobile-status {
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 58px !important;
        max-width: 84px !important;
        height: 22px !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        overflow: hidden !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 22px !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
      }

      #transactionsView .transaction-table tbody tr[data-transaction-id]
        > td:nth-child(1) {
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
      }

      /* On phones, tapping the list row opens the full transaction instead. */
      #transactionsView .transaction-checklist-preview-row {
        display: none !important;
      }
    }

  
    /* Mobile transaction detail navigation:
       the view transition owns the motion; no visible scroll-to-top. */
    @media (max-width: 700px) {
      #transactionProfileView.active {
        backface-visibility: hidden;
        transform: translateZ(0);
      }
    }

  
    /* =========================================================
       MOBILE LEADS — OWNER + LEAD + STATUS + PRIORITY
       Desktop Lead table remains unchanged.
       ========================================================= */

    .lead-mobile-agent {
      display: none;
    }

    .lead-mobile-description {
      color: var(--muted);
      font-size: 10px;
      margin-top: 3px;
      max-width: 260px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .lead-profile-layout {
      display: grid;
      gap: 16px;
      max-width: 900px;
    }

    .lead-profile-agent-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .lead-profile-agent-meta .team-avatar {
      width: 22px;
      height: 22px;
      min-width: 22px;
      font-size: 7px;
    }

    .lead-profile-note-text {
      color: var(--text);
      font-size: 13px;
      line-height: 1.65;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    @media (max-width: 700px) {
      #leadsView .table-wrap {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      #leadsView .lead-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
      }

      #leadsView .lead-table thead {
        display: none !important;
      }

      #leadsView .lead-table tbody {
        display: grid !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 8px 10px 12px !important;
      }

      #leadsView .lead-table tbody tr[data-lead-id] {
        display: grid !important;
        grid-template-columns:
          minmax(0, 1fr) auto !important;
        grid-template-rows:
          auto auto !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 72px !important;
        padding: 0 !important;
        border: 1px solid #e1e7eb !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow:
          0 2px 10px rgba(13,39,61,.045) !important;
        overflow: hidden !important;
        cursor: pointer !important;
      }

      #leadsView .lead-table tbody tr[data-lead-id]:active {
        transform: scale(.995);
        background: #fafcfd !important;
      }

      /* Hide Source, desktop Agent text, Phone, Email and Added. */
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(n+4) {
        display: none !important;
      }

      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(1),
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(2),
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(3) {
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        border: 0 !important;
        background: transparent !important;
        position: static !important;
        left: auto !important;
        box-shadow: none !important;
      }

      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(1)::before,
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(2)::before,
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(3)::before {
        display: none !important;
        content: none !important;
      }

      /* Main lead line with agent photo on the left. */
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(1) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        align-items: center !important;
        padding: 10px 12px 3px !important;
      }

      #leadsView .lead-mobile-primary {
        display: grid !important;
        grid-template-columns:
          34px minmax(0, 1fr) !important;
        gap: 8px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
      }

      #leadsView .lead-mobile-agent {
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        align-items: center !important;
        justify-content: center !important;
      }

      #leadsView .lead-mobile-agent .team-avatar.avatar-sm {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 9px !important;
      }

      #leadsView .lead-mobile-copy {
        min-width: 0 !important;
      }

      #leadsView .lead-name {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        color: var(--text-strong) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      #leadsView .lead-mobile-description {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 2px !important;
        overflow: hidden !important;
        color: #7f8c96 !important;
        font-size: 10px !important;
        font-weight: 550 !important;
        line-height: 1.25 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      /* Status and Priority share the lower row. */
      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 2px 4px 10px 54px !important;
      }

      #leadsView .lead-table tbody tr[data-lead-id]
        > td:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 2px 12px 10px 4px !important;
      }

      #leadsView .lead-status-pill,
      #leadsView .lead-priority {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-height: 22px !important;
        margin: 0 !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
      }

      #leadsView .lead-toolbar-row {
        grid-template-columns: 1fr !important;
      }

      #leadsView .lead-toolbar-row > * {
        width: 100% !important;
        min-width: 0 !important;
      }

      /* Lead detail uses the same smooth full-view navigation behavior
         as Transactions. */
      #leadProfileView.active {
        backface-visibility: hidden;
        transform: translateZ(0);
      }

      #leadProfileView .profile-header-top {
        gap: 12px !important;
      }

      #leadProfileView .lead-profile-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
      }

      #leadProfileView .lead-status-pill,
      #leadProfileView .lead-priority {
        min-height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        line-height: 1 !important;
      }

      #leadProfileView .lead-profile-layout {
        grid-template-columns: 1fr !important;
      }
    }

  
    /* =========================================================
       LEADS DATABASE — PRIORITY CARD LAYOUT
       Mirrors Connected Database A/B/C/D relationship cards.
       ========================================================= */

    .lead-priority-selector {
      display: grid;
      grid-template-columns:
        1.25fr repeat(5, minmax(0,1fr));
      gap: 10px;
      margin: 14px 0 14px;
    }

    .lead-priority-card {
      position: relative;
      min-width: 0;
      min-height: 112px;
      padding: 14px 14px 13px;
      border: 1px solid #e0ddd5;
      border-radius: 13px;
      background: white;
      color: var(--dark);
      text-align: left;
      cursor: pointer;
      box-shadow:
        0 5px 18px rgba(17,40,60,.035);
      transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
    }

    .lead-priority-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 11px 24px rgba(17,40,60,.07);
    }

    .lead-priority-card.active {
      border-color: currentColor;
      box-shadow:
        0 0 0 2px
          color-mix(
            in srgb,
            currentColor 13%,
            transparent
          ),
        0 10px 24px
          rgba(17,40,60,.06);
    }

    .lead-priority-card.all {
      color: #284459;
      background:
        linear-gradient(
          145deg,
          #ffffff,
          #f6f8fa
        );
    }

    .lead-priority-card.urgent {
      color: #c84c4c;
      background:
        linear-gradient(
          145deg,
          #ffffff,
          #fff2f2
        );
    }

    .lead-priority-card.high {
      color: #c76817;
      background:
        linear-gradient(
          145deg,
          #ffffff,
          #fff5ec
        );
    }

    .lead-priority-card.normal {
      color: #4778c7;
      background:
        linear-gradient(
          145deg,
          #ffffff,
          #f1f6ff
        );
    }

    .lead-priority-card.low {
      color: #378b82;
      background:
        linear-gradient(
          145deg,
          #ffffff,
          #effaf8
        );
    }

    .lead-priority-card.none {
      color: #677785;
      background:
        linear-gradient(
          145deg,
          #ffffff,
          #f3f6f8
        );
    }

    .lead-priority-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }

    .lead-priority-card-icon {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background:
        color-mix(
          in srgb,
          currentColor 10%,
          white
        );
      border:
        1px solid
        color-mix(
          in srgb,
          currentColor 18%,
          white
        );
      color: currentColor;
      font-size: 12px;
      font-weight: 950;
    }

    .lead-priority-card.all
      .lead-priority-card-icon {
      font-size: 17px;
    }

    .lead-priority-card-count {
      color: currentColor;
      font-size: 18px;
      line-height: 1;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .lead-priority-card strong {
      display: block;
      overflow: hidden;
      color: var(--dark);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 900;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lead-priority-card small {
      display: block;
      overflow: hidden;
      margin-top: 4px;
      color: #82909b;
      font-size: 9px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 1180px) {
      .lead-priority-selector {
        grid-template-columns:
          repeat(3, minmax(0,1fr));
      }
    }

    @media (max-width: 700px) {
      .lead-priority-selector {
        display: flex;
        gap: 8px;
        margin: 10px -2px 12px;
        padding: 2px 2px 7px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .lead-priority-selector::-webkit-scrollbar {
        display: none;
      }

      .lead-priority-card {
        flex: 0 0 138px;
        min-height: 96px;
        padding: 11px;
        border-radius: 12px;
      }

      .lead-priority-card.all {
        flex-basis: 154px;
      }

      .lead-priority-card-top {
        margin-bottom: 8px;
      }

      .lead-priority-card-icon {
        width: 27px;
        height: 27px;
      }

      .lead-priority-card-count {
        font-size: 16px;
      }

      .lead-priority-card strong {
        font-size: 11px;
      }
    }

  
    /* =========================================================
       CRM FEEDBACK
       ========================================================= */

    .feedback-view {
      max-width: 1220px;
    }

    .feedback-kicker {
      color: #8d7850;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .feedback-layout {
      display: grid;
      grid-template-columns:
        minmax(0, 1.7fr)
        minmax(260px, .65fr);
      gap: 18px;
      align-items: start;
    }

    .feedback-form-card,
    .feedback-side-card,
    .feedback-recent-section {
      background: white;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow-sm);
    }

    .feedback-form-card {
      overflow: hidden;
    }

    .feedback-submitter-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 18px;
      background:
        linear-gradient(
          90deg,
          rgba(216,180,95,.10),
          rgba(79,131,255,.035)
        );
      border-bottom: 1px solid var(--line);
    }

    .feedback-submitter-avatar {
      display: inline-flex;
      flex: 0 0 auto;
    }

    .feedback-submitter-avatar
      .team-avatar {
      width: 31px;
      height: 31px;
      min-width: 31px;
      font-size: 9px;
    }

    .feedback-submitter-banner strong {
      display: block;
      color: var(--dark);
      font-size: 11px;
    }

    .feedback-submitter-banner small {
      display: block;
      color: var(--muted);
      font-size: 8px;
      margin-top: 2px;
    }

    .feedback-form-section {
      padding: 22px;
      border-bottom: 1px solid var(--line);
    }

    .feedback-section-heading {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 16px;
    }

    .feedback-step {
      display: grid;
      place-items: center;
      flex: 0 0 27px;
      width: 27px;
      height: 27px;
      border-radius: 9px;
      background: var(--dark);
      color: white;
      font-size: 9px;
      font-weight: 900;
    }

    .feedback-section-heading h3 {
      margin: 1px 0 3px;
      color: var(--dark);
      font-size: 13px;
    }

    .feedback-section-heading p {
      margin: 0;
      color: var(--muted);
      font-size: 9px;
    }

    .feedback-category-grid {
      display: grid;
      grid-template-columns:
        repeat(5, minmax(0, 1fr));
      gap: 8px;
    }

    .feedback-choice-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 112px;
      padding: 12px;
      border: 1px solid #e1e6e9;
      border-radius: 12px;
      background: #fff;
      cursor: pointer;
      transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease,
        background .15s ease;
    }

    .feedback-choice-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 8px 18px
        rgba(17,40,60,.07);
    }

    .feedback-choice-card input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .feedback-choice-card:has(input:checked) {
      border-color: #b89a50;
      background: #fffaf0;
      box-shadow:
        0 0 0 2px
        rgba(216,180,95,.14);
    }

    .feedback-choice-icon {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      margin-bottom: 10px;
      border-radius: 9px;
      background: #f2f5f7;
      color: var(--dark);
      font-size: 11px;
      font-weight: 950;
    }

    .feedback-choice-card.bug
      .feedback-choice-icon {
      background: #fff0f0;
      color: #c75252;
    }

    .feedback-choice-card.improvement
      .feedback-choice-icon {
      background: #eef5ff;
      color: #4e79bd;
    }

    .feedback-choice-card.dislike
      .feedback-choice-icon {
      background: #fff5eb;
      color: #bf702e;
    }

    .feedback-choice-card.idea
      .feedback-choice-icon {
      background: #eef8f4;
      color: #39866d;
    }

    .feedback-choice-card strong {
      display: block;
      color: var(--dark);
      font-size: 10px;
      line-height: 1.2;
    }

    .feedback-choice-card small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 8px;
      line-height: 1.35;
    }

    .feedback-form-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .feedback-form-grid .span-2 {
      grid-column: 1 / -1;
    }

    #feedbackDetails {
      min-height: 165px;
      resize: vertical;
    }

    .feedback-submit-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 17px 22px 20px;
    }

    .feedback-submit-note {
      max-width: 520px;
      color: var(--muted);
      font-size: 8.5px;
      line-height: 1.5;
    }

    .feedback-side-card {
      padding: 22px;
      position: sticky;
      top: 20px;
      background:
        linear-gradient(
          160deg,
          #11283c 0%,
          #173a56 100%
        );
      color: white;
      border-color: rgba(255,255,255,.06);
    }

    .feedback-side-icon {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      margin-bottom: 15px;
      border-radius: 12px;
      background:
        rgba(216,180,95,.16);
      color: #ead28e;
      font-size: 18px;
    }

    .feedback-side-card h3 {
      margin: 0 0 10px;
      color: white;
      font-size: 17px;
      line-height: 1.15;
    }

    .feedback-side-card p {
      margin: 0;
      color: rgba(255,255,255,.72);
      font-size: 10px;
      line-height: 1.65;
    }

    .feedback-side-list {
      display: grid;
      gap: 8px;
      margin-top: 18px;
      padding-top: 16px;
      border-top:
        1px solid
        rgba(255,255,255,.09);
    }

    .feedback-side-list span {
      color: rgba(255,255,255,.82);
      font-size: 9px;
    }

    .feedback-recent-section {
      margin-top: 18px;
      padding: 20px;
    }

    .feedback-recent-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .feedback-recent-header h2 {
      margin: 0;
      color: var(--dark);
      font-size: 17px;
    }

    .feedback-recent-count {
      display: grid;
      place-items: center;
      min-width: 34px;
      height: 28px;
      padding: 0 9px;
      border-radius: 999px;
      background: #f2f5f7;
      color: var(--dark);
      font-size: 10px;
      font-weight: 900;
    }

    .feedback-recent-list {
      display: grid;
      gap: 10px;
    }

    .feedback-checklist-controls {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
    }

    .feedback-checklist-controls.hidden {
      display: none !important;
    }

    .feedback-filter-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 7px 11px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }

    .feedback-filter-btn.active {
      background: var(--dark);
      color: #fff;
    }

    .feedback-complete-row {
      margin-top: 12px;
      padding-top: 11px;
      border-top: 1px solid #eee8db;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .feedback-complete-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 11px;
      font-weight: 800;
      color: var(--dark);
      cursor: pointer;
    }

    .feedback-complete-control input {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--dark);
    }

    .feedback-completed-at {
      color: var(--muted);
      font-size: 10px;
    }

    .feedback-item {
      padding: 15px;
      border: 1px solid #e7ecef;
      border-radius: 12px;
      background: #fbfcfd;
    }

    .feedback-item-top,
    .feedback-item-author,
    .feedback-item-tags {
      display: flex;
      align-items: center;
    }

    .feedback-item-top {
      justify-content: space-between;
      gap: 10px;
    }

    .feedback-item-author {
      gap: 8px;
      min-width: 0;
    }

    .feedback-item-avatar
      .team-avatar {
      width: 27px;
      height: 27px;
      min-width: 27px;
      font-size: 8px;
    }

    .feedback-item-author strong {
      display: block;
      color: var(--dark);
      font-size: 9px;
    }

    .feedback-item-author small {
      display: block;
      color: var(--muted);
      font-size: 7.5px;
      margin-top: 2px;
    }

    .feedback-item-tags {
      gap: 5px;
      flex-wrap: wrap;
      margin: 11px 0 8px;
    }

    .feedback-category-tag,
    .feedback-importance-tag,
    .feedback-area-tag,
    .feedback-status {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      font-size: 7.5px;
      font-weight: 900;
      line-height: 1;
    }

    .feedback-category-tag {
      background: #eef3f7;
      color: #35526a;
    }

    .feedback-category-tag.bug {
      background: #fff0f0;
      color: #ba4b4b;
    }

    .feedback-category-tag.improvement {
      background: #eef5ff;
      color: #4875ba;
    }

    .feedback-category-tag.dislike {
      background: #fff4e9;
      color: #b96d2e;
    }

    .feedback-category-tag.idea {
      background: #edf8f3;
      color: #3d816c;
    }

    .feedback-importance-tag {
      background: #f3f5f7;
      color: #687783;
    }

    .feedback-importance-tag.blocking {
      background: #ffe8e8;
      color: #b83d3d;
    }

    .feedback-importance-tag.important {
      background: #fff0df;
      color: #b9681f;
    }

    .feedback-area-tag {
      background: #f5f1e7;
      color: #847044;
    }

    .feedback-status {
      background: #eef3f7;
      color: #526979;
    }

    .feedback-status.reviewing {
      background: #eef5ff;
      color: #4b72ac;
    }

    .feedback-status.planned {
      background: #fff4dc;
      color: #9a7626;
    }

    .feedback-status.completed {
      background: #eaf7ef;
      color: #397957;
    }

    .feedback-status.declined {
      background: #f1f2f3;
      color: #777f84;
    }

    .feedback-item h3 {
      margin: 0 0 5px;
      color: var(--dark);
      font-size: 11px;
    }

    .feedback-item p {
      margin: 0;
      color: #61717d;
      font-size: 9px;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .feedback-empty {
      padding: 24px;
      border: 1px dashed #dbe1e5;
      border-radius: 12px;
      color: var(--muted);
      font-size: 10px;
      text-align: center;
      background: #fbfcfd;
    }

    @media (max-width: 980px) {
      .feedback-layout {
        grid-template-columns: 1fr;
      }

      .feedback-side-card {
        position: static;
      }

      .feedback-category-grid {
        grid-template-columns:
          repeat(3, minmax(0,1fr));
      }
    }

    @media (max-width: 700px) {
      .feedback-view .topbar {
        padding-left: 0 !important;
      }

      .feedback-layout {
        gap: 12px;
      }

      .feedback-form-section {
        padding: 16px 14px;
      }

      .feedback-category-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 2px 1px 7px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .feedback-category-grid::-webkit-scrollbar {
        display: none;
      }

      .feedback-choice-card {
        flex: 0 0 145px;
        min-height: 102px;
      }

      .feedback-form-grid {
        grid-template-columns: 1fr;
      }

      .feedback-form-grid .span-2 {
        grid-column: auto;
      }

      .feedback-submit-row {
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
      }

      .feedback-submit-row
        .primary-btn {
        width: 100%;
      }

      .feedback-side-card {
        padding: 18px;
      }

      .feedback-recent-section {
        padding: 14px;
      }

      .feedback-item-top {
        align-items: flex-start;
      }
    }

  
    /* =========================================================
       TEAM TASK CENTER
       ========================================================= */

    .tasks-view { max-width: 1500px; }

    .tasks-kicker {
      color:#997b45;
      font-size:9px;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:5px;
    }

    .task-summary-cards {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
      margin:0 0 14px;
    }

    .task-summary-card {
      min-width:0;
      padding:14px 15px;
      border:1px solid #e1e5e8;
      border-radius:13px;
      background:white;
      color:#566773;
      text-align:left;
      cursor:pointer;
      box-shadow:0 4px 14px rgba(17,40,60,.035);
    }

    .task-summary-card span {
      display:block;
      color:var(--dark);
      font-size:10px;
      font-weight:850;
    }

    .task-summary-card strong {
      display:block;
      margin:8px 0 3px;
      color:currentColor;
      font-size:25px;
      line-height:1;
      font-weight:900;
    }

    .task-summary-card small {
      color:#8a969e;
      font-size:8px;
    }

    .task-summary-card.all { color:#385972; }
    .task-summary-card.overdue { color:#d04d4d; }
    .task-summary-card.today { color:#c47a2d; }
    .task-summary-card.completed { color:#3b8563; }

    .task-summary-card.active {
      border-color:currentColor;
      box-shadow:
        0 0 0 2px color-mix(in srgb,currentColor 13%,transparent),
        0 8px 18px rgba(17,40,60,.055);
    }

    .task-toolbar { margin-bottom:12px; }

    .task-toolbar-row {
      display:grid;
      grid-template-columns:
        minmax(240px,1.7fr)
        minmax(135px,.75fr)
        minmax(130px,.7fr)
        minmax(145px,.75fr)
        auto;
      gap:8px;
      align-items:center;
    }

    .task-toolbar-row select,
    .task-toolbar-row input { min-height:39px; }

    .task-automation-note {
      color:#87939c;
      font-size:8px;
    }

    .task-list-group { overflow:hidden; }
    .task-table-wrap { overflow:auto; }

    .task-table {
      width:100%;
      min-width:940px;
      border-collapse:collapse;
      background:white;
    }

    .task-table th,
    .task-table td {
      padding:10px 11px;
      border-bottom:1px solid #edf0f2;
      text-align:left;
      vertical-align:middle;
    }

    .task-table th {
      color:#7f8a92;
      font-size:8.5px;
      font-weight:800;
      background:#fbfcfd;
      position:sticky;
      top:0;
      z-index:2;
    }

    .task-table tbody tr {
      cursor:pointer;
      background:white;
    }

    .task-table tbody tr:hover { background:#fafcfd; }
    .task-table tbody tr.task-return-focus {
      animation: taskReturnFocus 1.35s ease;
    }

    @keyframes taskReturnFocus {
      0% { background:#edf5f9; box-shadow:inset 3px 0 0 #7698ad; }
      65% { background:#f7fbfd; box-shadow:inset 3px 0 0 rgba(118,152,173,.35); }
      100% { background:transparent; box-shadow:inset 3px 0 0 transparent; }
    }

    .task-table tbody tr.completed { opacity:.68; }

    .task-table tbody tr.completed .task-title-button strong {
      text-decoration:line-through;
    }

    .task-complete-column {
      width:44px;
      min-width:44px;
      text-align:center !important;
    }

    .task-check-button {
      display:grid;
      place-items:center;
      width:23px;
      height:23px;
      margin:0 auto;
      padding:0;
      border:2px solid #aeb7bd;
      border-radius:50%;
      background:white;
      color:white;
      cursor:pointer;
      font-size:11px;
      font-weight:900;
    }

    .task-check-button.checked {
      border-color:#4a8a68;
      background:#4a8a68;
    }

    .task-title-button {
      display:block;
      width:100%;
      min-width:0;
      padding:0;
      border:0;
      background:transparent;
      text-align:left;
      cursor:pointer;
    }

    .task-title-button strong {
      display:block;
      max-width:520px;
      overflow:hidden;
      color:#222a30;
      font-size:11px;
      font-weight:800;
      line-height:1.35;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .task-title-button small {
      display:block;
      max-width:520px;
      margin-top:3px;
      overflow:hidden;
      color:#8a959d;
      font-size:8px;
      line-height:1.3;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .task-category-pill,
    .task-priority-pill,
    .task-status-pill {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:22px;
      padding:0 8px;
      border-radius:999px;
      font-size:7.5px;
      line-height:1;
      font-weight:900;
      white-space:nowrap;
    }

    .task-category-pill.personal {
      color:#567080;
      background:#eef3f6;
    }

    .task-category-pill.relationship {
      color:#956e32;
      background:#f8efdf;
    }

    .task-category-pill.transaction {
      color:#4c70aa;
      background:#edf3fd;
    }

    .task-assignee-cell {
      display:flex;
      align-items:center;
      gap:7px;
      min-width:130px;
    }

    .task-assignee-avatar { display:inline-flex; }

    .task-assignee-avatar .team-avatar {
      width:27px;
      height:27px;
      min-width:27px;
      font-size:8px;
    }

    .task-assignee-name {
      color:#5c6b75;
      font-size:8.5px;
      font-weight:700;
    }

    .task-priority-pill.urgent {
      color:#bd3f3f;
      background:#ffeaea;
    }

    .task-priority-pill.high {
      color:#b66825;
      background:#fff1e3;
    }

    .task-priority-pill.normal {
      color:#5376ac;
      background:#eef4fc;
    }

    .task-priority-pill.low {
      color:#428176;
      background:#edf8f5;
    }

    .task-priority-pill.none {
      color:#8a949a;
      background:#f2f4f5;
    }

    .task-due {
      color:#5f6c75;
      font-size:8.5px;
      font-weight:700;
      white-space:nowrap;
    }

    .task-due.overdue { color:#d64646; }
    .task-due.today { color:#c17026; font-weight:900; }
    .task-due.none { color:#a0a9ae; font-weight:600; }

    .task-status-pill.todo {
      color:#56636a;
      background:#eef0f1;
    }

    .task-status-pill.done {
      color:#377456;
      background:#e9f6ee;
    }

    .task-modal {
      width:min(690px,calc(100vw - 28px));
    }

    .task-modal #taskNotes { min-height:120px; }

    .task-modal-footer {
      display:flex;
      align-items:center;
    }

    .task-modal-footer-spacer { flex:1; }

    .danger-btn {
      border:1px solid #e6bcbc;
      background:#fff2f2;
      color:#b24343;
      padding:10px 13px;
      border-radius:8px;
      cursor:pointer;
      font-weight:800;
      font-size:10px;
    }

    @media (max-width:1050px) {
      .task-summary-cards {
        grid-template-columns:repeat(3,minmax(0,1fr));
      }

      .task-toolbar-row {
        grid-template-columns:1fr 1fr;
      }

      .task-toolbar-row .search-wrap {
        grid-column:1/-1;
      }
    }

    @media (max-width:700px) {
      .tasks-topbar {
        gap:12px;
      }

      .tasks-topbar .primary-btn {
        width:100%;
      }

      .task-summary-cards {
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding:2px 1px 7px;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
      }

      .task-summary-cards::-webkit-scrollbar {
        display:none;
      }

      .task-summary-card {
        flex:0 0 135px;
        padding:11px 12px;
      }

      .task-summary-card strong {
        font-size:21px;
      }

      .task-toolbar-row {
        grid-template-columns:1fr !important;
      }

      .task-toolbar-row > * {
        width:100% !important;
        min-width:0 !important;
      }

      .task-automation-note { display:none; }

      .task-table-wrap {
        overflow:visible !important;
      }

      .task-table {
        width:100% !important;
        min-width:0 !important;
        table-layout:auto !important;
        border-collapse:separate !important;
        border-spacing:0 !important;
      }

      .task-table thead { display:none !important; }

      .task-table tbody {
        display:grid !important;
        gap:8px !important;
        width:100% !important;
        padding:8px 10px 12px !important;
      }

      .task-table tbody tr {
        display:grid !important;
        grid-template-columns:35px minmax(0,1fr) auto !important;
        grid-template-rows:auto auto !important;
        width:100% !important;
        min-height:70px !important;
        padding:9px 10px !important;
        border:1px solid #e1e7eb !important;
        border-radius:14px !important;
        background:white !important;
        box-shadow:0 2px 10px rgba(13,39,61,.045) !important;
        overflow:hidden !important;
      }

      .task-table tbody tr > td {
        display:none !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        position:static !important;
      }

      .task-table tbody tr > td:nth-child(1) {
        display:flex !important;
        grid-column:1 !important;
        grid-row:1/span 2 !important;
        align-items:center !important;
        justify-content:center !important;
      }

      .task-table tbody tr > td:nth-child(2) {
        display:block !important;
        grid-column:2 !important;
        grid-row:1 !important;
        align-self:end !important;
        min-width:0 !important;
      }

      .task-table tbody tr > td:nth-child(3) {
        display:flex !important;
        grid-column:2 !important;
        grid-row:2 !important;
        align-items:center !important;
        padding-top:5px !important;
      }

      .task-table tbody tr > td:nth-child(4) {
        display:flex !important;
        grid-column:3 !important;
        grid-row:1 !important;
        justify-content:flex-end !important;
        align-items:center !important;
      }

      .task-table tbody tr > td:nth-child(6) {
        display:flex !important;
        grid-column:3 !important;
        grid-row:2 !important;
        justify-content:flex-end !important;
        align-items:center !important;
        padding-top:5px !important;
      }

      .task-title-button strong {
        max-width:100% !important;
      }

      .task-title-button small {
        max-width:100% !important;
      }

      .task-assignee-name {
        display:none !important;
      }

      .task-assignee-avatar .team-avatar {
        width:29px !important;
        height:29px !important;
        min-width:29px !important;
      }

      .task-modal-footer {
        gap:8px;
        flex-wrap:wrap;
      }

      .task-modal-footer-spacer {
        display:none;
      }

      .task-modal-footer .danger-btn {
        width:100%;
        order:3;
      }
    }

  
    /* =========================================================
       TASK HUB — CLIENT CARE TEXT ACTION
       ========================================================= */

    .task-name-action-row {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    .task-name-action-row
      .task-title-button {
      flex: 1 1 auto;
      min-width: 0;
    }

    .task-text-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 0 0 auto;
      min-height: 28px;
      padding: 0 9px;
      border: 1px solid #d8e4dc;
      border-radius: 999px;
      background: #f3faf5;
      color: #397454;
      cursor: pointer;
      font-size: 8px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .task-text-button:hover {
      border-color: #b9d4c2;
      background: #ebf7ef;
    }

    .task-text-button span:first-child {
      font-size: 11px;
      line-height: 1;
    }

    @media (max-width: 700px) {
      .task-name-action-row {
        gap: 6px;
      }

      .task-text-button {
        min-height: 25px;
        padding: 0 7px;
      }

      .task-text-button
        span:last-child {
        display: none;
      }

      .task-text-button
        span:first-child {
        font-size: 12px;
      }
    }

  
    /* =========================================================
       TASK HUB — TEXT SENT CONFIRMATION
       ========================================================= */

    .sms-completion-backdrop {
      z-index: 14000;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .sms-completion-modal {
      width: min(
        470px,
        calc(100vw - 28px)
      );
      padding: 28px 26px 24px;
      text-align: center;
    }

    .sms-completion-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin: 0 auto 14px;
      border-radius: 16px;
      background: #eef8f2;
      font-size: 24px;
    }

    .sms-completion-modal h2 {
      margin: 0;
      color: var(--dark);
      font-size: 20px;
      line-height: 1.2;
    }

    .sms-completion-modal > p {
      margin: 8px auto 0;
      max-width: 360px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.55;
    }

    .sms-completion-task {
      margin: 18px 0;
      padding: 13px 14px;
      border: 1px solid #e3e8eb;
      border-radius: 11px;
      background: #f8fafb;
      text-align: left;
    }

    .sms-completion-task span {
      display: block;
      margin-bottom: 4px;
      color: #89959d;
      font-size: 7px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .sms-completion-task strong {
      display: block;
      color: var(--dark);
      font-size: 10px;
      line-height: 1.4;
    }

    .sms-completion-actions {
      display: grid;
      grid-template-columns:
        minmax(0,1fr)
        minmax(0,1.4fr);
      gap: 9px;
      margin-top: 16px;
    }

    .sms-completion-actions
      button {
      min-height: 42px;
    }

    @media (max-width: 700px) {
      .sms-completion-backdrop {
        align-items: flex-end;
        padding: 10px;
      }

      .sms-completion-modal {
        width: 100%;
        margin: 0;
        padding: 23px 17px 16px;
        border-radius: 18px;
      }

      .sms-completion-actions {
        grid-template-columns: 1fr;
      }

      .sms-completion-actions
        #smsCompletionYes {
        order: 1;
      }

      .sms-completion-actions
        #smsCompletionNotYet {
        order: 2;
      }
    }

  
    /* =========================================================
       TASK HUB — MOBILE READABILITY
       Full task wording, no ellipsis/truncation.
       ========================================================= */

    @media (max-width: 700px) {
      .task-table tbody {
        gap: 10px !important;
        padding: 8px 6px 14px !important;
      }

      .task-table tbody tr {
        grid-template-columns:
          32px minmax(0, 1fr) 34px !important;
        grid-template-rows:
          auto auto !important;
        min-height: 0 !important;
        padding: 12px 11px !important;
        border-radius: 15px !important;
        align-items: start !important;
      }

      .task-table tbody tr
        > td:nth-child(1) {
        align-items: flex-start !important;
        padding-top: 4px !important;
      }

      .task-check-button {
        width: 24px !important;
        height: 24px !important;
      }

      .task-table tbody tr
        > td:nth-child(2) {
        align-self: start !important;
        min-width: 0 !important;
        padding-right: 4px !important;
      }

      .task-name-action-row {
        display: grid !important;
        grid-template-columns:
          minmax(0, 1fr) auto !important;
        gap: 7px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
      }

      .task-title-button {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
      }

      .task-title-button strong {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 11px !important;
        line-height: 1.32 !important;
        padding-right: 1px !important;
      }

      .task-title-button small {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin-top: 4px !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        font-size: 8.5px !important;
        line-height: 1.3 !important;
      }

      .task-text-button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border-radius: 50% !important;
      }

      .task-text-button
        span:first-child {
        font-size: 13px !important;
      }

      .task-table tbody tr
        > td:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-items: flex-end !important;
        padding-top: 8px !important;
      }

      .task-category-pill {
        min-height: 22px !important;
        padding: 0 8px !important;
        font-size: 7.5px !important;
      }

      .task-table tbody tr
        > td:nth-child(4) {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        min-width: 34px !important;
      }

      .task-assignee-avatar .team-avatar {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
      }

      .task-table tbody tr
        > td:nth-child(6) {
        grid-column: 3 !important;
        grid-row: 2 !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        padding-top: 8px !important;
        min-width: max-content !important;
      }

      .task-due {
        display: block !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        text-align: right !important;
        white-space: nowrap !important;
      }

      .task-list-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

  
    /* =========================================================
       DASHBOARD — TASKS NEEDING ATTENTION
       ========================================================= */

    .dashboard-kpi-action {
      appearance: none;
      width: 100%;
      font: inherit;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .dashboard-kpi-task {
      grid-column: 1 / -1;
      min-height: 94px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-color: #d9e4dc;
      background:
        linear-gradient(
          135deg,
          #ffffff,
          #f4faf6
        );
      transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    }

    .dashboard-kpi-task:hover {
      transform: translateY(-1px);
      border-color: #bcd2c3;
      box-shadow:
        0 8px 22px
        rgba(27,76,51,.07);
    }

    .dashboard-task-card-copy {
      min-width: 0;
    }

    .dashboard-task-card-copy
      .dashboard-kpi-label {
      font-size: 13px;
    }

    .dashboard-task-card-right {
      display: flex;
      align-items: center;
      gap: 13px;
      flex: 0 0 auto;
    }

    .dashboard-task-card-right
      .dashboard-kpi-value {
      margin-top: 0;
      color: #315f47;
      font-size: 38px;
      font-weight: 800;
    }

    .dashboard-task-card-arrow {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #e7f2ea;
      color: #315f47;
      font-size: 17px;
      font-weight: 900;
    }

    .task-mobile-meta {
      display: none;
    }

    @media (max-width: 700px) {
      .dashboard-kpi-task {
        min-height: 88px;
        padding: 15px 16px;
      }

      .dashboard-task-card-right
        .dashboard-kpi-value {
        font-size: 32px;
      }

      /* Mobile Task Hub uses only two physical columns:
         checkbox | all task content.
         This prevents text from ever entering the checkbox lane. */
      .task-table tbody {
        gap: 10px !important;
        padding: 8px 5px 14px !important;
      }

      .task-table tbody tr {
        display: grid !important;
        grid-template-columns:
          38px minmax(0, 1fr) !important;
        grid-template-rows:
          auto !important;
        column-gap: 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 13px 12px !important;
        align-items: start !important;
        overflow: hidden !important;
      }

      .task-table tbody tr > td {
        display: none !important;
        position: static !important;
        padding: 0 !important;
        border: 0 !important;
      }

      .task-table tbody tr
        > td:nth-child(1) {
        display: flex !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 38px !important;
        min-width: 38px !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2px !important;
      }

      .task-check-button {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        margin: 0 !important;
      }

      .task-table tbody tr
        > td:nth-child(2) {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
      }

      .task-name-action-row {
        display: grid !important;
        grid-template-columns:
          minmax(0,1fr) 31px !important;
        column-gap: 8px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
      }

      .task-name-action-row
        .task-title-button {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
      }

      .task-title-button strong {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
      }

      .task-title-button small {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 4px 0 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        font-size: 8.5px !important;
        line-height: 1.35 !important;
      }

      .task-text-button {
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        min-height: 31px !important;
        padding: 0 !important;
        border-radius: 50% !important;
      }

      .task-mobile-meta {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 10px !important;
      }

      .task-mobile-meta-spacer {
        flex: 1 1 auto !important;
        min-width: 5px !important;
      }

      .task-mobile-meta
        .task-category-pill {
        flex: 0 1 auto !important;
        max-width: 45% !important;
        min-height: 22px !important;
        padding: 0 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 7.5px !important;
      }

      .task-mobile-meta
        .task-due {
        flex: 0 0 auto !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: right !important;
      }

      .task-mobile-agent {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        margin-left: 2px !important;
      }

      .task-mobile-agent
        .team-avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 8px !important;
      }

      /* All original desktop table metadata is replaced by the
         nested mobile metadata row above. */
      .task-table tbody tr
        > td:nth-child(3),
      .task-table tbody tr
        > td:nth-child(4),
      .task-table tbody tr
        > td:nth-child(5),
      .task-table tbody tr
        > td:nth-child(6),
      .task-table tbody tr
        > td:nth-child(7) {
        display: none !important;
      }
    }

  
    /* =========================================================
       TASK HUB — COLLAPSIBLE FILTERS
       ========================================================= */

    .task-toolbar-search-row {
      display: grid;
      grid-template-columns:
        minmax(260px, 1fr)
        auto;
      gap: 8px;
      align-items: center;
    }

    .task-filters-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 39px;
      padding: 0 13px;
      border: 1px solid #d8dee2;
      border-radius: 9px;
      background: #fff;
      color: var(--dark);
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }

    .task-filters-count {
      display: inline-grid;
      place-items: center;
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--dark);
      color: #fff;
      font-size: 7px;
      line-height: 1;
    }

    .task-filters-chevron {
      color: #7f8c95;
      font-size: 10px;
    }

    @media (max-width: 700px) {
      .task-toolbar {
        margin-bottom: 8px !important;
      }

      .task-toolbar-search-row {
        grid-template-columns:
          minmax(0,1fr)
          auto !important;
        gap: 7px !important;
      }

      .task-toolbar-search-row
        .search-wrap {
        grid-column: auto !important;
        min-width: 0 !important;
      }

      .task-toolbar-search-row
        .search-wrap input {
        min-height: 44px !important;
        font-size: 11px !important;
      }

      .task-filters-toggle {
        display: inline-flex !important;
        min-height: 44px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
      }

      .task-advanced-filters {
        display: grid !important;
        grid-template-columns:
          1fr 1fr !important;
        gap: 7px !important;
        margin-top: 8px !important;
        padding: 10px !important;
        border: 1px solid #e2e7ea !important;
        border-radius: 12px !important;
        background: #f9fbfc !important;
      }

      .task-advanced-filters.mobile-collapsed {
        display: none !important;
      }

      .task-advanced-filters
        select,
      .task-advanced-filters
        button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        font-size: 9px !important;
      }

      .task-advanced-filters
        #clearTaskFilters {
        grid-column: 1 / -1 !important;
      }

      .task-toolbar
        .toolbar-meta {
        margin-top: 7px !important;
      }
    }

  
    /* =========================================================
       CLIENT PROFILE — QUICK ACTIONS
       ========================================================= */

    .client-quick-actions {
      display: none;
      grid-template-columns:
        repeat(4, minmax(0,1fr));
      gap: 8px;
      margin: 0 0 14px;
    }

    .client-quick-action {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 46px;
      padding: 8px 9px;
      border: 1px solid #dfe5e8;
      border-radius: 12px;
      background: white;
      color: var(--dark);
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
      box-shadow:
        0 3px 10px
        rgba(17,40,60,.035);
    }

    .client-quick-action:hover {
      border-color: #c8d4da;
      background: #fbfcfd;
    }

    .client-quick-action:disabled {
      opacity: .38;
      cursor: not-allowed;
    }

    .client-quick-action-icon {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border-radius: 8px;
      background: #f1f5f7;
      font-size: 12px;
      line-height: 1;
    }

    .client-quick-action.call
      .client-quick-action-icon {
      background: #edf7f1;
      color: #3f7958;
    }

    .client-quick-action.text
      .client-quick-action-icon {
      background: #eef7f1;
    }

    .client-quick-action.email
      .client-quick-action-icon {
      background: #eef3fb;
      color: #4a70a9;
    }

    .client-quick-action.note
      .client-quick-action-icon {
      background: #f7f1e5;
      color: #92733c;
    }

    @media (max-width: 700px) {
      #profileView.active
        .client-quick-actions {
        display: grid;
      }

      .client-quick-actions {
        position: sticky;
        top: 8px;
        z-index: 10;
        margin: 0 0 12px;
        padding: 7px;
        border: 1px solid #e0e6e9;
        border-radius: 14px;
        background:
          rgba(255,255,255,.95);
        backdrop-filter:
          blur(12px);
        box-shadow:
          0 7px 20px
          rgba(17,40,60,.07);
      }

      .client-quick-action {
        flex-direction: column;
        gap: 4px;
        min-height: 55px;
        padding: 6px 4px;
        border: 0;
        border-radius: 10px;
        box-shadow: none;
        background: transparent;
        font-size: 8px;
      }

      .client-quick-action:active {
        background: #f4f7f8;
      }

      .client-quick-action-icon {
        width: 29px;
        height: 29px;
        border-radius: 9px;
        font-size: 13px;
      }
    }

  
    /* =========================================================
       CLIENT CALL LOGGING
       ========================================================= */

    .call-log-backdrop {
      z-index: 14000;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .call-log-modal {
      width: min(520px, calc(100vw - 28px));
      padding: 28px 26px 23px;
    }

    .call-log-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin: 0 auto 14px;
      border-radius: 16px;
      background: #edf7f1;
      color: #3c7655;
      font-size: 24px;
    }

    .call-log-modal h2 {
      margin: 0;
      color: var(--dark);
      font-size: 20px;
      line-height: 1.2;
      text-align: center;
    }

    .call-log-modal > p {
      margin: 8px auto 0;
      max-width: 400px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
      text-align: center;
    }

    .call-log-details {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 8px;
      margin: 18px 0 15px;
    }

    .call-log-details > div {
      min-width: 0;
      padding: 11px 10px;
      border: 1px solid #e4e9eb;
      border-radius: 10px;
      background: #f9fbfc;
    }

    .call-log-details span {
      display: block;
      margin-bottom: 4px;
      color: #8b969e;
      font-size: 7px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .call-log-details strong {
      display: block;
      overflow-wrap: anywhere;
      color: var(--dark);
      font-size: 9px;
      line-height: 1.35;
    }

    .call-log-result-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 8px;
      margin-bottom: 15px;
    }

    .call-log-result {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 76px;
      padding: 10px 8px;
      border: 1px solid #dde4e7;
      border-radius: 11px;
      background: white;
      color: var(--dark);
      cursor: pointer;
    }

    .call-log-result span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: #f1f5f7;
      font-size: 12px;
      font-weight: 900;
    }

    .call-log-result strong {
      font-size: 8px;
      line-height: 1.2;
      text-align: center;
    }

    .call-log-note-field {
      margin-top: 2px;
    }

    #callLogNote {
      min-height: 90px;
    }

    .call-log-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }

    @media (max-width: 700px) {
      .call-log-backdrop {
        align-items: flex-end;
        padding: 10px;
      }

      .call-log-modal {
        width: 100%;
        margin: 0;
        padding: 22px 16px 15px;
        border-radius: 19px;
      }

      .call-log-details {
        grid-template-columns: 1fr 1fr;
      }

      .call-log-details > div:last-child {
        grid-column: 1 / -1;
      }

      .call-log-result-grid {
        grid-template-columns: 1fr;
      }

      .call-log-result {
        min-height: 51px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 8px 11px;
      }

      .call-log-result strong {
        font-size: 9px;
        text-align: left;
      }

      .call-log-footer .secondary-btn {
        width: 100%;
      }
    }

  
    /* =========================================================
       CLIENT CALL CONTACT PICKER
       ========================================================= */

    .call-contact-backdrop {
      z-index: 13950;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .call-contact-modal {
      width: min(
        470px,
        calc(100vw - 28px)
      );
      padding: 26px 24px 20px;
    }

    .call-contact-icon {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      margin: 0 auto 13px;
      border-radius: 15px;
      background: #edf7f1;
      color: #3d7655;
      font-size: 22px;
    }

    .call-contact-modal h2 {
      margin: 0;
      color: var(--dark);
      font-size: 19px;
      line-height: 1.2;
      text-align: center;
    }

    .call-contact-modal > p {
      margin: 7px 0 16px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
      text-align: center;
    }

    .call-contact-list {
      display: grid;
      gap: 8px;
      max-height: 420px;
      overflow: auto;
    }

    .call-contact-row {
      display: grid;
      grid-template-columns:
        minmax(0,1fr)
        auto
        24px;
      gap: 10px;
      align-items: center;
      width: 100%;
      min-height: 58px;
      padding: 10px 11px;
      border: 1px solid #e0e6e9;
      border-radius: 11px;
      background: white;
      color: var(--dark);
      text-align: left;
      cursor: pointer;
    }

    .call-contact-row:hover {
      border-color: #bdd2c4;
      background: #f5faf7;
    }

    .call-contact-main {
      min-width: 0;
    }

    .call-contact-main strong {
      display: block;
      overflow: hidden;
      color: var(--dark);
      font-size: 10px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .call-contact-main small {
      display: block;
      margin-top: 3px;
      color: #87949c;
      font-size: 8px;
      line-height: 1.2;
    }

    .call-contact-phone {
      color: #51636f;
      font-size: 9px;
      white-space: nowrap;
    }

    .call-contact-arrow {
      display: grid;
      place-items: center;
      color: #8ba095;
      font-size: 15px;
      font-weight: 900;
    }

    .call-contact-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    @media (max-width: 700px) {
      .call-contact-backdrop {
        align-items: flex-end;
        padding: 10px;
      }

      .call-contact-modal {
        width: 100%;
        margin: 0;
        padding: 21px 15px 14px;
        border-radius: 19px;
      }

      .call-contact-list {
        max-height: 52vh;
      }

      .call-contact-row {
        min-height: 62px;
        padding: 11px 10px;
      }

      .call-contact-main strong {
        font-size: 10.5px;
      }

      .call-contact-phone {
        font-size: 8.5px;
      }

      .call-contact-footer
        .secondary-btn {
        width: 100%;
      }
    }

  
    /* =========================================================
       CLIENT TEXT / EMAIL MULTI-CONTACT PICKER
       ========================================================= */

    .multi-contact-backdrop {
      z-index: 13970;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    .multi-contact-modal {
      width: min(
        500px,
        calc(100vw - 28px)
      );
      padding: 26px 24px 20px;
    }

    .multi-contact-icon {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      margin: 0 auto 13px;
      border-radius: 15px;
      background: #eef6f2;
      font-size: 22px;
    }

    .multi-contact-modal h2 {
      margin: 0;
      color: var(--dark);
      font-size: 19px;
      line-height: 1.2;
      text-align: center;
    }

    .multi-contact-modal > p {
      margin: 7px 0 16px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.45;
      text-align: center;
    }

    .multi-contact-list {
      display: grid;
      gap: 8px;
      max-height: 420px;
      overflow: auto;
    }

    .multi-contact-row {
      position: relative;
      display: grid;
      grid-template-columns:
        25px
        minmax(0,1fr)
        auto;
      gap: 10px;
      align-items: center;
      min-height: 60px;
      padding: 10px 11px;
      border: 1px solid #e0e6e9;
      border-radius: 11px;
      background: white;
      cursor: pointer;
    }

    .multi-contact-row
      input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .multi-contact-check {
      display: grid;
      place-items: center;
      width: 23px;
      height: 23px;
      border: 2px solid #b5c0c6;
      border-radius: 7px;
      background: white;
      color: transparent;
      font-size: 10px;
      font-weight: 900;
    }

    .multi-contact-row:has(input:checked) {
      border-color: #a9cbb5;
      background: #f4faf6;
    }

    .multi-contact-row
      input:checked
      + .multi-contact-check {
      border-color: #477e5d;
      background: #477e5d;
      color: white;
    }

    .multi-contact-main {
      min-width: 0;
    }

    .multi-contact-main strong {
      display: block;
      overflow: hidden;
      color: var(--dark);
      font-size: 10px;
      line-height: 1.3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .multi-contact-main small {
      display: block;
      margin-top: 3px;
      color: #87949c;
      font-size: 8px;
      line-height: 1.2;
    }

    .multi-contact-value {
      max-width: 190px;
      overflow: hidden;
      color: #52636e;
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .multi-contact-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 14px;
    }

    @media (max-width: 700px) {
      .multi-contact-backdrop {
        align-items: flex-end;
        padding: 10px;
      }

      .multi-contact-modal {
        width: 100%;
        margin: 0;
        padding: 21px 15px 14px;
        border-radius: 19px;
      }

      .multi-contact-list {
        max-height: 52vh;
      }

      .multi-contact-row {
        grid-template-columns:
          25px minmax(0,1fr);
        min-height: 64px;
      }

      .multi-contact-value {
        grid-column: 2;
        max-width: 100%;
        margin-top: -5px;
        font-size: 8.5px;
      }

      .multi-contact-footer {
        display: grid;
        grid-template-columns:
          1fr 1.35fr;
      }

      .multi-contact-footer button {
        width: 100%;
      }
    }

  
    /* =========================================================
       CONNECTED DATABASE — COLLAPSIBLE MOBILE FILTERS
       ========================================================= */

    .client-toolbar-search-row {
      display: grid;
      grid-template-columns:
        minmax(260px,1fr)
        auto;
      gap: 8px;
      align-items: center;
    }

    .client-filters-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 39px;
      padding: 0 13px;
      border: 1px solid #d8dee2;
      border-radius: 9px;
      background: #fff;
      color: var(--dark);
      cursor: pointer;
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }

    .client-filters-count {
      display: inline-grid;
      place-items: center;
      min-width: 19px;
      height: 19px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--dark);
      color: #fff;
      font-size: 7px;
      line-height: 1;
    }

    .client-filters-chevron {
      color: #7f8c95;
      font-size: 10px;
    }

    @media (max-width: 700px) {
      .client-toolbar {
        padding: 10px !important;
        margin-bottom: 12px !important;
      }

      .client-toolbar-search-row {
        grid-template-columns:
          minmax(0,1fr)
          auto !important;
        gap: 7px !important;
      }

      .client-toolbar-search-row .search-wrap {
        min-width: 0 !important;
      }

      .client-toolbar-search-row .search-wrap input {
        min-height: 44px !important;
        font-size: 11px !important;
      }

      .client-filters-toggle {
        display: inline-flex !important;
        min-height: 44px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
      }

      .client-advanced-filters {
        display: grid !important;
        grid-template-columns:
          1fr 1fr !important;
        gap: 7px !important;
        margin-top: 8px !important;
        padding: 10px !important;
        border: 1px solid #e2e7ea !important;
        border-radius: 12px !important;
        background: #f9fbfc !important;
      }

      .client-advanced-filters.mobile-collapsed {
        display: none !important;
      }

      .client-advanced-filters select,
      .client-advanced-filters button {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        font-size: 9px !important;
      }

      .client-advanced-filters #agentFilter,
      .client-advanced-filters #clearFiltersButton {
        grid-column: 1 / -1 !important;
      }

      .client-toolbar-meta {
        display: grid !important;
        grid-template-columns:
          auto minmax(150px,1fr) !important;
        gap: 9px !important;
        align-items: center !important;
        margin-top: 8px !important;
      }

      .client-toolbar-meta #clientResultsText {
        font-size: 9px !important;
        line-height: 1.25 !important;
      }

      .client-toolbar-meta .client-view-switch {
        width: 100% !important;
        min-width: 0 !important;
        justify-self: end !important;
      }

      .client-toolbar-meta .client-view-switch button {
        min-height: 40px !important;
        padding: 0 13px !important;
        font-size: 9px !important;
      }
    }

  
    /* =========================================================
       CLIENT LIST ↔ PROFILE — iPHONE-LIKE NAVIGATION
       ========================================================= */

    @media (max-width: 700px) {
      /* Keep the directional page transition quick and physical.
         Scroll position is restored inside the transition snapshot,
         so there is no separate visible scroll animation. */
      html.vt-forward::view-transition-old(root),
      html.vt-back::view-transition-new(root) {
        animation-duration: 290ms !important;
        animation-timing-function:
          cubic-bezier(.32,.72,0,1) !important;
      }

      html.vt-forward::view-transition-new(root),
      html.vt-back::view-transition-old(root) {
        animation-duration: 330ms !important;
        animation-timing-function:
          cubic-bezier(.32,.72,0,1) !important;
      }

      .ios-fallback-forward,
      .ios-fallback-back {
        animation-duration: 330ms !important;
        animation-timing-function:
          cubic-bezier(.32,.72,0,1) !important;
      }
    }

  
    /* =========================================================
       TRANSACTION STATUS — KEEP PILL READABLE ON HOVER / FOCUS
       ========================================================= */

    /* The generic inline-edit hover was washing out status selects.
       Lock each status pill to its own color and preserve white text
       while hovering, focusing, or opening the native select. */
    select.transaction-status-inline,
    select.transaction-status-inline:hover,
    select.transaction-status-inline:focus,
    select.transaction-status-inline:focus-visible,
    select.transaction-status-inline:active {
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      opacity: 1 !important;
      background-image: none !important;
      border-bottom-color: transparent !important;
      box-shadow: none !important;
      filter: none !important;
    }

    select.transaction-status-inline.tx-status-potential,
    select.transaction-status-inline.tx-status-potential:hover,
    select.transaction-status-inline.tx-status-potential:focus,
    select.transaction-status-inline.tx-status-potential:active {
      background-color: #8a68b8 !important;
    }

    select.transaction-status-inline.tx-status-coming-soon,
    select.transaction-status-inline.tx-status-coming-soon:hover,
    select.transaction-status-inline.tx-status-coming-soon:focus,
    select.transaction-status-inline.tx-status-coming-soon:active {
      background-color: #d28d2f !important;
    }

    select.transaction-status-inline.tx-status-active,
    select.transaction-status-inline.tx-status-active:hover,
    select.transaction-status-inline.tx-status-active:focus,
    select.transaction-status-inline.tx-status-active:active {
      background-color: #4d8a3b !important;
    }

    select.transaction-status-inline.tx-status-pending,
    select.transaction-status-inline.tx-status-pending:hover,
    select.transaction-status-inline.tx-status-pending:focus,
    select.transaction-status-inline.tx-status-pending:active {
      background-color: #33a86b !important;
    }

    select.transaction-status-inline.tx-status-closed,
    select.transaction-status-inline.tx-status-closed:hover,
    select.transaction-status-inline.tx-status-closed:focus,
    select.transaction-status-inline.tx-status-closed:active {
      background-color: #6f7881 !important;
    }

    select.transaction-status-inline.tx-status-cancelled,
    select.transaction-status-inline.tx-status-cancelled:hover,
    select.transaction-status-inline.tx-status-cancelled:focus,
    select.transaction-status-inline.tx-status-cancelled:active {
      background-color: #b94747 !important;
    }

    select.transaction-status-inline.tx-status-withdrawn,
    select.transaction-status-inline.tx-status-withdrawn:hover,
    select.transaction-status-inline.tx-status-withdrawn:focus,
    select.transaction-status-inline.tx-status-withdrawn:active {
      background-color: #8b65b5 !important;
    }

    select.transaction-status-inline.tx-status-other,
    select.transaction-status-inline.tx-status-other:hover,
    select.transaction-status-inline.tx-status-other:focus,
    select.transaction-status-inline.tx-status-other:active,
    select.transaction-status-inline.tx-status-default,
    select.transaction-status-inline.tx-status-default:hover,
    select.transaction-status-inline.tx-status-default:focus,
    select.transaction-status-inline.tx-status-default:active {
      background-color: #7f8d99 !important;
    }

    /* Keep the dropdown menu itself normal/readable. */
    select.transaction-status-inline option {
      background: #ffffff !important;
      color: #243746 !important;
      -webkit-text-fill-color: #243746 !important;
    }



    /* Referral tracking */
    .referral-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #f8fafb;
    }

    .referral-fields .span-2 { grid-column: 1 / -1; }

    .referral-summary-list {
      display: grid;
      gap: 9px;
    }

    .referral-summary-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
    }

    .referral-summary-item strong { color: var(--dark); }
    .referral-summary-item small { color: var(--muted); white-space: nowrap; }

    /* Co-op Agent / Brokerage directory */
    .coop-directory-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .coop-directory-stat {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 14px;
      padding: 15px 16px;
    }

    .coop-directory-stat strong {
      display: block;
      font-size: 24px;
      color: var(--dark);
      margin-bottom: 3px;
    }

    .coop-directory-stat span { color: var(--muted); font-size: 12px; }
    .coop-directory-section { margin-top: 18px; }
    .coop-directory-section h3 { margin: 0 0 10px; color: var(--dark); }

    /* Dedicated Co-op Directory tables. Do not reuse .transaction-table:
       that table has transaction-specific nth-child widths and mobile rules. */
    .coop-directory-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .coop-directory-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
      background: #fff;
    }

    .coop-directory-table th {
      text-align: left;
      padding: 12px 14px;
      color: #7f8d98;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .02em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }

    .coop-directory-table td {
      padding: 13px 14px;
      border-bottom: 1px solid #e8edf0;
      color: #52697b;
      font-size: 12px;
      line-height: 1.45;
      vertical-align: middle;
      overflow-wrap: anywhere;
    }

    .coop-directory-table td strong { color: var(--dark); }
    .coop-directory-table small { color: var(--muted); font-size: 10px; }
    .coop-directory-table tbody tr:hover { background: #fafcfd; }

    .coop-agents-table th:nth-child(1),
    .coop-agents-table td:nth-child(1) { width: 20%; min-width: 180px; }
    .coop-agents-table th:nth-child(2),
    .coop-agents-table td:nth-child(2) { width: 22%; min-width: 200px; }
    .coop-agents-table th:nth-child(3),
    .coop-agents-table td:nth-child(3) { width: 23%; min-width: 220px; }
    .coop-agents-table th:nth-child(4),
    .coop-agents-table td:nth-child(4) { width: 80px; min-width: 80px; text-align: center; }
    .coop-agents-table th:nth-child(5),
    .coop-agents-table td:nth-child(5) { min-width: 260px; }

    .coop-brokerages-table th:nth-child(1),
    .coop-brokerages-table td:nth-child(1) { width: 30%; min-width: 260px; }
    .coop-brokerages-table th:nth-child(2),
    .coop-brokerages-table td:nth-child(2),
    .coop-brokerages-table th:nth-child(3),
    .coop-brokerages-table td:nth-child(3) { width: 100px; min-width: 90px; text-align: center; }
    .coop-brokerages-table th:nth-child(4),
    .coop-brokerages-table td:nth-child(4) { min-width: 320px; }

    /* Team Members: use readable cards on phones instead of a 9-column scroller. */
    @media (max-width: 700px) {
      #settingsPanelTeam .team-members-settings-wrap {
        overflow: visible !important;
        border-radius: 0 !important;
      }

      #settingsPanelTeam .team-members-settings-table {
        min-width: 0 !important;
        width: 100% !important;
        display: block !important;
      }

      #settingsPanelTeam .team-members-settings-table thead { display: none !important; }
      #settingsPanelTeam .team-members-settings-table tbody {
        display: grid !important;
        gap: 12px !important;
      }

      #settingsPanelTeam .team-members-settings-table tbody tr {
        display: block !important;
        padding: 10px 12px !important;
        border: 1px solid #dfe6ea !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(13,39,61,.04) !important;
      }

      #settingsPanelTeam .team-members-settings-table tbody td {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 102px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f3 !important;
        font-size: 13px !important;
        text-align: left !important;
      }

      #settingsPanelTeam .team-members-settings-table tbody td:last-child {
        border-bottom: 0 !important;
        display: block !important;
        padding-top: 12px !important;
      }

      #settingsPanelTeam .team-members-settings-table tbody td::before {
        color: #7b8b97;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .02em;
        text-transform: uppercase;
      }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(1)::before { content: 'Name'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(2)::before { content: 'Email'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(3)::before { content: 'Phone'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(4)::before { content: 'Permission'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(5)::before { content: 'Team Title'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(6)::before { content: 'Joined'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(7)::before { content: 'Login'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(8)::before { content: 'Google Email'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(9)::before { content: 'Active'; }
      #settingsPanelTeam .team-members-settings-table tbody td:nth-child(10)::before { content: none; }

      #settingsPanelTeam .team-members-settings-table input,
      #settingsPanelTeam .team-members-settings-table select {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 44px !important;
      }

      #settingsPanelTeam .team-members-settings-table .settings-table-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
      }

      #settingsPanelTeam .team-members-settings-table .settings-small-btn {
        min-height: 40px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
      }

      #settingsPanelTeam .settings-section-header {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      #settingsPanelTeam .team-settings-heading-actions,
      #settingsPanelTeam .team-settings-heading-actions .secondary-btn {
        width: 100% !important;
      }

      /* Co-op Directory also becomes labeled cards on phones. */
      .coop-directory-table-wrap {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
      }
      .coop-directory-table { display: block !important; width: 100% !important; }
      .coop-directory-table thead { display: none !important; }
      .coop-directory-table tbody { display: grid !important; gap: 10px !important; }
      .coop-directory-table tbody tr {
        display: block !important;
        border: 1px solid #dfe6ea !important;
        border-radius: 14px !important;
        background: #fff !important;
        padding: 9px 12px !important;
      }
      .coop-directory-table tbody td {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 88px minmax(0,1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #edf1f3 !important;
        text-align: left !important;
        font-size: 13px !important;
      }
      .coop-directory-table tbody td:last-child { border-bottom: 0 !important; }
      .coop-directory-table tbody td::before {
        color: #7b8b97;
        font-size: 10px;
        font-weight: 900;
        text-transform: uppercase;
      }
      .coop-agents-table td:nth-child(1)::before { content: 'Agent'; }
      .coop-agents-table td:nth-child(2)::before { content: 'Brokerage'; }
      .coop-agents-table td:nth-child(3)::before { content: 'Contact'; }
      .coop-agents-table td:nth-child(4)::before { content: 'Deals'; }
      .coop-agents-table td:nth-child(5)::before { content: 'Recent'; }
      .coop-brokerages-table td:nth-child(1)::before { content: 'Brokerage'; }
      .coop-brokerages-table td:nth-child(2)::before { content: 'Agents'; }
      .coop-brokerages-table td:nth-child(3)::before { content: 'Deals'; }
      .coop-brokerages-table td:nth-child(4)::before { content: 'Recent'; }
    }

    /* Rich email composer */
    .email-editor-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--line);
      border-bottom: 0;
      border-radius: 12px 12px 0 0;
      background: #f7f9fa;
    }

    .email-editor-toolbar button,
    .email-editor-toolbar select {
      min-height: 34px;
      border: 1px solid #cfd8de;
      background: #fff;
      border-radius: 8px;
      color: var(--dark);
      padding: 5px 9px;
      font: inherit;
    }

    .email-editor-toolbar button {
      min-width: 35px;
      font-weight: 800;
      cursor: pointer;
    }

    .email-rich-editor {
      min-height: 240px;
      max-height: 460px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 0 0 12px 12px;
      background: #fff;
      padding: 16px 18px;
      color: var(--dark);
      font-size: 16px;
      line-height: 1.55;
      outline: none;
      white-space: normal;
    }

    .email-rich-editor:focus {
      border-color: #9aacb8;
      box-shadow: 0 0 0 3px rgba(24, 52, 70, .07);
    }

    .email-rich-editor:empty::before {
      content: 'Write your message...';
      color: #9aa7b1;
      pointer-events: none;
    }

    .email-rich-editor img {
      max-width: 100%;
      height: auto;
      border-radius: 6px;
    }

    @media (max-width: 700px) {
      .referral-fields,
      .coop-directory-stats { grid-template-columns: 1fr; }
      .referral-fields .span-2 { grid-column: auto; }
      .email-editor-toolbar { gap: 4px; }
    }
  

    /* Compact Database Settings */
    .settings-database-toolbar {
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:14px;
      padding:2px 2px 0;
    }
    .settings-database-toolbar h2 { margin:0 0 4px; font-size:22px; }
    .settings-database-toolbar p { margin:0; color:var(--muted); font-size:13px; }
    .settings-database-sort { display:flex; align-items:center; gap:8px; white-space:nowrap; font-size:12px; font-weight:800; color:var(--muted); }
    .settings-database-sort select { min-width:145px; padding:8px 30px 8px 10px; }
    .settings-database-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
    #settingsPanelDatabase .settings-database-card { margin:0; min-width:0; }
    #settingsPanelDatabase .settings-database-card .settings-section-header { padding:14px 16px 10px; }
    #settingsPanelDatabase .settings-database-card .settings-section-header h3 { margin:0 0 2px; }
    #settingsPanelDatabase .settings-database-card .settings-section-header p { margin:0; font-size:12px; }
    #settingsPanelDatabase .settings-database-card .settings-section-body { padding:0 12px 12px; }
    #settingsPanelDatabase .settings-database-table th,
    #settingsPanelDatabase .settings-database-table td { padding:7px 6px; }
    #settingsPanelDatabase .settings-database-table th { font-size:10px; }
    #settingsPanelDatabase .settings-database-table input { min-width:0; width:100%; padding:7px 8px; }
    #settingsPanelDatabase .settings-database-table .tiny-input { width:58px; min-width:58px; }
    #settingsPanelDatabase .settings-small-btn { padding:7px 9px; }
    #settingsPanelDatabase .settings-add-row-compact { margin-top:10px; padding-top:10px; gap:8px; align-items:flex-end; }
    #settingsPanelDatabase .settings-add-row-compact .workflow-field { flex:1; min-width:0; }
    #settingsPanelDatabase .settings-add-row-compact .workflow-field label { margin-bottom:4px; }
    .task-created-by { color:#7b8794 !important; font-size:11px !important; margin-top:3px; }

    @media (max-width: 980px) {
      .settings-database-grid { grid-template-columns:1fr; }
    }
    @media (max-width: 700px) {
      .settings-database-toolbar { align-items:stretch; flex-direction:column; gap:10px; }
      .settings-database-sort { justify-content:space-between; }
      .settings-database-sort select { flex:1; }
      #settingsPanelDatabase .settings-database-card .settings-section-header { padding:12px 12px 8px; }
      #settingsPanelDatabase .settings-database-card .settings-section-body { padding:0 8px 10px; }
      #settingsPanelDatabase .settings-database-table th,
      #settingsPanelDatabase .settings-database-table td { padding:6px 4px; }
      #settingsPanelDatabase .settings-database-table th:nth-child(3),
      #settingsPanelDatabase .settings-database-table td:nth-child(3) { width:54px; }
      #settingsPanelDatabase .settings-add-row-compact { display:flex; flex-direction:row; }
    }

    /* Team Lead Reports */
    .report-controls {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin:0 0 18px;
      padding:12px 14px;
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
    }
    .report-controls-copy h2 { margin:0 0 3px; font-size:18px; }
    .report-controls-copy p { margin:0; color:var(--muted); font-size:12px; }
    .report-year-wrap { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--muted); }
    .report-year-wrap select { min-width:112px; padding:8px 30px 8px 10px; }
    .report-kpi-grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
      margin-bottom:14px;
    }
    .report-kpi {
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      padding:15px;
      min-width:0;
    }
    .report-kpi-label {
      color:var(--muted);
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.05em;
      margin-bottom:7px;
    }
    .report-kpi-value {
      font-size:25px;
      line-height:1.05;
      font-weight:900;
      color:var(--dark);
      overflow-wrap:anywhere;
    }
    .report-kpi-sub { margin-top:5px; color:var(--muted); font-size:11px; }
    .report-section-grid {
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:14px;
      margin-bottom:14px;
      align-items:start;
    }
    .report-card {
      border:1px solid var(--line);
      border-radius:12px;
      background:#fff;
      overflow:hidden;
      min-width:0;
    }
    .report-card-header {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px 10px;
      border-bottom:1px solid #eef1f3;
    }
    .report-card-header h3 { margin:0 0 3px; font-size:16px; }
    .report-card-header p { margin:0; color:var(--muted); font-size:11px; }
    .report-card-body { padding:12px 16px 15px; }
    .report-compare-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }
    .report-compare-item {
      border:1px solid #edf0f2;
      border-radius:10px;
      padding:10px 11px;
    }
    .report-compare-label { color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
    .report-compare-main { margin-top:4px; font-size:17px; font-weight:900; }
    .report-change { margin-top:3px; font-size:11px; font-weight:800; }
    .report-change.positive { color:var(--success); }
    .report-change.negative { color:var(--danger); }
    .report-change.neutral { color:var(--muted); }
    .report-fee-row,
    .report-mix-row {
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:12px;
      padding:8px 0;
      border-bottom:1px solid #f0f2f3;
    }
    .report-fee-row:last-child,
    .report-mix-row:last-child { border-bottom:0; }
    .report-fee-row span,
    .report-mix-row span { color:#45596b; font-size:12px; }
    .report-fee-row strong,
    .report-mix-row strong { font-size:13px; color:var(--dark); }
    .report-coverage {
      margin:0 0 14px;
      padding:10px 12px;
      border:1px solid var(--gold-soft);
      border-radius:10px;
      background:var(--gold-pale);
      color:#594d32;
      font-size:12px;
      line-height:1.45;
    }
    .report-table-wrap { overflow:auto; }
    .report-table { width:100%; border-collapse:collapse; min-width:650px; }
    .report-table th {
      text-align:left;
      padding:9px 10px;
      color:#7e8b96;
      font-size:10px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.04em;
      border-bottom:1px solid var(--line);
      white-space:nowrap;
    }
    .report-table td {
      padding:9px 10px;
      border-bottom:1px solid #eef1f3;
      font-size:12px;
      color:#42576a;
      vertical-align:middle;
      white-space:nowrap;
    }
    .report-table tbody tr:last-child td { border-bottom:0; }
    .report-table td:first-child { font-weight:800; color:var(--dark); }
    .report-table .money { text-align:right; }
    .report-table th.money { text-align:right; }
    .report-month-bar {
      height:6px;
      border-radius:999px;
      background:#eef1f3;
      overflow:hidden;
      min-width:85px;
    }
    .report-month-fill {
      height:100%;
      border-radius:inherit;
      background:var(--gold);
    }
    .report-pipeline-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
    }
    .report-pipeline-stat {
      border:1px solid #edf0f2;
      border-radius:10px;
      padding:11px;
    }
    .report-pipeline-stat span { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
    .report-pipeline-stat strong { display:block; margin-top:4px; font-size:17px; color:var(--dark); }
    .report-empty { padding:22px; color:var(--muted); text-align:center; font-size:12px; }

    @media (max-width: 1000px) {
      .report-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .report-section-grid { grid-template-columns:1fr; }
    }
    @media (max-width: 700px) {
      .report-controls { align-items:stretch; flex-direction:column; }
      .report-year-wrap { justify-content:space-between; }
      .report-year-wrap select { flex:1; }
      .report-kpi-grid { grid-template-columns:1fr 1fr; gap:8px; }
      .report-kpi { padding:12px; }
      .report-kpi-value { font-size:20px; }
      .report-compare-grid { grid-template-columns:1fr; }
      .report-pipeline-grid { grid-template-columns:1fr; }
    }



    /* =========================================================
       CONNECTED DATABASE — CLICK-TO-EDIT CELLS
       ========================================================= */
    .client-inline-editable {
      cursor: pointer;
      position: relative;
      transition: background-color .12s ease;
    }

    .client-inline-editable:hover {
      background: #f7f9fa !important;
    }

    .client-inline-editable::after {
      display: none !important;
      content: none !important;
    }

    .client-inline-editor {
      width: 100%;
      min-width: 0;
      min-height: 30px;
      padding: 0 22px 0 0;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background-color: transparent !important;
      color: var(--dark);
      font: inherit;
      font-size: 10px;
      line-height: 1.25;
    }

    .client-inline-editor:focus,
    .client-inline-editor:focus-visible,
    .client-inline-editor:active {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .client-level-inline-editable {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border-radius: 999px;
    }

    .client-level-inline-editable .client-inline-editor {
      width: 58px;
      min-width: 58px;
      padding-right: 16px;
      font-weight: 900;
      text-align: center;
    }

    .client-inline-saving {
      opacity: .55;
      pointer-events: none;
    }

    .client-inline-edit-error {
      animation: clientEditErrorFlash .8s ease;
    }

    @keyframes clientEditErrorFlash {
      0%,100% { background: inherit; }
      35% { background: #fff0ee; }
    }

    .client-name-open-profile {
      cursor: pointer;
    }

    .client-name-open-profile:hover .client-name {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    @media (max-width: 700px) {
      .client-inline-editable::after {
        display: none;
      }

      .client-inline-editor {
        min-height: 38px;
        font-size: 14px;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
      }
    }


    /* =========================================================
       CONNECTED DATABASE — CUSTOM LEVEL PICKER
       ========================================================= */
    .client-level-inline-editable {
      position: relative;
      overflow: visible !important;
    }

    .client-level-picker {
      position: absolute;
      z-index: 2500;
      top: calc(100% + 7px);
      left: -6px;
      width: 196px;
      padding: 7px;
      border: 0;
      border-radius: 14px;
      background: rgba(255,255,255,.98);
      box-shadow:
        0 18px 42px rgba(28,44,57,.18),
        0 3px 10px rgba(28,44,57,.08);
      backdrop-filter: blur(12px);
    }

    .client-level-picker::before {
      content: "";
      position: absolute;
      top: -5px;
      left: 17px;
      width: 11px;
      height: 11px;
      background: rgba(255,255,255,.98);
      transform: rotate(45deg);
      border-radius: 2px;
      box-shadow: -2px -2px 4px rgba(28,44,57,.025);
    }

    .client-level-picker-title {
      position: relative;
      z-index: 1;
      padding: 5px 8px 7px;
      color: #81909c;
      font-size: 8.5px;
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .client-level-picker-option {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 38px;
      margin: 2px 0;
      padding: 6px 9px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #233b4d;
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: transform .12s ease, background-color .12s ease;
    }

    .client-level-picker-option:hover {
      transform: translateX(2px);
      background: #f6f8f9;
    }

    .client-level-picker-option.is-selected {
      background: #f3f6f7;
    }

    .client-level-picker-dot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 950;
      color: #fff;
      box-shadow: 0 3px 8px rgba(29,48,61,.10);
    }

    .client-level-picker-option.level-a .client-level-picker-dot {
      background: #21a85a;
    }

    .client-level-picker-option.level-b .client-level-picker-dot {
      background: #f1b80f;
    }

    .client-level-picker-option.level-c .client-level-picker-dot {
      background: #ff7a1a;
    }

    .client-level-picker-option.level-d .client-level-picker-dot {
      background: #778896;
    }

    .client-level-picker-option.level-none .client-level-picker-dot {
      background: #d9dee2;
      color: #66747f;
    }

    .client-level-picker-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .client-level-picker-copy strong {
      color: #1f3749;
      font-size: 10px;
      font-weight: 950;
      line-height: 1.1;
    }

    .client-level-picker-copy small {
      margin-top: 2px;
      color: #88959f;
      font-size: 8px;
      font-weight: 750;
      line-height: 1.1;
    }

    .client-level-picker-check {
      margin-left: auto;
      color: #6e7f8c;
      font-size: 11px;
      font-weight: 950;
    }

    @media (max-width: 700px) {
      .client-level-picker {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 18px;
        width: auto;
        max-width: none;
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 22px 60px rgba(28,44,57,.24);
      }

      .client-level-picker::before {
        display: none;
      }

      .client-level-picker-option {
        min-height: 46px;
      }

      .client-level-picker-dot {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 11px;
      }

      .client-level-picker-copy strong {
        font-size: 12px;
      }

      .client-level-picker-copy small {
        font-size: 9px;
      }
    }


    .client-level-inline-editable:has(.client-level-picker) {
      background: transparent !important;
      box-shadow: none !important;
    }




    /* =========================================================
       INDEX 34 — MODERN DROPDOWN SYSTEM
       Sleeker select styling + custom inline pickers for table edits
       ========================================================= */
    select:not([multiple]):not(.transaction-status-inline):not(.transaction-type-pill):not(.dashboard-client-status-select):not(.dashboard-buy-sell-select) {
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      appearance: none !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.25 5.5 7 9.25 10.75 5.5' stroke='%23687A89' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 11px center !important;
      background-size: 12px 12px !important;
      padding-right: 34px !important;
    }

    select:not([multiple]):not(.transaction-status-inline):not(.transaction-type-pill):not(.dashboard-client-status-select):not(.dashboard-buy-sell-select):hover {
      border-color: #c6d1d8 !important;
      box-shadow: 0 6px 18px rgba(17,40,60,.055) !important;
      background-color: #fff !important;
    }

    select option {
      color: #20384c;
      background: #ffffff;
    }

    .inline-menu-picker-host,
    .client-inline-editable:has(.inline-menu-picker),
    .client-level-inline-editable:has(.inline-menu-picker) {
      position: relative;
      overflow: visible !important;
      z-index: 12;
      background: transparent !important;
      box-shadow: none !important;
    }

    .inline-menu-picker {
      position: absolute;
      z-index: 2600;
      top: calc(100% + 7px);
      left: -6px;
      width: 232px;
      max-width: min(280px, calc(100vw - 28px));
      padding: 8px;
      border: 1px solid rgba(219, 226, 231, .95);
      border-radius: 16px;
      background: rgba(255,255,255,.985);
      box-shadow: 0 22px 56px rgba(22, 40, 53, .18), 0 6px 18px rgba(22, 40, 53, .08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .inline-menu-picker::before {
      content: '';
      position: absolute;
      top: -5px;
      left: 18px;
      width: 12px;
      height: 12px;
      background: rgba(255,255,255,.985);
      transform: rotate(45deg);
      border-radius: 2px;
      border-left: 1px solid rgba(219, 226, 231, .95);
      border-top: 1px solid rgba(219, 226, 231, .95);
    }

    .inline-menu-picker-title {
      padding: 5px 8px 8px;
      color: #8695a0;
      font-size: 8.5px;
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .inline-menu-picker-options {
      display: flex;
      flex-direction: column;
      gap: 3px;
      max-height: 320px;
      overflow: auto;
      padding-right: 1px;
    }

    .inline-menu-picker-options::-webkit-scrollbar {
      width: 8px;
    }

    .inline-menu-picker-options::-webkit-scrollbar-thumb {
      background: #d6dee4;
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    .inline-menu-picker-option {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 40px;
      padding: 8px 10px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      color: #20384c;
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
    }

    .inline-menu-picker-option:hover {
      background: #f6f9fb;
      transform: translateX(2px);
    }

    .inline-menu-picker-option.is-selected {
      background: #f2f6f8;
      box-shadow: inset 0 0 0 1px rgba(143, 169, 186, .18);
    }

    .inline-menu-picker-option-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      font-size: 9.5px;
      font-weight: 950;
      letter-spacing: .01em;
      box-shadow: 0 3px 8px rgba(29,48,61,.08);
      background: #e9eef2;
      color: #516675;
    }

    .inline-menu-picker-option.option-status_connected .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-agent .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-source .inline-menu-picker-option-badge {
      background: #edf2f5;
      color: #516675;
    }

    .inline-menu-picker-option.option-status_active .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-ownership_homeowner .inline-menu-picker-option-badge {
      background: #dff3e5;
      color: #1d8a47;
    }

    .inline-menu-picker-option.option-status_previous_client .inline-menu-picker-option-badge {
      background: #efe7fb;
      color: #7651c4;
    }

    .inline-menu-picker-option.option-status_potential .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-status_coming_soon .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-status_pending .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-status_open .inline-menu-picker-option-badge {
      background: #fdf0ef;
      color: #d46a59;
    }

    .inline-menu-picker-option.option-ownership_non_homeowner .inline-menu-picker-option-badge {
      background: #eef3f7;
      color: #5b7181;
    }

    .inline-menu-picker-option.option-ownership_unknown .inline-menu-picker-option-badge,
    .inline-menu-picker-option.option-none .inline-menu-picker-option-badge {
      background: #eef1f4;
      color: #6d7e8c;
    }

    .inline-menu-picker-option-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .inline-menu-picker-option-copy strong {
      color: #1f3749;
      font-size: 10px;
      font-weight: 920;
      line-height: 1.15;
    }

    .inline-menu-picker-option-copy small {
      margin-top: 2px;
      color: #8b98a2;
      font-size: 8px;
      font-weight: 760;
      line-height: 1.15;
    }

    .inline-menu-picker-option-check {
      margin-left: auto;
      color: #738694;
      font-size: 11px;
      font-weight: 950;
    }

    @media (max-width: 700px) {
      .inline-menu-picker {
        position: fixed;
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 18px;
        width: auto;
        max-width: none;
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 22px 60px rgba(28,44,57,.24);
      }

      .inline-menu-picker::before {
        display: none;
      }

      .inline-menu-picker-option {
        min-height: 46px;
      }

      .inline-menu-picker-option-badge {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 10px;
      }

      .inline-menu-picker-option-copy strong {
        font-size: 12px;
      }

      .inline-menu-picker-option-copy small {
        font-size: 9px;
      }
    }



    /* =========================================================
       INDEX 40 — TRANSACTION PRIMARY CLIENT SEARCH
       Use the same modern type-to-search picker as New Opportunity.
       No giant native client list; no additional-linked-client UI.
       ========================================================= */
    #transactionForm .opportunity-client-field {
      position: relative !important;
      overflow: visible !important;
    }

    #transactionForm .opportunity-client-field > #transactionClient {
      display: none !important;
    }

    #transactionForm #opportunityClientPicker {
      display: block !important;
      width: 100% !important;
    }

    #transactionForm .transaction-additional-clients-field {
      display: none !important;
    }

    #transactionForm .opportunity-client-search {
      flex: 1 !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 42px !important;
      height: 42px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #1b374b !important;
      font-size: 13px !important;
      font-weight: 650 !important;
    }

    #transactionForm:not(.opportunity-mode) .opportunity-client-field {
      grid-column: 1 / -1;
    }

    #transactionForm:not(.opportunity-mode) .opportunity-client-search-shell {
      min-height: 48px;
      border-radius: 12px;
    }

    #transactionForm:not(.opportunity-mode) .opportunity-client-results {
      left: 0;
      right: 0;
      width: 100%;
    }


    /* =========================================================
       SUPER ADMIN — DELETED RECORDS / RECYCLE BIN
       ========================================================= */
    .deleted-records-toolbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }

    .deleted-records-summary {
      color:#768692;
      font-size:11px;
      font-weight:800;
    }

    .deleted-records-filters {
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:7px;
      margin:0 0 14px;
      padding:4px;
      width:max-content;
      max-width:100%;
      border:1px solid #e2e8ec;
      border-radius:12px;
      background:#f6f8fa;
    }

    .deleted-record-filter {
      min-height:34px;
      padding:7px 11px;
      border:0;
      border-radius:9px;
      background:transparent;
      color:#6d7e8b;
      cursor:pointer;
      font-size:9.5px;
      font-weight:900;
      transition:background-color .14s ease, color .14s ease, box-shadow .14s ease;
    }

    .deleted-record-filter:hover {
      background:#fff;
      color:#29465b;
    }

    .deleted-record-filter.active {
      background:#fff;
      color:#173247;
      box-shadow:0 2px 8px rgba(17,40,60,.08);
    }

    .deleted-records-list {
      display:grid;
      gap:9px;
    }

    .deleted-record-card {
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:16px;
      align-items:center;
      padding:14px 15px;
      border:1px solid #e3e8ec;
      border-radius:13px;
      background:#fff;
      box-shadow:0 4px 14px rgba(17,40,60,.035);
    }

    .deleted-record-main {
      min-width:0;
    }

    .deleted-record-topline {
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }

    .deleted-record-name {
      color:#173247;
      font-size:12px;
      font-weight:950;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .deleted-record-type {
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      min-height:22px;
      padding:3px 8px;
      border-radius:999px;
      background:#eef3f6;
      color:#607382;
      font-size:8.5px;
      font-weight:950;
      letter-spacing:.035em;
      text-transform:uppercase;
    }

    .deleted-record-detail {
      margin-top:5px;
      color:#7f8d98;
      font-size:10px;
      line-height:1.45;
    }

    .deleted-record-meta {
      margin-top:5px;
      color:#9aa5ad;
      font-size:9px;
      line-height:1.4;
    }

    .deleted-record-actions {
      display:flex;
      align-items:center;
      gap:7px;
    }

    .deleted-record-empty {
      padding:34px 20px;
      border:1px dashed #dce4e9;
      border-radius:14px;
      text-align:center;
      color:#82909a;
      background:#fbfcfd;
    }

    @media (max-width:700px) {
      .deleted-records-toolbar {
        align-items:stretch;
        flex-direction:column;
      }
      .deleted-records-filters {
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
      }

      .deleted-record-filter {
        width:100%;
      }

      .deleted-record-card {
        grid-template-columns:1fr;
      }
      .deleted-record-actions {
        width:100%;
      }
      .deleted-record-actions button {
        flex:1;
      }
    }


    /* =========================================================
       KETZNER CRM — MODERN UX SYSTEM 2026
       This layer intentionally overrides presentation only.
       ========================================================= */
    :root {
      --ux-canvas: #f5f7f9;
      --ux-surface: #ffffff;
      --ux-surface-soft: #f9fbfc;
      --ux-text: #172f43;
      --ux-text-2: #4f6576;
      --ux-muted: #81909c;
      --ux-line: #e2e8ec;
      --ux-line-strong: #d3dce2;
      --ux-navy: #12334b;
      --ux-navy-2: #0e2b40;
      --ux-gold: #d6b767;
      --ux-gold-soft: #f6edcf;
      --ux-radius-sm: 10px;
      --ux-radius: 14px;
      --ux-radius-lg: 20px;
      --ux-shadow-xs: 0 1px 2px rgba(15,39,57,.035);
      --ux-shadow-sm: 0 5px 16px rgba(15,39,57,.055);
      --ux-shadow-md: 0 14px 36px rgba(15,39,57,.09);
      --ux-shadow-lg: 0 28px 70px rgba(8,30,45,.18);
    }

    html {
      color-scheme: light;
      scrollbar-gutter: stable;
    }

    body {
      font-size: 14px !important;
      line-height: 1.45;
      background:
        radial-gradient(circle at 18% -5%, rgba(214,183,103,.09), transparent 28%),
        linear-gradient(180deg, #f8fafb 0%, var(--ux-canvas) 100%) !important;
    }

    ::selection {
      background: rgba(214,183,103,.28);
      color: var(--ux-text);
    }

    /* Elegant, low-noise scrollbars */
    * {
      scrollbar-width: thin;
      scrollbar-color: #c8d1d7 transparent;
    }

    *::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    *::-webkit-scrollbar-thumb {
      background: #cad3d9;
      border: 3px solid transparent;
      background-clip: padding-box;
      border-radius: 999px;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: #aebbc4;
      border: 3px solid transparent;
      background-clip: padding-box;
    }

    /* Shell */
    .app-shell {
      grid-template-columns: 252px minmax(0,1fr) !important;
    }

    .sidebar {
      padding: 18px 12px 16px !important;
      box-shadow: 10px 0 30px rgba(8,28,42,.075) !important;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .sidebar .brand-mark.sidebar-wordmark-wrap {
      min-height: 72px !important;
      margin-bottom: 10px !important;
      padding: 4px 10px 14px !important;
    }

    .sidebar-wordmark-logo {
      width: 168px !important;
    }

    .nav-label {
      margin: 17px 12px 6px !important;
      padding: 0 5px !important;
      color: rgba(232,203,127,.58) !important;
      font-size: 9px !important;
      font-weight: 850 !important;
      letter-spacing: .15em !important;
    }

    .nav-item {
      min-height: 42px;
      margin: 2px 4px !important;
      width: calc(100% - 8px) !important;
      padding: 9px 11px !important;
      gap: 10px !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      font-weight: 650 !important;
    }

    .nav-icon {
      width: 18px !important;
      height: 18px !important;
      flex-basis: 18px !important;
    }

    .nav-item.active {
      box-shadow:
        inset 3px 0 0 var(--ux-gold),
        0 5px 14px rgba(0,0,0,.09) !important;
    }

    .sidebar-user {
      padding: 15px 10px 2px !important;
      margin-top: 18px !important;
    }

    .sidebar-user .name {
      font-size: 13px !important;
      font-weight: 760 !important;
    }

    .sidebar-user .role {
      font-size: 10px !important;
    }

    .signout {
      min-height: 34px;
      padding: 6px 0 !important;
      font-weight: 650;
    }

    .main {
      padding: 0 28px 42px !important;
      background: transparent !important;
    }

    .view {
      width: min(100%, 1680px);
      margin-inline: auto;
      padding-top: 0 !important;
    }

    /* Sticky page headers make long databases dramatically easier to use. */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 80;
      min-height: 82px;
      margin: 0 -8px 22px !important;
      padding: 18px 8px 13px !important;
      align-items: center !important;
      background:
        linear-gradient(180deg,
          rgba(248,250,251,.97) 0%,
          rgba(248,250,251,.92) 74%,
          rgba(248,250,251,0) 100%);
      backdrop-filter: blur(14px);
    }

    .topbar h1,
    .view h1 {
      font-size: clamp(28px, 2.35vw, 38px) !important;
      font-weight: 780 !important;
      letter-spacing: -.036em !important;
    }

    .topbar p,
    .page-subtitle {
      max-width: 720px;
      margin-top: 5px !important;
      color: var(--ux-muted) !important;
      font-size: 12.5px !important;
      line-height: 1.45;
    }

    #viewAsBanner:not(.hidden) ~ .view.active .topbar {
      top: 48px;
    }

    /* Modern surfaces */
    .card,
    .dashboard-card,
    .dashboard-panel,
    .settings-section,
    .form-launch-card,
    .profile-card,
    .profile-panel,
    .transaction-profile-panel,
    .team-summary-card,
    .team-detail-panel,
    .report-card,
    .report-kpi,
    .submission-history-stat,
    .activity-panel,
    .table-wrap,
    .client-table-wrap,
    .lead-table-wrap,
    .transaction-table-wrap {
      border-color: var(--ux-line) !important;
      border-radius: var(--ux-radius-lg) !important;
      box-shadow: var(--ux-shadow-xs) !important;
      background: rgba(255,255,255,.98) !important;
    }

    /* Don't make non-clickable cards jump around. */
    .card:hover,
    .dashboard-card:hover {
      transform: none !important;
    }

    .form-launch-card:hover,
    .team-card:hover,
    [data-client-id]:hover,
    [data-transaction-id]:hover,
    [data-lead-id]:hover {
      box-shadow: var(--ux-shadow-sm) !important;
    }

    /* Typography: current file had many 8–10px labels. Bring core UI back into a
       readable modern SaaS range without making the database feel oversized. */
    thead th,
    .report-table th {
      font-size: 10px !important;
      letter-spacing: .06em !important;
      line-height: 1.2;
    }

    tbody td,
    .report-table td {
      font-size: 12.5px !important;
      line-height: 1.42 !important;
    }

    .client-name,
    .transaction-property-primary,
    .dashboard-row-title,
    .email-template-name {
      font-size: 13px !important;
      font-weight: 760 !important;
    }

    .transaction-client-secondary,
    .help,
    .small-muted,
    .muted {
      line-height: 1.45;
    }

    label {
      font-size: 11px !important;
      letter-spacing: -.005em !important;
      text-transform: none !important;
      color: #354f62 !important;
    }

    /* Controls */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea {
      min-height: 42px;
      border-color: var(--ux-line-strong) !important;
      border-radius: 11px !important;
      font-size: 13px !important;
      line-height: 1.35;
    }

    textarea {
      min-height: 100px;
      padding: 11px 12px !important;
    }

    input::placeholder,
    textarea::placeholder {
      color: #9aa6af !important;
      opacity: 1;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: #7898ad !important;
      box-shadow: 0 0 0 3px rgba(39,82,112,.095) !important;
    }

    button,
    .primary-btn,
    .secondary-btn {
      min-height: 40px;
    }

    .primary-btn,
    button.primary-btn {
      border-radius: 11px !important;
      padding: 9px 15px !important;
      font-size: 12px !important;
      font-weight: 760 !important;
      box-shadow: 0 5px 15px rgba(16,46,69,.14) !important;
    }

    .secondary-btn,
    .settings-small-btn {
      border-radius: 10px !important;
      padding: 8px 13px !important;
      font-size: 11.5px !important;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
      outline: 3px solid rgba(214,183,103,.48) !important;
      outline-offset: 2px;
    }

    /* Tables */
    .table-wrap,
    .client-table-wrap,
    .lead-table-wrap,
    .transaction-table-wrap,
    .report-table-wrap {
      overflow-x: auto !important;
      border-radius: 16px !important;
      box-shadow: var(--ux-shadow-xs) !important;
    }

    thead th {
      background: #f7f9fa !important;
      color: #738391 !important;
      padding: 12px 13px !important;
    }

    tbody td {
      padding: 13px !important;
      border-bottom-color: #edf1f3 !important;
    }

    tbody tr:hover td {
      background: #f8fafb !important;
    }

    /* Filters and toolbars */
    .client-toolbar,
    .lead-toolbar,
    .transaction-toolbar,
    .tasks-toolbar,
    .submission-history-toolbar,
    .coop-directory-toolbar,
    .filter-bar {
      border-radius: 16px !important;
    }

    .search-wrap {
      border-radius: 12px !important;
    }

    /* Pills */
    .status-pill,
    .transaction-type-pill,
    .lead-priority-pill,
    .lead-status-pill,
    .submission-form-chip,
    .team-login-pill,
    .level-chip {
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 9px !important;
      font-size: 10px !important;
      line-height: 1 !important;
    }

    /* Modals */
    .modal-backdrop {
      background: rgba(7,24,36,.45) !important;
      backdrop-filter: blur(10px) saturate(.9);
    }

    .modal {
      border: 1px solid rgba(255,255,255,.75) !important;
      border-radius: 22px !important;
      box-shadow: var(--ux-shadow-lg) !important;
      overflow: hidden;
    }

    .modal-header {
      padding: 17px 20px !important;
    }

    .modal-header h2 {
      font-size: 19px !important;
    }

    .modal-footer {
      padding: 13px 20px !important;
    }

    .modal-close {
      width: 36px;
      height: 36px;
      border-radius: 10px !important;
    }

    /* Settings: less wasted space */
    .settings-layout,
    .settings-content {
      gap: 14px !important;
    }

    .settings-section {
      overflow: hidden;
    }

    .settings-section-header {
      padding: 14px 16px !important;
    }

    .settings-section-body {
      padding: 15px 16px !important;
    }

    /* Dashboard/Reports metrics */
    .dashboard-card,
    .team-summary-card,
    .report-kpi {
      min-height: 108px !important;
      padding: 16px !important;
    }

    .dashboard-card strong,
    .team-summary-value,
    .report-kpi-value {
      font-size: clamp(23px, 2vw, 32px) !important;
      line-height: 1.05;
    }

    /* Back links feel like navigation, not body copy */
    .back-link {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      margin-bottom: 12px;
      padding: 6px 9px !important;
      border-radius: 9px;
      color: #587083 !important;
      font-size: 11px !important;
      font-weight: 760 !important;
      text-decoration: none;
    }

    .back-link:hover {
      background: rgba(255,255,255,.78);
      color: var(--ux-text) !important;
    }

    /* Quick Find trigger */
    .global-quick-find-trigger {
      display: flex;
      align-items: center;
      width: calc(100% - 8px);
      min-height: 40px;
      margin: 2px 4px 7px;
      padding: 8px 10px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 10px;
      background: rgba(255,255,255,.055);
      color: rgba(255,255,255,.78);
      text-align: left;
      cursor: pointer;
    }

    .global-quick-find-trigger:hover {
      background: rgba(255,255,255,.09);
      color: #fff;
    }

    .global-quick-find-icon {
      flex: 0 0 19px;
      font-size: 18px;
      line-height: 1;
      color: rgba(232,203,127,.85);
    }

    .global-quick-find-copy {
      margin-left: 8px;
      font-size: 12px;
      font-weight: 680;
    }

    .global-quick-find-shortcut {
      margin-left: auto;
      padding: 3px 6px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 6px;
      background: rgba(0,0,0,.08);
      color: rgba(255,255,255,.48);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .03em;
    }

    /* Quick Find overlay */
    .global-quick-find-backdrop {
      position: fixed;
      inset: 0;
      z-index: 10050;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: min(12vh, 96px) 18px 24px;
      background: rgba(10,26,38,.28);
      backdrop-filter: blur(8px);
      animation: quickFindBackdropIn .14s ease both;
    }

    @keyframes quickFindBackdropIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .global-quick-find-dialog {
      width: min(680px, 100%);
      max-height: min(72vh, 690px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.82);
      border-radius: 20px;
      background: rgba(255,255,255,.985);
      box-shadow: 0 36px 90px rgba(7,27,40,.25);
      animation: quickFindDialogIn .18s cubic-bezier(.2,.8,.2,1) both;
    }

    @keyframes quickFindDialogIn {
      from { opacity: .7; transform: translateY(-8px) scale(.985); }
      to { opacity: 1; transform: none; }
    }

    .global-quick-find-search-row {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 15px 16px;
      border-bottom: 1px solid var(--ux-line);
    }

    .global-quick-find-large-icon {
      color: #6b8090;
      font-size: 23px;
    }

    #globalQuickFindInput {
      flex: 1;
      min-width: 0;
      height: auto !important;
      min-height: 36px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
      font-size: 17px !important;
      font-weight: 600;
      letter-spacing: -.02em;
    }

    .global-quick-find-esc {
      padding: 4px 6px;
      border: 1px solid var(--ux-line);
      border-radius: 6px;
      background: #f6f8f9;
      color: #89959e;
      font-size: 8px;
      font-weight: 850;
    }

    .global-quick-find-meta {
      display: flex;
      align-items: baseline;
      gap: 8px;
      padding: 10px 16px 7px;
      color: #8b98a2;
      font-size: 10px;
    }

    .global-quick-find-meta strong {
      color: #536979;
      font-size: 10px;
      font-weight: 820;
    }

    .global-quick-find-results {
      min-height: 180px;
      overflow-y: auto;
      padding: 5px 8px 10px;
    }

    .global-quick-find-empty {
      display: grid;
      min-height: 180px;
      place-items: center;
      padding: 24px;
      color: #8d99a3;
      text-align: center;
      font-size: 12px;
      line-height: 1.55;
    }

    .global-quick-find-group-label {
      padding: 9px 9px 5px;
      color: #9aa5ad;
      font-size: 8.5px;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .global-quick-find-result {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      min-height: 53px;
      margin: 2px 0;
      padding: 8px 10px;
      border: 0;
      border-radius: 11px;
      background: transparent;
      color: var(--ux-text);
      text-align: left;
      cursor: pointer;
    }

    .global-quick-find-result:hover,
    .global-quick-find-result.is-active {
      background: #f1f5f7;
    }

    .global-quick-find-result.is-active {
      box-shadow: inset 0 0 0 1px #e0e7eb;
    }

    .global-quick-find-result-icon {
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: #edf3f6;
      color: #45657b;
      font-size: 12px;
      font-weight: 900;
    }

    .global-quick-find-result[data-kind="client"] .global-quick-find-result-icon {
      background: #eef7f1;
      color: #2c7a4b;
    }

    .global-quick-find-result[data-kind="lead"] .global-quick-find-result-icon {
      background: #fff5e9;
      color: #ac6b24;
    }

    .global-quick-find-result[data-kind="transaction"] .global-quick-find-result-icon {
      background: #eef3fb;
      color: #4a6fa5;
    }

    .global-quick-find-result-copy {
      flex: 1;
      min-width: 0;
    }

    .global-quick-find-result-copy strong {
      display: block;
      overflow: hidden;
      color: #20394c;
      font-size: 12.5px;
      font-weight: 760;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-quick-find-result-copy span {
      display: block;
      overflow: hidden;
      margin-top: 2px;
      color: #85939e;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .global-quick-find-result-type {
      flex: 0 0 auto;
      color: #a1abb3;
      font-size: 8.5px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .global-quick-find-footer {
      display: flex;
      gap: 15px;
      padding: 9px 15px 11px;
      border-top: 1px solid var(--ux-line);
      background: #fafbfc;
      color: #96a1aa;
      font-size: 8.5px;
      font-weight: 700;
    }

    .global-quick-find-footer kbd {
      min-width: 18px;
      display: inline-grid;
      place-items: center;
      margin-right: 2px;
      padding: 2px 4px;
      border: 1px solid #dce3e7;
      border-bottom-color: #cbd5db;
      border-radius: 5px;
      background: #fff;
      color: #647785;
      font: inherit;
      box-shadow: 0 1px 0 rgba(0,0,0,.04);
    }

    /* Toast notifications replace disruptive browser showToast() boxes. */
    .crm-toast-region {
      position: fixed;
      z-index: 12000;
      top: 18px;
      right: 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      pointer-events: none;
    }

    .crm-toast {
      width: min(390px, calc(100vw - 32px));
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 11px 13px;
      border: 1px solid #dfe6ea;
      border-radius: 13px;
      background: rgba(255,255,255,.97);
      box-shadow: 0 16px 38px rgba(8,29,43,.14);
      color: #395165;
      pointer-events: auto;
      animation: crmToastIn .2s cubic-bezier(.2,.8,.2,1) both;
      backdrop-filter: blur(10px);
    }

    .crm-toast.error {
      border-color: #f0d3d0;
      background: #fffafa;
    }

    .crm-toast.success {
      border-color: #cfe5d7;
      background: #fbfffc;
    }

    .crm-toast-icon {
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #edf2f5;
      color: #577184;
      font-size: 10px;
      font-weight: 900;
    }

    .crm-toast.error .crm-toast-icon {
      background: #fae5e3;
      color: #a54741;
    }

    .crm-toast.success .crm-toast-icon {
      background: #e3f3e9;
      color: #347a50;
    }

    .crm-toast-message {
      flex: 1;
      padding-top: 1px;
      font-size: 11px;
      font-weight: 650;
      line-height: 1.42;
    }

    .crm-toast-close {
      flex: 0 0 auto;
      min-height: 24px !important;
      padding: 0 2px;
      border: 0;
      background: none;
      color: #a0abb3;
      font-size: 15px;
      line-height: 1;
    }

    @keyframes crmToastIn {
      from { opacity: 0; transform: translateY(-8px) scale(.98); }
      to { opacity: 1; transform: none; }
    }

    /* Mobile refinements */
    @media (max-width: 820px) {
      .app-shell {
        display: block !important;
      }

      .main {
        padding: 0 14px calc(28px + env(safe-area-inset-bottom)) !important;
      }

      .view {
        width: 100%;
      }

      .topbar {
        position: relative;
        min-height: auto;
        margin: 0 0 16px !important;
        padding: 16px 0 8px !important;
        background: transparent;
        backdrop-filter: none;
        align-items: flex-start !important;
      }

      .topbar h1,
      .view h1 {
        font-size: 27px !important;
      }

      .topbar p {
        font-size: 12px !important;
      }

      button,
      .primary-btn,
      .secondary-btn,
      select,
      input:not([type="checkbox"]):not([type="radio"]),
      textarea {
        min-height: 44px;
      }

      tbody td {
        font-size: 13px !important;
      }

      .modal-backdrop {
        align-items: flex-end !important;
        padding: 0 !important;
      }

      .modal {
        width: 100% !important;
        max-width: none !important;
        max-height: 92dvh !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: 0 !important;
      }

      .global-quick-find-trigger {
        min-height: 44px;
      }

      .global-quick-find-backdrop {
        align-items: flex-end;
        padding: 0;
      }

      .global-quick-find-dialog {
        width: 100%;
        max-height: 82dvh;
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
      }

      .global-quick-find-footer {
        padding-bottom: calc(11px + env(safe-area-inset-bottom));
      }

      .crm-toast-region {
        top: auto;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 16px;
        align-items: stretch;
      }

      .crm-toast {
        width: 100%;
      }
    }

    @media (max-width: 520px) {
      .topbar {
        flex-direction: column;
        gap: 10px !important;
      }

      .topbar > .primary-btn,
      .topbar > button.primary-btn {
        width: 100%;
      }

      .global-quick-find-footer {
        gap: 9px;
        justify-content: space-between;
      }

      .global-quick-find-meta span {
        display: none;
      }
    }


    /* =========================================================
       MOBILE PERFORMANCE — LARGE DATABASE VIEWS
       ========================================================= */
    @media (max-width: 820px), (pointer: coarse) {
      /* A 600+ row database should not become one giant GPU layer or
         View Transition snapshot. This is the main mobile navigation win. */
      .view.active {
        view-transition-name: none !important;
        transform: none !important;
        backface-visibility: visible !important;
      }

      html.vt-forward::view-transition-old(crm-workspace),
      html.vt-forward::view-transition-new(crm-workspace),
      html.vt-back::view-transition-old(crm-workspace),
      html.vt-back::view-transition-new(crm-workspace),
      html.vt-cross::view-transition-old(crm-workspace),
      html.vt-cross::view-transition-new(crm-workspace) {
        animation: none !important;
      }
    }


    /* =========================================================
       MOBILE LIST TAP FEEDBACK — FULL CARD
       ========================================================= */
    @media (max-width: 700px), (pointer: coarse) {
      #clientGroups tr[data-client-id],
      #leadTableBody tr[data-lead-id],
      #transactionTableBody tr[data-transaction-id] {
        -webkit-tap-highlight-color: transparent;
        transition: background-color .08s ease !important;
      }

      #clientGroups tr[data-client-id].mobile-row-pressed,
      #leadTableBody tr[data-lead-id].mobile-row-pressed,
      #transactionTableBody tr[data-transaction-id].mobile-row-pressed {
        background: #f1f3f4 !important;
      }

      #clientGroups tr[data-client-id].mobile-row-pressed > td,
      #leadTableBody tr[data-lead-id].mobile-row-pressed > td,
      #transactionTableBody tr[data-transaction-id].mobile-row-pressed > td {
        background: transparent !important;
      }

      /* Native fallback if JS feedback is unavailable. */
      #leadTableBody tr[data-lead-id]:active,
      #transactionTableBody tr[data-transaction-id]:active {
        background: #f1f3f4 !important;
      }

      #leadTableBody tr[data-lead-id]:active > td,
      #transactionTableBody tr[data-transaction-id]:active > td {
        background: transparent !important;
      }

      #clientGroups .client-name-open-profile:active {
        opacity: 1 !important;
      }
    }


    /* =========================================================
       LOADING FEEDBACK + SAFE RENDERING PERFORMANCE
       ========================================================= */
    @keyframes tkgDatabaseLoadingPulse {
      0%, 100% {
        transform: scale(1);
        opacity: .86;
        box-shadow: none;
      }
      50% {
        transform: scale(1.075);
        opacity: 1;
        box-shadow: none;
      }
    }

    .auth-loading .brand-logo.loading {
      animation: tkgDatabaseLoadingPulse 1.35s ease-in-out infinite;
      transform-origin: center;
      will-change: transform, opacity;
    }

    @media (prefers-reduced-motion: reduce) {
      .auth-loading .brand-logo.loading {
        animation: none;
        opacity: 1;
        will-change: auto;
      }
    }

    @media (max-width: 700px) {
      .client-table tbody tr[data-client-id] {
        content-visibility: auto;
        contain-intrinsic-size: auto 58px;
      }
    }


    /* =========================================================
       TEAM DIRECTORY CONTACTS
       ========================================================= */
    .team-member-card-contact {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px 12px;
      margin-top: 4px;
    }

    .team-member-card-contact a,
    .team-member-card-contact .team-contact-muted {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      color: #7e909e;
      font-size: 11px;
      font-weight: 620;
      line-height: 1.3;
      text-decoration: none;
    }

    .team-member-card-contact a:hover {
      color: #244861;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .team-contact-icon {
      flex: 0 0 auto;
      color: #9ca9b2;
      font-size: 10px;
    }

    /* =========================================================
       VIEW AS — CONSISTENT FLOATING PREVIEW BANNER
       ========================================================= */
    #viewAsBanner.view-as-banner:not(.hidden) {
      position: fixed !important;
      z-index: 11000 !important;
      top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
      left: 50% !important;
      right: auto !important;
      width: auto !important;
      max-width: min(680px, calc(100vw - 32px)) !important;
      margin: 0 !important;
      padding: 8px 10px 8px 12px !important;
      transform: translateX(-50%) !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
      border: 1px solid #e2c96e !important;
      border-radius: 999px !important;
      background: rgba(255,248,218,.97) !important;
      box-shadow: 0 10px 30px rgba(52,45,21,.14) !important;
      backdrop-filter: blur(12px);
    }

    #viewAsBanner .view-as-banner-copy {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      min-width: 0;
    }

    #viewAsBannerText {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #viewAsBanner .view-as-readonly {
      flex: 0 0 auto;
    }

    #viewAsBanner #exitViewAsButton {
      width: auto !important;
      min-height: 28px !important;
      padding: 4px 9px !important;
      border-radius: 999px !important;
      white-space: nowrap;
    }

    /* The preview banner is now fixed, so page headers no longer need
       page-specific offsets. */
    #viewAsBanner:not(.hidden) ~ .view.active .topbar {
      top: 0 !important;
    }

    @media (max-width: 700px) {
      #viewAsBanner.view-as-banner:not(.hidden) {
        top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        border-radius: 14px !important;
        padding: 8px 9px 8px 10px !important;
      }

      #viewAsBanner .view-as-readonly {
        display: none !important;
      }

      #viewAsBannerText {
        font-size: 9.5px !important;
      }

      .team-member-card-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
      }

      .team-member-card-contact a,
      .team-member-card-contact .team-contact-muted {
        font-size: 11.5px;
      }
    }


    .team-contact-missing {
      color: #a3afb7;
      font-size: 10px;
      font-weight: 650;
    }


    /* =========================================================
       MODERN DETAIL-PAGE BACK NAVIGATION
       ========================================================= */
    .back-link {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: fit-content;
      min-height: 38px !important;
      margin: 0 0 14px !important;
      padding: 7px 11px 7px 8px !important;
      border: 1px solid #dfe6ea !important;
      border-radius: 11px !important;
      background: rgba(255,255,255,.88) !important;
      color: #526b7d !important;
      box-shadow: 0 2px 8px rgba(16,43,62,.045) !important;
      cursor: pointer;
      font: inherit;
      font-size: 11px !important;
      font-weight: 760 !important;
      line-height: 1 !important;
      text-decoration: none !important;
      -webkit-tap-highlight-color: transparent;
      transition:
        background-color .14s ease,
        border-color .14s ease,
        color .14s ease,
        transform .14s ease,
        box-shadow .14s ease !important;
    }

    .back-link::before {
      content: "←";
      display: inline-grid;
      place-items: center;
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 8px;
      background: #eef3f6;
      color: #34566d;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
      transition:
        transform .14s ease,
        background-color .14s ease !important;
    }

    .back-link:hover {
      border-color: #ccd8df !important;
      background: #ffffff !important;
      color: #203e52 !important;
      box-shadow: 0 5px 14px rgba(16,43,62,.075) !important;
      transform: translateY(-1px);
    }

    .back-link:hover::before {
      background: #e6eef2;
      transform: translateX(-2px);
    }

    .back-link:active {
      transform: translateY(0) scale(.985);
      box-shadow: 0 2px 7px rgba(16,43,62,.05) !important;
    }

    .back-link:focus-visible {
      outline: 3px solid rgba(214,183,103,.42) !important;
      outline-offset: 2px;
    }

    @media (max-width: 700px) {
      .back-link {
        min-height: 42px !important;
        margin-bottom: 12px !important;
        padding: 7px 12px 7px 8px !important;
        border-radius: 12px !important;
        font-size: 12px !important;
      }

      .back-link::before {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        border-radius: 9px;
        font-size: 15px;
      }

      .back-link:hover {
        transform: none;
      }

      .back-link:active {
        background: #f2f5f7 !important;
        transform: scale(.985);
      }
    }
}
/* Assignee */
      .transaction-table th:nth-child(1),
      .transaction-table td:nth-child(1) {
        width: 56px !important;
        min-width: 56px !important;
        max-width: 56px !important;
      }

      /* Transaction / property */
      .transaction-table th:nth-child(2),
      .transaction-table td:nth-child(2) {
        width: 360px !important;
        min-width: 360px !important;
        max-width: 360px !important;
      }

      /* Client name */
      .transaction-table th:nth-child(3),
      .transaction-table td:nth-child(3) {
        width: 245px !important;
        min-width: 245px !important;
        max-width: 245px !important;
      }

      /* Type */
      .transaction-table th:nth-child(4),
      .transaction-table td:nth-child(4) {
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;
      }

      /* Status */
      .transaction-table th:nth-child(5),
      .transaction-table td:nth-child(5) {
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
      }

      /* Closing date */
      .transaction-table th:nth-child(6),
      .transaction-table td:nth-child(6) {
        width: 122px !important;
        min-width: 122px !important;
        max-width: 122px !important;
      }

      /* Sale price / GCI / Agent Net / Team Split and other money columns */
      .transaction-table th:nth-child(n+7),
      .transaction-table td:nth-child(n+7) {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
      }

      .transaction-table td,
      .transaction-table th {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      .transaction-property-primary,
      .transaction-name-inline-wrap,
      .transaction-name-inline-wrap input {
        max-width: 100% !important;
        min-width: 0 !important;
      }

      .transaction-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }
    }


    /* =========================================================
       IPAD / TOUCH-TABLET UI CORRECTIONS
       ========================================================= */

    @media (min-width: 701px) and (max-width: 1180px),
           (pointer: coarse) and (min-width: 701px) {

      /* ---------------------------------------------------------
         TASK HUB — keep completion control truly circular
         --------------------------------------------------------- */
      #tasksView .task-check-button {
        display: grid !important;
        place-items: center !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        aspect-ratio: 1 / 1 !important;
        flex: 0 0 24px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-width: 2px !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
      }

      /* ---------------------------------------------------------
         TRANSACTIONS — compact, predictable tablet columns
         --------------------------------------------------------- */
      #transactionsView .transaction-table,
      #transactionsView .transaction-table.admin-expanded,
      #transactionsView .transaction-table.agent-readonly {
        width: max-content !important;
        min-width: 0 !important;
        table-layout: fixed !important;
      }

      /* Agent */
      #transactionsView .transaction-table th:nth-child(1),
      #transactionsView .transaction-table td:nth-child(1) {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
      }

      /* Transaction / property */
      #transactionsView .transaction-table th:nth-child(2),
      #transactionsView .transaction-table td:nth-child(2) {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
      }

      /* Client */
      #transactionsView .transaction-table th:nth-child(3),
      #transactionsView .transaction-table td:nth-child(3) {
        width: 178px !important;
        min-width: 178px !important;
        max-width: 178px !important;
      }

      /* Transaction Type */
      #transactionsView .transaction-table th:nth-child(4),
      #transactionsView .transaction-table td:nth-child(4) {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
      }

      /* Status */
      #transactionsView .transaction-table th:nth-child(5),
      #transactionsView .transaction-table td:nth-child(5) {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
      }

      /* Closing Date */
      #transactionsView .transaction-table th:nth-child(6),
      #transactionsView .transaction-table td:nth-child(6) {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
      }

      /* Financial columns */
      #transactionsView .transaction-table th:nth-child(n+7),
      #transactionsView .transaction-table td:nth-child(n+7) {
        width: 98px !important;
        min-width: 98px !important;
        max-width: 98px !important;
      }

      #transactionsView .transaction-table th,
      #transactionsView .transaction-table td {
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      /* Sticky Agent + Transaction columns must use the same widths. */
      #transactionsView .transaction-table th:nth-child(1),
      #transactionsView .transaction-table td:nth-child(1) {
        left: 0 !important;
      }

      #transactionsView .transaction-table th:nth-child(2),
      #transactionsView .transaction-table td:nth-child(2) {
        left: 48px !important;
      }

      #transactionsView .transaction-table-scroll,
      #transactionsView .transaction-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
      }

      /* ---------------------------------------------------------
         TRANSACTIONS — flush text/money fields only
         Do NOT flatten Type or Status pills.
         --------------------------------------------------------- */
      #transactionsView
        .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill),
      #transactionsView
        input.transaction-inline-control,
      #transactionsView
        select.transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill),
      #transactionsView
        textarea.transaction-inline-control {
        min-height: 0 !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 2px 3px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
        color: #243746 !important;
        -webkit-text-fill-color: #243746 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
      }

      #transactionsView .transaction-name-inline-wrap,
      #transactionsView .transaction-name-inline-wrap input,
      #transactionsView .transaction-name-inline-wrap select {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
      }

      /* Client selector stays compact and readable. */
      #transactionsView
        .transaction-table td:nth-child(3)
        select.transaction-inline-select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 2px 18px 2px 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: #526674 !important;
        -webkit-text-fill-color: #526674 !important;
        font-size: 10.5px !important;
      }

      /* ---------------------------------------------------------
         TRANSACTION TYPE — restore its intentional pill styling
         --------------------------------------------------------- */
      #transactionsView select.transaction-type-pill {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 4px 8px !important;
        border: 0 !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-align-last: center !important;
      }

      #transactionsView select.transaction-type-seller {
        background: #52585d !important;
        color: #e5e7e9 !important;
        -webkit-text-fill-color: #e5e7e9 !important;
      }

      #transactionsView select.transaction-type-buyer {
        background: #e3e5e7 !important;
        color: #343a40 !important;
        -webkit-text-fill-color: #343a40 !important;
      }

      #transactionsView select.transaction-type-other {
        background: #eef2f4 !important;
        color: #415463 !important;
        -webkit-text-fill-color: #415463 !important;
      }

      #transactionsView select.transaction-type-pill option {
        background: #ffffff !important;
        color: #243746 !important;
        -webkit-text-fill-color: #243746 !important;
      }

      /* ---------------------------------------------------------
         STATUS — restore status color + visible selected text
         Safari/iPad needs explicit -webkit-text-fill-color.
         --------------------------------------------------------- */
      #transactionsView select.transaction-status-inline {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 4px 8px !important;
        border: 0 !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        font-size: 9.5px !important;
        font-weight: 950 !important;
        text-align: center !important;
        text-align-last: center !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-potential {
        background: #ed4f5b !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-coming-soon {
        background: #f0a13a !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-active {
        background: #3d86d8 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-pending {
        background: #33a86b !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-closed {
        background: #6f7881 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-cancelled {
        background: #b94747 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-withdrawn {
        background: #8b65b5 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline.tx-status-other,
      #transactionsView select.transaction-status-inline.tx-status-default {
        background: #7f8d99 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
      }

      #transactionsView select.transaction-status-inline option {
        background: #fff !important;
        color: #243746 !important;
        -webkit-text-fill-color: #243746 !important;
      }
    }

    /* Keep the Task Hub completion control square even if a future global
       button rule changes touch-target minimum heights. */
    #tasksView .task-check-button {
      min-height: 23px;
      min-width: 23px;
    }


    /* =========================================================
       TRANSACTIONS — FLUSH EDITABLE FIELDS ON ALL PLATFORMS
       ========================================================= */

    /*
      Text, date, client, and money editors should visually read as table
      content, not as form-field bubbles. Buyer/Seller and Status remain pills.
    */
    #transactionsView .transaction-table
      .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill),
    #transactionsView .transaction-table
      input.transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill),
    #transactionsView .transaction-table
      select.transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill),
    #transactionsView .transaction-table
      textarea.transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill),
    #transactionsView .transaction-table
      select.transaction-inline-select:not(.transaction-status-inline):not(.transaction-type-pill) {
      min-height: 0 !important;
      height: 30px !important;
      margin: 0 !important;
      padding: 2px 3px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
      color: #243746 !important;
      -webkit-text-fill-color: #243746 !important;
      line-height: 1.2 !important;
    }

    #transactionsView .transaction-table
      .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill):hover,
    #transactionsView .transaction-table
      .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill):focus,
    #transactionsView .transaction-table
      .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill):focus-visible,
    #transactionsView .transaction-table
      .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill):active,
    #transactionsView .transaction-table
      .transaction-inline-select:not(.transaction-status-inline):not(.transaction-type-pill):hover,
    #transactionsView .transaction-table
      .transaction-inline-select:not(.transaction-status-inline):not(.transaction-type-pill):focus {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    #transactionsView .transaction-table .transaction-name-inline-wrap,
    #transactionsView .transaction-table .transaction-name-inline-wrap:hover,
    #transactionsView .transaction-table .transaction-name-inline-wrap:focus-within {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    #transactionsView .transaction-table .transaction-name-inline-wrap input,
    #transactionsView .transaction-table .transaction-name-inline-wrap select {
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    /* Safari can draw its own rounded date field chrome. Flatten it too. */
    #transactionsView .transaction-table input[type="date"].transaction-inline-control {
      appearance: none !important;
      -webkit-appearance: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding-right: 2px !important;
    }

    /*
      Preserve the intentional Type and Status visual language regardless
      of global input/select styling.
    */
    #transactionsView .transaction-table select.transaction-type-pill,
    #transactionsView .transaction-table select.transaction-status-inline {
      border: 0 !important;
      box-shadow: none !important;
    }

    #transactionsView .transaction-table select.transaction-type-pill {
      border-radius: 7px !important;
    }

    #transactionsView .transaction-table select.transaction-status-inline {
      border-radius: 7px !important;
    }

    /*
      The table cells themselves should not create a secondary rounded
      white surface around editors.
    */
    #transactionsView .transaction-table td {
      border-radius: 0 !important;
      box-shadow: none !important;
    }


    /* =========================================================
       POP-BY CAMPAIGNS
       ========================================================= */
    .popby-kicker {
      margin-bottom: 4px;
      color: #b08c37;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .popby-campaign-toolbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
      padding: 14px 16px;
      border: 1px solid var(--ux-line, #e2e8ec);
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(15,39,57,.035);
    }

    .popby-campaign-main {
      display: flex;
      align-items: flex-end;
      gap: 14px;
      min-width: 0;
      flex: 1;
    }

    .popby-campaign-main .field {
      width: min(360px, 100%);
      margin: 0;
    }

    .popby-campaign-meta {
      padding-bottom: 7px;
      color: #7b8d9a;
      font-size: 10.5px;
      font-weight: 650;
      line-height: 1.4;
    }

    .popby-toolbar-actions {
      display: flex;
      align-items: flex-end;
      gap: 10px;
    }

    .popby-agent-filter-wrap {
      width: 180px;
      margin: 0;
    }

    .popby-view-switcher {
      display: inline-flex;
      padding: 3px;
      border: 1px solid #dce4e8;
      border-radius: 11px;
      background: #f5f8f9;
    }

    .popby-view-button {
      min-height: 34px !important;
      padding: 6px 12px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #718492;
      cursor: pointer;
      font: inherit;
      font-size: 10px;
      font-weight: 850;
    }

    .popby-view-button.active {
      background: #fff;
      color: #17364b;
      box-shadow: 0 2px 8px rgba(19,47,68,.08);
    }

    .popby-summary-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap: 10px;
      margin-bottom: 10px;
    }

    .popby-summary-card {
      min-height: 102px;
      padding: 14px 15px;
      border: 1px solid #e2e8ec;
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(15,39,57,.03);
    }

    .popby-summary-card span {
      display: block;
      color: #718391;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .popby-summary-card strong {
      display: block;
      margin-top: 8px;
      color: #173348;
      font-size: 27px;
      line-height: 1;
      font-weight: 820;
    }

    .popby-summary-card small {
      display: block;
      margin-top: 7px;
      color: #9aa6af;
      font-size: 9px;
    }

    .popby-summary-card.remaining strong { color: #b17a25; }
    .popby-summary-card.delivered strong { color: #2f8557; }
    .popby-summary-card.talked strong { color: #2b6f93; }
    .popby-summary-card.video strong { color: #7b65a6; }

    .popby-progress-card {
      margin-bottom: 10px;
      padding: 12px 15px;
      border: 1px solid #e1e7eb;
      border-radius: 14px;
      background: #fff;
    }

    .popby-progress-copy {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      color: #637887;
      font-size: 10px;
    }

    .popby-progress-copy strong {
      color: #29465a;
      font-weight: 820;
    }

    .popby-progress-track {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #edf1f3;
    }

    .popby-progress-bar {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #d8bb73, #4c9870);
      transition: width .22s ease;
    }

    .popby-filter-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #e2e8ec;
      border-radius: 14px;
      background: #fff;
    }

    .popby-search-wrap {
      flex: 1;
      max-width: 460px;
    }

    .popby-status-tabs {
      display: inline-flex;
      gap: 4px;
      padding: 3px;
      border-radius: 11px;
      background: #f3f6f7;
    }

    .popby-status-tab {
      min-height: 34px !important;
      padding: 6px 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #748591;
      cursor: pointer;
      font: inherit;
      font-size: 9.5px;
      font-weight: 820;
    }

    .popby-status-tab span {
      margin-left: 3px;
      color: #9aa5ad;
      font-variant-numeric: tabular-nums;
    }

    .popby-status-tab.active {
      background: #fff;
      color: #19394f;
      box-shadow: 0 2px 7px rgba(17,45,65,.07);
    }

    .popby-list-panel,
    .popby-map-panel {
      border: 1px solid #dfe6ea;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(15,39,57,.03);
      overflow: hidden;
    }

    .popby-list-heading,
    .popby-map-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid #e7ecef;
      background: #fafcfc;
    }

    .popby-list-heading h3,
    .popby-map-header h3 {
      margin: 0;
      color: #203c50;
      font-size: 13px;
      font-weight: 850;
    }

    .popby-list-heading p,
    .popby-map-header p {
      margin: 3px 0 0;
      color: #8b99a3;
      font-size: 9.5px;
    }

    .popby-missing-address-badge {
      padding: 5px 8px;
      border-radius: 999px;
      background: #fff0dc;
      color: #9b641e;
      font-size: 9px;
      font-weight: 850;
    }

    .popby-recipient-list {
      display: grid;
    }

    .popby-recipient-row {
      display: grid;
      grid-template-columns: 46px minmax(250px,1.4fr) minmax(135px,.65fr) minmax(205px,.9fr) 132px;
      gap: 12px;
      align-items: center;
      min-height: 70px;
      padding: 9px 14px;
      border-bottom: 1px solid #edf1f3;
      background: #fff;
      transition: background-color .1s ease, opacity .12s ease;
    }

    .popby-recipient-row:last-child {
      border-bottom: 0;
    }

    .popby-recipient-row:hover {
      background: #fafcfc;
    }

    .popby-delivery-check {
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      min-width: 32px !important;
      min-height: 32px !important;
      padding: 0;
      border: 2px solid #c8d2d8;
      border-radius: 50%;
      background: #fff;
      color: transparent;
      cursor: pointer;
      font-size: 14px;
      font-weight: 950;
    }

    .popby-delivery-check:hover {
      border-color: #6ca887;
      background: #f3faf6;
    }

    .popby-delivery-check.delivered {
      border-color: #43a16d;
      background: #43a16d;
      color: #fff;
    }

    .popby-recipient-main {
      min-width: 0;
    }

    .popby-recipient-name-line {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .popby-level-badge {
      display: inline-grid;
      place-items: center;
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      color: #fff;
      font-size: 9px;
      font-weight: 950;
    }

    .popby-level-badge.a { background: #25a45b; }
    .popby-level-badge.b { background: #e9b514; }

    .popby-client-link {
      min-height: 28px !important;
      min-width: 0;
      padding: 0;
      border: 0;
      background: none;
      color: #17364b;
      cursor: pointer;
      overflow: hidden;
      font: inherit;
      font-size: 11.5px;
      font-weight: 820;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .popby-client-link:hover {
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .popby-address {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
      color: #7c8e9b;
      font-size: 9.5px;
      line-height: 1.25;
    }

    .popby-address a {
      color: inherit;
      text-decoration: none;
    }

    .popby-address a:hover {
      color: #365f79;
      text-decoration: underline;
    }

    .popby-address.missing {
      color: #ad6d24;
      font-weight: 750;
    }

    .popby-agent-cell {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #667b8a;
      font-size: 9.5px;
      font-weight: 700;
    }

    .popby-contact-actions {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .popby-contact-button {
      min-height: 32px !important;
      padding: 6px 9px;
      border: 1px solid #dce4e8;
      border-radius: 9px;
      background: #fff;
      color: #71828e;
      cursor: pointer;
      font: inherit;
      font-size: 9px;
      font-weight: 820;
      white-space: nowrap;
    }

    .popby-contact-button.talked.active {
      border-color: #bcdce9;
      background: #eaf6fb;
      color: #2d708f;
    }

    .popby-contact-button.video.active {
      border-color: #d7cbea;
      background: #f2eef9;
      color: #6d5795;
    }

    .popby-delivery-meta {
      text-align: right;
      color: #84929c;
      font-size: 8.7px;
      line-height: 1.35;
    }

    .popby-delivery-meta strong {
      display: block;
      color: #4b6475;
      font-size: 9.5px;
    }

    .popby-empty {
      padding: 38px 20px;
      text-align: center;
      color: #84939d;
      font-size: 11px;
    }

    .popby-empty strong {
      display: block;
      margin-bottom: 5px;
      color: #3b5668;
      font-size: 13px;
    }

    .popby-map {
      width: 100%;
      height: min(62vh, 620px);
      min-height: 460px;
      background: #edf2f4;
    }

    .popby-map-legend {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #7b8b96;
      font-size: 9px;
      font-weight: 750;
    }

    .popby-map-legend span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .popby-map-legend i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .popby-map-legend i.a { background: #25a45b; }
    .popby-map-legend i.b { background: #e9b514; }

    .popby-campaign-modal {
      width: min(560px, calc(100vw - 32px));
    }

    .popby-campaign-modal .modal-header p {
      margin: 3px 0 0;
      color: #87949d;
      font-size: 10px;
    }

    .popby-campaign-rule {
      display: flex;
      flex-direction: column;
      gap: 3px;
      margin-top: 12px;
      padding: 11px 12px;
      border: 1px solid #eadfbf;
      border-radius: 11px;
      background: #fffaf0;
      color: #806d3b;
      font-size: 9.5px;
    }

    .popby-campaign-rule strong {
      color: #655426;
      font-size: 10px;
    }

    @media (max-width: 1100px) {
      .popby-summary-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
      }

      .popby-recipient-row {
        grid-template-columns: 42px minmax(220px,1.2fr) 120px minmax(190px,.9fr) 115px;
      }
    }

    @media (max-width: 820px) {
      .popby-campaign-toolbar,
      .popby-campaign-main,
      .popby-toolbar-actions,
      .popby-filter-card {
        align-items: stretch;
        flex-direction: column;
      }

      .popby-campaign-main .field,
      .popby-agent-filter-wrap,
      .popby-search-wrap {
        width: 100%;
        max-width: none;
      }

      .popby-view-switcher,
      .popby-status-tabs {
        width: 100%;
      }

      .popby-view-button,
      .popby-status-tab {
        flex: 1;
      }

      .popby-summary-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }

      .popby-summary-card {
        min-height: 92px;
      }

      .popby-recipient-list {
        gap: 9px;
        padding: 10px;
        background: #f5f7f8;
      }

      .popby-recipient-row {
        display: grid;
        grid-template-columns: 38px minmax(0,1fr);
        gap: 8px 10px;
        min-height: 0;
        padding: 12px;
        border: 1px solid #e0e7ea;
        border-radius: 14px;
        background: #fff;
      }

      .popby-recipient-row:last-child {
        border-bottom: 1px solid #e0e7ea;
      }

      .popby-delivery-check {
        grid-row: 1 / span 3;
        align-self: start;
        width: 34px;
        height: 34px;
        min-width: 34px !important;
        min-height: 34px !important;
      }

      .popby-recipient-main,
      .popby-agent-cell,
      .popby-contact-actions,
      .popby-delivery-meta {
        grid-column: 2;
      }

      .popby-agent-cell {
        margin-top: 2px;
      }

      .popby-contact-actions {
        flex-wrap: wrap;
      }

      .popby-contact-button {
        flex: 1;
        min-height: 38px !important;
      }

      .popby-delivery-meta {
        text-align: left;
      }

      .popby-map {
        height: 66dvh;
        min-height: 440px;
      }
    }

    @media (max-width: 520px) {
      .popby-summary-grid {
        grid-template-columns: 1fr 1fr;
      }

      .popby-summary-card.total {
        grid-column: 1 / -1;
      }

      .popby-list-heading,
      .popby-map-header {
        align-items: flex-start;
        flex-direction: column;
      }
    }


    /* =========================================================
       TEAM SETTINGS — CRM INVITE ACTION
       ========================================================= */
    #settingsPanelTeam .team-invite-btn {
      border-color: #d9c178 !important;
      background: #fff9e8 !important;
      color: #725a18 !important;
      font-weight: 850 !important;
    }

    #settingsPanelTeam .team-invite-btn:hover {
      border-color: #c8aa55 !important;
      background: #fff4cf !important;
      color: #59450f !important;
    }

    @media (max-width: 700px) {
      #settingsPanelTeam .team-invite-btn {
        width: 100%;
      }
    }


    /* =========================================================
       GLOBAL MODAL SCROLLING FIX
       Long CRM popups must remain vertically scrollable on
       desktop, iPad, and phone.
       ========================================================= */

    .modal-backdrop:not(.hidden) {
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    .modal-backdrop:not(.hidden) > .modal,
    .modal-backdrop:not(.hidden) > form.modal,
    .modal-backdrop:not(.hidden) .modal {
      max-height: calc(100dvh - 44px) !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior: contain;
      touch-action: pan-y;
    }

    /*
      The modern UX layer previously applied overflow:hidden to .modal.
      Keep the rounded shell, but never allow that rule to trap the user
      at the top of a long form.
    */
    #transactionModalBackdrop .modal,
    #emailModalBackdrop .modal,
    #leadModalBackdrop .modal,
    #newClientModalBackdrop .modal,
    #taskModalBackdrop .modal,
    #transactionTaskModalBackdrop .modal,
    #addTeamMemberModalBackdrop .modal,
    #submissionDetailModalBackdrop .modal,
    #emailTemplateModalBackdrop .modal,
    #emailSignatureModalBackdrop .modal,
    #profilePhotoModalBackdrop .modal,
    #popbyCampaignModalBackdrop .modal {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y;
    }

    @media (max-width: 820px), (pointer: coarse) {
      .modal-backdrop:not(.hidden) {
        align-items: flex-end !important;
        overflow-y: auto !important;
      }

      .modal-backdrop:not(.hidden) .modal {
        width: 100% !important;
        max-height: 94dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y;
      }

      /*
        Give the bottom of long forms enough breathing room above
        Safari/Chrome browser UI and device safe areas.
      */
      .modal-backdrop:not(.hidden) .modal-footer {
        padding-bottom:
          calc(13px + env(safe-area-inset-bottom))
          !important;
      }
    }


    /* =========================================================
       DASHBOARD — SIMPLE NEW OPPORTUNITY FORM
       Full Transaction editing remains unchanged everywhere else.
       ========================================================= */
    #transactionForm.opportunity-mode {
      width: min(620px, calc(100vw - 32px));
    }

    #transactionForm.opportunity-mode .form-grid > *:not(.opportunity-visible) {
      display: none !important;
    }

    #transactionForm.opportunity-mode .form-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 14px;
    }

    #transactionForm.opportunity-mode .opportunity-visible {
      display: flex !important;
    }

    #transactionForm.opportunity-mode .opportunity-name-field,
    #transactionForm.opportunity-mode .opportunity-gci-field {
      grid-column: 1 / -1;
    }

    #transactionForm.opportunity-mode .modal-body {
      padding-top: 18px;
      padding-bottom: 18px;
    }

    #transactionForm.opportunity-mode #transactionPotentialGci {
      max-width: 260px;
    }

    @media (max-width: 700px) {
      #transactionForm.opportunity-mode {
        width: 100% !important;
      }

      #transactionForm.opportunity-mode .form-grid {
        grid-template-columns: 1fr;
      }

      #transactionForm.opportunity-mode .opportunity-name-field,
      #transactionForm.opportunity-mode .opportunity-gci-field {
        grid-column: auto;
      }

      #transactionForm.opportunity-mode #transactionPotentialGci {
        max-width: none;
      }
    }


    /* =========================================================
       OPPORTUNITY — MODERN CLIENT SEARCH PICKER
       ========================================================= */
    #transactionForm.opportunity-mode .opportunity-client-field {
      position: relative;
      overflow: visible;
    }

    #transactionForm.opportunity-mode .opportunity-client-field > #transactionClient {
      display: none !important;
    }

    #transactionForm:not(.opportunity-mode) #opportunityClientPicker {
      display: block !important;
    }

    .opportunity-client-picker {
      position: relative;
      width: 100%;
    }

    .opportunity-client-search-shell {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 11px;
      border: 1px solid #d8e1e6;
      border-radius: 12px;
      background: #fff;
      box-shadow:
        0 1px 2px rgba(21, 48, 67, .03),
        0 0 0 0 rgba(193, 160, 72, 0);
      transition:
        border-color .14s ease,
        box-shadow .14s ease,
        background-color .14s ease;
    }

    .opportunity-client-search-shell:focus-within {
      border-color: #c9aa58;
      box-shadow:
        0 1px 2px rgba(21, 48, 67, .03),
        0 0 0 3px rgba(201, 170, 88, .13);
    }

    .opportunity-client-search-icon {
      flex: 0 0 auto;
      color: #8a9aa5;
      font-size: 17px;
      line-height: 1;
      transform: translateY(-1px);
    }

    #transactionForm.opportunity-mode .opportunity-client-search {
      flex: 1;
      width: 100%;
      min-width: 0;
      min-height: 42px !important;
      height: 42px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #1b374b;
      font-size: 13px;
      font-weight: 650;
    }

    .opportunity-client-search::placeholder {
      color: #9aa8b2;
      font-weight: 550;
    }

    .opportunity-client-clear {
      display: grid;
      place-items: center;
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      min-width: 26px !important;
      min-height: 26px !important;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: #eff3f5;
      color: #7d8d98;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }

    .opportunity-client-clear:hover {
      background: #e5ebee;
      color: #344f61;
    }

    .opportunity-client-results {
      position: absolute;
      z-index: 3500;
      top: calc(100% + 7px);
      left: 0;
      right: 0;
      max-height: 330px;
      overflow-y: auto;
      padding: 6px;
      border: 1px solid #dbe3e7;
      border-radius: 14px;
      background: rgba(255, 255, 255, .99);
      box-shadow:
        0 18px 45px rgba(18, 45, 63, .14),
        0 3px 10px rgba(18, 45, 63, .06);
      -webkit-overflow-scrolling: touch;
    }

    .opportunity-client-result {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      width: 100%;
      min-height: 54px !important;
      padding: 8px 9px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #1c384b;
      cursor: pointer;
      text-align: left;
      font: inherit;
      transition: background-color .1s ease;
    }

    .opportunity-client-result:hover,
    .opportunity-client-result:focus-visible {
      background: #f4f7f8;
      outline: none;
    }

    .opportunity-client-result-avatar {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #eef3f5;
      color: #456277;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .opportunity-client-result-main {
      min-width: 0;
    }

    .opportunity-client-result-main strong {
      display: block;
      overflow: hidden;
      color: #1e394c;
      font-size: 11.5px;
      font-weight: 850;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .opportunity-client-result-main small {
      display: block;
      margin-top: 3px;
      overflow: hidden;
      color: #82919b;
      font-size: 9.5px;
      font-weight: 550;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .opportunity-client-level {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #edf1f3;
      color: #71818d;
      font-size: 9px;
      font-weight: 950;
    }

    .opportunity-client-level.level-a {
      background: #e7f5ec;
      color: #2c8655;
    }

    .opportunity-client-level.level-b {
      background: #fff5d6;
      color: #9c7612;
    }

    .opportunity-client-empty {
      padding: 14px 12px 9px;
      color: #82919b;
      text-align: center;
      font-size: 10px;
      line-height: 1.45;
    }

    .opportunity-add-client-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-height: 48px !important;
      margin-top: 4px;
      padding: 9px 11px;
      border: 1px solid #ead9a6;
      border-radius: 10px;
      background: #fffaf0;
      color: #6f581b;
      cursor: pointer;
      font: inherit;
      text-align: left;
    }

    .opportunity-add-client-result:hover {
      border-color: #d7bc6a;
      background: #fff5d8;
    }

    .opportunity-add-client-result strong {
      display: block;
      font-size: 10.5px;
      font-weight: 900;
    }

    .opportunity-add-client-result small {
      display: block;
      margin-top: 2px;
      color: #9b8652;
      font-size: 9px;
    }

    .opportunity-add-client-plus {
      display: grid;
      place-items: center;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #d4b45f;
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      line-height: 1;
    }

    .opportunity-client-selected {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 7px;
      color: #6f818e;
      font-size: 9px;
    }

    .opportunity-client-selected::before {
      content: '✓';
      display: grid;
      place-items: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #e7f5ec;
      color: #2f8557;
      font-size: 9px;
      font-weight: 950;
    }

    @media (max-width: 700px) {
      .opportunity-client-results {
        position: fixed;
        z-index: 10050;
        top: auto;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: 10px;
        max-height: min(54dvh, 440px);
        border-radius: 17px;
        padding: 8px;
      }

      .opportunity-client-result {
        min-height: 60px !important;
      }

      .opportunity-add-client-result {
        min-height: 55px !important;
      }
    }


    /* =========================================================
       OPPORTUNITY — TRUE 2x2 LAYOUT
       ========================================================= */
    #transactionForm.opportunity-mode .opportunity-name-field,
    #transactionForm.opportunity-mode .opportunity-gci-field {
      grid-column: auto !important;
    }

    #transactionForm.opportunity-mode .opportunity-visible {
      min-width: 0;
    }

    #transactionForm.opportunity-mode #transactionPotentialGci {
      max-width: none !important;
      width: 100%;
    }

    @media (max-width: 700px) {
      #transactionForm.opportunity-mode .form-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
      }

      #transactionForm.opportunity-mode .opportunity-visible {
        grid-column: auto !important;
      }
    }

    @media (max-width: 520px) {
      #transactionForm.opportunity-mode .form-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* =========================================================
       EMAIL COMPOSER — WEBMAIL-STYLE FORMATTING TOOLBAR
       ========================================================= */
    .email-webmail-toolbar {
      display:flex !important;
      flex-wrap:nowrap !important;
      align-items:stretch !important;
      gap:0 !important;
      width:100%;
      min-height:36px;
      padding:0 !important;
      overflow-x:auto;
      overflow-y:hidden;
      border:1px solid #cfd7dc !important;
      border-bottom:0 !important;
      border-radius:6px 6px 0 0 !important;
      background:#f1f3f4 !important;
      scrollbar-width:thin;
      -webkit-overflow-scrolling:touch;
    }

    .email-webmail-toolbar .email-toolbar-group {
      display:flex;
      flex:0 0 auto;
      align-items:stretch;
      border-right:1px solid #cfd7dc;
    }

    .email-webmail-toolbar .email-toolbar-group:last-child { border-right:0; }

    .email-webmail-toolbar button,
    .email-webmail-toolbar select,
    .email-webmail-toolbar .email-toolbar-color-control {
      box-sizing:border-box;
      min-width:35px !important;
      min-height:35px !important;
      height:35px !important;
      margin:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color:#243542 !important;
      font-family:Arial,Helvetica,sans-serif !important;
      font-size:13px !important;
    }

    .email-webmail-toolbar button {
      display:grid;
      place-items:center;
      padding:0 9px !important;
      cursor:pointer;
      font-weight:600 !important;
      transition:background-color .1s ease;
    }

    .email-webmail-toolbar button:hover,
    .email-webmail-toolbar button:focus-visible,
    .email-webmail-toolbar button.is-active {
      background:#dfe4e7 !important;
      outline:none;
    }

    .email-webmail-toolbar button.is-active {
      box-shadow:inset 0 -2px 0 #607786 !important;
    }

    .email-webmail-toolbar select {
      min-width:118px !important;
      padding:0 27px 0 11px !important;
      cursor:pointer;
      appearance:auto;
    }

    .email-webmail-toolbar .email-toolbar-size-group select { min-width:76px !important; }
    .email-webmail-toolbar select:hover { background:#e7ebed !important; }

    .email-toolbar-clear { font-size:21px; font-weight:400; line-height:1; }

    .email-align-icon {
      display:flex;
      flex-direction:column;
      justify-content:center;
      width:16px;
      gap:2px;
    }

    .email-align-icon i {
      display:block;
      width:16px;
      height:2px;
      border-radius:2px;
      background:currentColor;
    }

    .email-align-icon.left i:nth-child(2),
    .email-align-icon.left i:nth-child(4) { width:11px; }

    .email-align-icon.center i:nth-child(2),
    .email-align-icon.center i:nth-child(4) { width:11px; align-self:center; }

    .email-align-icon.right i:nth-child(2),
    .email-align-icon.right i:nth-child(4) { width:11px; align-self:flex-end; }

    .email-toolbar-color-control {
      position:relative;
      display:grid !important;
      place-items:center;
      width:39px;
      padding:0 !important;
      cursor:pointer;
    }

    .email-toolbar-color-control:hover { background:#e2e7e9 !important; }

    .email-toolbar-color-control input[type="color"] {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      opacity:0;
      cursor:pointer;
    }

    .email-toolbar-color-letter {
      font-size:16px;
      font-weight:700;
      line-height:1;
      transform:translateY(-2px);
    }

    .email-toolbar-highlight-icon {
      font-size:16px;
      transform:rotate(-18deg) translateY(-1px);
    }

    .email-toolbar-color-swatch {
      position:absolute;
      right:8px;
      bottom:4px;
      left:8px;
      height:3px;
      border-radius:1px;
      background:#1f3442;
    }

    .email-toolbar-color-swatch.highlight { background:#fff2a8; }
    .email-simple-icon { font-size:14px; letter-spacing:-1px; }
    .email-paragraph-icon { font-size:14px; font-weight:700; }
    .email-quote-icon { font-size:20px; font-family:Georgia,serif; line-height:1; }
    .email-link-icon { font-size:14px; }
    .email-unlink-icon { font-size:14px; opacity:.48; text-decoration:line-through; }

    .email-table-icon {
      display:grid;
      grid-template-columns:repeat(3,4px);
      grid-template-rows:repeat(3,4px);
      gap:1px;
      padding:2px;
      border:1px solid currentColor;
    }

    .email-table-icon i {
      display:block;
      width:4px;
      height:4px;
      border-right:1px solid currentColor;
      border-bottom:1px solid currentColor;
    }

    .email-photo-icon {
      display:grid;
      place-items:center;
      width:18px;
      height:15px;
      border:1.5px solid currentColor;
      font-size:10px;
      line-height:1;
    }

    .email-webmail-toolbar + .email-rich-editor {
      border-radius:0 0 7px 7px !important;
    }

    .email-rich-editor blockquote {
      margin:10px 0;
      padding:6px 0 6px 13px;
      border-left:3px solid #c8d1d6;
      color:#516673;
    }

    .email-rich-editor table {
      width:auto;
      max-width:100%;
      border-collapse:collapse;
      margin:8px 0;
    }

    .email-rich-editor table td,
    .email-rich-editor table th {
      min-width:70px;
      padding:7px 9px;
      border:1px solid #bfcbd1;
      vertical-align:top;
    }

    @media (max-width:700px) {
      .email-webmail-toolbar { flex-wrap:nowrap !important; }
      .email-webmail-toolbar button { padding:0 8px !important; }
      .email-webmail-toolbar select { min-width:105px !important; }
      .email-webmail-toolbar .email-toolbar-size-group select { min-width:72px !important; }
    }


    /* =========================================================
       EMAIL TEMPLATE PRIVACY + PERSONAL TEMPLATE CREATION
       ========================================================= */
    .email-composer-template-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .email-composer-template-controls select {
      min-width: 0;
      width: 100%;
    }

    .email-composer-new-template-btn {
      min-height: 38px;
      padding: 8px 11px;
      border: 1px solid #d7dee3;
      border-radius: 9px;
      background: #f7f9fa;
      color: #28475b;
      font-size: 10px;
      font-weight: 850;
      white-space: nowrap;
      cursor: pointer;
    }

    .email-composer-new-template-btn:hover {
      border-color: #c5d0d7;
      background: #eef3f5;
    }

    .email-template-scope-note {
      margin-top: 5px;
      color: #8a98a2;
      font-size: 9px;
    }

    .email-template-owner-note {
      margin-top: 3px;
      color: #a08a51;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .025em;
      text-transform: uppercase;
    }

    @media (max-width: 560px) {
      .email-composer-template-controls {
        grid-template-columns: 1fr;
      }

      .email-composer-new-template-btn {
        width: 100%;
      }
    }


    /* =========================================================
       SETTINGS > TEAM — CLEAN TEAM MEMBER MANAGEMENT
       ========================================================= */
    #settingsPanelTeam > .settings-section:first-child {
      overflow: visible;
    }

    #settingsPanelTeam > .settings-section:first-child .settings-section-body {
      padding: 16px 18px 20px;
    }

    .team-settings-help {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 22px;
      margin-bottom: 12px;
      color: #7b8b97;
      font-size: 10px;
      line-height: 1.4;
    }

    .team-settings-help strong {
      color: #425b6c;
    }

    .team-member-admin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .team-member-admin-card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid #dfe6ea;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 3px 14px rgba(18, 48, 68, .045);
      transition:
        border-color .14s ease,
        box-shadow .14s ease;
    }

    .team-member-admin-card:hover {
      border-color: #d2dce2;
      box-shadow: 0 6px 20px rgba(18, 48, 68, .07);
    }

    .team-member-admin-card.is-inactive {
      opacity: .68;
    }

    .team-member-admin-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 15px;
      border-bottom: 1px solid #edf1f3;
      background: linear-gradient(180deg, #fbfcfd, #fff);
    }

    .team-member-admin-identity {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 11px;
    }

    .team-member-admin-name-wrap {
      min-width: 0;
    }

    .team-member-admin-name-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
    }

    .team-member-admin-name-row strong {
      overflow: hidden;
      color: #173348;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: -.02em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .team-member-admin-visible-title {
      display: block;
      margin-top: 3px;
      color: #83929c;
      font-size: 9.5px;
      font-weight: 650;
    }

    .team-member-role-badge {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 3px 7px;
      border-radius: 999px;
      background: #eef3f5;
      color: #637986;
      font-size: 7.5px;
      font-weight: 900;
      letter-spacing: .035em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .team-member-role-badge.role-super_admin {
      background: #fff5d9;
      color: #896814;
    }

    .team-member-role-badge.role-admin {
      background: #eaf3f8;
      color: #426e89;
    }

    .team-member-admin-header-status {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      flex: 0 0 auto;
    }

    .team-active-control {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #7a8a95;
      font-size: 8px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .035em;
    }

    .team-member-admin-body {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      gap: 0;
    }

    .team-member-admin-section {
      min-width: 0;
      padding: 13px 15px 14px;
      border-right: 1px solid #edf1f3;
      border-bottom: 1px solid #edf1f3;
    }

    .team-member-admin-section:nth-child(2) {
      border-right: 0;
    }

    .team-member-admin-section.google-access-section {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      border-right: 0;
      border-bottom: 0;
      padding-top: 11px;
      padding-bottom: 11px;
      background: #fbfcfc;
    }

    .team-member-admin-section-title {
      margin-bottom: 9px;
      color: #8c99a2;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .google-access-section .team-member-admin-section-title {
      margin: 0;
    }

    .team-member-admin-fields {
      display: grid;
      gap: 9px;
    }

    .team-member-admin-fields.contact-fields {
      grid-template-columns: minmax(0, 1.35fr) minmax(120px, .65fr);
    }

    .team-member-admin-fields.access-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-member-admin-fields.access-fields .team-admin-field:last-child {
      grid-column: 1 / -1;
    }

    .team-admin-field {
      display: grid;
      min-width: 0;
      gap: 4px;
    }

    .team-admin-field > span {
      color: #71838f;
      font-size: 8px;
      font-weight: 850;
    }

    .team-admin-field input,
    .team-admin-field select {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 36px !important;
      height: 36px !important;
      padding: 7px 9px !important;
      border: 1px solid #dce4e8 !important;
      border-radius: 9px !important;
      background: #fff !important;
      color: #29465a !important;
      font-size: 10.5px !important;
    }

    .team-admin-field input:disabled,
    .team-admin-field select:disabled {
      background: #f4f6f7 !important;
      color: #7d8c96 !important;
      opacity: 1 !important;
      cursor: not-allowed;
    }

    .team-member-google-card-status .team-google-status-cell {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 10px;
    }

    .team-member-google-card-status .team-google-status-email,
    .team-member-google-card-status .team-google-status-checked {
      margin: 0 !important;
    }

    .team-member-admin-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-top: 1px solid #edf1f3;
      background: #fafbfc;
    }

    .team-member-admin-secondary-actions,
    .team-member-admin-primary-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .team-member-admin-footer .settings-small-btn {
      min-height: 32px !important;
      padding: 6px 9px !important;
      border-radius: 8px !important;
      font-size: 8.5px !important;
      white-space: nowrap;
    }

    .team-member-admin-footer .team-member-save-btn {
      border-color: #173b55 !important;
      background: #173b55 !important;
      color: #fff !important;
      font-weight: 900 !important;
    }

    .team-member-admin-footer .team-member-save-btn:hover {
      background: #102f47 !important;
    }

    .team-member-admin-footer .team-invite-btn {
      border-color: #e1c36c !important;
      background: #fff8e3 !important;
      color: #7d6118 !important;
    }

    /* Email summary becomes a compact status strip rather than another table row. */
    #settingsPanelTeam .team-email-status-summary {
      margin: 0 !important;
      padding: 10px 12px !important;
      border: 1px solid #e2e8eb !important;
      border-radius: 11px !important;
      background: #f8fafb !important;
      box-shadow: none !important;
    }

    #settingsPanelTeam .team-email-summary-main strong {
      font-size: 9px !important;
    }

    #settingsPanelTeam .team-email-summary-main span,
    #settingsPanelTeam .team-email-summary-stats span {
      font-size: 8.5px !important;
    }

    @media (max-width: 1180px) {
      .team-member-admin-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      #settingsPanelTeam > .settings-section:first-child .settings-section-body {
        padding: 12px !important;
      }

      .team-member-admin-grid {
        gap: 11px;
        margin-top: 11px;
      }

      .team-member-admin-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .team-member-admin-header-status {
        justify-content: flex-start;
        width: 100%;
      }

      .team-member-admin-body {
        grid-template-columns: 1fr;
      }

      .team-member-admin-section,
      .team-member-admin-section:nth-child(2) {
        border-right: 0;
      }

      .team-member-admin-section.google-access-section {
        grid-column: auto;
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .team-member-admin-fields.contact-fields,
      .team-member-admin-fields.access-fields {
        grid-template-columns: 1fr;
      }

      .team-member-admin-fields.access-fields .team-admin-field:last-child {
        grid-column: auto;
      }

      .team-member-admin-footer {
        align-items: stretch;
        flex-direction: column;
      }

      .team-member-admin-secondary-actions,
      .team-member-admin-primary-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      .team-member-admin-footer .settings-small-btn {
        width: 100%;
        min-height: 38px !important;
      }

      .team-settings-help {
        display: grid;
        gap: 4px;
      }
    }


    /* =========================================================
       INDEX 20 — DASHBOARD / OPPORTUNITY / DATABASE UX CLEANUP
       ========================================================= */

    /* ---------- Connected Database: compact filter dropdown ---------- */
    #clientsView .client-toolbar {
      position: relative;
      padding: 12px 14px !important;
      margin-bottom: 14px !important;
      overflow: visible !important;
    }

    #clientsView .client-toolbar-search-row {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 9px !important;
      align-items: center !important;
    }

    #clientsView .client-filters-toggle {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 42px !important;
      height: 42px !important;
      padding: 0 14px !important;
      border: 1px solid #d8e0e5 !important;
      border-radius: 10px !important;
      background: #fff !important;
      color: #29475b !important;
      box-shadow: 0 1px 3px rgba(18,48,68,.03);
      font-size: 9.5px !important;
      font-weight: 900 !important;
    }

    #clientsView .client-filters-toggle:hover,
    #clientsView .client-filters-toggle[aria-expanded="true"] {
      border-color: #c7d2d9 !important;
      background: #f7f9fa !important;
    }

    #clientsView .client-toolbar-search-row .search-wrap input {
      min-height: 42px !important;
      height: 42px !important;
    }

    #clientsView .client-advanced-filters {
      position: absolute !important;
      z-index: 2500 !important;
      top: 61px !important;
      right: 14px !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      width: min(500px, calc(100% - 28px)) !important;
      margin: 0 !important;
      padding: 11px !important;
      border: 1px solid #dce4e8 !important;
      border-radius: 13px !important;
      background: rgba(255,255,255,.99) !important;
      box-shadow:
        0 18px 42px rgba(18,48,68,.14),
        0 3px 10px rgba(18,48,68,.05) !important;
    }

    #clientsView .client-advanced-filters.filters-collapsed {
      display: none !important;
    }

    #clientsView .client-advanced-filters select,
    #clientsView .client-advanced-filters button {
      width: 100% !important;
      min-width: 0 !important;
      min-height: 39px !important;
      height: 39px !important;
      margin: 0 !important;
      font-size: 9.5px !important;
    }

    #clientsView .client-toolbar-meta {
      min-height: 34px !important;
      margin-top: 7px !important;
    }

    /* Keep the relationship Level cards exactly as their existing layout. */
    #clientsView .client-relationship-selector {
      margin-top: 0 !important;
    }

    /* ---------- Dashboard: Opportunity rows match Transaction rows ---------- */
    @media (min-width: 701px) {
      .dashboard-client-table tbody tr,
      .dashboard-transaction-table tbody tr {
        height: 46px !important;
      }

      .dashboard-client-table tbody td,
      .dashboard-transaction-table tbody td {
        height: 46px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        vertical-align: middle !important;
      }

      .dashboard-client-table .dashboard-inline-edit-cell {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
      }

      .dashboard-client-table .dashboard-client-primary {
        font-size: 10.5px !important;
        line-height: 1.12 !important;
      }

      .dashboard-client-table .dashboard-deal-secondary-wrap {
        margin-top: 1px !important;
      }

      .dashboard-client-table .dashboard-deal-secondary,
      .dashboard-client-table .dashboard-deal-text-select {
        font-size: 8px !important;
        line-height: 1.08 !important;
      }

      .dashboard-client-table .dashboard-client-status-select,
      .dashboard-client-table .dashboard-buy-sell-select,
      .dashboard-client-table .dashboard-potential-gci-input {
        height: 26px !important;
        min-height: 26px !important;
      }
    }

    /* ---------- New Opportunity: clean 2 x 2 form, labels fit ---------- */
    #transactionForm.opportunity-mode {
      width: min(760px, calc(100vw - 32px)) !important;
    }

    #transactionForm.opportunity-mode .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 15px 18px !important;
    }

    #transactionForm.opportunity-mode .opportunity-visible {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      align-content: start !important;
      gap: 6px !important;
      min-width: 0 !important;
      margin-bottom: 0 !important;
    }

    #transactionForm.opportunity-mode .opportunity-visible > label {
      display: block !important;
      min-width: 0 !important;
      margin: 0 !important;
      color: #29475b !important;
      font-size: 11px !important;
      line-height: 1.2 !important;
      font-weight: 850 !important;
      white-space: nowrap !important;
    }

    #transactionForm.opportunity-mode .opportunity-visible > input,
    #transactionForm.opportunity-mode .opportunity-visible > select,
    #transactionForm.opportunity-mode .opportunity-client-search-shell {
      min-height: 46px !important;
      height: 46px !important;
      width: 100% !important;
    }

    #transactionForm.opportunity-mode .opportunity-client-search {
      min-height: 42px !important;
      height: 42px !important;
    }

    @media (max-width: 700px) {
      #clientsView .client-toolbar {
        padding: 10px !important;
      }

      #clientsView .client-advanced-filters {
        position: absolute !important;
        top: 59px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      }

      #clientsView .client-advanced-filters #agentFilter,
      #clientsView .client-advanced-filters #clearFiltersButton {
        grid-column: auto !important;
      }

      #transactionForm.opportunity-mode {
        width: 100% !important;
      }

      #transactionForm.opportunity-mode .form-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 12px !important;
      }

      #transactionForm.opportunity-mode .opportunity-visible {
        grid-column: auto !important;
      }
    }

    @media (max-width: 520px) {
      #clientsView .client-advanced-filters {
        grid-template-columns: 1fr !important;
      }

      #transactionForm.opportunity-mode .form-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* =========================================================
       INDEX 21 — TRUE OPPORTUNITY ROW HEIGHT MATCH
       The inline Status / Buyer-Seller controls were still
       imposing a larger intrinsic height on the pipeline rows.
       ========================================================= */
    @media (min-width: 701px) {
      .dashboard-client-table tbody tr {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
      }

      .dashboard-client-table tbody td {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        vertical-align: middle !important;
        line-height: 1 !important;
      }

      .dashboard-client-table .dashboard-client-name-cell {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
      }

      .dashboard-client-table .dashboard-client-primary {
        display: block !important;
        height: 13px !important;
        min-height: 13px !important;
        max-height: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      .dashboard-client-table .dashboard-deal-secondary-wrap {
        height: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
      }

      .dashboard-client-table .dashboard-deal-secondary,
      .dashboard-client-table .dashboard-deal-text-select {
        display: block !important;
        height: 10px !important;
        min-height: 10px !important;
        max-height: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 8px !important;
        line-height: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      /* Override every generic select/input minimum that could stretch rows. */
      .dashboard-client-table select.dashboard-client-status-select,
      .dashboard-client-table select.dashboard-buy-sell-select,
      .dashboard-client-table input.dashboard-potential-gci-input {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        margin: 0 !important;
        padding: 2px 3px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 9.5px !important;
        line-height: 22px !important;
      }

      .dashboard-client-table .dashboard-inline-edit-cell {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
      }

      .dashboard-client-table .dashboard-gci-input-wrap {
        height: 26px !important;
        min-height: 26px !important;
        max-height: 26px !important;
        display: flex !important;
        align-items: center !important;
      }

      /* Use the exact same vertical rhythm as the transaction rows. */
      .dashboard-transaction-table tbody tr,
      .dashboard-transaction-table tbody td {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
      }
    }


    /* =========================================================
       INDEX 22 — BUYER / SELLER PILLS
       ========================================================= */
    .dashboard-client-table
    select.dashboard-buy-sell-select.is-seller,
    .dashboard-client-table
    select.dashboard-buy-sell-select.is-seller:hover,
    .dashboard-client-table
    select.dashboard-buy-sell-select.is-seller:focus {
      width: 78px !important;
      min-width: 78px !important;
      max-width: 78px !important;
      height: 26px !important;
      min-height: 26px !important;
      padding: 3px 9px !important;
      border-radius: 7px !important;
      background: #52585d !important;
      color: #e5e7e9 !important;
      -webkit-text-fill-color: #e5e7e9 !important;
      text-align: center !important;
      text-align-last: center !important;
      font-weight: 900 !important;
    }

    .dashboard-client-table
    select.dashboard-buy-sell-select.is-buyer,
    .dashboard-client-table
    select.dashboard-buy-sell-select.is-buyer:hover,
    .dashboard-client-table
    select.dashboard-buy-sell-select.is-buyer:focus {
      width: 78px !important;
      min-width: 78px !important;
      max-width: 78px !important;
      height: 26px !important;
      min-height: 26px !important;
      padding: 3px 9px !important;
      border-radius: 7px !important;
      background: #e3e5e7 !important;
      color: #343a40 !important;
      -webkit-text-fill-color: #343a40 !important;
      text-align: center !important;
      text-align-last: center !important;
      font-weight: 900 !important;
    }

    .dashboard-client-table
    select.dashboard-buy-sell-select
    option {
      background: #fff !important;
      color: #243746 !important;
      -webkit-text-fill-color: #243746 !important;
    }


    /* =========================================================
       INDEX 22 — SIMPLIFIED NEW CLIENT
       ========================================================= */
    #newClientForm {
      width: min(760px, calc(100vw - 32px)) !important;
    }

    .new-client-simple-form {
      display: grid;
      gap: 18px;
    }

    .new-client-primary-section,
    .new-client-family-section {
      border: 1px solid #dfe6ea;
      border-radius: 14px;
      background: #fff;
      overflow: hidden;
    }

    .new-client-section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 15px;
      border-bottom: 1px solid #e9eef0;
      background: #f8fafb;
    }

    .new-client-section-heading h3 {
      margin: 0;
      color: #173348;
      font-size: 13px;
      font-weight: 900;
    }

    .new-client-section-heading p {
      margin: 3px 0 0;
      color: #84929b;
      font-size: 9px;
      line-height: 1.35;
    }

    .new-client-connected-badge {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 4px 9px;
      border: 1px solid #badcc9;
      border-radius: 999px;
      background: #e9f6ef;
      color: #27734d;
      font-size: 8px;
      font-weight: 950;
      letter-spacing: .035em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .new-client-primary-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 12px 14px;
      padding: 15px;
    }

    .new-client-primary-grid .field,
    .new-client-family-grid .field {
      min-width: 0;
      margin: 0 !important;
    }

    .new-client-primary-grid .span-2 {
      grid-column: 1 / -1;
    }

    .new-client-primary-grid label,
    .new-client-family-grid
    .field > span {
      display: block;
      margin: 0 0 5px;
      color: #5e7382;
      font-size: 9px;
      font-weight: 850;
    }

    .new-client-primary-grid input,
    .new-client-primary-grid select,
    .new-client-family-grid input,
    .new-client-family-grid select {
      min-height: 41px !important;
      height: 41px !important;
      padding: 8px 10px !important;
      border: 1px solid #dbe3e7 !important;
      border-radius: 9px !important;
      background: #fff !important;
      color: #29475b !important;
      font-size: 10.5px !important;
    }

    #newClientReferralFields {
      margin: 0 !important;
      padding: 11px !important;
      border: 1px solid #e8e0c7;
      border-radius: 10px;
      background: #fffdf7;
    }

    .new-client-add-family-btn {
      min-height: 34px;
      padding: 7px 10px;
      border: 1px solid #d6dee3;
      border-radius: 8px;
      background: #fff;
      color: #29475b;
      cursor: pointer;
      font-size: 8.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .new-client-add-family-btn:hover {
      border-color: #c3d0d7;
      background: #eef3f5;
    }

    .new-client-family-members {
      display: grid;
      gap: 10px;
      padding: 12px 15px 15px;
    }

    .new-client-family-empty {
      padding: 15px 10px;
      border: 1px dashed #d9e1e5;
      border-radius: 10px;
      color: #8b98a1;
      text-align: center;
      font-size: 9px;
    }

    .new-client-family-member {
      padding: 11px;
      border: 1px solid #e0e6e9;
      border-radius: 11px;
      background: #fbfcfd;
    }

    .new-client-family-row-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 9px;
    }

    .new-client-family-row-header strong {
      color: #314d60;
      font-size: 9px;
      font-weight: 900;
    }

    .new-client-family-remove {
      padding: 3px 0;
      border: 0;
      background: transparent;
      color: #9a6262;
      cursor: pointer;
      font-size: 8px;
      font-weight: 850;
    }

    .new-client-family-remove:hover {
      text-decoration: underline;
    }

    .new-client-family-grid {
      display: grid;
      grid-template-columns:
        minmax(105px, .7fr)
        repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .new-client-family-email-field {
      grid-column: span 2;
    }

    @media (max-width: 700px) {
      #newClientForm {
        width: 100% !important;
      }

      .new-client-section-heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .new-client-section-heading.family-heading {
        align-items: stretch;
      }

      .new-client-add-family-btn {
        width: 100%;
        min-height: 40px;
      }

      .new-client-primary-grid,
      .new-client-family-grid {
        grid-template-columns: 1fr;
      }

      .new-client-primary-grid .span-2,
      .new-client-family-email-field {
        grid-column: auto;
      }
    }


    /* =========================================================
       INDEX 24 — MINIMAL PERSON / BUSINESS TOGGLE
       Everything else uses the exact index-22 New Client layout.
       ========================================================= */
    .new-client-heading-controls {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .new-client-person-business-toggle {
      display: inline-flex;
      align-items: center;
      padding: 2px;
      border: 1px solid #dce3e7;
      border-radius: 9px;
      background: #edf2f4;
    }

    .new-client-mode-button {
      min-height: 25px;
      padding: 4px 9px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #788994;
      cursor: pointer;
      font-size: 8px;
      font-weight: 900;
      line-height: 1;
      transition:
        background-color .12s ease,
        color .12s ease,
        box-shadow .12s ease;
    }

    .new-client-mode-button.active {
      background: #fff;
      color: #18374d;
      box-shadow:
        0 1px 3px rgba(18,48,68,.10);
    }

    #newClientCompanyNameField {
      grid-column: 1 / -1;
    }

    @media (max-width: 700px) {
      .new-client-heading-controls {
        width: 100%;
        justify-content: space-between;
      }
    }


    /* =========================================================
       INDEX 25 — TRANSACTIONS DESKTOP LAYOUT RESTORE
       Do not let touch-capable desktop computers inherit the
       iPad/tablet transaction column sizing.
       ========================================================= */
    @media (min-width: 1181px) {
      #transactionsView .transaction-table,
      #transactionsView .transaction-table.admin-expanded,
      #transactionsView .transaction-table.agent-readonly {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: fixed !important;
      }

      /*
        Match the real transaction column order:
        Agent | Transaction | Client | Type | Status |
        Closing | Sale Price | GCI | Agent Net | ...
      */
      #transactionsView .transaction-table th:nth-child(1),
      #transactionsView .transaction-table td:nth-child(1) {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
      }

      #transactionsView .transaction-table th:nth-child(2),
      #transactionsView .transaction-table td:nth-child(2) {
        width: 410px !important;
        min-width: 410px !important;
        max-width: 410px !important;
      }

      #transactionsView .transaction-table th:nth-child(3),
      #transactionsView .transaction-table td:nth-child(3) {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
      }

      #transactionsView .transaction-table th:nth-child(4),
      #transactionsView .transaction-table td:nth-child(4) {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
      }

      #transactionsView .transaction-table th:nth-child(5),
      #transactionsView .transaction-table td:nth-child(5) {
        width: 118px !important;
        min-width: 118px !important;
        max-width: 118px !important;
      }

      #transactionsView .transaction-table th:nth-child(6),
      #transactionsView .transaction-table td:nth-child(6) {
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
      }

      #transactionsView .transaction-table th:nth-child(7),
      #transactionsView .transaction-table td:nth-child(7) {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
      }

      #transactionsView .transaction-table th:nth-child(8),
      #transactionsView .transaction-table td:nth-child(8) {
        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
      }

      #transactionsView .transaction-table th:nth-child(9),
      #transactionsView .transaction-table td:nth-child(9) {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
      }

      #transactionsView .transaction-table th:nth-child(n+10),
      #transactionsView .transaction-table td:nth-child(n+10) {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
      }

      /*
        Restore the cleaner desktop density. The prior compact rule
        made the headings oversized relative to the available columns.
      */
      #transactionsView .transaction-table th {
        height: 42px !important;
        padding: 8px 9px !important;
        font-size: 9.5px !important;
        line-height: 1.1 !important;
        letter-spacing: .035em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      #transactionsView .transaction-table td {
        height: 47px !important;
        padding: 5px 9px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
      }

      #transactionsView .transaction-table
      .transaction-inline-text,
      #transactionsView .transaction-table
      .transaction-row-open {
        font-size: 11px !important;
      }

      #transactionsView .transaction-table
      .transaction-inline-control:not(.transaction-status-inline):not(.transaction-type-pill) {
        height: 29px !important;
        min-height: 0 !important;
        font-size: 10.5px !important;
      }

      /* Type and Status remain the intentional pills. */
      #transactionsView .transaction-table
      select.transaction-type-pill {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 4px 9px !important;
        border-radius: 7px !important;
        font-size: 9.5px !important;
      }

      #transactionsView .transaction-table
      select.transaction-status-inline {
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 27px !important;
        min-height: 27px !important;
        padding: 4px 8px !important;
        border-radius: 7px !important;
        font-size: 9.5px !important;
      }

      /* Sticky desktop columns must match the restored widths. */
      #transactionsView .transaction-table th:nth-child(1),
      #transactionsView .transaction-table td:nth-child(1) {
        left: 0 !important;
      }

      #transactionsView .transaction-table th:nth-child(2),
      #transactionsView .transaction-table td:nth-child(2) {
        left: 64px !important;
      }

      #transactionsView .transaction-table-scroll {
        overflow-x: auto !important;
        overflow-y: visible !important;
      }
    }


    /* =========================================================
       INDEX 26 — TRANSACTION HEADER ALIGNMENT + STICKY GROUPS
       ========================================================= */

    /* Center every column heading except Transaction + Client Name. */
    #transactionsView
    .transaction-table
    thead
    th {
      text-align: center !important;
    }

    #transactionsView
    .transaction-table
    thead
    th
    .sort-label {
      justify-content: center !important;
      text-align: center !important;
    }

    #transactionsView
    .transaction-table
    thead
    th[data-transaction-sort="name"],
    #transactionsView
    .transaction-table
    thead
    th[data-transaction-sort="client"] {
      text-align: left !important;
    }

    #transactionsView
    .transaction-table
    thead
    th[data-transaction-sort="name"]
    .sort-label,
    #transactionsView
    .transaction-table
    thead
    th[data-transaction-sort="client"]
    .sort-label {
      justify-content: flex-start !important;
      text-align: left !important;
    }

    /*
      Status section labels are now their own sticky cell spanning
      the two frozen desktop columns (Agent + Transaction).
      This is much more reliable than a sticky div inside one
      full-table colspan cell.
    */
    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-anchor {
      position: sticky !important;
      left: 0 !important;
      z-index: 14 !important;
      box-sizing: border-box !important;
      width: 474px !important;
      min-width: 474px !important;
      max-width: 474px !important;
      height: auto !important;
      padding: 7px 7px 4px !important;
      border: 0 !important;
      background: #fff !important;
      box-shadow:
        1px 0 0 #e5eaed !important;
      overflow: visible !important;
      transform: translateZ(0);
    }

    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-fill {
      position: static !important;
      left: auto !important;
      height: auto !important;
      padding: 7px 0 4px !important;
      border: 0 !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    #transactionsView
    .transaction-status-group-row
    .transaction-status-group-header {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: max-content !important;
      min-width: 0 !important;
      margin: 0 !important;
    }

    /*
      Retire the old inner sticky wrapper if any cached/legacy markup
      briefly exists during a render.
    */
    #transactionsView
    .transaction-status-group-sticky {
      position: static !important;
      left: auto !important;
      width: auto !important;
      max-width: none !important;
      padding-right: 0 !important;
    }

    @media (max-width: 700px) {
      #transactionsView
      .transaction-status-group-row
      > .transaction-status-group-anchor {
        position: static !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 7px 4px 5px !important;
        box-shadow: none !important;
        transform: none !important;
      }

      #transactionsView
      .transaction-status-group-row
      > .transaction-status-group-fill {
        display: none !important;
      }
    }


    /* =========================================================
       INDEX 27 — TRANSACTION GRIDLINE ALIGNMENT
       Use one identical painted separator across frozen and
       scrolling cells so the 1px row lines meet perfectly.
       ========================================================= */

    #transactionsView
    .transaction-table
    tbody
    tr[data-transaction-id]
    > td {
      border-bottom: 0 !important;
      background-image:
        linear-gradient(
          to bottom,
          transparent calc(100% - 1px),
          #e9edef calc(100% - 1px),
          #e9edef 100%
        ) !important;
      background-repeat: no-repeat !important;
      background-size: 100% 100% !important;
      background-clip: padding-box !important;
    }

    /*
      The Pending / Closed section row is split into a sticky
      frozen cell and a scrolling fill cell. Paint the same
      bottom rule into both halves.
    */
    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-anchor {
      border-bottom: 0 !important;
      box-shadow:
        1px 0 0 #e5eaed,
        inset 0 -1px 0 #e9edef !important;
    }

    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-fill {
      border-bottom: 0 !important;
      box-shadow:
        inset 0 -1px 0 #e9edef !important;
    }

    /* Keep the frozen Transaction/Client seam exactly one pixel. */
    #transactionsView
    .transaction-table
    th:nth-child(2),
    #transactionsView
    .transaction-table
    tbody
    tr[data-transaction-id]
    > td:nth-child(2) {
      border-right: 1px solid #e5eaed !important;
    }


    /* =========================================================
       INDEX 28 — STATUS DIVIDER ROWS: ONE CONTINUOUS GRIDLINE
       Pending / Closed / Cancelled transitions are rendered as
       a single table cell so the horizontal lines cannot step.
       ========================================================= */

    #transactionsView
    .transaction-status-group-row {
      display: table-row !important;
      width: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #fff !important;
    }

    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-full {
      display: table-cell !important;
      position: static !important;
      left: auto !important;
      box-sizing: border-box !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 45px !important;
      min-height: 45px !important;
      padding: 0 !important;
      border-top: 0 !important;
      border-right: 0 !important;
      border-bottom: 1px solid #e9edef !important;
      border-left: 0 !important;
      background: #fff !important;
      background-image: none !important;
      box-shadow: none !important;
      overflow: visible !important;
      vertical-align: middle !important;
    }

    /*
      Only the label moves with the frozen left area.
      The status row/gridline itself remains one continuous table cell.
    */
    #transactionsView
    .transaction-status-group-row
    .transaction-status-group-sticky {
      position: sticky !important;
      left: 0 !important;
      z-index: 15 !important;
      display: flex !important;
      align-items: center !important;
      box-sizing: border-box !important;
      width: 474px !important;
      min-width: 474px !important;
      max-width: 474px !important;
      height: 44px !important;
      margin: 0 !important;
      padding: 7px 7px 6px !important;
      background: #fff !important;
      box-shadow: 1px 0 0 #e5eaed !important;
      transform: translateZ(0);
    }

    #transactionsView
    .transaction-status-group-row
    .transaction-status-group-header {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      width: max-content !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Fully neutralize the split-cell implementation from index-26/27. */
    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-anchor,
    #transactionsView
    .transaction-status-group-row
    > .transaction-status-group-fill {
      display: none !important;
    }

    @media (max-width: 700px) {
      #transactionsView
      .transaction-status-group-row {
        display: block !important;
        margin-top: 10px !important;
      }

      #transactionsView
      .transaction-status-group-row
      > .transaction-status-group-full {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border-bottom: 0 !important;
        background: transparent !important;
      }

      #transactionsView
      .transaction-status-group-row
      .transaction-status-group-sticky {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        padding: 7px 4px 5px !important;
        box-shadow: none !important;
        transform: none !important;
        background: transparent !important;
      }
    }


    /* =========================================================
       INDEX 29 — EXACT STATUS-ROW VERTICAL SEAM ALIGNMENT
       Normal rows draw the frozen Transaction divider INSIDE
       column 2. The status heading must do the same.
       ========================================================= */
    @media (min-width: 701px) {
      #transactionsView
      .transaction-status-group-row
      .transaction-status-group-sticky {
        /*
          64px Agent + 410px Transaction = 474px total frozen area.
          Use an inset 1px rule so its visible edge lands at 473px,
          exactly where column 2's border-right is painted.
        */
        width: 474px !important;
        min-width: 474px !important;
        max-width: 474px !important;

        box-shadow:
          inset -1px 0 0 #e5eaed !important;
      }

      /*
        Prevent any older outside shadow/border from creating a
        second line one pixel to the right.
      */
      #transactionsView
      .transaction-status-group-row
      > .transaction-status-group-full {
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
      }
    }


    /* =========================================================
       INDEX 30 — CONNECTED DATABASE BULK SELECT / EDIT
       ========================================================= */

    #clientsView .client-header-select-and-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    #clientsView .client-row-select,
    #clientsView .client-select-all {
      position: relative;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin: 0;
      cursor: pointer;
    }

    #clientsView .client-row-select input,
    #clientsView .client-select-all input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    #clientsView .client-row-select > span,
    #clientsView .client-select-all > span {
      display: grid;
      place-items: center;
      box-sizing: border-box;
      width: 16px;
      height: 16px;
      border: 1.5px solid #b7c3ca;
      border-radius: 4px;
      background: #fff;
      transition:
        border-color .12s ease,
        background-color .12s ease,
        box-shadow .12s ease;
    }

    #clientsView .client-row-select:hover > span,
    #clientsView .client-select-all:hover > span {
      border-color: #6e8797;
      box-shadow:
        0 0 0 2px
        rgba(36, 72, 95, .07);
    }

    #clientsView .client-row-select input:checked + span,
    #clientsView .client-select-all input:checked + span,
    #clientsView .client-select-all input:indeterminate + span {
      border-color: #183b54;
      background: #183b54;
    }

    #clientsView .client-row-select input:checked + span::after,
    #clientsView .client-select-all input:checked + span::after {
      content: '✓';
      color: #fff;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
    }

    #clientsView .client-select-all input:indeterminate + span::after {
      content: '−';
      color: #fff;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      transform: translateY(-1px);
    }

    #clientsView .client-search-name-wrap {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }

    #clientsView .client-table tbody tr:has(
      [data-client-select-id]:checked
    ) {
      background: #f4f8fa !important;
      box-shadow:
        inset 3px 0 0 #183b54;
    }

    #clientsView .client-table tbody tr:has(
      [data-client-select-id]:checked
    ) td {
      background:
        rgba(244, 248, 250, .72) !important;
    }

    #clientsView .client-bulk-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
      margin: 0;
      padding: 7px 10px;
      border-top: 1px solid #e2e8eb;
      border-bottom: 1px solid #e2e8eb;
      background:
        linear-gradient(
          180deg,
          #f9fbfc,
          #f5f8f9
        );
    }

    #clientsView .client-bulk-toolbar.hidden {
      display: none !important;
    }

    #clientsView .client-bulk-selection-summary {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 7px;
      color: #203f54;
      white-space: nowrap;
    }

    #clientsView .client-bulk-selection-summary strong {
      font-size: 9.5px;
      font-weight: 950;
    }

    #clientsView .client-bulk-clear-selection {
      display: grid;
      place-items: center;
      width: 27px;
      height: 27px;
      min-width: 27px;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: #667c89;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }

    #clientsView .client-bulk-clear-selection:hover {
      background: #e8eef1;
      color: #233f51;
    }

    #clientsView .client-bulk-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    #clientsView .client-bulk-select,
    #clientsView .client-bulk-button {
      box-sizing: border-box;
      min-height: 32px !important;
      height: 32px !important;
      margin: 0 !important;
      border: 1px solid #d4dde2 !important;
      border-radius: 8px !important;
      background: #fff !important;
      color: #29475a !important;
      box-shadow: none !important;
      font-size: 8.5px !important;
      font-weight: 850 !important;
    }

    #clientsView .client-bulk-select {
      width: auto !important;
      min-width: 92px !important;
      max-width: 145px !important;
      padding: 5px 23px 5px 8px !important;
      cursor: pointer;
    }

    #clientsView .client-bulk-button {
      padding: 5px 10px !important;
      cursor: pointer;
      white-space: nowrap;
    }

    #clientsView .client-bulk-button:hover,
    #clientsView .client-bulk-select:hover {
      border-color: #bbc9d1 !important;
      background: #f9fbfc !important;
    }

    #clientsView .client-bulk-button.archive {
      border-color: #dccd9c !important;
      background: #fffaf0 !important;
      color: #745d1e !important;
    }

    #clientsView .client-bulk-button.danger {
      border-color: #e3c1c1 !important;
      background: #fff7f7 !important;
      color: #a54444 !important;
    }

    #clientsView .client-bulk-button.danger:hover {
      border-color: #d8aaaa !important;
      background: #fff0f0 !important;
    }

    #clientsView .client-bulk-divider {
      width: 1px;
      height: 22px;
      margin: 0 2px;
      background: #dce4e8;
    }

    @media (max-width: 900px) {
      #clientsView .client-bulk-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
      }

      #clientsView .client-bulk-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
      }

      #clientsView .client-bulk-select,
      #clientsView .client-bulk-button {
        flex: 0 0 auto;
      }

      #clientsView .client-bulk-divider {
        flex: 0 0 1px;
      }
    }

    @media (max-width: 700px) {
      #clientsView .client-row-select {
        width: 20px;
        height: 20px;
      }

      #clientsView .client-row-select > span {
        width: 18px;
        height: 18px;
      }

      /*
        The mobile Connected Database already collapses the table.
        Keep selection visible beside the client name without creating
        a new table column.
      */
      #clientsView .client-search-name-wrap {
        gap: 7px !important;
      }
    }


    /* =========================================================
       INDEX 31 — UNIFIED MODERN BULK ACTIONS
       Connected Database + Transactions + Leads
       ========================================================= */

    .bulk-command-bar,
    #clientsView .client-bulk-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      box-sizing: border-box;
      min-height: 52px;
      margin: 10px 0 12px;
      padding: 7px 9px;
      border: 1px solid #dce4e8 !important;
      border-radius: 13px !important;
      background:
        rgba(255,255,255,.97) !important;
      box-shadow:
        0 8px 24px rgba(18,48,68,.07) !important;
      backdrop-filter: blur(8px);
    }

    .bulk-command-bar.hidden,
    #clientsView .client-bulk-toolbar.hidden {
      display: none !important;
    }

    .bulk-command-summary {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 7px;
      min-height: 36px;
      padding: 0 8px 0 4px;
      border-radius: 9px;
      background: #173b54;
      color: #fff;
    }

    .bulk-command-count {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      padding-right: 3px;
      font-size: 8px;
      font-weight: 750;
      white-space: nowrap;
      opacity: .96;
    }

    .bulk-command-count strong {
      font-size: 11px;
      font-weight: 950;
    }

    .bulk-command-close {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background:
        rgba(255,255,255,.12);
      color: #fff;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }

    .bulk-command-close:hover {
      background:
        rgba(255,255,255,.2);
    }

    .bulk-command-actions {
      display: flex;
      align-items: end;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .bulk-command-field {
      display: grid;
      gap: 3px;
      min-width: 94px;
    }

    .bulk-command-field > span {
      padding-left: 3px;
      color: #87959e;
      font-size: 6.5px;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    .bulk-command-select,
    .bulk-command-button {
      box-sizing: border-box;
      height: 32px !important;
      min-height: 32px !important;
      margin: 0 !important;
      border: 1px solid #d5dee3 !important;
      border-radius: 8px !important;
      background: #f8fafb !important;
      color: #29475a !important;
      box-shadow: none !important;
      font-size: 8.5px !important;
      font-weight: 850 !important;
    }

    .bulk-command-select {
      min-width: 98px !important;
      max-width: 150px !important;
      padding: 5px 24px 5px 8px !important;
      cursor: pointer;
    }

    .bulk-command-button {
      padding: 6px 10px !important;
      cursor: pointer;
      white-space: nowrap;
    }

    .bulk-command-select:hover,
    .bulk-command-button:hover {
      border-color: #bcc9d0 !important;
      background: #fff !important;
    }

    .bulk-command-button.archive {
      border-color: #e1d2a5 !important;
      background: #fffaf0 !important;
      color: #745d1e !important;
    }

    .bulk-command-button.danger {
      border-color: #e6c6c6 !important;
      background: #fff7f7 !important;
      color: #a34848 !important;
    }

    .bulk-command-divider {
      width: 1px;
      height: 25px;
      margin: 0 2px 3px;
      background: #dce4e8;
    }

    /* ---------- Shared Gmail-style checkbox ---------- */
    .bulk-row-check {
      position: relative;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin: 0;
      cursor: pointer;
    }

    .bulk-row-check input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .bulk-row-check > span {
      display: grid;
      place-items: center;
      box-sizing: border-box;
      width: 15px;
      height: 15px;
      border: 1.5px solid #b7c3ca;
      border-radius: 4px;
      background: #fff;
      transition:
        border-color .12s ease,
        background-color .12s ease,
        box-shadow .12s ease;
    }

    .bulk-row-check:hover > span {
      border-color: #728794;
      box-shadow:
        0 0 0 2px
        rgba(36,72,95,.07);
    }

    .bulk-row-check input:checked + span,
    .bulk-row-check input:indeterminate + span {
      border-color: #173b54;
      background: #173b54;
    }

    .bulk-row-check input:checked + span::after {
      content: '✓';
      color: #fff;
      font-size: 9px;
      font-weight: 950;
      line-height: 1;
    }

    .bulk-row-check input:indeterminate + span::after {
      content: '−';
      color: #fff;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      transform: translateY(-1px);
    }

    /* ---------- Transactions ---------- */
    #transactionsView
    .transaction-agent-select-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 0;
    }

    #transactionsView
    .transaction-row-check {
      width: 16px;
      height: 18px;
    }

    #transactionsView
    .transaction-row-check > span {
      width: 13px;
      height: 13px;
      border-radius: 3px;
    }

    #transactionsView
    .transaction-header-select-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    #transactionsView
    .transaction-table
    tbody
    tr[data-transaction-id]:has(
      [data-transaction-select-id]:checked
    )
    > td {
      background-color:
        rgba(241,247,250,.88) !important;
    }

    #transactionsView
    .transaction-bulk-toolbar {
      position: sticky;
      top: 8px;
      z-index: 30;
    }

    /* ---------- Leads ---------- */
    #leadsView
    .lead-header-select-and-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    #leadsView
    .lead-mobile-primary {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #leadsView
    .lead-row-check {
      margin-right: 1px;
    }

    #leadsView
    .lead-table
    tbody
    tr:has(
      [data-lead-select-id]:checked
    )
    > td {
      background:
        rgba(241,247,250,.88) !important;
    }

    #leadsView
    .lead-bulk-toolbar {
      position: sticky;
      top: 8px;
      z-index: 30;
    }

    /* ---------- Make the existing Connected DB control sleeker too ---------- */
    #clientsView .client-bulk-toolbar {
      position: sticky;
      top: 8px;
      z-index: 30;
      margin: 8px 10px 10px !important;
    }

    #clientsView
    .client-bulk-selection-summary {
      min-height: 36px;
      padding: 0 8px 0 4px;
      border-radius: 9px;
      background: #173b54;
      color: #fff !important;
    }

    #clientsView
    .client-bulk-selection-summary strong {
      color: #fff !important;
      font-size: 9px !important;
    }

    #clientsView
    .client-bulk-clear-selection {
      color: #fff !important;
      background:
        rgba(255,255,255,.12) !important;
    }

    #clientsView
    .client-bulk-actions {
      gap: 6px !important;
    }

    #clientsView
    .client-bulk-select,
    #clientsView
    .client-bulk-button {
      height: 32px !important;
      min-height: 32px !important;
      border-radius: 8px !important;
      background: #f8fafb !important;
    }

    @media (max-width: 900px) {
      .bulk-command-bar,
      #clientsView .client-bulk-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
      }

      .bulk-command-summary {
        width: max-content;
      }

      .bulk-command-actions {
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
        -webkit-overflow-scrolling: touch;
      }

      .bulk-command-field,
      .bulk-command-button,
      .bulk-command-divider {
        flex: 0 0 auto;
      }
    }

    @media (max-width: 700px) {
      #transactionsView
      .transaction-agent-select-wrap {
        justify-content: flex-start;
      }

      #transactionsView
      .transaction-row-check {
        display: none;
      }

      #transactionsView
      .transaction-header-select-wrap {
        display: none;
      }

      /*
        Lead checkboxes remain visible on mobile because the Lead name
        cell is already the primary mobile row.
      */
      #leadsView
      .lead-row-check {
        width: 20px;
        height: 20px;
      }
    }


    /* =========================================================
       INDEX 32 — BULK SELECTION NAVIGATION / CLICK BEHAVIOR
       ========================================================= */
    #leadsView .lead-row-check,
    #transactionsView .transaction-row-check,
    #clientsView .client-row-select {
      position: relative;
      z-index: 4;
    }

    #leadsView .lead-row-check,
    #transactionsView .transaction-row-check {
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
    }


    /* =========================================================
       INDEX 44 — MOBILE TASK MODAL / IPHONE KEYBOARD FIX
       ========================================================= */
    @media (max-width: 820px), (pointer: coarse) {
      #taskModalBackdrop:not(.hidden) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: var(--task-vv-top, 0px) !important;
        bottom: auto !important;
        height: var(--task-vv-height, 100dvh) !important;
        min-height: 0 !important;
        padding: 8px 0 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: hidden !important;
      }

      #taskModalBackdrop:not(.hidden) > #taskForm.task-modal {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        max-height: calc(var(--task-vv-height, 100dvh) - 8px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 20px 20px 0 0 !important;
      }

      #taskForm.task-modal .modal-header {
        flex: 0 0 auto !important;
        padding: 14px 16px !important;
        background: #fff !important;
      }

      #taskForm.task-modal .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding: 15px 16px 22px !important;
        scroll-padding-bottom: 110px !important;
      }

      #taskForm.task-modal .form-grid {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
      }

      #taskForm.task-modal .form-grid .span-2 {
        grid-column: auto !important;
      }

      #taskForm.task-modal #taskNotes {
        min-height: 110px !important;
      }

      #taskForm.task-modal .task-modal-footer {
        position: relative !important;
        z-index: 5 !important;
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) !important;
        gap: 8px !important;
        width: 100% !important;
        padding:
          11px 16px
          calc(11px + env(safe-area-inset-bottom))
          !important;
        border-top: 1px solid #e3e8ec !important;
        background: rgba(255,255,255,.985) !important;
        box-shadow: 0 -10px 26px rgba(17,40,60,.07) !important;
      }

      #taskForm.task-modal .task-modal-footer-spacer {
        display: none !important;
      }

      #taskForm.task-modal #cancelTaskModal,
      #taskForm.task-modal #savePersonalTaskButton {
        width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
      }

      #taskForm.task-modal #deletePersonalTaskButton {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 0 !important;
        order: initial !important;
      }
    }

  
    /* =========================================================
       INDEX 45 — IPHONE TASK DUE DATE WIDTH FIX
       iOS gives date inputs a large intrinsic width unless it is
       explicitly constrained by the modal/grid container.
       ========================================================= */
    @media (max-width: 820px), (pointer: coarse) {
      #taskForm.task-modal .field,
      #taskForm.task-modal .form-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
      }

      #taskForm.task-modal input[type="date"],
      #taskForm.task-modal #taskDueDate {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
      }

      #taskForm.task-modal #taskDueDate::-webkit-date-and-time-value {
        min-width: 0 !important;
        text-align: left !important;
      }
    }

  
    /* =========================================================
       INDEX 46 — ROBUST IPHONE TASK DATE CONTROL
       The native iOS date control is transparent and sits over a
       clipped, styled shell so its intrinsic UI can never spill
       outside the task form.
       ========================================================= */
    .task-date-shell {
      position: relative;
      width: 100%;
    }

    .task-date-display,
    .task-date-icon {
      display: none;
    }

    @media (max-width: 820px), (pointer: coarse) {
      #taskForm.task-modal .task-date-shell {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        overflow: hidden !important;
        border: 1px solid #d9d9d2 !important;
        border-radius: 9px !important;
        background: #fff !important;
        box-sizing: border-box !important;
      }

      #taskForm.task-modal .task-date-display {
        display: block !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 12px 42px 12px 13px !important;
        color: #31485c !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        pointer-events: none !important;
      }

      #taskForm.task-modal .task-date-icon {
        display: flex !important;
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        color: #78909f !important;
        font-size: 13px !important;
        pointer-events: none !important;
      }

      #taskForm.task-modal .task-date-shell:focus-within {
        border-color: var(--gold) !important;
        box-shadow: 0 0 0 3px rgba(216,187,115,.20) !important;
      }

      #taskForm.task-modal .task-date-shell #taskDueDate {
        position: absolute !important;
        inset: 0 !important;
        z-index: 3 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer !important;
      }
    }

  
    /* =========================================================
       INDEX 47 — MODERN TASK LINKED PERSON SEARCH
       Same searchable Connected Database experience on desktop + mobile.
       ========================================================= */
    #taskForm.task-modal .task-linked-client-field {
      position: relative !important;
      min-width: 0 !important;
      overflow: visible !important;
    }

    #taskForm.task-modal .task-linked-client-picker {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
    }

    #taskForm.task-modal .task-linked-client-search {
      flex: 1 1 auto !important;
      width: 100% !important;
      min-width: 0 !important;
      min-height: 42px !important;
      height: 42px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #1b374b !important;
      font-size: 13px !important;
      font-weight: 650 !important;
      box-sizing: border-box !important;
    }

    #taskForm.task-modal .task-linked-client-search::placeholder {
      color: #9aa8b2 !important;
      font-weight: 550 !important;
    }

    #taskForm.task-modal .task-linked-client-picker .opportunity-client-results {
      left: 0;
      right: 0;
      width: 100%;
    }

    @media (max-width: 700px) {
      #taskForm.task-modal .task-linked-client-search {
        font-size: 16px !important; /* Prevent iPhone auto-zoom */
      }

      #taskForm.task-modal .task-linked-client-picker .opportunity-client-results {
        position: fixed !important;
        z-index: 12000 !important;
        top: auto !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        left: 10px !important;
        width: auto !important;
        max-height: min(54dvh, 440px) !important;
        border-radius: 17px !important;
        padding: 8px !important;
      }
    }

  
    /* =========================================================
       INDEX 49 — TARGETED IPHONE TASK HUB FIX
       Keep the known-good index-47 mobile layout and change only:
       1) hamburger/title clearance on Task Hub
       2) iOS focus zoom on Task Hub + Task modal fields
       ========================================================= */
    @media (max-width: 820px), (pointer: coarse) {
      /* The later mobile topbar rules remove the generic hamburger padding.
         Restore it only for Task Hub instead of changing every page. */
      #tasksView > .tasks-topbar {
        padding-left: 0 !important;
      }

      #tasksView > .tasks-topbar > div:first-child {
        min-width: 0 !important;
        padding-left: 56px !important;
        box-sizing: border-box !important;
      }

      /* iOS zooms the page when focused form controls are rendered below 16px.
         Override only the Task Hub and Add/Edit Task controls. */
      #tasksView #taskSearch,
      #tasksView .task-toolbar input,
      #tasksView .task-toolbar select,
      #taskForm.task-modal input:not([type="hidden"]),
      #taskForm.task-modal select,
      #taskForm.task-modal textarea,
      #taskForm.task-modal .task-linked-client-search {
        font-size: 16px !important;
      }
    }

    @media (max-width: 520px) {
      #tasksView > .tasks-topbar > div:first-child {
        width: 100% !important;
      }
    }

      .agent-resource-card {
        padding: 14px;
      }
    }

  
    /* =========================================================
       INDEX 52 — NEW LISTING WORKFLOW
       ========================================================= */
    @media (min-width: 1001px) {
      .agent-tools-primary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
      .agent-action-card { min-height:300px; }
    }
    .agent-action-card.new-listing::after{background:rgba(216,187,115,.17)}
    .new-listing .agent-action-icon{color:#866c2d;background:#fff8e7;border:1px solid #ead9a7}
    #newListingView .listing-linked-client-field{position:relative;overflow:visible}
    #newListingView .listing-client-picker{width:100%}
    #newListingView .listing-client-search{
      flex:1 1 auto;width:100%;min-width:0;height:42px;min-height:42px;
      margin:0;padding:0;border:0;outline:0;background:transparent;box-shadow:none;
      color:#1b374b;font-size:13px;font-weight:650
    }
    #newListingView .listing-client-picker .opportunity-client-results{left:0;right:0;width:100%}
    @media(max-width:700px){
      #newListingView .listing-client-search{font-size:16px!important}
      #newListingView .workflow-grid{grid-template-columns:1fr}
      #newListingView .workflow-field.span-2{grid-column:auto}
    }

  
    /* =========================================================
       INDEX 53 — LISTING PREP STATUS
       Flow: Listing Prep → Pre-MLS / Coming Soon → Active
       ========================================================= */
    .dashboard-status-chip.listing_prep {
      color: #5d4d22;
      background: #f8f1dc;
      border-color: #dfd0a4;
    }

    .status-pill.status-listing_prep {
      color: #66531d;
      background: #faf3dc;
      border-color: #e5d6a6;
    }

    .tx-status-listing-prep {
      background: #b49648 !important;
      color: #ffffff !important;
    }

    select.transaction-status-inline.tx-status-listing-prep,
    select.transaction-status-inline.tx-status-listing-prep:hover,
    select.transaction-status-inline.tx-status-listing-prep:focus,
    select.transaction-status-inline.tx-status-listing-prep:active {
      background-color: #a88a3f !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }

    .dashboard-client-status-select.status-listing_prep {
      color: #66531d !important;
      background: #faf3dc !important;
      border-color: #e5d6a6 !important;
    }

  
    /* =========================================================
       INDEX 54 — TRANSACTIONS / PIPELINE MODE TOGGLE
       Pipeline is left; Transactions is right and selected by default.
       ========================================================= */
    .transactions-topbar-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }

    .transaction-mode-toggle {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(104px, 1fr));
      align-items: stretch;
      width: 246px;
      min-height: 42px;
      padding: 3px;
      overflow: hidden;
      border: 1px solid #d9e1e6;
      border-radius: 13px;
      background: #eef2f4;
      box-sizing: border-box;
      box-shadow: inset 0 1px 2px rgba(18, 42, 58, .04);
    }

    .transaction-mode-slider {
      position: absolute;
      z-index: 0;
      top: 3px;
      bottom: 3px;
      left: 3px;
      width: calc(50% - 3px);
      border-radius: 10px;
      background: #ffffff;
      box-shadow:
        0 2px 7px rgba(22, 48, 65, .10),
        0 0 0 1px rgba(34, 61, 79, .04);
      transform: translateX(0);
      transition: transform .20s ease;
    }

    .transaction-mode-toggle.mode-transactions .transaction-mode-slider {
      transform: translateX(100%);
    }

    .transaction-mode-option {
      position: relative;
      z-index: 1;
      min-width: 0;
      padding: 9px 12px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #7b8c97;
      font: inherit;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .01em;
      cursor: pointer;
      transition: color .16s ease;
    }

    .transaction-mode-option.active {
      color: #183448;
    }

    .transaction-mode-option:focus-visible {
      outline: 2px solid rgba(189, 157, 81, .55);
      outline-offset: -2px;
    }

    @media (max-width: 760px) {
      #transactionsView > .topbar {
        align-items: flex-start;
      }

      .transactions-topbar-actions {
        width: 100%;
        justify-content: stretch;
      }

      .transaction-mode-toggle {
        flex: 1 1 100%;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .transactions-topbar-actions #newTransactionButton {
        width: 100%;
      }

      .transaction-mode-option {
        font-size: 12px;
      }
    }

  
    /* =========================================================
       INDEX 57 — PUBLIC LISTING DRIVE PROFILE CARD
       ========================================================= */
    .public-listing-drive-status {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .public-listing-drive-copy {
      min-width: 0;
      flex: 1 1 220px;
    }

    .public-listing-drive-copy strong {
      display: block;
      color: #183448;
      font-size: 12px;
      font-weight: 950;
    }

    .public-listing-drive-copy p {
      margin: 5px 0 0;
      color: #7c8c97;
      font-size: 9.5px;
      line-height: 1.5;
    }

    .public-listing-drive-actions {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }

    .public-listing-drive-error {
      margin-top: 10px;
      padding: 9px 10px;
      border: 1px solid #efc9c9;
      border-radius: 9px;
      background: #fff6f6;
      color: #9a4545;
      font-size: 9px;
      line-height: 1.45;
    }

    @media (max-width: 700px) {
      .public-listing-drive-actions {
        width: 100%;
      }

      .public-listing-drive-actions .mini-btn,
      .public-listing-drive-actions a.mini-btn {
        flex: 1 1 auto;
        text-align: center;
      }
    }


/* =========================================================
   OPEN HOUSE GUEST CHECK-IN
   ========================================================= */

.open-house-checkin-section {
  margin-top: 24px;
}

.open-house-checkin-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.open-house-checkin-heading h3 {
  margin: 2px 0 5px;
}

.open-house-checkin-heading p {
  margin: 0;
  color: #66717d;
  font-size: 13px;
}

.open-house-checkin-kicker {
  color: #b6922e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.open-house-checkin-layout {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.open-house-checkin-qr-card {
  border: 1px solid #e5e1d8;
  border-radius: 16px;
  background: #fff;
  padding: 18px;
  text-align: center;
}

.open-house-checkin-qr {
  min-height: 220px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

.open-house-checkin-qr img,
.open-house-checkin-qr canvas {
  display: block;
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.open-house-checkin-qr-card strong {
  display: block;
  color: #102b44;
  font-size: 15px;
}

.open-house-checkin-qr-card > span {
  display: block;
  margin-top: 5px;
  color: #7a8188;
  font-size: 11px;
  line-height: 1.35;
}

.open-house-checkin-unavailable {
  width: 100%;
  padding: 24px 14px;
  border-radius: 12px;
  background: #f6f4ef;
  color: #6d7278;
  font-size: 12px;
  line-height: 1.5;
}

.open-house-checkin-activity {
  min-width: 0;
}

.open-house-checkin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.open-house-checkin-summary > div {
  min-width: 0;
  padding: 11px 9px;
  border: 1px solid #e6e3dc;
  border-radius: 11px;
  background: #faf9f6;
  text-align: center;
}

.open-house-checkin-summary strong {
  display: block;
  color: #102b44;
  font-size: 19px;
  line-height: 1;
}

.open-house-checkin-summary span {
  display: block;
  margin-top: 5px;
  color: #767d84;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.open-house-checkin-visitors {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}

.open-house-visitor-row {
  padding: 12px 13px;
  border: 1px solid #e7e3dc;
  border-radius: 11px;
  background: #fff;
}

.open-house-visitor-main {
  min-width: 0;
}

.open-house-visitor-main strong,
.open-house-visitor-name {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #102b44;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

.open-house-visitor-name {
  cursor: pointer;
}

.open-house-visitor-name:hover {
  text-decoration: underline;
}

.open-house-visitor-main span {
  display: block;
  margin-top: 3px;
  color: #778089;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.open-house-visitor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.open-house-visitor-tags span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f4f2ed;
  color: #4f5963;
  font-size: 9px;
  font-weight: 700;
}

.open-house-visitor-feedback {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #efede8;
}

.open-house-visitor-feedback p {
  margin: 4px 0;
  color: #555f68;
  font-size: 10px;
  line-height: 1.45;
}

.open-house-checkin-empty {
  padding: 24px 16px;
  border: 1px dashed #d8d3c8;
  border-radius: 11px;
  color: #777e85;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 760px) {
  .open-house-checkin-layout {
    grid-template-columns: 1fr;
  }

  .open-house-checkin-qr-card {
    max-width: 330px;
    width: 100%;
    margin: 0 auto;
  }

  .open-house-checkin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .open-house-checkin-visitors {
    max-height: none;
    overflow: visible;
  }
}


/* =========================================================
   SUPER ADMIN — INFRASTRUCTURE & COST CONTROLS
   ========================================================= */

.infrastructure-status-pill {
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px solid #d7e7d9;
  border-radius: 999px;
  background: #f2f8f3;
  color: #2f7547;
  font-size: 11px;
  font-weight: 800;
}

.infrastructure-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.infrastructure-summary-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e4e1da;
  border-radius: 15px;
  background: #fff;
}

.infrastructure-summary-card span {
  display: block;
  color: #8b7b50;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.infrastructure-summary-card strong {
  display: block;
  margin-top: 7px;
  color: #102b44;
  font-size: 18px;
}

.infrastructure-summary-card small {
  display: block;
  margin-top: 5px;
  color: #727b83;
  font-size: 10px;
  line-height: 1.45;
}

.infrastructure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.infrastructure-panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e4e1da;
  border-radius: 16px;
  background: #fff;
}

.infrastructure-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.infrastructure-panel-heading h2 {
  margin: 2px 0 0;
  color: #102b44;
  font-size: 19px;
}

.infrastructure-panel-heading p {
  margin: 6px 0 0;
  color: #7b8288;
  font-size: 11px;
  line-height: 1.45;
}

.infrastructure-eyebrow {
  display: block;
  color: #a88324;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.infrastructure-service-list,
.infrastructure-checklist {
  display: grid;
  gap: 0;
}

.infrastructure-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid #efede8;
}

.infrastructure-service:first-child {
  border-top: 0;
}

.infrastructure-service-main {
  min-width: 0;
}

.infrastructure-service-main strong {
  display: block;
  color: #243746;
  font-size: 12px;
}

.infrastructure-service-main span {
  display: block;
  margin-top: 3px;
  color: #7a8289;
  font-size: 10px;
  line-height: 1.4;
}

.infra-risk {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.infra-risk.low {
  background: #edf7ef;
  color: #2d7845;
}

.infra-risk.watch {
  background: #fff4dd;
  color: #8d6915;
}

.infra-risk.fixed {
  background: #eef3f7;
  color: #496579;
}

.infrastructure-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #efede8;
}

.infrastructure-check:first-child {
  border-top: 0;
}

.infra-checkmark {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #edf7ef;
  color: #2d7845;
  font-size: 11px;
  font-weight: 900;
}

.infrastructure-check strong {
  display: block;
  color: #263846;
  font-size: 11px;
}

.infrastructure-check div > span {
  display: block;
  margin-top: 3px;
  color: #778087;
  font-size: 10px;
  line-height: 1.4;
}

.infrastructure-review-panel {
  margin-top: 16px;
}

.infrastructure-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.infrastructure-review-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #ebe7df;
  border-radius: 11px;
  background: #faf9f6;
}

.infrastructure-review-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #b08a2c;
  font-size: 16px;
}

.infrastructure-review-grid span {
  display: block;
  color: #56616a;
  font-size: 10px;
  line-height: 1.4;
}

.infrastructure-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #d2ac4e;
  border-radius: 7px;
  background: #fbf8ef;
  color: #687078;
  font-size: 10px;
  line-height: 1.5;
}

.infrastructure-note strong {
  color: #354452;
}

@media (max-width: 980px) {
  .infrastructure-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .infrastructure-grid {
    grid-template-columns: 1fr;
  }

  .infrastructure-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .infrastructure-summary-grid,
  .infrastructure-review-grid {
    grid-template-columns: 1fr;
  }

  .infrastructure-panel {
    padding: 16px;
  }
}


/* Flodesk integration status */
.infrastructure-flodesk-panel {
  margin-top: 16px;
}

.flodesk-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.flodesk-integration-stat {
  padding: 13px 14px;
  border: 1px solid #ebe7df;
  border-radius: 11px;
  background: #faf9f6;
}

.flodesk-integration-stat span {
  display: block;
  color: #8b7b50;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.flodesk-integration-stat strong {
  display: block;
  margin-top: 5px;
  color: #243746;
  font-size: 13px;
}

.flodesk-integration-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.flodesk-integration-message {
  color: #687078;
  font-size: 10px;
}

.flodesk-segment-wrap {
  margin-top: 16px;
}

.flodesk-segment-heading {
  margin-bottom: 8px;
  color: #102b44;
  font-size: 11px;
  font-weight: 800;
}

.flodesk-segment-list {
  display: grid;
  gap: 7px;
}

.flodesk-segment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #ebe7df;
  border-radius: 9px;
  background: #fff;
}

.flodesk-segment-row strong {
  color: #324653;
  font-size: 11px;
}

.flodesk-segment-row span {
  color: #7a8289;
  font-size: 9px;
}

@media (max-width: 640px) {
  .flodesk-integration-grid {
    grid-template-columns: 1fr;
  }
}


/* Flodesk sync preview */
.flodesk-preview-wrap {
  margin-top: 18px;
}

.flodesk-preview-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.flodesk-preview-summary > div {
  padding: 11px 12px;
  border: 1px solid #ebe7df;
  border-radius: 10px;
  background: #faf9f6;
}

.flodesk-preview-summary span {
  display: block;
  color: #8b7b50;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.flodesk-preview-summary strong {
  display: block;
  margin-top: 5px;
  color: #102b44;
  font-size: 17px;
}

.flodesk-level-preview {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.flodesk-level-row {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr);
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #ebe7df;
  border-radius: 10px;
  background: #fff;
}

.flodesk-level-name {
  display: flex;
  align-items: center;
  gap: 9px;
}

.flodesk-level-name strong {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #f7f1e2;
  color: #9a761e;
  font-size: 11px;
}

.flodesk-level-name span {
  color: #304553;
  font-size: 10px;
  font-weight: 750;
}

.flodesk-level-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.flodesk-level-metrics span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f3f5f6;
  color: #68747c;
  font-size: 8px;
  font-weight: 750;
}

@media (max-width: 980px) {
  .flodesk-preview-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .flodesk-preview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flodesk-level-row {
    grid-template-columns: 1fr;
  }

  .flodesk-level-metrics {
    justify-content: flex-start;
  }
}


/* Flodesk live sync status */
.flodesk-last-sync {
  margin-top: 18px;
}

.flodesk-last-sync-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.flodesk-last-sync-grid > div {
  padding: 11px 12px;
  border: 1px solid #ebe7df;
  border-radius: 10px;
  background: #fff;
}

.flodesk-last-sync-grid span {
  display: block;
  color: #8b7b50;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.flodesk-last-sync-grid strong {
  display: block;
  margin-top: 5px;
  color: #102b44;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .flodesk-last-sync-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .flodesk-last-sync-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* myHomeIQ integration */
.infrastructure-myhomeiq-panel {
  margin-top: 16px;
}

.myhomeiq-test-results {
  margin-top: 16px;
}

.myhomeiq-test-result-grid {
  display: grid;
  grid-template-columns: .6fr 2fr .8fr;
  gap: 8px;
}

.myhomeiq-test-result-grid > div {
  padding: 11px 12px;
  border: 1px solid #ebe7df;
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}

.myhomeiq-test-result-grid span {
  display: block;
  color: #8b7b50;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.myhomeiq-test-result-grid strong {
  display: block;
  margin-top: 5px;
  color: #102b44;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .myhomeiq-test-result-grid {
    grid-template-columns: 1fr;
  }
}


/* myHomeIQ real sync */
.myhomeiq-preview-wrap,
.myhomeiq-last-sync {
  margin-top: 18px;
}

.myhomeiq-preview-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.myhomeiq-preview-grid > div,
.myhomeiq-last-sync-grid > div {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #ebe7df;
  border-radius: 10px;
  background: #fff;
}

.myhomeiq-preview-grid span,
.myhomeiq-last-sync-grid span {
  display: block;
  color: #8b7b50;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.myhomeiq-preview-grid strong,
.myhomeiq-last-sync-grid strong {
  display: block;
  margin-top: 5px;
  color: #102b44;
  font-size: 16px;
  line-height: 1.3;
}

.myhomeiq-last-sync-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.myhomeiq-conflict-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.myhomeiq-conflict-row {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.6fr);
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid #ecd9b5;
  border-radius: 9px;
  background: #fff9ec;
}

.myhomeiq-conflict-row strong {
  color: #5c4a1e;
  font-size: 10px;
}

.myhomeiq-conflict-row span {
  color: #7b6d4c;
  font-size: 9px;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .myhomeiq-preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .myhomeiq-preview-grid,
  .myhomeiq-last-sync-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .myhomeiq-conflict-row {
    grid-template-columns: 1fr;
  }
}


/* v46 homeowner eligibility preview */
.myhomeiq-preview-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .myhomeiq-preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .myhomeiq-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v48 — lock mobile/web-app viewport while initial loading screen is active */
html.app-loading-lock,
body.app-loading-lock {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
  height: 100% !important;
}

body.app-loading-lock {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
}

.loading-screen,
.app-loading,
.loader-overlay,
#loadingScreen,
#appLoading,
#loader {
  overscroll-behavior: none;
  touch-action: none;
}

#loadingPage { overscroll-behavior: none; touch-action: none; }


/* v50 — loading screen must be the only visible UI */
body.app-loading-lock > *:not(#loadingPage) {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.app-loading-lock #loadingPage,
body.app-loading-lock #loadingPage * {
  visibility: visible !important;
}

/* Keep loader above every possible mobile navigation layer */
body.app-loading-lock #loadingPage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  z-index: 2147483647 !important;
  background: #fff !important;
  overflow: hidden !important;
}


/* v52 — Indicators mobile: keep the period Goals cell aligned to the two frozen columns */
@media (max-width: 900px) {
  .indicators-sheet .indicator-goal-row > td.week-number.sticky-week[colspan="2"] {
    box-sizing: border-box !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    left: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    z-index: 9 !important;
  }
}


/* ============================================================
   SIGNING & DOCUMENTS — Version 59
   ============================================================ */
.signing-card-intro {
  color: var(--muted, #6f7f8c);
  font-size: 12px;
  line-height: 1.55;
}
.signing-package-list {
  display: grid;
  gap: 8px;
}
.signing-package-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 40, 60, 0.08);
}
.signing-package-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.signing-package-copy {
  min-width: 0;
}
.signing-package-copy strong {
  display: block;
  color: #17324a;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.signing-package-copy > span {
  display: block;
  margin-top: 4px;
  color: #7a8995;
  font-size: 10px;
}
.signing-mini-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.02em;
}
.signing-mini-status.draft {
  background: #eef2f4;
  color: #566976;
}
.signing-mini-status.active {
  background: #eef5fb;
  color: #286386;
}
.signing-mini-status.completed {
  background: #eaf7ef;
  color: #2f7750;
}
.signing-mini-status.attention {
  background: #fbefef;
  color: #9b4848;
}


/* ============================================================
   SIGNING COMPLETION + DRIVE SYNC — Version 60
   ============================================================ */
.signing-package-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.signing-package-files {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.signing-package-files a {
  color: #17324a;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.signing-package-files a:hover {
  text-decoration: underline;
}
.signing-drive-status.saved {
  color: #2f7750;
  font-weight: 800;
}
.signing-drive-status.waiting {
  color: #8a6b20;
  font-weight: 800;
}
.signing-corrected-copy {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .signing-package-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .signing-package-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


/* ============================================================
   SIGNING CARD UX — Version 61
   Keep actions visible and allow rows to wrap cleanly.
   ============================================================ */
.signing-package-row {
  flex-wrap: wrap;
}
.signing-package-copy {
  flex: 1 1 300px;
}
.signing-package-actions {
  max-width: 100%;
}
@media (max-width: 920px) {
  .signing-package-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .signing-package-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


/* ============================================================
   TRANSACTION PROFILE TABS — Version 66
   ============================================================ */
.transaction-profile-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f6f5f1;
  max-width: 100%;
}

.transaction-profile-tab {
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  padding: 10px 18px;
  cursor: pointer;
  transition:
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
  white-space: nowrap;
}

.transaction-profile-tab:hover {
  color: var(--dark);
  background: rgba(255,255,255,.66);
}

.transaction-profile-tab.active {
  background: #fff;
  color: var(--dark);
  box-shadow: 0 1px 4px rgba(24, 39, 56, .10);
}

.transaction-profile-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.transaction-profile-tab-panel {
  min-width: 0;
}

.transaction-documents-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

@media (max-width: 650px) {
  .transaction-profile-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .transaction-profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .transaction-profile-tab {
    flex: 1 0 auto;
    min-width: 98px;
    padding: 10px 12px;
  }
}


/* ============================================================
   DOCUMENTS & SIGNING ADMIN — Version 67
   ============================================================ */
.document-admin-view {
  max-width: 1220px;
}

.document-admin-header {
  align-items: flex-start;
  gap: 20px;
}

.document-admin-header .page-subtitle {
  max-width: 760px;
}

.document-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.document-admin-stat {
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(21, 42, 61, .05);
}

.document-admin-stat-label {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.document-admin-stat strong {
  color: var(--dark);
  font-size: 24px;
  line-height: 1.15;
}

.document-admin-stat > span:last-child {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.document-admin-content {
  display: grid;
  gap: 18px;
}

.document-template-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 7px 24px rgba(21, 42, 61, .06);
}

.document-template-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: #f9f8f4;
}

.document-template-card-header h2 {
  margin: 3px 0 0;
  color: var(--dark);
  font-size: 18px;
}

.document-template-kind {
  color: #9f791a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.document-template-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px var(--line);
}

.document-template-folder-list {
  display: grid;
}

.document-template-folder + .document-template-folder {
  border-top: 1px solid var(--line);
}

.document-template-folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  background: #fcfcfa;
  color: var(--dark);
}

.document-template-folder-header strong {
  font-size: 13px;
}

.document-template-folder-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.document-template-document-list {
  padding: 0 20px 8px;
}

.document-template-document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid #eeece6;
}

.document-template-document-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-template-document-copy strong {
  color: var(--dark);
  font-size: 12px;
  line-height: 1.4;
}

.document-template-document-copy span {
  color: var(--muted);
  font-size: 10px;
}

.document-admin-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
}

.document-admin-status.ready {
  background: #e7f5ec;
  color: #2f7650;
}

.document-admin-status.pending {
  background: #f4f1e9;
  color: #756b55;
}

.document-admin-status.attention {
  background: #fff0dc;
  color: #9a5e12;
}

.document-library-callout {
  display: grid;
  gap: 4px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid #ead9aa;
  border-radius: 14px;
  background: #fffaf0;
}

.document-library-callout strong {
  color: var(--dark);
  font-size: 12px;
}

.document-library-callout span {
  color: var(--muted);
  font-size: 11px;
}

.document-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.document-library-card {
  display: flex;
  gap: 14px;
  min-height: 152px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(21, 42, 61, .05);
}

.document-library-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: #f6f1e4;
  color: #9f791a;
  font-size: 20px;
  font-weight: 900;
}

.document-library-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.document-library-card h2 {
  margin: 1px 0 6px;
  color: var(--dark);
  font-size: 15px;
}

.document-library-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.document-library-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 13px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.document-admin-empty {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.document-admin-empty.compact {
  padding: 12px;
  margin: 5px 0;
}

.document-admin-table-card {
  overflow: hidden;
}

.document-admin-table-wrap {
  overflow-x: auto;
  padding: 0;
}

.document-admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.document-admin-table th,
.document-admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--dark);
  font-size: 11px;
  text-align: left;
  vertical-align: middle;
}

.document-admin-table th {
  background: #faf9f6;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.document-admin-package-title {
  max-width: 360px;
  font-weight: 850;
  line-height: 1.35;
}

.document-signing-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f2f0eb;
  color: #625c50;
  font-size: 9px;
  font-weight: 900;
  text-transform: capitalize;
}

.document-signing-status.completed {
  background: #e7f5ec;
  color: #2f7650;
}

.document-signing-status.sent,
.document-signing-status.viewed,
.document-signing-status.partially_signed,
.document-signing-status.prepared {
  background: #eaf3f8;
  color: #2d647f;
}

.document-signing-status.voided,
.document-signing-status.declined,
.document-signing-status.expired {
  background: #f9e8e8;
  color: #8a3d3d;
}

.document-admin-action-cell {
  text-align: right !important;
}

@media (max-width: 820px) {
  .document-admin-summary,
  .document-library-grid {
    grid-template-columns: 1fr;
  }

  .document-template-card-header,
  .document-template-document-row {
    align-items: flex-start;
  }

  .document-template-document-row {
    flex-direction: column;
  }

  .document-admin-status {
    align-self: flex-start;
  }
}


/* ============================================================
   TRANSACTION DOCUMENT FILES — Version 68
   ============================================================ */
.transaction-document-setup {
  display: grid;
  gap: 18px;
}
.transaction-document-setup-copy h3 {
  margin: 4px 0 7px;
  color: var(--dark);
  font-size: 17px;
}
.transaction-document-setup-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.transaction-document-template-choices {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.transaction-document-template-choice {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--dark);
  text-align: left;
  cursor: pointer;
}
.transaction-document-template-choice:hover {
  border-color: #d9bb6d;
  box-shadow: 0 5px 16px rgba(21,42,61,.07);
}
.transaction-document-template-choice.recommended::after {
  content: 'Suggested';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f7efd8;
  color: #8a6714;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.transaction-document-template-choice strong { font-size: 15px; }
.transaction-document-template-choice span { color: var(--muted); font-size: 11px; }
.transaction-document-file-summary {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:0 0 13px;
  border-bottom:1px solid var(--line);
}
.transaction-document-file-summary > div { display:grid; gap:3px; }
.transaction-document-file-summary strong { color:var(--dark); font-size:13px; }
.transaction-document-file-summary span { color:var(--muted); font-size:10px; }
.transaction-document-groups { display:grid; gap:15px; padding-top:14px; }
.transaction-document-group {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
}
.transaction-document-group-header {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  background:#faf9f6;
  border-bottom:1px solid var(--line);
}
.transaction-document-group-header strong { color:var(--dark); font-size:11px; }
.transaction-document-group-header span { color:var(--muted); font-size:10px; font-weight:800; }
.transaction-document-list { padding:0 13px; }
.transaction-document-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:58px;
  padding:10px 0;
  border-top:1px solid #efede7;
}
.transaction-document-row:first-child { border-top:0; }
.transaction-document-row-main { min-width:0; display:grid; gap:3px; }
.transaction-document-row-main strong { color:var(--dark); font-size:11px; line-height:1.35; }
.transaction-document-row-meta { display:flex; gap:9px; flex-wrap:wrap; color:var(--muted); font-size:9px; }
.transaction-document-row-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.mini-btn.subtle { background:#fff; color:var(--muted); border-color:var(--line); }
.master-library-modal { width:min(900px,calc(100vw - 30px)); max-height:min(820px,calc(100vh - 30px)); }
.master-library-modal-body { overflow:auto; }
.master-library-picker-controls {
  display:grid;
  grid-template-columns:1fr 1.4fr .8fr;
  gap:12px;
  margin-bottom:14px;
}
.master-library-results { display:grid; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.master-library-result-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:12px 13px;
  border-top:1px solid var(--line);
  background:#fff;
}
.master-library-result-row:first-child { border-top:0; }
.master-library-result-row > div:first-child { display:grid; gap:4px; min-width:0; }
.master-library-result-row strong { color:var(--dark); font-size:11px; }
.master-library-result-row span { color:var(--muted); font-size:9px; }
.master-library-result-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.document-library-preview-list {
  display:grid;
  gap:5px;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.document-library-preview-list span { color:var(--dark); font-size:9px; line-height:1.3; }
.document-library-preview-list .document-library-preview-more { color:var(--muted); font-weight:800; }
@media(max-width:720px){
  .transaction-document-template-choices,
  .master-library-picker-controls { grid-template-columns:1fr; }
  .transaction-document-row,
  .master-library-result-row { align-items:flex-start; flex-direction:column; }
  .transaction-document-row-actions,
  .master-library-result-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }
}


/* ============================================================
   TRANSACTION DOCUMENT PREPARATION — Version 81
   ============================================================ */
.transaction-document-prep-modal {
  width: min(920px, calc(100vw - 28px));
  max-height: min(900px, calc(100vh - 28px));
}
.transaction-document-prep-body {
  overflow: auto;
  display: grid;
  gap: 16px;
}
.transaction-document-prep-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid #e7dfc8;
  border-radius: 14px;
  background: #fbf8ef;
}
.transaction-document-prep-summary-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.transaction-document-prep-summary-main strong {
  color: var(--dark);
  font-size: 12px;
}
.transaction-document-prep-summary-main span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.transaction-document-prep-summary-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.transaction-document-prep-summary-counts span {
  padding: 5px 8px;
  border: 1px solid #e0d6ba;
  border-radius: 999px;
  background: #fff;
  color: #745a19;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}
.transaction-document-prep-section {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
}
.transaction-document-prep-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #faf9f6;
}
.transaction-document-prep-section-head > div {
  display: grid;
  gap: 2px;
}
.transaction-document-prep-section-head h3 {
  margin: 0;
  color: var(--dark);
  font-size: 14px;
}
.transaction-document-prep-section-head p {
  margin: 0;
  max-width: 480px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  text-align: right;
}
.transaction-document-prep-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  padding: 4px 16px 14px;
}
.transaction-document-prep-field {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 11px 0;
  border-bottom: 1px solid #f0eee8;
  min-width: 0;
}
.transaction-document-prep-field:nth-last-child(-n+2) {
  border-bottom-color: transparent;
}
.transaction-document-prep-field-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.transaction-document-prep-field-copy strong {
  color: var(--dark);
  font-size: 10px;
}
.transaction-document-prep-field-copy small {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 8px;
}
.transaction-document-prep-field input[type="text"] {
  width: 100%;
  min-width: 0;
}
.transaction-document-prep-field.checkbox-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 60px;
}
.transaction-document-prep-field.checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
.transaction-document-prep-required {
  color: #9a2e2e;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.transaction-document-prep-source {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-document-prep-signers {
  display: grid;
  gap: 0;
  padding: 4px 16px 12px;
}
.transaction-document-prep-signer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #f0eee8;
}
.transaction-document-prep-signer:last-child {
  border-bottom: 0;
}
.transaction-document-prep-signer > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.transaction-document-prep-signer strong {
  color: var(--dark);
  font-size: 11px;
}
.transaction-document-prep-signer span {
  color: var(--muted);
  font-size: 9px;
}
.transaction-document-prep-signer.optional-missing {
  opacity: .68;
}
.transaction-document-prep-signer-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  text-align: right;
}
.transaction-document-prep-signer-meta span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #f4f3ef;
  font-weight: 800;
}
.transaction-document-prep-signer-meta span.missing {
  background: #fff0f0;
  color: #9a2e2e;
}
.transaction-document-prep-empty {
  grid-column: 1 / -1;
  padding: 16px 0 4px;
  color: var(--muted);
  font-size: 10px;
}
@media (max-width: 720px) {
  .transaction-document-prep-summary,
  .transaction-document-prep-section-head,
  .transaction-document-prep-signer {
    align-items: flex-start;
    flex-direction: column;
  }
  .transaction-document-prep-summary-counts,
  .transaction-document-prep-signer-meta {
    justify-content: flex-start;
    text-align: left;
  }
  .transaction-document-prep-section-head p {
    text-align: left;
  }
  .transaction-document-prep-fields {
    grid-template-columns: 1fr;
  }
  .transaction-document-prep-field:nth-last-child(-n+2) {
    border-bottom-color: #f0eee8;
  }
  .transaction-document-prep-field:last-child {
    border-bottom-color: transparent;
  }
}


/* ============================================================
   MASTER PDF BULK IMPORT — Version 69
   ============================================================ */
.master-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.master-import-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(21, 42, 61, .05);
}

.master-import-card-copy h2 {
  margin: 4px 0 7px;
  color: var(--dark);
  font-size: 16px;
}

.master-import-card-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.master-import-summary {
  margin-top: 10px;
  color: #6f6655;
  font-size: 10px;
  font-weight: 850;
}

.master-import-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.master-import-progress {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding-top: 4px;
}

.master-import-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece9e1;
}

.master-import-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #b28a2d;
  transition: width .2s ease;
}

.master-import-progress-text {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

@media (max-width: 920px) {
  .master-import-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .master-import-card {
    grid-template-columns: 1fr;
  }
  .master-import-card-actions {
    justify-content: stretch;
  }
  .master-import-card-actions button {
    width: 100%;
  }
}


/* ============================================================
   MASTER FORM DESIGNER — Version 72
   ============================================================ */
body.master-form-designer-open {
  overflow: hidden !important;
}

.document-template-document-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.master-form-designer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #edf1f3;
}

.master-form-designer-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--dark);
}

.master-form-designer-topbar {
  min-height: 72px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 4px 18px rgba(21, 42, 61, .06);
  z-index: 10;
}

.master-form-designer-title-wrap,
.master-form-designer-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.master-form-designer-title-wrap h2 {
  margin: 1px 0 0;
  font-size: 17px;
  color: var(--dark);
}

.master-form-designer-subtitle {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.master-form-designer-save-state {
  color: #547066;
  font-size: 10px;
  font-weight: 850;
}

.master-form-designer-save-state.dirty {
  color: #9a6918;
}

.master-form-designer-workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 265px minmax(460px, 1fr) 260px;
}

.master-form-designer-sidebar {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
}

.master-form-designer-sidebar.left {
  border-right: 1px solid var(--line);
}

.master-form-designer-sidebar.right {
  border-left: 1px solid var(--line);
}

.master-form-designer-panel-title {
  color: var(--dark);
  font-size: 12px;
  font-weight: 900;
}

.master-form-designer-panel-title.small {
  font-size: 10px;
}

.master-form-designer-help {
  margin: 7px 0 13px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.5;
}

.master-form-designer-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.master-form-designer-count {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafaf8;
}

.master-form-designer-count strong,
.master-form-designer-count span {
  display: block;
}

.master-form-designer-count strong {
  font-size: 17px;
}

.master-form-designer-count span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 800;
}

.master-form-designer-count.autofill strong { color: #24779c; }
.master-form-designer-count.review strong { color: #a27914; }
.master-form-designer-count.decision strong { color: #b45d21; }
.master-form-designer-count.signer strong { color: #173a57; }

.master-form-designer-divider {
  height: 1px;
  margin: 15px 0;
  background: var(--line);
}

.master-form-designer-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.master-form-designer-tool-grid button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--dark);
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.master-form-designer-tool-grid button:hover {
  background: #f8f6ef;
}

.master-form-designer-tool-grid button.active {
  border-color: #b99432;
  background: #fff8df;
  box-shadow: 0 0 0 2px rgba(185, 148, 50, .14);
}

.master-form-designer-placement-hint {
  margin-top: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(185, 148, 50, .38);
  border-radius: 9px;
  background: #fff9e8;
  color: #6f5715;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.45;
}

.master-form-designer-backdrop.is-placing-field .master-form-designer-page-overlay {
  cursor: crosshair;
  touch-action: none;
}

.master-form-designer-draw-preview {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  border: 2px dashed #b99432;
  border-radius: 4px;
  background: rgba(185, 148, 50, .12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset;
}

.master-form-designer-field-list {
  display: grid;
  gap: 6px;
}

.master-form-designer-field-list-item {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 9px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.master-form-designer-field-list-item.active {
  box-shadow: 0 0 0 2px rgba(16, 40, 60, .10);
  background: #fbfbf8;
}

.master-form-designer-field-page {
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: 7px;
  background: #f3f3ef;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
}

.master-form-designer-field-list-copy {
  min-width: 0;
}

.master-form-designer-field-list-copy strong,
.master-form-designer-field-list-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.master-form-designer-field-list-copy strong {
  color: var(--dark);
  font-size: 9.5px;
}

.master-form-designer-field-list-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.master-form-designer-center {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  padding: 28px 22px 80px;
  background: #e7ecef;
}

.master-form-designer-loading {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.master-form-designer-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.master-form-designer-page {
  position: relative;
  flex: 0 0 auto;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 10px 32px rgba(16, 40, 60, .17);
}

.master-form-designer-page canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.master-form-designer-page-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.master-form-designer-page-badge {
  position: absolute;
  top: -20px;
  right: 0;
  color: #6f808c;
  font-size: 9px;
  font-weight: 800;
}

.master-form-designer-field-box {
  position: absolute;
  z-index: 4;
  min-width: 10px;
  min-height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  border-radius: 4px;
  padding: 1px 3px;
  font-size: 7px;
  font-weight: 850;
  line-height: 1.1;
  overflow: hidden;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.master-form-designer-field-box > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classification-autofill {
  border-color: #2685ad !important;
}

.master-form-designer-field-box.classification-autofill {
  background: rgba(38, 133, 173, .14);
  color: #175c77;
}

.classification-review {
  border-color: #c29b35 !important;
}

.master-form-designer-field-box.classification-review {
  background: rgba(194, 155, 53, .15);
  color: #806317;
}

.classification-decision {
  border-color: #c36b2a !important;
}

.master-form-designer-field-box.classification-decision {
  background: rgba(195, 107, 42, .13);
  color: #874515;
}

.classification-signer {
  border-color: #173a57 !important;
}

.master-form-designer-field-box.classification-signer {
  background: rgba(23, 58, 87, .13);
  color: #173a57;
}

.master-form-designer-field-box.selected {
  z-index: 8;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(16, 40, 60, .28);
}

.master-form-designer-field-box.checkbox-field {
  padding: 0;
  border-radius: 2px;
}

.master-form-designer-resize-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: currentColor;
  cursor: nwse-resize;
}

.master-form-designer-no-selection {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.5;
}

.master-form-designer-inspector {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.master-form-designer-inspector label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 850;
}

.master-form-designer-inspector input,
.master-form-designer-inspector select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  background: #fff;
  color: var(--dark);
  font: inherit;
  font-size: 9.5px;
}

.master-form-designer-check {
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
}

.master-form-designer-check input {
  width: 15px;
  min-height: 15px;
}

.master-form-designer-keyboard-hint {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.master-form-designer-keyboard-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  color: var(--dark);
  font-size: 7.5px;
  font-weight: 850;
}

.master-form-designer-field-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f6f5f1;
  color: var(--muted);
  font-size: 8.5px;
  font-weight: 750;
}

@media (max-width: 1000px) {
  .master-form-designer-workspace {
    grid-template-columns: 210px minmax(420px, 1fr);
  }

  .master-form-designer-sidebar.right {
    position: fixed;
    right: 12px;
    top: 84px;
    width: 245px;
    max-height: calc(100vh - 96px);
    z-index: 20;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(16, 40, 60, .18);
  }
}

@media (max-width: 720px) {
  .master-form-designer-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .master-form-designer-top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .master-form-designer-workspace {
    display: block;
    overflow-y: auto;
  }

  .master-form-designer-sidebar.left,
  .master-form-designer-sidebar.right {
    position: static;
    width: auto;
    max-height: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .master-form-designer-center {
    overflow: visible;
    min-height: 70vh;
  }

  .master-form-designer-pages {
    align-items: flex-start;
  }
}


/* VERSION 73 — MASTER FORM REVIEW QUEUE */
.master-form-designer-review-nav {
  display: flex;
  align-items: center;
  gap: 7px;
}

.master-form-designer-review-nav .secondary-btn {
  min-height: 36px;
  padding: 8px 11px;
}

.master-form-designer-queue-position {
  min-width: 54px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}

.master-form-designer-review-nav button:disabled {
  opacity: .42;
  cursor: default;
}

@media (max-width: 850px) {
  .master-form-designer-top-actions {
    flex-wrap: wrap;
  }

  .master-form-designer-review-nav {
    order: 3;
    width: 100%;
  }
}


/* VERSION 76 — PERMANENT MASTER TEMPLATE EDITOR */
.master-template-permanent-note {
  margin: 0 0 13px;
  padding: 9px 10px;
  border: 1px solid #e7d7a9;
  border-radius: 9px;
  background: #fffaf0;
  color: #6f6140;
  font-size: 8.8px;
  line-height: 1.45;
  font-weight: 750;
}

.document-template-document-actions .mini-btn {
  white-space: nowrap;
}


/* CRM 82 - transaction file import */
.transaction-file-import-modal {
  width: min(760px, calc(100vw - 28px));
}
.transaction-file-import-grid {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1.5fr);
  gap: 14px;
  align-items: start;
}
.transaction-file-import-file-field input[type="file"] {
  width: 100%;
  min-height: 44px;
}
.transaction-file-import-list {
  margin-top: 16px;
  border: 1px solid var(--border-color, #dfe4ea);
  border-radius: 12px;
  overflow: hidden;
}
.transaction-file-import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  background: #fff;
  border-bottom: 1px solid var(--border-color, #e8ebef);
}
.transaction-file-import-row:last-child { border-bottom: 0; }
.transaction-file-import-row strong {
  display: block;
  overflow-wrap: anywhere;
}
.transaction-file-import-row span {
  display: block;
  margin-top: 2px;
  color: #6d7782;
  font-size: 12px;
}
.transaction-file-import-progress {
  min-width: 86px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  color: #5a6671;
}
@media (max-width: 640px) {
  .transaction-file-import-grid { grid-template-columns: 1fr; }
  .transaction-file-import-row { align-items: flex-start; }
}

/* CRM 83 — Dotloop-style Add Documents workflow */
.transaction-add-documents-modal {
  width: min(640px, calc(100vw - 28px));
}
.transaction-add-document-sources {
  display: grid;
  gap: 10px;
}
.transaction-add-document-source {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--dark);
  text-align: left;
  cursor: pointer;
}
.transaction-add-document-source:hover {
  border-color: #d9bb6d;
  box-shadow: 0 5px 16px rgba(21,42,61,.07);
}
.transaction-add-document-source:focus-visible {
  outline: 3px solid rgba(198,154,49,.24);
  outline-offset: 2px;
}
.transaction-add-document-source-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #f6f7f8;
  border: 1px solid var(--line);
  font-size: 22px;
  font-weight: 900;
}
.transaction-add-document-source > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.transaction-add-document-source strong {
  font-size: 14px;
}
.transaction-add-document-source small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.transaction-add-document-chevron {
  color: var(--muted);
  font-size: 25px;
  line-height: 1;
  text-align: right;
}
.transaction-document-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.transaction-document-group-add {
  border: 0;
  background: transparent;
  color: #3f8ce8;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 2px;
}
.transaction-document-group-add:hover { text-decoration: underline; }
.transaction-document-group-add:focus-visible {
  outline: 2px solid rgba(63,140,232,.3);
  outline-offset: 2px;
  border-radius: 4px;
}
.transaction-document-group-empty {
  padding: 13px 0;
  color: var(--muted);
  font-size: 10px;
}
@media (max-width: 640px) {
  .transaction-add-document-source {
    grid-template-columns: 42px minmax(0, 1fr) 20px;
  }
  .transaction-document-group-header {
    align-items: center;
  }
}

/* CRM 84 — grouped template picker + multi-select + fixed folder imports */
.master-library-picker-controls {
  grid-template-columns: minmax(180px, .9fr) minmax(260px, 1.4fr);
}
.master-library-destination-note,
.transaction-file-import-destination-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  padding: 9px 11px;
  border: 1px solid #e8dfc8;
  border-radius: 10px;
  background: #fffaf0;
  color: var(--dark);
  font-size: 10px;
}
.master-library-destination-note span,
.transaction-file-import-destination-note span {
  color: var(--muted);
  font-weight: 750;
}
.master-library-destination-note strong,
.transaction-file-import-destination-note strong {
  font-size: 10px;
}
.transaction-file-import-file-field {
  width: 100%;
}
.master-library-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8f9;
  color: var(--dark);
  font-size: 10px;
  font-weight: 850;
}
.master-library-results {
  display: block;
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
}
.master-library-section + .master-library-section {
  border-top: 9px solid #f4f5f6;
}
.master-library-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  background: #f8f6ef;
  border-bottom: 1px solid var(--line);
}
.master-library-section-title strong {
  color: var(--dark);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .015em;
}
.master-library-section-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}
.master-library-section-rows {
  display: grid;
}
.master-library-result-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.master-library-section-rows .master-library-result-row:first-child {
  border-top: 0;
}
.master-library-result-row.selected {
  background: #fffdf7;
}
.master-library-result-select {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 36px;
  cursor: pointer;
}
.master-library-result-select input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #b98d23;
  cursor: pointer;
}
.master-library-result-select input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.master-library-result-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.master-library-result-info strong {
  color: var(--dark);
  font-size: 11px;
  line-height: 1.35;
}
.master-library-result-info span {
  color: var(--muted);
  font-size: 9px;
}
.master-library-result-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .master-library-picker-controls {
    grid-template-columns: 1fr;
  }
  .master-library-result-row {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
  }
  .master-library-result-actions {
    grid-column: 2;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ============================================================
   CRM 85 — compact Dotloop-style transaction document file
   ============================================================ */
.transaction-documents-stack {
  gap: 12px;
}
#transactionDocumentFileCard .profile-card-header {
  min-height: 44px;
  padding: 10px 16px;
}
#transactionDocumentFileCard .profile-card-body {
  padding: 10px 16px 14px;
}
.transaction-document-file-summary {
  align-items: center;
  padding: 0 2px 8px;
  border-bottom: 0;
}
.transaction-document-file-summary strong {
  font-size: 12px;
}
.transaction-document-file-summary span {
  font-size: 9px;
}
.transaction-document-groups {
  gap: 7px;
  padding-top: 0;
}
.transaction-document-group {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.transaction-document-group + .transaction-document-group {
  margin-top: 3px;
}
.transaction-document-group-header {
  min-height: 36px;
  align-items: center;
  padding: 7px 6px;
  background: #faf9f6;
  border: 1px solid var(--line);
  border-width: 1px 0;
}
.transaction-document-group-header strong {
  font-size: 10px;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.transaction-document-group-title {
  gap: 7px;
}
.transaction-document-folder-icon {
  color: #69a9e8 !important;
  font-size: 12px !important;
  line-height: 1;
}
.transaction-document-list {
  padding: 0;
}
.transaction-document-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 6px 6px;
  border-top: 1px solid #efede7;
}
.transaction-document-row:first-child {
  border-top: 0;
}
.transaction-document-row:hover {
  background: #fcfcfb;
}
.transaction-document-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #b89546);
  cursor: pointer;
}
.transaction-document-row-main {
  gap: 1px;
}
.transaction-document-name {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dark);
  font: inherit;
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.transaction-document-name:hover {
  color: #3f8ce8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.transaction-document-name:focus-visible {
  outline: 2px solid rgba(63,140,232,.28);
  outline-offset: 3px;
  border-radius: 3px;
}
.transaction-document-row-meta {
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  color: var(--muted);
  font-size: 8.5px;
  line-height: 1.25;
}
.transaction-document-row-meta span {
  white-space: nowrap;
}
.transaction-document-row-actions {
  position: relative;
  gap: 6px;
}
.transaction-document-row-actions .document-admin-status {
  padding: 4px 7px;
  font-size: 7.5px;
  white-space: nowrap;
}
.transaction-document-inline-action {
  border: 0;
  background: transparent;
  color: #3f8ce8;
  font: inherit;
  font-size: 8.5px;
  font-weight: 900;
  cursor: pointer;
  padding: 4px 2px;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.transaction-document-inline-action:hover {
  text-decoration: underline;
}
.transaction-document-menu {
  position: relative;
  flex: 0 0 auto;
}
.transaction-document-menu > summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 30px;
  border-radius: 7px;
  color: #7d8790;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.transaction-document-menu > summary::-webkit-details-marker {
  display: none;
}
.transaction-document-menu > summary:hover,
.transaction-document-menu[open] > summary {
  background: #f2f4f5;
  color: var(--dark);
}
.transaction-document-menu-popover {
  position: absolute;
  z-index: 60;
  top: calc(100% + 3px);
  right: 0;
  min-width: 150px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18,39,56,.13);
}
.transaction-document-menu-popover button {
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dark);
  font: inherit;
  font-size: 9.5px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.transaction-document-menu-popover button:hover {
  background: #f5f6f6;
}
.transaction-document-menu-popover button.danger {
  color: #a9473f;
}
.transaction-document-selection-toolbar {
  position: sticky;
  top: 6px;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin: 0 0 8px;
  padding: 6px 9px;
  border: 1px solid #d9e3ea;
  border-radius: 9px;
  background: #f8fafb;
}
.transaction-document-selection-toolbar.hidden {
  display: none;
}
.transaction-document-selection-toolbar strong {
  font-size: 9.5px;
}
.transaction-document-selection-toolbar > div {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.transaction-document-selection-toolbar button {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #d8dee3;
  border-radius: 7px;
  background: #fff;
  color: var(--dark);
  font: inherit;
  font-size: 8.5px;
  font-weight: 850;
  cursor: pointer;
}
.transaction-document-selection-toolbar button:hover {
  background: #f1f4f6;
}
.transaction-document-selection-toolbar button.subtle {
  color: var(--muted);
}
.transaction-document-group-empty {
  padding: 9px 6px;
  font-size: 9px;
}

@media (max-width: 720px) {
  #transactionDocumentFileCard .profile-card-body {
    padding: 8px 10px 12px;
  }
  .transaction-document-row {
    grid-template-columns: 22px minmax(0,1fr) auto;
    gap: 7px;
    min-height: 50px;
    padding: 7px 4px;
  }
  .transaction-document-row-actions .document-admin-status,
  .transaction-document-inline-action {
    display: none;
  }
  .transaction-document-row-meta {
    max-width: 58vw;
  }
  .transaction-document-selection-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* CRM 85 document-tab spacing cleanup */
.transaction-documents-stack > .profile-card {
  margin-bottom: 0;
}
#transactionDocumentFileCard {
  overflow: visible;
}
#transactionDocumentFileCard > .profile-card-header {
  border-radius: var(--radius) var(--radius) 0 0;
}
#transactionDocumentFileCard > .profile-card-body {
  border-radius: 0 0 var(--radius) var(--radius);
}


/* ============================================================
   TRANSACTION DOCUMENT EDITOR — Version 87
   PDF-first editing inspired by the user's preferred workflow.
   ============================================================ */
.transaction-document-editor-backdrop {
  padding: 10px;
  background: rgba(16, 28, 40, .58);
  z-index: 1200;
}
.transaction-document-editor-modal {
  position: relative;
  width: min(1280px, calc(100vw - 20px));
  height: calc(100vh - 20px);
  max-height: none;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: #eef1f3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(11, 24, 36, .28);
}
.transaction-document-editor-toolbar {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: #244d69;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.transaction-document-editor-back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64b4f5;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}
.transaction-document-editor-back:hover { background: rgba(255,255,255,.08); }
.transaction-document-editor-title-wrap { min-width: 0; }
.transaction-document-editor-title-wrap h2 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-document-editor-subtitle {
  margin-top: 4px;
  color: rgba(255,255,255,.67);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.transaction-document-editor-actions {
  display: flex;
  align-items: stretch;
  gap: 0;
  align-self: stretch;
}
.transaction-document-editor-action,
.transaction-document-editor-sign,
.transaction-document-editor-share {
  min-width: 104px;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}
.transaction-document-editor-action:hover { background: rgba(255,255,255,.08); }
.transaction-document-editor-sign {
  min-width: 126px;
  background: #d2b561;
  color: #11283c;
}
.transaction-document-editor-sign:hover { background: #e0c979; }
.transaction-document-editor-share {
  min-width: 150px;
  background: #58aaf0;
}
.transaction-document-editor-share:hover { background: #4a9fe4; }
.transaction-document-editor-action:disabled,
.transaction-document-editor-sign:disabled,
.transaction-document-editor-share:disabled { opacity: .45; cursor: not-allowed; }
.transaction-document-editor-workspace {
  min-height: 0;
  overflow: auto;
  padding: 26px 18px 46px;
  background: #edf0f2;
}
.transaction-document-editor-pages {
  display: grid;
  gap: 24px;
  justify-items: center;
  width: 100%;
}
.transaction-document-editor-page {
  position: relative;
  width: min(100%, 1050px);
  background: #fff;
  box-shadow: 0 4px 20px rgba(24, 39, 54, .16);
  overflow: hidden;
}
.transaction-document-editor-page canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.transaction-document-editor-page-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.transaction-document-editor-field {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #52aaf4;
  border-radius: 3px;
  background: rgba(255,255,255,.86);
  color: #132b3f;
  overflow: hidden;
}
.transaction-document-editor-text {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 5px;
  border: 0;
  outline: 0;
  background: transparent;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: text;
  opacity: 1;
}
.transaction-document-editor-text:focus {
  box-shadow: inset 0 0 0 2px rgba(47, 145, 224, .24);
  background: rgba(255,255,255,.98);
}
.transaction-document-editor-field.is-active {
  border-color: #117fd0;
  box-shadow: 0 0 0 2px rgba(17,127,208,.2);
}
.transaction-document-editor-field.is-autofill {
  background: rgba(240,249,255,.88);
}
.transaction-document-editor-field.is-decision {
  background: rgba(255,252,238,.9);
}
.transaction-document-editor-field.is-checkbox {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.9);
}
.transaction-document-editor-field.is-checkbox input {
  width: 75%;
  height: 75%;
  margin: 0;
  accent-color: #2e8fd7;
  cursor: pointer;
}
.transaction-document-editor-field.is-signer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-color: #8d71cf;
  background: rgba(244,239,255,.88);
  color: #654ca4;
  font-size: clamp(7px, .75vw, 10px);
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}
.transaction-document-editor-field.is-required-empty {
  border-color: #c84e4e;
  background: rgba(255,244,244,.93);
}
.transaction-document-editor-loading {
  min-height: 380px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #355068;
  text-align: center;
}
.transaction-document-editor-loading.hidden { display: none; }
.transaction-document-editor-loading strong { font-size: 15px; }
.transaction-document-editor-loading span { color: var(--muted); font-size: 10px; }
.transaction-document-format-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #294b61;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(10,31,46,.22);
  color: #fff;
  overflow-x: auto;
}
.transaction-document-format-toolbar.is-disabled {
  color: rgba(255,255,255,.58);
}
.transaction-document-format-active {
  min-width: 170px;
  max-width: 260px;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
}
.transaction-document-format-select select {
  height: 34px;
  min-width: 92px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  outline: none;
}
.transaction-document-format-select select option { color: #132b3f; background: #fff; }
.transaction-document-format-select.size select { min-width: 66px; }
.transaction-document-format-divider {
  width: 1px;
  height: 26px;
  flex: 0 0 1px;
  background: rgba(255,255,255,.18);
  margin: 0 2px;
}
.transaction-document-format-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6dc0ff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}
.transaction-document-format-button:hover:not(:disabled),
.transaction-document-format-button.is-active {
  background: rgba(93,177,241,.18);
  color: #fff;
}
.transaction-document-format-button:disabled,
.transaction-document-format-color:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.transaction-document-format-button.center-icon { text-align: center; }
.transaction-document-format-button.right-icon { text-align: right; }
.transaction-document-format-button.underline { text-decoration: underline; }
.transaction-document-format-color {
  position: relative;
  width: 36px;
  height: 34px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  color: #6dc0ff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}
.transaction-document-format-color input {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 2px;
  width: 26px;
  height: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: .95;
  cursor: pointer;
}

.transaction-document-editor-status {
  min-height: 36px;
  margin: 0;
  padding: 9px 16px;
  border-radius: 0;
  border: 0;
  border-top: 1px solid #dce2e6;
  background: #fff;
  font-size: 10px;
}
.transaction-document-autofill-backdrop {
  position: absolute;
  inset: 68px 0 0;
  z-index: 8;
  display: grid;
  place-items: start center;
  padding: 76px 18px 24px;
  background: rgba(8, 17, 25, .56);
  overflow: auto;
}
.transaction-document-autofill-backdrop.hidden { display: none; }
.transaction-document-autofill-panel {
  width: min(760px, 100%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.3);
  overflow: hidden;
}
.transaction-document-autofill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px 16px;
  background: #5baaf0;
  color: #fff;
}
.transaction-document-autofill-header .document-template-kind { color: rgba(255,255,255,.72); }
.transaction-document-autofill-header h3 { margin: 2px 0 0; color: #fff; font-size: 25px; font-weight: 500; }
.transaction-document-autofill-header .modal-close { color: #fff; }
.transaction-document-autofill-help {
  margin: 0;
  padding: 20px 28px 12px;
  color: #51606d;
  font-size: 13px;
  line-height: 1.5;
}
.transaction-document-autofill-section { padding: 10px 28px 4px; }
.transaction-document-autofill-section h4 {
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e5e8ea;
  color: #34414c;
  font-size: 13px;
  text-transform: uppercase;
}
.transaction-document-autofill-roles,
.transaction-document-autofill-known { display: grid; }
.transaction-document-autofill-role,
.transaction-document-autofill-known-row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid #eef0f2;
  font-size: 12px;
}
.transaction-document-autofill-role:last-child,
.transaction-document-autofill-known-row:last-child { border-bottom: 0; }
.transaction-document-autofill-role strong,
.transaction-document-autofill-known-row strong { color: #34414c; }
.transaction-document-autofill-role span,
.transaction-document-autofill-known-row span { color: #4d9fe3; font-weight: 800; text-align: right; }
.transaction-document-autofill-known-row span.missing { color: #a36b18; }
.transaction-document-autofill-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px 22px;
  border-top: 1px solid #e8ecef;
}
@media(max-width:760px){
  .transaction-document-editor-backdrop { padding: 0; }
  .transaction-document-editor-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .transaction-document-editor-toolbar { grid-template-columns: auto minmax(0,1fr); }
  .transaction-document-format-toolbar { padding: 6px 8px; gap: 5px; }
  .transaction-document-format-active { display: none; }
  .transaction-document-format-select select { min-width: 82px; }
  .transaction-document-editor-actions { grid-column: 1 / -1; height: 44px; margin: 0 -14px; border-top: 1px solid rgba(255,255,255,.12); }
  .transaction-document-editor-toolbar { padding-top: 6px; }
  .transaction-document-editor-action,
  .transaction-document-editor-sign,
  .transaction-document-editor-share { flex: 1; min-width: 0; padding: 0 8px; font-size: 9px; }
  .transaction-document-autofill-backdrop { inset: 112px 0 0; padding-top: 28px; }
  .transaction-document-autofill-role,
  .transaction-document-autofill-known-row { grid-template-columns: 1fr; gap: 3px; padding: 8px 0; }
  .transaction-document-autofill-role span,
  .transaction-document-autofill-known-row span { text-align: left; }
  .transaction-document-autofill-footer { flex-direction: column-reverse; }
  .transaction-document-autofill-footer button { width: 100%; }
}


/* ============================================================
   TRANSACTION DOCUMENT SHARE — Version 88
   Keep preparation and sharing inside the transaction editor.
   ============================================================ */
.transaction-document-share-backdrop {
  position: absolute;
  inset: 68px 0 0;
  z-index: 10;
  display: grid;
  place-items: start center;
  padding: 64px 18px 24px;
  background: rgba(8,17,25,.56);
  overflow: auto;
}
.transaction-document-share-backdrop.hidden { display: none; }
.transaction-document-share-panel {
  width: min(700px, 100%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 22px 70px rgba(0,0,0,.3);
  overflow: hidden;
}
.transaction-document-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #5baaf0;
  color: #fff;
}
.transaction-document-share-header .document-template-kind { color: rgba(255,255,255,.72); }
.transaction-document-share-header h3 { margin: 2px 0 0; color: #fff; font-size: 24px; font-weight: 500; }
.transaction-document-share-header .modal-close { color: #fff; }
.transaction-document-share-body { padding: 20px 26px 8px; }
.transaction-document-share-body > p { margin: 0 0 16px; color: #556472; font-size: 13px; line-height: 1.45; }
.transaction-document-share-recipients { display: grid; gap: 10px; margin-bottom: 18px; }
.transaction-document-share-recipient {
  display: grid;
  grid-template-columns: 34px minmax(0,.85fr) minmax(0,1.15fr);
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid #e0e6ea;
  border-radius: 8px;
  background: #fafbfc;
}
.transaction-document-share-recipient-number { width: 28px; height: 28px; display:grid; place-items:center; border-radius:50%; background:#17324a; color:#fff; font-size:11px; font-weight:900; align-self:center; }
.transaction-document-share-recipient label,
.transaction-document-share-field { display:grid; gap:5px; color:#405161; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.transaction-document-share-recipient input,
.transaction-document-share-field input,
.transaction-document-share-field textarea { width:100%; box-sizing:border-box; border:1px solid #d8e0e6; border-radius:7px; background:#fff; color:#17324a; font:500 13px/1.3 inherit; text-transform:none; letter-spacing:normal; padding:10px 11px; outline:0; }
.transaction-document-share-field { margin-bottom: 14px; }
.transaction-document-share-field textarea { resize: vertical; min-height: 88px; }
.transaction-document-share-recipient input:focus,
.transaction-document-share-field input:focus,
.transaction-document-share-field textarea:focus { border-color:#5baaf0; box-shadow:0 0 0 3px rgba(91,170,240,.14); }
.transaction-document-share-footer { display:flex; justify-content:space-between; gap:12px; padding:16px 26px 20px; border-top:1px solid #e8ecef; }
.transaction-document-editor-page { min-height: 120px; }
.transaction-document-editor-field { z-index: 3; }
.transaction-document-editor-field input { pointer-events: auto; user-select: text; }
@media(max-width:760px){
  .transaction-document-share-backdrop { inset:112px 0 0; padding:28px 12px; }
  .transaction-document-share-recipient { grid-template-columns:34px 1fr; }
  .transaction-document-share-recipient label { grid-column:2; }
  .transaction-document-share-footer { flex-direction:column-reverse; }
  .transaction-document-share-footer button { width:100%; }
}

/* CRM 89: document text rendering + inline formatting toolbar */


/* CRM 90: transaction-copy field editing + add-field tools */
.transaction-document-add-wrap { position: relative; height: 100%; display: flex; }
.transaction-document-add-menu {
  position: absolute; top: calc(100% - 7px); right: 0; z-index: 120;
  width: 220px; padding: 8px; border: 1px solid rgba(20,49,72,.16); border-radius: 10px;
  background: #fff; box-shadow: 0 14px 38px rgba(11,33,50,.22); display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.transaction-document-add-menu.hidden { display: none; }
.transaction-document-add-menu button { min-height: 58px; border: 1px solid #e3e8ec; border-radius: 8px; background: #fff; color: #17324a; display:grid; place-items:center; gap:2px; padding:8px; cursor:pointer; font:800 11px/1.1 inherit; }
.transaction-document-add-menu button:hover { border-color:#64b0ed; background:#f3f9fe; }
.transaction-document-add-menu button strong { color:#258edb; font-size:16px; }
.transaction-document-format-toolbar { flex-wrap: wrap; gap: 8px; }
.transaction-document-format-select.assignee select { min-width: 150px; }
.transaction-document-format-select.field-type select { min-width: 105px; }
.transaction-document-format-required { display:flex; align-items:center; gap:6px; padding:0 4px; color:#eaf5fd; font-size:11px; font-weight:850; white-space:nowrap; }
.transaction-document-format-required input { width:16px; height:16px; accent-color:#5eb3f3; }
.transaction-document-format-button.delete-field { width:auto; min-width:58px; padding:0 10px; color:#ffdede; border-color:rgba(255,210,210,.18); }
.transaction-document-editor-field { pointer-events:auto; overflow:visible; }
.transaction-document-editor-text { display:block; appearance:none; -webkit-appearance:none; line-height:1.1; pointer-events:auto; user-select:text; }
.transaction-document-editor-field.is-signer { pointer-events:auto; cursor:pointer; }
.transaction-document-signer-label { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; }
.transaction-document-field-move-handle,
.transaction-document-field-resize-handle { display:none; position:absolute; z-index:8; border:0; padding:0; background:#117fd0; color:#fff; cursor:grab; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.transaction-document-editor-field.is-active .transaction-document-field-move-handle,
.transaction-document-editor-field.is-active .transaction-document-field-resize-handle { display:block; }
.transaction-document-field-move-handle { left:-9px; top:-9px; width:18px; height:18px; border-radius:5px; font-size:9px; line-height:18px; }
.transaction-document-field-resize-handle { right:-6px; bottom:-6px; width:12px; height:12px; border-radius:50%; cursor:nwse-resize; }
.transaction-document-editor-pages.is-adding-field .transaction-document-editor-page-overlay { cursor:crosshair; }
.transaction-document-field-draw-preview { position:absolute; z-index:20; pointer-events:none; border:2px dashed #0e83d7; background:rgba(80,174,239,.12); border-radius:3px; }
@media(max-width:760px){
  .transaction-document-format-select.assignee select { min-width:125px; }
  .transaction-document-add-menu { right:-130px; width:205px; }
}

/* ============================================================
   CRM 91 — Transaction document editor visual isolation/cleanup
   Prevent global CRM form styles from distorting PDF field controls.
   ============================================================ */
.transaction-document-format-toolbar {
  min-height: 46px;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 12px;
  overflow-x: auto;
  overflow-y: hidden;
}
.transaction-document-format-active {
  min-width: 120px;
  max-width: 190px;
  padding: 0 8px;
  font-size: 10px;
  color: rgba(255,255,255,.72);
}
.transaction-document-format-select select {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 28px 0 10px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.94) !important;
  color: #17324a !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
.transaction-document-format-select.assignee select { min-width: 138px !important; }
.transaction-document-format-select.field-type select { min-width: 94px !important; }
.transaction-document-format-select.size select { min-width: 60px !important; }
.transaction-document-format-required {
  min-height: 32px;
  margin: 0;
  padding: 0 6px;
  color: rgba(255,255,255,.9) !important;
}
.transaction-document-format-required input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.transaction-document-format-button,
.transaction-document-format-button.delete-field {
  width: 32px;
  height: 32px;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.transaction-document-format-button.delete-field {
  width: auto;
  min-width: 54px !important;
  padding: 0 8px !important;
  font-size: 11px;
}
.transaction-document-format-color {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}
.transaction-document-format-color input[type="color"] {
  width: 24px !important;
  height: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.transaction-document-format-divider { height: 22px; }

/* The field box should match the mapped rectangle exactly. */
.transaction-document-editor-field {
  border-width: 1px;
  border-radius: 2px;
  overflow: visible;
  box-shadow: none;
}
.transaction-document-editor-field.is-active {
  border-color: #0d83d5;
  box-shadow: 0 0 0 1px rgba(13,131,213,.22);
}
.transaction-document-editor-field.is-autofill { background: rgba(241,249,255,.48); }
.transaction-document-editor-field.is-decision { background: rgba(255,253,244,.52); }
.transaction-document-editor-field.is-required-empty { background: rgba(255,246,246,.55); }

/* Override global CRM input styles inside the PDF canvas. */
.transaction-document-editor-field input.transaction-document-editor-text,
.transaction-document-editor-field input[type="text"].transaction-document-editor-text,
.transaction-document-editor-field input[type="date"].transaction-document-editor-text,
.transaction-document-editor-field input[type="email"].transaction-document-editor-text {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: inherit !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.transaction-document-editor-field input.transaction-document-editor-text:focus {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
  outline: none !important;
}
.transaction-document-editor-field.is-checkbox input[type="checkbox"] {
  width: 72% !important;
  height: 72% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 1px !important;
  box-shadow: none !important;
}

/* Geometry handles must stay tiny even though CRM buttons globally have a 40px min-height. */
.transaction-document-field-move-handle,
.transaction-document-field-resize-handle {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}
.transaction-document-field-move-handle {
  left: -7px;
  top: -7px;
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  font-size: 7px;
  line-height: 14px;
}
.transaction-document-field-resize-handle {
  right: -5px;
  bottom: -5px;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}
.transaction-document-signer-label {
  line-height: 1.05;
}

@media(max-width:900px){
  .transaction-document-format-toolbar { gap: 5px; padding: 5px 8px; }
  .transaction-document-format-active { display: none; }
  .transaction-document-format-select.assignee select { min-width: 122px !important; }
  .transaction-document-format-select.field-type select { min-width: 88px !important; }
}


/* CRM 92 — crisp PDF + clean editable value layer. */
.transaction-document-editor-page canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: auto;
}

/* A populated editable field should read like document text, not reveal an older
   flattened value or the printed line directly underneath it. Empty fields stay
   translucent so the user can still see the form's original guides. */
.transaction-document-editor-field.has-value {
  background: #fff !important;
}
.transaction-document-editor-field.has-value input.transaction-document-editor-text,
.transaction-document-editor-field.has-value input[type="text"].transaction-document-editor-text,
.transaction-document-editor-field.has-value input[type="date"].transaction-document-editor-text,
.transaction-document-editor-field.has-value input[type="email"].transaction-document-editor-text {
  background: #fff !important;
}
.transaction-document-editor-field.has-value input.transaction-document-editor-text:focus {
  background: #fff !important;
}

/* ============================================================
   CRM 95 — ultra-compact transaction documents list
   ============================================================ */
#transactionDocumentFileCard .profile-card-header {
  min-height: 38px;
  padding: 7px 14px;
}
#transactionDocumentFileCard .profile-card-body {
  padding: 6px 14px 9px;
}
.transaction-documents-stack {
  gap: 7px;
}
.transaction-document-file-summary {
  min-height: 30px;
  padding: 1px 2px 5px;
}
.transaction-document-file-summary > div {
  gap: 1px;
}
.transaction-document-file-summary strong {
  font-size: 11px;
  line-height: 1.2;
}
.transaction-document-file-summary span {
  font-size: 8px;
  line-height: 1.15;
}
.transaction-document-groups {
  gap: 2px;
}
.transaction-document-group + .transaction-document-group {
  margin-top: 1px;
}
.transaction-document-group-header {
  min-height: 29px;
  padding: 3px 5px;
}
.transaction-document-group-header strong {
  font-size: 9.25px;
  line-height: 1.15;
}
.transaction-document-group-header span {
  font-size: 8.5px;
}
.transaction-document-group-title {
  gap: 5px;
}
.transaction-document-folder-icon {
  font-size: 10px !important;
}
.transaction-document-group-add {
  padding: 3px 2px;
  font-size: 8.25px;
  line-height: 1.1;
}
.transaction-document-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 34px;
  padding: 3px 5px;
}
.transaction-document-checkbox {
  width: 14px;
  height: 14px;
}
.transaction-document-row-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.transaction-document-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.15;
}
.transaction-document-row-meta {
  flex: 1 1 auto;
  min-width: 0;
  gap: 3px;
  font-size: 7.5px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.transaction-document-row-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.transaction-document-row-actions {
  gap: 4px;
}
.transaction-document-row-actions .document-admin-status {
  padding: 2px 5px;
  font-size: 6.75px;
  line-height: 1.1;
}
.transaction-document-inline-action {
  padding: 2px 1px;
  font-size: 7.5px;
}
.transaction-document-menu > summary {
  width: 23px;
  height: 24px;
  border-radius: 5px;
  font-size: 17px;
}
.transaction-document-group-empty {
  padding: 5px 5px;
  font-size: 8px;
  line-height: 1.15;
}
.transaction-document-selection-toolbar {
  min-height: 32px;
  margin-bottom: 4px;
  padding: 4px 7px;
}
.transaction-document-selection-toolbar button {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 7.75px;
}

@media (max-width: 720px) {
  .transaction-document-row {
    min-height: 39px;
    padding: 4px 4px;
  }
  .transaction-document-row-main {
    display: grid;
    gap: 1px;
  }
  .transaction-document-row-meta {
    font-size: 7.25px;
  }
}

/* CRM 97: completed signing lifecycle */
.transaction-document-inline-action.signed {
  color: #247353;
  font-weight: 850;
}
.transaction-document-inline-action.signed:hover {
  color: #174f39;
}

/* CRM 100: Under Contract client-data gate */
.uc-client-requirements {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 13px;
  line-height: 1.45;
}
.uc-client-requirements.ready {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(22, 163, 74, 0.28);
  color: #166534;
}
.uc-client-requirements.incomplete {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(217, 119, 6, 0.32);
  color: #92400e;
}


/* ============================================================
   TRANSACTION EMAIL HISTORY — Version 102
   ============================================================ */
.transaction-email-history-card .profile-card-body {
  padding-top: 14px;
}

.transaction-email-history-caption {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.transaction-email-history-note {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #faf9f6;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.transaction-email-history-list {
  display: grid;
  gap: 9px;
}

.transaction-email-history-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px 13px;
}

.transaction-email-history-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.transaction-email-history-heading {
  min-width: 0;
}

.transaction-email-history-subject {
  color: var(--dark);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.transaction-email-history-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.transaction-email-history-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(23, 50, 74, .09);
  color: #17324a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.transaction-email-history-badge.muted {
  background: #f1f1ee;
  color: var(--muted);
}

.transaction-email-history-date {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.transaction-email-history-routing {
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 3px;
  margin-top: 9px;
}

.transaction-email-history-meta {
  color: #536170;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.transaction-email-history-meta strong {
  color: #344150;
}

.transaction-email-history-message {
  margin-top: 9px;
  border-top: 1px solid #ecece8;
  padding-top: 8px;
}

.transaction-email-history-message summary {
  width: max-content;
  color: #17324a;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.transaction-email-history-body {
  margin-top: 9px;
  padding: 10px 11px;
  border-radius: 8px;
  background: #f8f8f6;
  color: #344150;
  font-size: 12px;
  line-height: 1.52;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.transaction-email-history-no-body {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.transaction-email-history-empty {
  display: grid;
  gap: 3px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.transaction-email-history-empty strong {
  color: var(--dark);
  font-size: 13px;
}

@media (max-width: 650px) {
  .transaction-email-history-top {
    display: block;
  }

  .transaction-email-history-date {
    margin-top: 6px;
  }

  .transaction-email-history-routing {
    display: grid;
    gap: 3px;
  }
}


/* ============================================================
   CHECKLIST + EMAIL ACTIVITY SPLIT — Version 103
   ============================================================ */
.transaction-checklist-email-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(350px, .92fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.transaction-checklist-card,
.transaction-email-activity-card {
  min-width: 0;
}

.transaction-email-activity-card {
  position: sticky;
  top: 12px;
}

.transaction-email-activity-card .profile-card-body {
  padding: 12px;
}

.transaction-email-activity-card .transaction-email-history-note {
  margin-bottom: 9px;
  padding: 7px 9px;
  font-size: 11px;
}

.transaction-email-activity-card .transaction-email-history-list {
  max-height: min(68vh, 760px);
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.transaction-email-activity-card .transaction-email-history-item {
  padding: 10px 11px;
}

.transaction-email-activity-card .transaction-email-history-subject {
  font-size: 12px;
}

.transaction-email-activity-card .transaction-email-history-date,
.transaction-email-activity-card .transaction-email-history-meta {
  font-size: 10px;
}

@media (max-width: 1080px) {
  .transaction-checklist-email-layout {
    grid-template-columns: 1fr;
  }

  .transaction-email-activity-card {
    position: static;
  }

  .transaction-email-activity-card .transaction-email-history-list {
    max-height: 520px;
  }
}

/* ============================================================
   CRM 105 — EXPERIMENTAL PREMIUM MINIMAL VISUAL REFRESH
   Presentation only. CRM 104 remains the instant rollback build.
   ============================================================ */
:root {
  --v105-canvas: #f5f7f8;
  --v105-surface: #ffffff;
  --v105-surface-soft: #f8fafb;
  --v105-text: #122b3e;
  --v105-text-soft: #4f6372;
  --v105-muted: #81909b;
  --v105-line: #e5eaee;
  --v105-line-strong: #d9e1e6;
  --v105-navy: #102e43;
  --v105-navy-hover: #173b53;
  --v105-gold: #c8a858;
  --v105-gold-soft: #f5eedc;
  --v105-green: #287254;
  --v105-red: #a44b45;
  --v105-radius-sm: 9px;
  --v105-radius: 13px;
  --v105-radius-lg: 16px;
  --v105-shadow-1: 0 1px 2px rgba(16, 43, 62, .025), 0 5px 16px rgba(16, 43, 62, .035);
  --v105-shadow-2: 0 10px 28px rgba(16, 43, 62, .075);
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--v105-canvas) !important;
  color: var(--v105-text) !important;
}

/* ---------- Shell ---------- */
.app-shell {
  grid-template-columns: 232px minmax(0, 1fr) !important;
}

.sidebar {
  background: #102c40 !important;
  padding: 16px 10px 14px !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(255,255,255,.035);
}

.sidebar .brand-mark.sidebar-wordmark-wrap {
  min-height: 64px !important;
  margin-bottom: 8px !important;
  padding: 2px 10px 12px !important;
  border-bottom-color: rgba(255,255,255,.075) !important;
}

.sidebar-wordmark-logo {
  width: 152px !important;
}

.nav-label {
  margin: 16px 11px 5px !important;
  color: rgba(225, 204, 150, .50) !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  letter-spacing: .14em !important;
}

.nav-item {
  min-height: 38px !important;
  margin: 1px 3px !important;
  width: calc(100% - 6px) !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 12.25px !important;
  font-weight: 580 !important;
  transition: background-color .14s ease, color .14s ease, transform .14s ease !important;
}

.nav-item:hover {
  background: rgba(255,255,255,.055) !important;
  color: rgba(255,255,255,.94) !important;
  transform: none !important;
}

.nav-item.active {
  background: rgba(255,255,255,.085) !important;
  color: #fff !important;
  box-shadow: inset 2px 0 0 var(--v105-gold) !important;
}

.nav-item.active .nav-icon {
  color: #e2c879 !important;
}

.nav-icon {
  width: 17px !important;
  height: 17px !important;
  flex-basis: 17px !important;
  opacity: .84 !important;
}

.sidebar-user {
  margin-top: 14px !important;
  padding: 14px 10px 2px !important;
  border-top-color: rgba(255,255,255,.075) !important;
}

.main {
  padding: 0 24px 36px !important;
  background: var(--v105-canvas) !important;
}

.view {
  width: min(100%, 1740px) !important;
}

/* ---------- Page headers ---------- */
.topbar {
  min-height: 72px !important;
  margin: 0 -2px 16px !important;
  padding: 15px 2px 10px !important;
  background: linear-gradient(180deg, rgba(245,247,248,.97) 0%, rgba(245,247,248,.91) 78%, rgba(245,247,248,0) 100%) !important;
  backdrop-filter: blur(12px) !important;
}

.topbar h1,
.view h1,
.profile-header h1 {
  color: var(--v105-text) !important;
  font-weight: 710 !important;
  letter-spacing: -.035em !important;
}

.topbar h1,
.view h1 {
  font-size: clamp(27px, 2.1vw, 35px) !important;
}

.topbar p,
.page-subtitle,
.profile-meta {
  color: var(--v105-muted) !important;
}

/* ---------- Surfaces ---------- */
.card,
.dashboard-card,
.dashboard-panel,
.settings-section,
.form-launch-card,
.profile-card,
.profile-header,
.profile-panel,
.transaction-profile-panel,
.team-summary-card,
.team-detail-panel,
.report-card,
.report-kpi,
.submission-history-stat,
.activity-panel,
.table-wrap,
.client-table-wrap,
.lead-table-wrap,
.transaction-table-wrap,
.filter-bar,
.transaction-email-history-item {
  background: var(--v105-surface) !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: var(--v105-radius-lg) !important;
  box-shadow: var(--v105-shadow-1) !important;
}

.card:hover,
.dashboard-card:hover,
.dashboard-panel:hover,
.profile-card:hover {
  transform: none !important;
  box-shadow: var(--v105-shadow-1) !important;
}

.profile-header {
  padding: 20px 22px !important;
  margin-bottom: 14px !important;
}

.profile-header h1 {
  font-size: clamp(29px, 2.25vw, 38px) !important;
  line-height: 1.04 !important;
}

.profile-meta {
  margin-top: 7px !important;
  font-size: 12px !important;
}

.profile-card {
  margin-bottom: 14px !important;
}

.profile-card-header,
.settings-section-header,
.dashboard-panel-header,
.report-card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--v105-line) !important;
  color: var(--v105-text) !important;
  min-height: 44px !important;
  padding: 12px 15px !important;
  font-size: 11.5px !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.profile-card-body,
.settings-section-body,
.report-card-body {
  padding: 15px !important;
}

/* ---------- Buttons ---------- */
.primary-btn,
button.primary-btn,
.topbar .primary-btn {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border: 1px solid var(--v105-navy) !important;
  border-radius: 10px !important;
  background: var(--v105-navy) !important;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.primary-btn:hover,
button.primary-btn:hover,
.topbar .primary-btn:hover {
  background: var(--v105-navy-hover) !important;
  border-color: var(--v105-navy-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(16,46,67,.11) !important;
}

.secondary-btn,
.settings-small-btn,
.mini-btn {
  border-color: var(--v105-line-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #294354 !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

.secondary-btn:hover,
.settings-small-btn:hover,
.mini-btn:hover {
  background: var(--v105-surface-soft) !important;
  border-color: #cbd6dd !important;
  box-shadow: none !important;
}

/* ---------- Inputs and search/filter controls ---------- */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.workflow-field input:not([type="checkbox"]):not([type="radio"]),
.workflow-field select,
.workflow-field textarea,
.filter-bar input,
.filter-bar select,
.search-wrap input,
.settings-section input:not([type="checkbox"]):not([type="radio"]),
.settings-section select,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  min-height: 40px !important;
  border-color: var(--v105-line-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--v105-text) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.workflow-field input:focus,
.workflow-field select:focus,
.workflow-field textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus,
.search-wrap input:focus,
.settings-section input:focus,
.settings-section select:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: #8ba2b1 !important;
  box-shadow: 0 0 0 3px rgba(39,82,112,.075) !important;
}

label {
  color: #425968 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

.help,
.small-muted,
.muted {
  color: var(--v105-muted) !important;
}

/* ---------- Database toolbars ---------- */
.client-toolbar,
.lead-toolbar,
.transaction-toolbar,
.tasks-toolbar,
.submission-history-toolbar,
.coop-directory-toolbar,
.filter-bar {
  padding: 9px !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}

.search-wrap {
  border-radius: 10px !important;
}

/* ---------- Tables ---------- */
.table-wrap,
.client-table-wrap,
.lead-table-wrap,
.transaction-table-wrap,
.report-table-wrap {
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}

thead th {
  height: 38px !important;
  padding: 9px 12px !important;
  background: #f8fafb !important;
  color: #778895 !important;
  border-bottom: 1px solid var(--v105-line) !important;
  font-size: 9px !important;
  font-weight: 760 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid #edf1f3 !important;
  background: #fff !important;
  color: #465c6c !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

tbody tr:hover td {
  background: #f9fbfc !important;
}

.client-name,
.transaction-property-primary,
.dashboard-row-title,
.email-template-name {
  color: var(--v105-text) !important;
  font-size: 12.25px !important;
  font-weight: 690 !important;
}

.sort-indicator {
  color: #a9b4bb !important;
}

/* ---------- KPI and dashboard hierarchy ---------- */
.dashboard-kpi,
.report-kpi,
.team-summary-card,
.task-summary-card,
.popby-summary-card {
  border-color: var(--v105-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: #fff !important;
}

.dashboard-kpi {
  padding: 14px 15px !important;
}

.dashboard-kpi-label,
.report-kpi-label,
.team-summary-label {
  color: #7c8b96 !important;
  font-size: 9px !important;
  font-weight: 740 !important;
  letter-spacing: .045em !important;
}

.dashboard-kpi-value,
.report-kpi-value,
.team-summary-value {
  color: var(--v105-text) !important;
  font-weight: 690 !important;
  letter-spacing: -.025em !important;
}

.dashboard-panel-header h3 {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* ---------- Status pills ---------- */
.status-pill,
.transaction-type-pill,
.lead-priority-pill,
.lead-status-pill,
.submission-form-chip,
.team-login-pill,
.level-chip,
.badge {
  min-height: 24px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 720 !important;
}

.status-pill.status-pending {
  background: #edf7f4 !important;
  color: #28705a !important;
  border-color: #d4ebe4 !important;
}

.status-pill.status-active,
.status-pill.status-connected {
  background: #eef5f9 !important;
  color: #37647d !important;
  border-color: #dbe9f0 !important;
}

.status-pill.status-potential {
  background: #fff3f1 !important;
  color: #a8564d !important;
  border-color: #f3ded9 !important;
}

/* ---------- Transaction profile ---------- */
.transaction-profile-tabs {
  margin-bottom: 14px !important;
  padding: 3px !important;
  gap: 2px !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 11px !important;
  background: #edf1f3 !important;
  box-shadow: none !important;
}

.transaction-profile-tab {
  min-height: 35px !important;
  padding: 8px 15px !important;
  border-radius: 8px !important;
  color: #6f7f8b !important;
  font-size: 11px !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
}

.transaction-profile-tab:hover {
  background: rgba(255,255,255,.54) !important;
  color: var(--v105-text) !important;
}

.transaction-profile-tab.active {
  background: #fff !important;
  color: var(--v105-text) !important;
  box-shadow: 0 1px 2px rgba(16,43,62,.055) !important;
}

.transaction-detail-layout,
.profile-layout {
  gap: 14px !important;
}

/* ---------- Activity / checklist ---------- */
.transaction-checklist-email-layout {
  gap: 14px !important;
}

.transaction-email-activity-card .profile-card-body {
  padding: 10px !important;
}

.transaction-email-history-note {
  margin-bottom: 8px !important;
  padding: 7px 9px !important;
  border-color: var(--v105-line) !important;
  border-radius: 9px !important;
  background: #f8fafb !important;
  color: #84929c !important;
  font-size: 10px !important;
}

.transaction-email-history-list {
  gap: 7px !important;
}

.transaction-email-history-item {
  padding: 9px 10px !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

.transaction-email-history-subject {
  color: var(--v105-text) !important;
  font-size: 11.5px !important;
  font-weight: 690 !important;
}

.transaction-email-history-date,
.transaction-email-history-meta {
  color: #7f8e99 !important;
}

.transaction-email-history-badge {
  min-height: 18px !important;
  padding: 2px 6px !important;
  background: #eef2f4 !important;
  color: #607482 !important;
  font-size: 8px !important;
  font-weight: 740 !important;
}

/* ---------- Transaction documents list: preserve density, soften chrome ---------- */
#transactionDocumentFileCard,
.transaction-documents-stack > .profile-card {
  box-shadow: none !important;
}

.transaction-document-group-header {
  background: #f8fafb !important;
  border-color: var(--v105-line) !important;
}

.transaction-document-row {
  border-bottom-color: #edf1f3 !important;
}

.transaction-document-row:hover {
  background: #f9fbfc !important;
}

.transaction-document-name {
  color: var(--v105-text) !important;
  font-weight: 680 !important;
}

/* ---------- Settings ---------- */
.settings-tabs {
  background: #edf1f3 !important;
  border: 1px solid var(--v105-line) !important;
  border-radius: 11px !important;
  padding: 3px !important;
  box-shadow: none !important;
}

.settings-tab {
  border-radius: 8px !important;
  font-weight: 650 !important;
}

.settings-tab.active {
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16,43,62,.055) !important;
}

/* ---------- Modals ---------- */
.modal-backdrop {
  background: rgba(11, 29, 42, .38) !important;
  backdrop-filter: blur(8px) !important;
}

.modal {
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(10, 30, 44, .20) !important;
  background: #fff !important;
}

.modal-header {
  border-bottom-color: var(--v105-line) !important;
  background: #fff !important;
}

.modal-footer {
  border-top-color: var(--v105-line) !important;
  background: #fbfcfd !important;
}

/* ---------- Back links and small affordances ---------- */
.back-link {
  margin-bottom: 12px !important;
  color: #7a8a96 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

.back-link:hover {
  color: var(--v105-text) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 218px minmax(0,1fr) !important;
  }
}

@media (max-width: 820px) {
  .main {
    padding: 0 12px calc(26px + env(safe-area-inset-bottom)) !important;
  }

  .topbar {
    margin-bottom: 12px !important;
  }

  .profile-header {
    padding: 16px !important;
  }

  .profile-card-body,
  .settings-section-body,
  .report-card-body {
    padding: 13px !important;
  }

  .transaction-profile-tabs {
    border-radius: 10px !important;
  }
}

/* =========================================================
   CRM 106 — READABILITY PASS
   Preserve CRM 105 visual design/density while raising the
   minimum practical size of secondary UI text across the CRM.
   ========================================================= */

/* Global secondary text / labels */
.nav-label {
  font-size: 10.5px !important;
  letter-spacing: .035em !important;
}

label,
.field > span,
.form-field > span,
.settings-field > span,
.modal label {
  font-size: 11.5px !important;
}

small,
.helper-text,
.field-help,
.form-help,
.input-help,
.settings-help,
.muted,
.subtle,
.meta-text {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

/* Table headings were especially undersized in the minimalist pass */
thead th,
.task-table th,
.transaction-table th,
.document-admin-table th {
  font-size: 10.5px !important;
  letter-spacing: .025em !important;
}

/* Common compact badges / pills */
.status-pill,
.transaction-type-pill,
.lead-priority-pill,
.lead-status-pill,
.submission-form-chip,
.team-login-pill,
.level-chip,
.badge,
.task-category-pill,
.task-priority-pill,
.task-status-pill,
.document-admin-status,
.document-signing-status,
.signing-mini-status {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

/* Dashboard / report micro-labels */
.dashboard-kpi-label,
.report-kpi-label,
.team-summary-label,
.task-summary-card span,
.task-summary-card small,
.popby-summary-card span,
.popby-summary-card small,
.open-house-checkin-summary span,
.infrastructure-summary-card span,
.flodesk-integration-stat span {
  font-size: 10.5px !important;
}

/* Task Hub — keep compact rows but make the working data easy to scan */
.task-automation-note {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.task-title-button strong {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

.task-title-button small,
.task-created-by {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

.task-category-pill,
.task-priority-pill,
.task-status-pill {
  min-height: 23px !important;
  padding-inline: 9px !important;
  font-size: 10px !important;
}

.task-assignee-name,
.task-due {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}

.task-assignee-avatar .team-avatar {
  font-size: 9.5px !important;
}

.task-text-button {
  font-size: 10px !important;
}

.sms-completion-task span {
  font-size: 10px !important;
}

.task-filters-toggle,
.task-advanced-filters select,
.task-advanced-filters button {
  font-size: 10.5px !important;
}

.task-filters-count {
  font-size: 9.5px !important;
}

/* Client / transaction list secondary information */
.client-quick-action,
.client-filters-toggle,
.client-advanced-filters select,
.client-advanced-filters button,
.client-toolbar-meta #clientResultsText,
.client-toolbar-meta .client-view-switch button,
.client-level-picker-title,
.inline-menu-picker-title,
.deleted-record-filter,
.deleted-record-type,
.deleted-record-meta,
.new-client-primary-grid label,
.new-client-family-grid .field > span,
.new-client-family-empty,
.new-client-family-row-header strong {
  font-size: 10.5px !important;
}

.client-level-picker-copy small,
.inline-menu-picker-option-copy small,
.call-contact-main small,
.multi-contact-main small {
  font-size: 10.5px !important;
}

.call-log-details span,
.call-log-details strong,
.call-log-result strong,
.call-contact-phone,
.multi-contact-value {
  font-size: 10.5px !important;
}

/* Quick Find / banners */
.global-quick-find-shortcut,
.global-quick-find-esc,
.global-quick-find-group-label,
.global-quick-find-result-type,
.global-quick-find-footer,
#viewAsBannerText {
  font-size: 10px !important;
}

/* Pop-by / opportunities */
.popby-kicker,
.popby-status-tab,
.popby-list-heading p,
.popby-map-header p,
.popby-missing-address-badge,
.popby-level-badge,
.popby-address,
.popby-agent-cell,
.popby-contact-button,
.popby-delivery-meta,
.popby-delivery-meta strong,
.popby-map-legend,
.popby-campaign-rule,
.opportunity-client-result-main small,
.opportunity-client-level,
.opportunity-add-client-result small,
.opportunity-client-selected {
  font-size: 10.5px !important;
}

/* Settings / team / integration microcopy */
.email-template-scope-note,
.email-template-owner-note,
.team-member-admin-visible-title,
.team-member-role-badge,
.team-active-control,
.team-member-admin-section-title,
.team-admin-field > span,
.team-member-admin-footer .settings-small-btn,
#settingsPanelTeam .team-email-summary-main strong,
#settingsPanelTeam .team-email-summary-main span,
#settingsPanelTeam .team-email-summary-stats span,
.infra-risk,
.infrastructure-eyebrow,
.flodesk-segment-row span,
.flodesk-preview-summary span,
.flodesk-level-metrics span,
.flodesk-last-sync-grid span,
.myhomeiq-test-result-grid span,
.myhomeiq-preview-grid span,
.myhomeiq-last-sync-grid span,
.myhomeiq-conflict-row span {
  font-size: 10.5px !important;
}

/* Transaction document / signing list metadata — preserve the dense document layout */
.transaction-document-row-meta,
.transaction-document-group-header span,
.transaction-document-group-add,
.transaction-document-inline-action,
.transaction-document-group-empty,
.transaction-document-file-summary span,
.master-library-result-row span,
.master-library-section-title span,
.master-library-result-info span,
.document-library-preview-list span,
.transaction-document-prep-summary-counts span,
.transaction-document-prep-section-head p,
.transaction-document-prep-field-copy small,
.transaction-document-prep-signer span,
.transaction-document-editor-subtitle,
.transaction-document-editor-action,
.transaction-document-editor-sign,
.transaction-document-editor-share {
  font-size: 10px !important;
  line-height: 1.3 !important;
}

.transaction-document-row-actions .document-admin-status {
  font-size: 9.5px !important;
}

.transaction-document-menu-popover button,
.transaction-document-selection-toolbar strong,
.transaction-document-selection-toolbar button {
  font-size: 10.5px !important;
}

/* Email Activity */
.transaction-email-history-note,
.transaction-email-history-meta,
.transaction-email-history-date {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

.transaction-email-history-badge {
  min-height: 20px !important;
  font-size: 9.5px !important;
}

.transaction-email-history-subject {
  font-size: 12px !important;
}

/* Utility / bulk-action microcopy */
.bulk-command-count,
.bulk-command-field > span,
.bulk-command-select,
.bulk-command-button,
#clientsView .client-bulk-selection-summary strong,
#clientsView .client-bulk-select,
#clientsView .client-bulk-button,
.public-listing-drive-copy p,
.public-listing-drive-error,
.open-house-visitor-tags span {
  font-size: 10.5px !important;
}

/* Keep mobile readable as well without making cards oversized */
@media (max-width: 820px) {
  .task-title-button strong {
    font-size: 13px !important;
  }

  .task-title-button small,
  .task-assignee-name,
  .task-due,
  .task-mobile-meta .task-due,
  .task-mobile-meta .task-category-pill {
    font-size: 10.5px !important;
  }
}


/* ============================================================
   CRM 109 — transaction document workflow polish
   ============================================================ */
/* Keep the template picker actions available while the list scrolls. */
.master-library-modal {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.master-library-modal > .modal-header,
.master-library-modal > .modal-footer {
  flex: 0 0 auto;
}
.master-library-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
}
.master-library-modal > .modal-footer {
  position: relative;
  z-index: 8;
  box-shadow: 0 -8px 22px rgba(16,43,62,.06);
}

/* Give each transaction folder a clearer visual break without adding bulk. */
.transaction-document-groups {
  gap: 0 !important;
}
.transaction-document-group + .transaction-document-group {
  margin-top: 12px !important;
}
.transaction-document-group-header {
  border-radius: 8px 8px 0 0;
}
.transaction-document-group.collapsed .transaction-document-group-header {
  border-radius: 8px;
}
.transaction-document-group.collapsed .transaction-document-list {
  display: none !important;
}
.transaction-document-folder-toggle {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6d8190;
  cursor: pointer;
}
.transaction-document-folder-toggle span {
  display: block;
  font-size: 17px !important;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .16s ease;
}
.transaction-document-group.collapsed .transaction-document-folder-toggle span {
  transform: rotate(0deg);
}
.transaction-document-folder-toggle:hover {
  background: #edf3f6;
  color: #16364b;
}
.transaction-document-folder-toggle:focus-visible {
  outline: 2px solid rgba(43,109,160,.35);
  outline-offset: 1px;
}
@media (max-width: 720px) {
  .transaction-document-group + .transaction-document-group {
    margin-top: 9px !important;
  }
}

/* ============================================================
   CRM 110 — cleaner transaction document folders
   ============================================================ */
/* Use whitespace and typography instead of card outlines. */
.transaction-document-groups {
  gap: 0 !important;
}
.transaction-document-group {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.transaction-document-group + .transaction-document-group {
  margin-top: 18px !important;
}
.transaction-document-group-header,
.transaction-document-group.collapsed .transaction-document-group-header {
  min-height: 38px !important;
  padding: 6px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Reserve the same left gutter for the accordion control on folder and file rows.
   This keeps every document checkbox directly below the folder select-all checkbox. */
.transaction-document-group-title {
  gap: 7px !important;
}
.transaction-document-folder-toggle {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}
.transaction-document-group-header .transaction-document-checkbox {
  flex: 0 0 16px;
}
.transaction-document-row {
  padding-left: 35px !important;
}

/* Stronger, cleaner folder hierarchy. */
.transaction-document-group-header strong {
  color: var(--accent, #b89546) !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
}
.transaction-document-group-header .transaction-document-folder-icon {
  color: var(--accent, #b89546) !important;
  font-size: 12px !important;
}
.transaction-document-group-header .transaction-document-group-title > span:last-child {
  color: #82909a !important;
  font-size: 10px !important;
  font-weight: 800;
}
.transaction-document-folder-toggle {
  color: #83919b !important;
}
.transaction-document-folder-toggle:hover {
  background: #f4f1e8 !important;
  color: #8f6d20 !important;
}

/* Keep file rows quiet; only a faint separator between actual documents. */
.transaction-document-list {
  border: 0 !important;
  background: transparent !important;
}
.transaction-document-row {
  border: 0 !important;
  border-bottom: 1px solid rgba(17,40,60,.065) !important;
  background: transparent !important;
}
.transaction-document-row:last-child {
  border-bottom: 0 !important;
}
.transaction-document-row:hover {
  background: rgba(17,40,60,.018) !important;
}
.transaction-document-group-empty {
  border: 0 !important;
  padding-left: 35px !important;
}

@media (max-width: 720px) {
  .transaction-document-group + .transaction-document-group {
    margin-top: 14px !important;
  }
  .transaction-document-row,
  .transaction-document-group-empty {
    padding-left: 33px !important;
  }
  .transaction-document-group-header strong {
    font-size: 11.5px !important;
  }
}

/* ============================================================
   CRM 111 — Dotloop-inspired document header + selection actions
   ============================================================ */
/* One clear page title; remove the redundant Buyer/Seller Document File summary. */
#transactionDocumentFileCard {
  overflow: visible !important;
}
#transactionDocumentFileCard .transaction-documents-main-header {
  min-height: 64px;
  padding: 15px 20px !important;
  border-bottom: 1px solid rgba(17,40,60,.07) !important;
  background: #fff !important;
}
#transactionDocumentFileCard .transaction-documents-main-header > span {
  color: var(--dark) !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
#transactionDocumentFileCard .profile-card-body {
  padding-top: 12px !important;
}
.transaction-document-file-summary {
  display: none !important;
}

/* Selection mode: clean action strip, inspired by Dotloop's contextual toolbar. */
.transaction-document-selection-toolbar {
  position: sticky !important;
  top: 6px !important;
  z-index: 28 !important;
  min-height: 46px !important;
  margin: 0 0 14px !important;
  padding: 7px 10px 7px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17,40,60,.09) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 8px 18px rgba(17,40,60,.045) !important;
  backdrop-filter: blur(10px);
}
.transaction-document-selection-toolbar strong {
  color: var(--dark) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  white-space: nowrap;
}
.transaction-document-selection-toolbar > div {
  gap: 2px !important;
}
.transaction-document-selection-toolbar button {
  min-height: 31px !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #398ddd !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.transaction-document-selection-toolbar button:hover:not(:disabled) {
  background: rgba(57,141,221,.08) !important;
}
.transaction-document-selection-toolbar button.subtle {
  color: #7f8d97 !important;
}
.transaction-document-selection-toolbar button:disabled {
  color: #bec7cd !important;
  cursor: default !important;
  opacity: .72;
}

/* Start the actual folder list immediately beneath the document header. */
.transaction-document-groups {
  padding-top: 0 !important;
}

@media (max-width: 720px) {
  #transactionDocumentFileCard .transaction-documents-main-header {
    min-height: 56px;
    padding: 12px 13px !important;
  }
  #transactionDocumentFileCard .transaction-documents-main-header > span {
    font-size: 20px !important;
  }
  .transaction-document-selection-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  .transaction-document-selection-toolbar > div {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
  }
  .transaction-document-selection-toolbar button {
    white-space: nowrap;
  }
}

/* ============================================================
   CRM 112 — top breathing room + balanced Documents workspace
   ============================================================ */
/* Give the entire application a little breathing room from the browser edge. */
.main {
  padding-top: 18px !important;
}
.sidebar {
  padding-top: 24px !important;
}
.sidebar .brand-mark.sidebar-wordmark-wrap {
  padding-top: 6px !important;
}

/* Documents + Signing History share the wide desktop canvas instead of
   stacking into a long single column with a large unused middle area. */
.transaction-documents-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
  min-width: 0;
}
.transaction-documents-workspace-grid > * {
  min-width: 0;
}
.transaction-signing-history-card {
  align-self: start;
}
.transaction-signing-history-card .profile-card-header {
  gap: 10px !important;
  flex-wrap: wrap;
}
.transaction-signing-history-card .profile-card-header > span {
  white-space: nowrap;
}
.transaction-signing-history-card .profile-card-header .mini-btn {
  margin-left: auto;
  white-space: nowrap;
}
.transaction-signing-history-card .profile-card-body {
  padding: 13px 15px 16px !important;
}
.transaction-signing-history-card .signing-package-row {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 11px 0 !important;
}
.transaction-signing-history-card .signing-package-copy {
  width: 100%;
  flex: 1 1 auto !important;
}
.transaction-signing-history-card .signing-package-copy strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35;
}
.transaction-signing-history-card .signing-package-actions {
  width: 100%;
  justify-content: flex-start !important;
}
.transaction-signing-history-card .signing-package-files {
  gap: 7px !important;
}

/* Once the file list has a companion history panel, keep the document rows
   dense and readable rather than stretching metadata across the whole screen. */
.transaction-documents-workspace-grid #transactionDocumentFileCard .transaction-document-row-main {
  min-width: 0;
}
.transaction-documents-workspace-grid #transactionDocumentFileCard .transaction-document-row-meta {
  min-width: 0;
}

@media (max-width: 1280px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
  }
  .transaction-signing-history-card .profile-card-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .transaction-signing-history-card .profile-card-header .mini-btn {
    margin-left: 0;
  }
}

@media (max-width: 1050px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: 1fr;
  }
  .transaction-signing-history-card .profile-card-header {
    align-items: center !important;
    flex-direction: row !important;
  }
  .transaction-signing-history-card .profile-card-header .mini-btn {
    margin-left: auto;
  }
}

@media (max-width: 820px) {
  .main {
    padding-top: 12px !important;
  }
  .sidebar {
    padding-top: 16px !important;
  }
}

/* ============================================================
   CRM 113 — compact private docs above Signing History
   ============================================================ */
.transaction-documents-side-column {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.transaction-private-documents-card {
  align-self: start;
}
.transaction-private-documents-card .profile-card-header {
  gap: 10px !important;
  flex-wrap: wrap;
  padding: 14px 15px !important;
}
.transaction-private-documents-card .profile-card-header > span {
  white-space: normal;
  line-height: 1.25;
}
.transaction-private-documents-card .profile-card-header .mini-btn {
  margin-left: auto;
  white-space: nowrap;
}
.transaction-private-documents-card .profile-card-body {
  padding: 11px 15px 13px !important;
}
.transaction-private-documents-card .file-empty {
  padding: 4px 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  line-height: 1.45;
}
.transaction-private-documents-card .private-doc-list {
  gap: 0 !important;
}
.transaction-private-documents-card .private-doc-row,
.transaction-private-documents-card .private-document-row {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

@media (max-width: 1280px) {
  .transaction-private-documents-card .profile-card-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .transaction-private-documents-card .profile-card-header .mini-btn {
    margin-left: 0;
  }
}

@media (max-width: 1050px) {
  .transaction-documents-side-column {
    gap: 14px;
  }
  .transaction-private-documents-card .profile-card-header {
    align-items: center !important;
    flex-direction: row !important;
  }
  .transaction-private-documents-card .profile-card-header .mini-btn {
    margin-left: auto;
  }
}


/* CRM115 — guided Buyer/Seller estimate workflow */
.estimate-workflow-section {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid #e5e9ec;
  border-radius: 13px;
  background: #fbfcfc;
}
.estimate-context-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.estimate-context-wide { grid-column: span 2; }
.estimate-document-options {
  margin-top: 18px;
  padding: 14px;
  border-radius: 13px;
  background: #faf7ef;
  border: 1px solid #eee3c8;
}
.estimate-document-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #17324a;
  font-weight: 800;
  cursor: pointer;
}
.estimate-document-toggle input { width: 18px; height: 18px; accent-color: #b89132; }
.estimate-document-options .workflow-field { margin-top: 12px; max-width: 340px; }
.estimate-signature-ready-note {
  margin-top: 10px;
  color: #6f7780;
  font-size: 11px;
  line-height: 1.5;
}
.estimate-agent-card-copy { color:#73808c; font-size:12px; line-height:1.5; }
@media (max-width: 760px) {
  .estimate-context-grid { grid-template-columns: 1fr; }
  .estimate-context-wide { grid-column: auto; }
}


/* =========================================================
   CRM 118 — UNDER CONTRACT SEARCH + SOCIAL PHOTO
   ========================================================= */
#underContractView .under-contract-client-card {
  overflow: visible;
  position: relative;
  z-index: 12;
}

#underContractView .under-contract-client-card .workflow-card-body {
  position: relative;
  z-index: 13;
}

#underContractView .under-contract-client-picker {
  position: relative;
  width: 100%;
  z-index: 20;
}

#underContractView .under-contract-client-search {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1b374b;
  font-size: 13px !important;
  font-weight: 650;
}

#underContractView .under-contract-client-picker .opportunity-client-results {
  z-index: 5000;
}

#underContractView #ucSocialPhoto {
  padding: 8px 10px;
  min-height: 44px;
  cursor: pointer;
}

#underContractView #ucSocialPhoto::file-selector-button {
  margin-right: 10px;
  border: 1px solid #d7e0e5;
  border-radius: 8px;
  padding: 7px 10px;
  background: #f7f9fa;
  color: #173247;
  font-weight: 800;
  cursor: pointer;
}

#underContractView .field-optional {
  color: #8a99a4;
  font-size: .9em;
  font-weight: 650;
}


/* =========================================================
   CRM 119 — FLOATING POPOVERS / NO TABLE CLIPPING
   Connected Database inline menus render at the document layer
   on desktop so horizontal table/card overflow cannot crop them.
   ========================================================= */
@media (min-width: 701px) {
  .client-level-picker.crm-floating-popover,
  .inline-menu-picker.crm-floating-popover {
    position: fixed !important;
    z-index: 20000 !important;
    margin: 0 !important;
  }

  .client-level-picker.crm-floating-popover.opens-upward::before,
  .inline-menu-picker.crm-floating-popover.opens-upward::before {
    top: auto !important;
    bottom: -5px !important;
    transform: rotate(225deg) !important;
  }

  .client-level-picker.crm-floating-popover,
  .inline-menu-picker.crm-floating-popover {
    max-height: min(430px, calc(100vh - 20px));
  }

  .client-level-picker.crm-floating-popover {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .inline-menu-picker.crm-floating-popover .inline-menu-picker-options {
    max-height: min(320px, calc(100vh - 85px));
  }
}

/* =========================================================
   CRM 120 — I HAVE A NEW LISTING / LISTING LAUNCH FORM
   ========================================================= */
#newListingView .listing-launch-form{
  max-width:1180px;
  margin:0 auto;
}
#newListingView .listing-launch-form .workflow-card{
  margin-bottom:18px;
}
#newListingView .listing-launch-form .workflow-card-header{
  padding:18px 20px 14px;
}
#newListingView .listing-launch-form .workflow-card-body{
  padding:20px;
}
#newListingView .listing-launch-form .workflow-card-header h3{
  font-size:16px;
  letter-spacing:-.01em;
}
#newListingView .listing-launch-form .workflow-card-header p{
  font-size:11.5px;
  max-width:820px;
}
#newListingView .listing-launch-date-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:16px;
}
#newListingView .listing-launch-inline-grid{
  margin-top:16px;
  align-items:end;
}
#newListingView .listing-date-required label::after{
  content:' *';
  color:#b44b43;
}
#newListingView .listing-prep-needs-grid,
#newListingView .listing-marketing-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
#newListingView .listing-marketing-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
#newListingView .workflow-check{
  min-width:0;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
#newListingView label.workflow-check:hover{
  border-color:#d3bd82;
  background:#fffdf8;
}
#newListingView label.workflow-check:has(input:checked){
  border-color:#d2b76c;
  background:#fff9e9;
  box-shadow:0 0 0 1px rgba(183,145,52,.05);
}
#newListingView .workflow-check span{
  display:grid;
  gap:2px;
  min-width:0;
  color:#53606a;
  font-size:11px;
  line-height:1.35;
}
#newListingView .workflow-check span strong{
  color:#173248;
  font-size:11.5px;
  line-height:1.25;
}
#newListingView .workflow-check span small{
  color:#82909b;
  font-size:9.5px;
  line-height:1.35;
}
#newListingView .listing-prep-other-field,
#newListingView .listing-marketing-notes,
#newListingView .listing-approval-check{
  margin-top:14px;
}
#newListingView #listingHoaFields,
#newListingView #listingPhotographyFields,
#newListingView #listingMarketingFields{
  padding-top:2px;
}
#newListingView .workflow-choice label{
  min-height:40px;
  padding:9px 15px;
  font-size:11.5px;
}
#newListingView .workflow-field > label{
  font-size:11.5px;
}
#newListingView .workflow-field input,
#newListingView .workflow-field select,
#newListingView .workflow-field textarea{
  font-size:12.5px;
}
#newListingView .workflow-submit-bar{
  margin-top:18px;
}
@media (max-width:1100px){
  #newListingView .listing-prep-needs-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:850px){
  #newListingView .listing-prep-needs-grid,
  #newListingView .listing-marketing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #newListingView .listing-launch-date-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:700px){
  #newListingView .listing-prep-needs-grid,
  #newListingView .listing-marketing-grid{
    grid-template-columns:1fr;
  }
  #newListingView .listing-launch-form .workflow-card-header,
  #newListingView .listing-launch-form .workflow-card-body{
    padding-left:16px;
    padding-right:16px;
  }
}


/* CRM 121 — simplified listing launch form */
.listing-launch-form .listing-client-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.listing-launch-form .listing-client-action {
  appearance: none;
  border: 1px solid #d7dee5;
  background: #fff;
  color: #102c40;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.listing-launch-form .listing-client-action.active,
.listing-launch-form .listing-client-action:hover {
  background: #102f43;
  border-color: #102f43;
  color: #fff;
}
.listing-launch-form .listing-premls-question {
  padding-top: 4px;
}
.listing-launch-form .listing-photo-package-row {
  align-items: stretch;
}
.listing-launch-form .workflow-check.compact {
  min-height: 100%;
  margin: 0;
}
.listing-photo-availability-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #edf0f2;
}
.listing-photo-availability-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  color: #102c40;
}
.listing-photo-availability-heading strong {
  font-size: 15px;
}
.listing-photo-availability-heading span {
  color: #7c8c99;
  font-size: 13px;
}
.listing-photo-availability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.listing-photo-window {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 8px;
  padding: 14px 12px 10px;
  border: 1px solid #e4e9ed;
  border-radius: 14px;
  background: #fbfcfc;
}
.listing-photo-window-label {
  position: absolute;
  top: -9px;
  left: 11px;
  background: #fbfcfc;
  padding: 0 6px;
  color: #9a762e;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.listing-photo-window .workflow-field label {
  font-size: 12px;
}
.listing-photo-window .workflow-field input {
  min-width: 0;
}
.listing-photo-notes {
  margin-top: 12px;
}
@media (max-width: 1180px) {
  .listing-photo-availability-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .listing-launch-form .listing-client-actions { flex-wrap: wrap; }
  .listing-photo-window { grid-template-columns: 1fr; }
}


/* =========================================================
   CRM 122 — COMPACT LISTING FORM DENSITY PASS
   ========================================================= */
@media (min-width: 961px) {
  #newListingView .listing-launch-form {
    max-width: 1320px;
  }

  #newListingView .listing-launch-form .workflow-card {
    margin-bottom: 14px;
  }

  #newListingView .listing-launch-form .workflow-card-header {
    padding: 14px 18px 10px;
  }

  #newListingView .listing-launch-form .workflow-card-body {
    padding: 16px 18px 18px;
  }

  #newListingView .listing-launch-form .workflow-card-header p {
    margin-top: 2px;
  }

  #newListingView .listing-property-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 14px;
    align-items: end;
  }

  #newListingView .listing-property-grid > .span-2 {
    grid-column: 1 / -1;
  }

  #newListingView .listing-property-grid #listingHoaFields {
    grid-column: 1 / -1;
  }

  #newListingView .listing-property-grid #listingHoaFields .workflow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  #newListingView .listing-details-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
  }

  #newListingView .listing-details-grid > .span-2 {
    grid-column: span 2;
  }

  #newListingView .listing-details-grid .listing-premls-question {
    grid-column: span 2;
    padding-top: 0;
  }

  #newListingView .listing-details-grid #listingComingSoonDateWrap,
  #newListingView .listing-details-grid #listingListDate {
    min-width: 0;
  }

  #newListingView .listing-photo-options-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }

  #newListingView .listing-photo-availability-block {
    margin-top: 14px;
    padding-top: 14px;
  }

  #newListingView .listing-photo-availability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  #newListingView .listing-photo-window {
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 6px;
    padding: 11px 9px 8px;
    border-radius: 10px;
  }

  #newListingView .listing-photo-window .workflow-field {
    gap: 3px;
  }

  #newListingView .listing-photo-window .workflow-field label {
    font-size: 10.5px;
    margin-bottom: 2px;
  }

  #newListingView .listing-photo-window .workflow-field input {
    min-height: 40px;
    padding: 8px 9px;
  }

  #newListingView .listing-photo-notes {
    margin-top: 9px;
  }

  #newListingView .listing-marketing-grid {
    gap: 8px;
  }

  #newListingView .workflow-field textarea {
    min-height: 78px;
  }

  #newListingView .workflow-field > label {
    margin-bottom: 5px;
  }

  #newListingView .workflow-choice-row {
    gap: 7px;
  }

  #newListingView .workflow-choice label {
    min-height: 38px;
    padding: 8px 13px;
  }
}

@media (min-width: 961px) and (max-width: 1220px) {
  #newListingView .listing-property-grid,
  #newListingView .listing-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #newListingView .listing-property-grid > .span-2,
  #newListingView .listing-property-grid #listingHoaFields {
    grid-column: 1 / -1;
  }

  #newListingView .listing-details-grid > .span-2,
  #newListingView .listing-details-grid .listing-premls-question {
    grid-column: span 2;
  }
}

/* CRM123 — conditional photography + staging */
#newListingView .listing-staging-availability-block { margin-top: 0; }
#newListingView #listingPhotographyFields.hidden,
#newListingView #listingStagingFields.hidden { display: none !important; }

/* CRM124 — Listing photography capture questions */
.listing-photo-capture-grid {
  margin-top: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.listing-photo-capture-grid textarea {
  min-height: 72px;
  resize: vertical;
}
@media (min-width: 1100px) {
  .listing-photo-package-row { flex-wrap: wrap; }
}

/* CRM127 — repaired listing CSS + compact compensation + single-outline search */

/* Client search: one visible rectangle only. The input itself has no chrome,
   and focus changes only the outer border color (no second focus ring). */
#newListingView .listing-client-picker .opportunity-client-search-shell {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 13px !important;
  overflow: visible !important;
  border: 1px solid #d8e1e6 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#newListingView .listing-client-picker .opportunity-client-search-shell:focus-within {
  border-color: #c9aa58 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#newListingView #listingClientSearch,
#newListingView #listingClientSearch:hover,
#newListingView #listingClientSearch:focus,
#newListingView #listingClientSearch:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #1b374b !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}
#newListingView #listingClientSearch::placeholder {
  color: #9aa7b0 !important;
  opacity: 1 !important;
}
#newListingView #listingClientSearch::-webkit-search-decoration,
#newListingView #listingClientSearch::-webkit-search-cancel-button,
#newListingView #listingClientSearch::-webkit-search-results-button,
#newListingView #listingClientSearch::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

/* Compact compensation editor. Toggle is intentionally small and the value
   below reads like a sentence rather than a full-width form control. */
#newListingView .listing-compensation-field {
  align-self: start !important;
}
#newListingView .listing-compensation-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: 360px !important;
  min-height: 0 !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#newListingView .listing-compensation-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  width: auto !important;
  padding: 2px !important;
  margin: 0 !important;
  border: 1px solid #d9e0e5 !important;
  border-radius: 9px !important;
  background: #f6f8f9 !important;
  box-shadow: none !important;
}
#newListingView .listing-compensation-toggle-option {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#newListingView .listing-compensation-toggle-option > input[type="radio"] {
  position: absolute !important;
  inset: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#newListingView .listing-compensation-toggle-option > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 29px !important;
  min-height: 29px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #536c7d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
#newListingView .listing-compensation-toggle-option > input[type="radio"]:checked + span {
  background: #123247 !important;
  color: #fff !important;
}
#newListingView .listing-compensation-sentence {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  width: auto !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1b374b !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
#newListingView .listing-compensation-sentence.hidden {
  display: none !important;
}
#newListingView .listing-compensation-sentence > span {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1b374b !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
#newListingView .listing-comp-sentence-number,
#newListingView .listing-comp-sentence-money,
#newListingView .listing-comp-sentence-select {
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: 29px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #bfcbd3 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #132f43 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 27px !important;
}
#newListingView .listing-comp-sentence-number {
  width: 32px !important;
  text-align: right !important;
}
#newListingView .listing-comp-sentence-money {
  width: 88px !important;
  text-align: left !important;
}
#newListingView .listing-comp-sentence-select {
  width: 62px !important;
  min-width: 62px !important;
  padding-right: 16px !important;
  cursor: pointer !important;
}
#newListingView .listing-comp-sentence-number:focus,
#newListingView .listing-comp-sentence-money:focus,
#newListingView .listing-comp-sentence-select:focus {
  border-bottom-color: #c9aa58 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
#newListingView .listing-comp-sentence-number::-webkit-inner-spin-button,
#newListingView .listing-comp-sentence-number::-webkit-outer-spin-button,
#newListingView .listing-comp-sentence-money::-webkit-inner-spin-button,
#newListingView .listing-comp-sentence-money::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
#newListingView .listing-comp-sentence-number,
#newListingView .listing-comp-sentence-money {
  -moz-appearance: textfield !important;
}

/* Keep the merged Staging + Photography refinements from CRM125. */
#newListingView .listing-service-subsection-title {
  margin: 0 0 10px !important;
  color: #a47d24 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}
#newListingView .listing-service-divider {
  height: 1px !important;
  margin: 18px 0 !important;
  background: #edf0f2 !important;
}
#newListingView .listing-staging-photo-card .listing-photo-availability-block {
  margin-top: 12px !important;
}

@media (max-width: 700px) {
  #newListingView #listingClientSearch { font-size: 16px !important; }
  #newListingView .listing-compensation-control { max-width: 100% !important; }
  #newListingView .listing-compensation-sentence {
    flex-wrap: wrap !important;
    white-space: normal !important;
    font-size: 14px !important;
  }
}

/* =========================================================
   CRM 128 — Listing details ordering + cleaner compensation
   ========================================================= */
#newListingView .listing-details-top-row {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(320px, 1.25fr) minmax(190px, .7fr);
  gap: 16px;
  align-items: end;
}
#newListingView .listing-details-question-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  margin-top: 18px;
}
#newListingView .listing-details-dates-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}
#newListingView .listing-details-dates-row > .hidden {
  display: none !important;
}

/* Editable commission reads like a sentence — no underline/chrome. */
#newListingView .listing-comp-sentence-number,
#newListingView .listing-comp-sentence-money,
#newListingView .listing-comp-sentence-select {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: #f4f7f8 !important;
  border-radius: 6px !important;
  height: 30px !important;
  line-height: 30px !important;
}
#newListingView .listing-comp-sentence-number:focus,
#newListingView .listing-comp-sentence-money:focus,
#newListingView .listing-comp-sentence-select:focus {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 0 0 2px rgba(201,170,88,.24) !important;
  outline: 0 !important;
}
#newListingView .listing-comp-sentence-number {
  width: 38px !important;
  text-align: center !important;
  padding: 0 5px !important;
}
#newListingView .listing-comp-sentence-select {
  width: 68px !important;
  min-width: 68px !important;
  padding: 0 18px 0 7px !important;
}

#newListingView .listing-transaction-flat-fee-field {
  min-width: 0;
}
#newListingView .listing-flat-fee-input-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 150px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #d5dee5;
  border-radius: 10px;
  background: #fff;
  color: #18364a;
  box-sizing: border-box;
}
#newListingView .listing-flat-fee-input-wrap > span {
  font-size: 15px;
  font-weight: 750;
}
#newListingView #listingFlatFeeAmount {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #18364a !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}
#newListingView #listingFlatFeeAmount::-webkit-inner-spin-button,
#newListingView #listingFlatFeeAmount::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
#newListingView .listing-flat-fee-input-wrap:focus-within {
  border-color: #c9aa58;
  box-shadow: 0 0 0 2px rgba(201,170,88,.14);
}

@media (min-width: 961px) {
  #newListingView .listing-details-dates-row:has(#listingComingSoonDateWrap.hidden) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  #newListingView .listing-details-top-row,
  #newListingView .listing-details-question-row,
  #newListingView .listing-details-dates-row {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  #newListingView .listing-details-top-row,
  #newListingView .listing-details-question-row,
  #newListingView .listing-details-dates-row {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   CRM 129 — Inline listing compensation toggle
   ========================================================= */
#newListingView .listing-compensation-control {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: auto !important;
  max-width: none !important;
}
#newListingView .listing-compensation-toggle {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#newListingView .listing-compensation-sentence {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
@media (max-width: 700px) {
  #newListingView .listing-compensation-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}


/* =========================================================
   CRM 131 — Listing Launch checklist + home updates question
   ========================================================= */
#newListingView .listing-updates-question {
  margin-top: 2px;
}
#newListingView #listingHomeUpdatesFields textarea {
  min-height: 66px;
  resize: vertical;
}


/* CRM 132 — server-side System Google integration */
.system-google-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.system-google-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.system-google-client-setup {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.system-google-client-grid {
  align-items: end;
}
@media (max-width: 760px) {
  .system-google-status-row { align-items: stretch; flex-direction: column; }
  .system-google-actions { justify-content: flex-start; }
  .system-google-client-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   CRM 133 — keep selected Settings tab readable
   ========================================================= */
.settings-tabs .settings-tab.active {
  background: #ffffff !important;
  color: #17364d !important;
  border: 1px solid #d7c27a !important;
  box-shadow: 0 0 0 2px rgba(215, 194, 122, .20) !important;
}
.settings-tabs .settings-tab.active:hover {
  color: #17364d !important;
  background: #ffffff !important;
}

/* =========================================================
   CRM 135 — document Share + viewport-aware action menus
   ========================================================= */
.transaction-document-menu.open-up .transaction-document-menu-popover {
  top: auto !important;
  bottom: calc(100% + 3px) !important;
}
.transaction-document-selection-toolbar button.transaction-document-share-selection {
  min-width: 84px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  border-radius: 999px !important;
  background: #55a9ef !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(57,141,221,.18) !important;
}
.transaction-document-selection-toolbar button.transaction-document-share-selection:hover:not(:disabled) {
  background: #398ddd !important;
}

/* ============================================================
   CRM 137 — field clipboard + marquee multi-selection
   ============================================================ */
.master-form-designer-page-overlay,
.transaction-document-editor-page-overlay {
  touch-action: none;
}

.master-form-designer-selection-marquee,
.transaction-document-selection-marquee {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  border: 1.5px dashed #173a57;
  background: rgba(23, 58, 87, .08);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72) inset;
}

.master-form-designer-field-box.selected {
  z-index: 9;
}

.master-form-designer-edit-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.master-form-designer-edit-actions button {
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
}
.master-form-designer-edit-actions button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.master-form-designer-keyboard-hint kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 4px;
  border: 1px solid rgba(19,43,63,.18);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  color: #173a57;
  font: inherit;
  font-weight: 850;
  text-align: center;
}

.transaction-document-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.transaction-document-edit-actions .transaction-document-format-button {
  width: auto;
  min-width: 46px;
  padding: 0 8px;
}
.transaction-document-editor-field.is-active {
  z-index: 12;
}
.transaction-document-editor-field.is-group-selected:not(.is-primary-selected) {
  border-color: #0d83d5;
  box-shadow: 0 0 0 1px rgba(13,131,213,.16);
}
.transaction-document-editor-field.is-primary-selected {
  border-color: #0d83d5;
  box-shadow: 0 0 0 2px rgba(13,131,213,.24);
}
.transaction-document-editor-field.is-group-selected .transaction-document-field-move-handle {
  display: block;
}
.transaction-document-editor-field.is-group-selected:not(.is-primary-selected) .transaction-document-field-resize-handle {
  display: none;
}
.transaction-document-editor-pages:not(.is-adding-field) .transaction-document-editor-page-overlay,
.master-form-designer-backdrop:not(.is-placing-field) .master-form-designer-page-overlay {
  cursor: default;
}

@media (max-width: 760px) {
  .master-form-designer-edit-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   CRM 138 — typed prefill values in the master field mapper
   ========================================================= */
.master-form-designer-input-help {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: #728291;
  font-weight: 500;
}
.master-form-designer-field-box:not(.checkbox-field) > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* CRM 141: pre-checked master-template checkboxes */
.master-form-designer-checkbox-mark {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #b75a16;
  font-size: clamp(10px, 1.15vw, 18px);
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
}
#masterFormDesignerCheckboxDefaultWrap {
  align-items: flex-start;
}
#masterFormDesignerCheckboxDefaultWrap > span {
  display: grid;
  gap: 3px;
}
#masterFormDesignerCheckboxDefaultWrap .master-form-designer-input-help {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}


/* CRM 145: reliably draw default-checked boxes directly on the PDF.
   Uses CSS geometry instead of a font glyph so the check remains visible
   at small sizes, browser zoom levels, and when the field is not selected. */
.master-form-designer-field-box.checkbox-field.default-checked {
  background: rgba(255, 255, 255, .96) !important;
  border-color: #2c3842 !important;
  box-shadow: inset 0 0 0 1px rgba(44, 56, 66, .28);
}
.master-form-designer-field-box.checkbox-field.default-checked .master-form-designer-checkbox-mark {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 0 !important;
  color: transparent !important;
  overflow: visible !important;
  pointer-events: none;
  z-index: 20;
}
.master-form-designer-field-box.checkbox-field.default-checked .master-form-designer-checkbox-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 32%;
  height: 58%;
  border-right: 3px solid #17232d;
  border-bottom: 3px solid #17232d;
  transform: translate(-50%, -56%) rotate(45deg);
  transform-origin: center;
  box-sizing: border-box;
}
.master-form-designer-field-box.checkbox-field.default-checked.selected .master-form-designer-checkbox-mark::after {
  border-right-color: #101820;
  border-bottom-color: #101820;
}
/* Keep the resize handle from visually reading as the checkbox checkmark. */
.master-form-designer-field-box.checkbox-field.default-checked .master-form-designer-resize-handle {
  z-index: 30;
}

/* ============================================================
   CRM 152 — MOBILE PULL TO REFRESH
   ============================================================ */
.crm-pull-refresh-indicator {
  --pull-distance: 0px;
  position: fixed;
  z-index: 5000;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(16, 46, 67, .12);
  border-radius: 999px;
  background: rgba(255,255,255,.97);
  color: #102e43;
  box-shadow: 0 8px 26px rgba(16, 46, 67, .16);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-56px + var(--pull-distance)), 0);
  transition: opacity .12s ease, transform .08s linear;
  font-size: 11px;
  -webkit-user-select: none;
  user-select: none;
}
.crm-pull-refresh-indicator.visible { opacity: 1; }
.crm-pull-refresh-indicator.ready { border-color: rgba(40,114,84,.28); color: #287254; }
.crm-pull-refresh-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}
.crm-pull-refresh-indicator.refreshing .crm-pull-refresh-icon {
  animation: crm-pull-refresh-spin .7s linear infinite;
}
@keyframes crm-pull-refresh-spin { to { transform: rotate(360deg); } }
@media (min-width: 821px) and (pointer: fine) {
  .crm-pull-refresh-indicator { display: none !important; }
}


/* CRM 153 — transaction document toolbar text button cleanup */
.transaction-document-format-toolbar { align-items:center; }
.transaction-document-edit-actions {
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.transaction-document-edit-actions .transaction-document-format-button {
  width:auto;
  min-width:58px;
  height:32px;
  flex:0 0 auto;
  padding:0 10px;
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.transaction-document-edit-actions .transaction-document-format-button.delete-field {
  min-width:64px;
}
.transaction-document-format-active {
  flex:0 1 190px;
  min-width:120px;
  max-width:220px;
}
@media (max-width: 760px) {
  .transaction-document-edit-actions { gap:4px; }
  .transaction-document-edit-actions .transaction-document-format-button {
    min-width:52px;
    padding:0 8px;
    font-size:9px;
  }
}


/* CRM 154 — keep app notifications out of top action bars */
.crm-toast-region {
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto;
  align-items: flex-end;
}
@media (max-width: 820px) {
  .crm-toast-region {
    top: auto !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    align-items: stretch;
  }
}

/* =========================================================
   CRM 159 — Mobile Leads layout correction
   Keeps desktop leads unchanged. Fixes the phone card grid so
   checkbox, owner avatar and lead copy stay on one row and the
   lead name/description receive the remaining width.
   ========================================================= */
@media (max-width: 700px) {
  #leadsView .lead-table tbody {
    gap: 9px !important;
    padding: 8px 0 12px !important;
  }

  #leadsView .lead-table tbody tr[data-lead-id] {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    min-height: 94px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  #leadsView .lead-table tbody tr[data-lead-id] > td:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 13px 14px 7px !important;
    background: transparent !important;
  }

  #leadsView .lead-mobile-primary {
    display: grid !important;
    grid-template-columns: 24px 38px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #leadsView .lead-row-check {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: 22px !important;
    min-width: 22px !important;
    margin: 0 !important;
  }

  #leadsView .lead-mobile-agent {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 36px !important;
    height: 36px !important;
  }

  #leadsView .lead-mobile-agent .team-avatar.avatar-sm {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  #leadsView .lead-mobile-copy {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #leadsView .lead-name {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #leadsView .lead-mobile-description {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #leadsView .lead-table tbody tr[data-lead-id] > td:nth-child(2),
  #leadsView .lead-table tbody tr[data-lead-id] > td:nth-child(3) {
    min-height: 34px !important;
    border: 0 !important;
  }

  #leadsView .lead-table tbody tr[data-lead-id] > td:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 2px 4px 12px 86px !important;
  }

  #leadsView .lead-table tbody tr[data-lead-id] > td:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    padding: 2px 14px 12px 6px !important;
  }

  #leadsView .lead-status-pill,
  #leadsView .lead-priority {
    min-height: 24px !important;
    padding: 0 10px !important;
    font-size: 8.5px !important;
  }
}

/* =========================================================
   CRM 160 — AGENT NEW LISTING ACCESS + TABLET DASHBOARD
   ========================================================= */

/* New Listing is a core Agent Tools workflow for every active CRM user. */
#formsView #openNewListingForm {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The dashboard's two data-heavy tables become cramped on iPad landscape
   once the permanent sidebar is accounted for. Give each table a full row
   at tablet / compact-desktop widths while preserving the desktop layout. */
@media (min-width: 701px) and (max-width: 1500px) {
  .agent-dashboard-bottom {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .agent-dashboard-bottom .dashboard-panel,
  .agent-dashboard-bottom .dashboard-scroll-panel {
    min-width: 0 !important;
    width: 100% !important;
  }

  .agent-dashboard-bottom .dashboard-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .agent-dashboard-bottom .dashboard-scroll-panel {
    overflow-x: hidden !important;
  }

  .agent-dashboard-bottom .dashboard-panel-header-actions {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .agent-dashboard-bottom .dashboard-panel-header-actions > span {
    white-space: nowrap !important;
  }
}


/* =========================================================
   CRM 162 — EARLY TRANSACTION DOCUMENT WORKSPACE
   ========================================================= */
.listing-link-transaction-card {
  border-color: #d8c58c;
  background: linear-gradient(180deg, #fff 0%, #fffdf7 100%);
}

.listing-link-transaction-card .workflow-card-header {
  background: #fffaf0;
}

#listingExistingTransactionFields select {
  width: 100%;
}

#listingClientPicker input[readonly] {
  background: #f5f7f8;
  color: #516879;
  cursor: default;
}

.listing-client-action:disabled,
.listing-client-action.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

#transactionForm.opportunity-mode .opportunity-property-field {
  grid-column: 1 / -1 !important;
}

@media (max-width: 700px) {
  .listing-link-transaction-card .workflow-choice-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* CRM 165 — searchable referral client picker */
.referral-fields .referral-client-picker {
  position: relative;
  width: 100%;
  overflow: visible;
}

.referral-fields .referral-client-picker .opportunity-client-search-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 0 11px;
  border: 1px solid #d8e1e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(21, 48, 67, .03);
}

.referral-fields .referral-client-picker .opportunity-client-search-shell:focus-within {
  border-color: #c9aa58;
  box-shadow: 0 0 0 3px rgba(201, 170, 88, .13);
}

.referral-fields .referral-client-search,
.referral-fields .referral-client-search:hover,
.referral-fields .referral-client-search:focus,
.referral-fields .referral-client-search:focus-visible {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: #1b374b;
  font: inherit;
  font-size: 14px;
}

.referral-fields .referral-client-search::placeholder {
  color: #96a4ae;
  opacity: 1;
}

.referral-fields .referral-client-search::-webkit-search-decoration,
.referral-fields .referral-client-search::-webkit-search-cancel-button,
.referral-fields .referral-client-search::-webkit-search-results-button,
.referral-fields .referral-client-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.referral-fields .referral-client-picker .opportunity-client-results {
  z-index: 12000;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 300px;
}


/* =========================================================
   CRM 166 — OPPORTUNITY PIPELINE STAGE CONTROL
   Active (green) → Coming Soon (yellow) → Listing Prep (orange) → Potential (red)
   ========================================================= */
.dashboard-status-chip.active {
  color: #25613d !important;
  background: #e9f6ee !important;
  border-color: #bddfc9 !important;
}

.dashboard-status-chip.coming_soon {
  color: #796100 !important;
  background: #fff7d6 !important;
  border-color: #ead57a !important;
}

.dashboard-status-chip.listing_prep {
  color: #95520a !important;
  background: #fff0de !important;
  border-color: #efc18a !important;
}

.dashboard-status-chip.potential {
  color: #a03333 !important;
  background: #fff0ef !important;
  border-color: #e9bebc !important;
}

.dashboard-client-status-select {
  width: auto !important;
  min-width: 96px !important;
  max-width: 150px !important;
  height: 30px !important;
  padding: 4px 8px !important;
  border: 1px solid #d8e0e5 !important;
  border-radius: 999px !important;
  background-color: #f7f9fa !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  cursor: pointer !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-align: left !important;
  box-shadow: 0 1px 2px rgba(17,40,60,.04) !important;
}

.dashboard-client-status-select.status-active {
  color: #25613d !important;
  background-color: #e9f6ee !important;
  border-color: #bddfc9 !important;
}

.dashboard-client-status-select.status-coming_soon,
.dashboard-client-status-select.status-coming-soon {
  color: #796100 !important;
  background-color: #fff7d6 !important;
  border-color: #ead57a !important;
}

.dashboard-client-status-select.status-listing_prep,
.dashboard-client-status-select.status-listing-prep {
  color: #95520a !important;
  background-color: #fff0de !important;
  border-color: #efc18a !important;
}

.dashboard-client-status-select.status-potential {
  color: #a03333 !important;
  background-color: #fff0ef !important;
  border-color: #e9bebc !important;
}

.dashboard-client-status-select.status-pending {
  color: #28658c !important;
  background-color: #eaf4fb !important;
  border-color: #bfd9ea !important;
}

.dashboard-pipeline-drop-zone {
  position: relative;
  transition: background-color .14s ease, box-shadow .14s ease;
}

.dashboard-pipeline-drop-zone.dashboard-drop-target {
  background: rgba(216,187,115,.08);
  box-shadow: inset 0 0 0 2px rgba(177,143,60,.42);
}

.dashboard-client-table tbody tr[draggable="true"] {
  cursor: grab;
}

.dashboard-client-table tbody tr[draggable="true"]:active {
  cursor: grabbing;
}

.dashboard-client-table tbody tr.dashboard-pipeline-dragging {
  opacity: .44;
}

.dashboard-quick-edit-hint {
  margin-left: auto;
}

@media (max-width: 700px) {
  .dashboard-client-status-select {
    min-width: 88px !important;
    max-width: 120px !important;
    font-size: 10px !important;
  }

  .dashboard-client-table tbody tr[draggable="true"] {
    cursor: default;
  }
}

/* =========================================================
   CRM 169 — OPPORTUNITY PIPELINE CLEANUP
   Hover-only trash action, empty-stage suppression, modern status menu.
   ========================================================= */
.dashboard-actions-heading,
.dashboard-row-actions {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding-left: 2px !important;
  padding-right: 6px !important;
  text-align: right !important;
}

.dashboard-row-actions {
  vertical-align: middle;
}

.dashboard-remove-potential {
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #c84d4d !important;
  text-decoration: none !important;
  opacity: 0 !important;
  transform: translateX(3px) scale(.94);
  pointer-events: none;
  cursor: pointer !important;
  transition: opacity .14s ease, transform .14s ease, background-color .14s ease, color .14s ease !important;
}

.dashboard-client-table tbody tr:hover .dashboard-remove-potential,
.dashboard-client-table tbody tr:focus-within .dashboard-remove-potential {
  opacity: 1 !important;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.dashboard-remove-potential:hover,
.dashboard-remove-potential:focus-visible {
  color: #a63232 !important;
  background: #fff0ef !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(200,77,77,.13) !important;
}

.dashboard-stage-cell {
  position: relative;
  overflow: visible !important;
}

.dashboard-stage-picker {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
}

.dashboard-stage-trigger {
  width: 100%;
  max-width: 150px;
  min-width: 102px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 6px 11px;
  border: 1px solid #d9e1e6;
  border-radius: 10px;
  background: #f7f9fa;
  color: #31495c;
  font: inherit;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(17,40,60,.04);
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.dashboard-stage-trigger:hover {
  box-shadow: 0 3px 10px rgba(17,40,60,.08);
  transform: translateY(-1px);
}

.dashboard-stage-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,187,115,.22);
}

.dashboard-stage-trigger.saving,
.dashboard-stage-option.saving {
  opacity: .55;
  cursor: wait;
}

.dashboard-stage-chevron {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: .8;
  transform: translateY(-1px);
}

.dashboard-stage-menu {
  position: absolute;
  z-index: 2500;
  top: calc(100% + 6px);
  left: 0;
  width: min(240px, 74vw);
  padding: 7px;
  border: 1px solid #dce4e9;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(17,40,60,.18), 0 2px 6px rgba(17,40,60,.08);
}

.dashboard-stage-menu.open-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.dashboard-stage-option {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #31495c;
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.dashboard-stage-option + .dashboard-stage-option {
  margin-top: 2px;
}

.dashboard-stage-option:hover,
.dashboard-stage-option:focus-visible,
.dashboard-stage-option.is-current {
  outline: none;
  background: #f5f7f8;
}

.dashboard-stage-option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aeb8bf;
  box-shadow: 0 0 0 3px rgba(174,184,191,.15);
}

.dashboard-stage-check {
  justify-self: end;
  font-size: 12px;
  font-weight: 950;
}

.dashboard-stage-trigger.status-active {
  color: #25613d;
  background: #e9f6ee;
  border-color: #bddfc9;
}
.dashboard-stage-option.status-active { color: #25613d; }
.dashboard-stage-option.status-active .dashboard-stage-option-dot { background:#3a9a62; box-shadow:0 0 0 3px rgba(58,154,98,.14); }
.dashboard-stage-option.status-active:hover,
.dashboard-stage-option.status-active.is-current { background:#e9f6ee; }

.dashboard-stage-trigger.status-coming_soon,
.dashboard-stage-trigger.status-coming-soon {
  color: #796100;
  background: #fff7d6;
  border-color: #ead57a;
}
.dashboard-stage-option.status-coming_soon,
.dashboard-stage-option.status-coming-soon { color:#796100; }
.dashboard-stage-option.status-coming_soon .dashboard-stage-option-dot,
.dashboard-stage-option.status-coming-soon .dashboard-stage-option-dot { background:#d2aa22; box-shadow:0 0 0 3px rgba(210,170,34,.15); }
.dashboard-stage-option.status-coming_soon:hover,
.dashboard-stage-option.status-coming_soon.is-current,
.dashboard-stage-option.status-coming-soon:hover,
.dashboard-stage-option.status-coming-soon.is-current { background:#fff7d6; }

.dashboard-stage-trigger.status-listing_prep,
.dashboard-stage-trigger.status-listing-prep {
  color: #95520a;
  background: #fff0de;
  border-color: #efc18a;
}
.dashboard-stage-option.status-listing_prep,
.dashboard-stage-option.status-listing-prep { color:#95520a; }
.dashboard-stage-option.status-listing_prep .dashboard-stage-option-dot,
.dashboard-stage-option.status-listing-prep .dashboard-stage-option-dot { background:#d88732; box-shadow:0 0 0 3px rgba(216,135,50,.15); }
.dashboard-stage-option.status-listing_prep:hover,
.dashboard-stage-option.status-listing_prep.is-current,
.dashboard-stage-option.status-listing-prep:hover,
.dashboard-stage-option.status-listing-prep.is-current { background:#fff0de; }

.dashboard-stage-trigger.status-potential {
  color: #a03333;
  background: #fff0ef;
  border-color: #e9bebc;
}
.dashboard-stage-option.status-potential { color:#a03333; }
.dashboard-stage-option.status-potential .dashboard-stage-option-dot { background:#d45b57; box-shadow:0 0 0 3px rgba(212,91,87,.14); }
.dashboard-stage-option.status-potential:hover,
.dashboard-stage-option.status-potential.is-current { background:#fff0ef; }

.dashboard-stage-trigger.status-pending {
  color: #28658c;
  background: #eaf4fb;
  border-color: #bfd9ea;
}
.dashboard-stage-option.status-pending { color:#28658c; }
.dashboard-stage-option.status-pending .dashboard-stage-option-dot { background:#4f91bd; box-shadow:0 0 0 3px rgba(79,145,189,.14); }
.dashboard-stage-option.status-pending:hover,
.dashboard-stage-option.status-pending.is-current { background:#eaf4fb; }

.dashboard-stage-trigger.status-closed,
.dashboard-stage-option.status-closed { color:#5f6b74; }
.dashboard-stage-option.status-closed .dashboard-stage-option-dot { background:#7d8991; }
.dashboard-stage-option.status-closed:hover,
.dashboard-stage-option.status-closed.is-current { background:#eef1f3; }

.dashboard-stage-trigger.status-cancelled,
.dashboard-stage-option.status-cancelled { color:#8f5555; }
.dashboard-stage-option.status-cancelled .dashboard-stage-option-dot { background:#a96b6b; }
.dashboard-stage-option.status-cancelled:hover,
.dashboard-stage-option.status-cancelled.is-current { background:#f8efef; }

@media (max-width: 700px) {
  .dashboard-stage-trigger {
    min-width: 90px;
    max-width: 122px;
    font-size: 10px;
    padding-left: 9px;
    padding-right: 8px;
  }

  .dashboard-stage-menu {
    width: min(225px, 78vw);
  }
}
\n\n/* =========================================================\n   CRM 171 — OPPORTUNITY MODAL + STATUS FIT\n   New dashboard opportunities always start unlinked; long status labels\n   stay inside the colored status control.\n   ========================================================= */\n.dashboard-stage-trigger {\n  box-sizing: border-box !important;\n  max-width: 168px !important;\n}\n\n.dashboard-stage-trigger > span:first-child {\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n@media (max-width: 700px) {\n  .dashboard-stage-trigger {\n    max-width: 132px !important;\n  }\n}\n
/* =========================================================
   CRM 173 — HOME STAGING GUIDE ACTION + CLIENT PICKER
   ========================================================= */
#openStagingGuideResource {
  width: 100%;
  text-align: left;
  font: inherit;
}

.staging-guide-action-modal {
  width: min(620px, calc(100vw - 28px));
}

.staging-guide-client-modal {
  width: min(680px, calc(100vw - 28px));
  overflow: visible;
}

.staging-guide-modal-kicker {
  margin-bottom: 4px;
  color: #9a7b2c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.staging-guide-action-intro {
  margin: 0 0 18px;
  color: #657988;
  font-size: 14px;
  line-height: 1.55;
}

.staging-guide-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.staging-guide-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  min-height: 104px;
  padding: 18px;
  border: 1px solid #dce4e8;
  border-radius: 15px;
  background: #fff;
  color: #17324a;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.staging-guide-choice:hover,
.staging-guide-choice:focus-visible {
  border-color: #c8aa59;
  background: #fffdf8;
  box-shadow: 0 9px 24px rgba(17, 40, 60, .09);
  transform: translateY(-1px);
  outline: none;
}

.staging-guide-choice.email {
  border-color: #d7c486;
  background: linear-gradient(180deg, #fffefb 0%, #fffaf0 100%);
}

.staging-guide-choice-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eef3f5;
  color: #17324a;
  font-size: 19px;
  font-weight: 900;
}

.staging-guide-choice.email .staging-guide-choice-icon {
  background: #f8efd4;
  color: #84661b;
}

.staging-guide-choice strong {
  align-self: end;
  font-size: 15px;
  line-height: 1.2;
}

.staging-guide-choice small {
  align-self: start;
  color: #7b8b96;
  font-size: 11px;
  line-height: 1.35;
}

.staging-guide-client-search-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 12px;
  border: 1px solid #d8e1e6;
  border-radius: 13px;
  background: #fff;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.staging-guide-client-search-shell:focus-within {
  border-color: #c9aa58;
  box-shadow: 0 0 0 3px rgba(201, 170, 88, .13);
}

#stagingGuideClientSearch,
#stagingGuideClientSearch:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: #17324a;
  font: inherit;
  font-size: 14px;
}

.staging-guide-client-clear {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #eef2f4;
  color: #6f808b;
  cursor: pointer;
  font-size: 17px;
}

.staging-guide-client-results {
  position: absolute;
  z-index: 15000;
  left: 26px;
  right: 26px;
  margin-top: 7px;
  max-height: 330px;
  overflow: auto;
  border: 1px solid #dce4e8;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(17, 40, 60, .16);
}

.staging-guide-client-result {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid #eef2f4;
  background: #fff;
  color: #17324a;
  text-align: left;
  cursor: pointer;
}

.staging-guide-client-result:last-child { border-bottom: 0; }
.staging-guide-client-result:hover,
.staging-guide-client-result:focus-visible {
  background: #f8fafb;
  outline: none;
}

.staging-guide-client-result-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.staging-guide-client-result-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.staging-guide-client-result-copy small {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #83919b;
  font-size: 10px;
}

.staging-guide-client-empty {
  padding: 16px;
  color: #80909a;
  text-align: center;
  font-size: 12px;
}

.staging-guide-client-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #c9e2d2;
  border-radius: 11px;
  background: #f1faf4;
  color: #285f40;
}

.staging-guide-client-selected > span:last-child {
  display: flex;
  flex-direction: column;
}

.staging-guide-client-selected strong { font-size: 12px; }
.staging-guide-client-selected small { margin-top: 1px; color: #6f8979; font-size: 10px; }
.staging-guide-selected-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dcefe3;
  font-weight: 900;
}

@media (max-width: 620px) {
  .staging-guide-action-grid { grid-template-columns: 1fr; }
  .staging-guide-client-results { left: 18px; right: 18px; }
}
.staging-guide-client-modal .modal-body {
  position: relative;
  overflow: visible;
}


/* =========================================================
   CRM 176 — HOME STAGING GUIDE MOBILE MODAL FIT
   Keep the client picker fully inside the phone viewport and
   prevent horizontal drifting/clipping on iOS/Safari.
   ========================================================= */
@media (max-width: 620px), (pointer: coarse) and (max-width: 820px) {
  #stagingGuideClientBackdrop.modal-backdrop:not(.hidden) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  #stagingGuideClientBackdrop .staging-guide-client-modal {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    max-height: 92dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 0 !important;
  }

  #stagingGuideClientBackdrop .modal-header,
  #stagingGuideClientBackdrop .modal-body,
  #stagingGuideClientBackdrop .modal-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #stagingGuideClientBackdrop .modal-header {
    gap: 12px !important;
  }

  #stagingGuideClientBackdrop .modal-header > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #stagingGuideClientBackdrop .staging-guide-modal-kicker,
  #stagingGuideClientBackdrop .modal-header h2 {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #stagingGuideClientBackdrop .modal-header h2 {
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  #stagingGuideClientBackdrop .modal-close {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  #stagingGuideClientBackdrop .field,
  #stagingGuideClientBackdrop .staging-guide-client-search-shell,
  #stagingGuideClientBackdrop #stagingGuideClientSearch,
  #stagingGuideClientBackdrop .staging-guide-client-selected {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #stagingGuideClientBackdrop .staging-guide-client-selected > span:last-child {
    min-width: 0 !important;
  }

  #stagingGuideClientBackdrop .staging-guide-client-selected strong,
  #stagingGuideClientBackdrop .staging-guide-client-selected small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #stagingGuideClientBackdrop .staging-guide-client-results {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    max-width: calc(100% - 36px) !important;
    box-sizing: border-box !important;
  }

  #stagingGuideClientBackdrop .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.45fr) !important;
    gap: 10px !important;
    padding-top: 12px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    background: rgba(250, 251, 252, .98) !important;
    backdrop-filter: blur(12px) !important;
  }

  #stagingGuideClientBackdrop .modal-footer button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }
}

/* Keep the initial Open / Email staging-guide choice sheet mobile-safe too. */
@media (max-width: 620px), (pointer: coarse) and (max-width: 820px) {
  #stagingGuideActionBackdrop.modal-backdrop:not(.hidden) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  #stagingGuideActionBackdrop .staging-guide-action-modal {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 0 !important;
  }

  #stagingGuideActionBackdrop .modal-header,
  #stagingGuideActionBackdrop .modal-body,
  #stagingGuideActionBackdrop .modal-footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =========================================================
   CRM 177 — MOBILE / iOS INPUT ZOOM FIX
   iOS Safari automatically zooms when a focused text control renders
   below 16px. This final override intentionally lives at the END of
   the stylesheet so later compact desktop rules cannot shrink mobile
   controls back to 12–14px.
   ========================================================= */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  [contenteditable="true"],
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field select,
  .field textarea,
  .workflow-field input:not([type="checkbox"]):not([type="radio"]),
  .workflow-field select,
  .workflow-field textarea,
  .filter-bar input,
  .filter-bar select,
  .search-wrap input,
  .settings-section input:not([type="checkbox"]):not([type="radio"]),
  .settings-section select,
  .modal input:not([type="checkbox"]):not([type="radio"]),
  .modal select,
  .modal textarea,
  #emailBody.email-rich-editor,
  #stagingGuideClientSearch {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  [contenteditable="true"] {
    touch-action: manipulation;
  }

  /* Keep the staging-guide/client email flow comfortable at 16px
     without increasing the surrounding labels, cards, or buttons. */
  #stagingGuideClientBackdrop #stagingGuideClientSearch,
  #emailModalBackdrop input,
  #emailModalBackdrop select,
  #emailModalBackdrop textarea,
  #emailModalBackdrop #emailBody {
    font-size: 16px !important;
  }
}

/* ============================================================
   CRM 179 — generated estimate cleanup controls
   ============================================================ */
.transaction-private-documents-card .private-doc-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.transaction-private-documents-card .private-doc-delete {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0c6c6;
  border-radius: 8px;
  background: #fff7f7;
  color: #b93838;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.transaction-private-documents-card .private-doc-delete:hover {
  background: #fdeaea;
  border-color: #df9e9e;
  transform: translateY(-1px);
}
.transaction-private-documents-card .private-doc-delete:disabled {
  opacity: .5;
  cursor: wait;
  transform: none;
}
@media (max-width: 640px) {
  .transaction-private-documents-card .private-doc-row {
    align-items: flex-start !important;
  }
  .transaction-private-documents-card .private-doc-actions {
    align-items: stretch;
  }
}

/* CRM 180 — Universal Admin Data Export Center */
.data-export-heading {
  gap: 24px;
  align-items: flex-start;
}

.data-export-heading-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.data-export-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr);
  gap: 18px;
  align-items: start;
}

.data-export-panel {
  background: #fff;
  border: 1px solid #dde5e9;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(18, 43, 61, .06);
  overflow: hidden;
}

.data-export-builder {
  padding: 0 22px;
}

.data-export-section {
  padding: 22px 0;
  border-bottom: 1px solid #edf1f3;
}

.data-export-section:last-child {
  border-bottom: 0;
}

.data-export-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.data-export-section-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #143148;
}

.data-export-section-heading strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

.data-export-section-heading small {
  color: #84939e;
  font-size: 11px;
  line-height: 1.4;
}

.data-export-step {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #112f45;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.data-export-field {
  display: grid;
  gap: 7px;
  color: #40566a;
  font-size: 11px;
  font-weight: 800;
}

.data-export-field select,
.data-export-field input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d6e0e5;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: #17324a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.data-export-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.data-export-check-grid.agent-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-export-check-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-export-check-grid.field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-export-check-option {
  min-height: 42px;
  border: 1px solid #dfe7eb;
  background: #fbfcfd;
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334d60;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.data-export-check-option:hover {
  border-color: #c9d7de;
  background: #fff;
}

.data-export-check-option:has(input:checked) {
  border-color: #d9c27a;
  background: #fffcf4;
  box-shadow: inset 0 0 0 1px rgba(210, 181, 97, .16);
}

.data-export-check-option input {
  accent-color: #17384e;
  flex: 0 0 auto;
}

.data-export-mini-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.data-export-mini-actions button {
  border: 0;
  background: transparent;
  color: #315b76;
  padding: 4px 5px;
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.data-export-mini-actions button:hover {
  color: #112f45;
  text-decoration: underline;
}

.data-export-row-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.data-export-row-mode label {
  border: 1px solid #dfe6e9;
  border-radius: 12px;
  padding: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  background: #fbfcfd;
}

.data-export-row-mode label:has(input:checked) {
  border-color: #d2b561;
  background: #fffaf0;
  box-shadow: inset 0 0 0 1px rgba(210,181,97,.18);
}

.data-export-row-mode input {
  margin-top: 3px;
  accent-color: #17384e;
}

.data-export-row-mode span {
  display: grid;
  gap: 4px;
}

.data-export-row-mode strong {
  color: #17324a;
  font-size: 12px;
}

.data-export-row-mode small {
  color: #7e8e99;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 500;
}

.data-export-filter-block {
  margin-top: 12px;
}

.data-export-filter-label {
  display: block;
  margin-bottom: 7px;
  color: #5a6e7d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.data-export-dynamic-filters {
  display: grid;
  gap: 14px;
}

.data-export-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.data-export-switch {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid #dfe7eb;
  border-radius: 10px;
  color: #41596b;
  font-size: 11px;
  font-weight: 750;
  background: #fbfcfd;
}

.data-export-switch input {
  accent-color: #17384e;
}

.data-export-preview-panel {
  position: sticky;
  top: 18px;
}

.data-export-preview-heading {
  min-height: 82px;
  background: #112f45;
  color: #fff;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.data-export-preview-heading > div:first-child {
  display: grid;
  gap: 5px;
}

.data-export-preview-heading span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #d9c27a;
}

.data-export-preview-heading strong {
  font-size: 16px;
  line-height: 1.2;
}

.data-export-count {
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  font-weight: 850;
}

.data-export-preview-panel > .inline-message {
  margin: 12px 16px 0;
}

.data-export-preview-summary {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid #edf1f3;
}

.data-export-preview-summary span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f5f7;
  color: #587081;
  font-size: 9px;
  font-weight: 800;
}

.data-export-preview-table-wrap {
  position: relative;
  overflow: auto;
  max-height: 520px;
  min-height: 210px;
}

.data-export-preview-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 10px;
}

.data-export-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f5f8f9;
  color: #718492;
  text-align: left;
  padding: 10px 11px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .045em;
  border-bottom: 1px solid #dfe7ea;
}

.data-export-preview-table td {
  padding: 10px 11px;
  color: #314c60;
  border-bottom: 1px solid #edf1f3;
  vertical-align: top;
  line-height: 1.4;
  max-width: 220px;
}

.data-export-preview-table tbody tr:hover td {
  background: #fbfcfd;
}

.data-export-empty {
  padding: 48px 24px;
  color: #8a99a4;
  font-size: 12px;
  text-align: center;
}

.data-export-preview-actions {
  padding: 14px 16px;
  border-top: 1px solid #edf1f3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.data-export-note {
  margin: 0;
  padding: 0 16px 16px;
  color: #8b99a3;
  font-size: 9px;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .data-export-layout {
    grid-template-columns: 1fr;
  }
  .data-export-preview-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .data-export-heading-actions {
    width: 100%;
    justify-content: stretch;
  }
  .data-export-heading-actions button {
    flex: 1 1 0;
  }
  .data-export-builder {
    padding: 0 14px;
  }
  .data-export-section-heading {
    align-items: flex-start;
  }
  .data-export-section-heading small {
    display: none;
  }
  .data-export-check-grid,
  .data-export-check-grid.agent-grid,
  .data-export-check-grid.field-grid,
  .data-export-check-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .data-export-row-mode {
    grid-template-columns: 1fr;
  }
  .data-export-date-grid {
    grid-template-columns: 1fr;
  }
  .data-export-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .data-export-field select,
  .data-export-field input {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .data-export-check-grid,
  .data-export-check-grid.agent-grid,
  .data-export-check-grid.field-grid,
  .data-export-check-grid.compact {
    grid-template-columns: 1fr;
  }
}


/* CRM 181 — Data Export Center readability / responsive layout hardening */
#dataExportView,
#dataExportView * {
  box-sizing: border-box;
}

/* Keep the builder readable on normal desktop/laptop widths. The preview
   moves below the builder until there is genuinely enough horizontal room. */
.data-export-layout {
  grid-template-columns: minmax(0, 1fr);
}

.data-export-preview-panel {
  position: static;
  width: 100%;
  min-width: 0;
}

.data-export-builder,
.data-export-section,
.data-export-check-grid,
.data-export-row-mode,
.data-export-date-grid {
  min-width: 0;
}

/* Checkbox cards must own their label text. This explicitly neutralizes
   unrelated/global label/span styling and prevents names/field labels from
   spilling into neighboring columns. */
.data-export-check-option {
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  overflow: hidden;
  line-height: 1.3;
}

.data-export-check-option > input {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 14px;
  height: 14px;
  justify-self: center;
}

.data-export-check-option > span {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

/* Two columns are easier to scan and leave enough room for agent names,
   field names, and filter labels at common laptop widths. */
.data-export-check-grid,
.data-export-check-grid.agent-grid,
.data-export-check-grid.field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.data-export-check-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-export-row-mode label {
  min-width: 0;
}

.data-export-row-mode label > span {
  min-width: 0;
}

.data-export-preview-table-wrap {
  max-height: 560px;
  width: 100%;
}

.data-export-preview-table {
  min-width: 760px;
}

/* Only use the side-by-side builder + preview when the content area is wide
   enough that neither side becomes cramped. */
@media (min-width: 1600px) {
  .data-export-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(520px, .9fr);
  }
  .data-export-preview-panel {
    position: sticky;
    top: 18px;
  }
  .data-export-check-grid.agent-grid,
  .data-export-check-grid.field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .data-export-check-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .data-export-builder {
    padding: 0 14px;
  }
  .data-export-check-grid,
  .data-export-check-grid.agent-grid,
  .data-export-check-grid.field-grid,
  .data-export-check-grid.compact {
    grid-template-columns: 1fr;
  }
  .data-export-section-heading {
    flex-wrap: wrap;
  }
  .data-export-preview-table {
    min-width: 680px;
  }
}
\n\n/* CRM 182 — Connected Database export person-role filters */\n.data-export-filter-heading-row {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 14px;\n  margin-bottom: 10px;\n}\n.data-export-filter-heading-row > div:first-child {\n  min-width: 0;\n}\n.data-export-filter-heading-row small {\n  display: block;\n  margin-top: 3px;\n  color: var(--muted);\n  font-size: 10px;\n  line-height: 1.35;\n}\n.data-export-role-actions {\n  flex-wrap: wrap;\n  justify-content: flex-end;\n}\n.data-export-role-actions button {\n  white-space: nowrap;\n}\n.data-export-filter-help {\n  margin-top: 9px;\n  color: var(--muted);\n  font-size: 10px;\n  line-height: 1.45;\n}\n.data-export-check-option.person-role-primary:has(input:checked),\n.data-export-check-option.person-role-spouse:has(input:checked),\n.data-export-check-option.person-role-business-contact:has(input:checked),\n.data-export-check-option.person-role-other:has(input:checked),\n.data-export-check-option.person-role-account:has(input:checked) {\n  border-color: #b9d9c7;\n  background: #f3fbf6;\n}\n.data-export-check-option.person-role-child:has(input:checked) {\n  border-color: #ecd39a;\n  background: #fffaf0;\n}\n@media (max-width: 760px) {\n  .data-export-filter-heading-row {\n    align-items: flex-start;\n    flex-direction: column;\n  }\n  .data-export-role-actions {\n    width: 100%;\n    justify-content: flex-start;\n  }\n  .data-export-role-actions button {\n    flex: 1 1 calc(50% - 6px);\n  }\n}\n
/* ============================================================
   CRM 184 — Dotloop-style inline agent signing in document prep
   ============================================================ */
.transaction-document-editor-field.is-inline-signable {
  border-color: #ff7b66 !important;
  background: rgba(255, 246, 244, .88) !important;
  color: #d6513f !important;
  overflow: visible !important;
}
.transaction-document-editor-field.is-inline-signable .transaction-document-signer-label {
  color: #d6513f;
  font-weight: 900;
  letter-spacing: .015em;
}
.transaction-document-inline-sign-hit {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: rgba(23, 50, 74, .94) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(17, 40, 60, .2) !important;
  font-size: clamp(8px, .8vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.transaction-document-editor-field.is-inline-signable:hover .transaction-document-inline-sign-hit,
.transaction-document-inline-sign-hit:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.transaction-document-inline-sign-hit:hover { transform: translateY(-1px); }

.transaction-document-inline-sign-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 19, 28, .72);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.transaction-document-inline-sign-backdrop.hidden { display: none; }
.transaction-document-inline-sign-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce3e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 100px rgba(0, 0, 0, .35);
}
.transaction-document-inline-sign-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 17px;
  border-bottom: 1px solid #e8edf0;
}
.transaction-document-inline-sign-head .document-template-kind {
  color: #b49139;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.transaction-document-inline-sign-head h3 {
  margin: 3px 0 4px;
  color: #132b3f;
  font-size: 28px;
  line-height: 1.08;
}
.transaction-document-inline-sign-head p {
  margin: 0;
  color: #71808d;
  font-size: 12px;
  line-height: 1.45;
}
.transaction-document-inline-delegate {
  display: grid;
  gap: 4px;
  margin: 16px 24px 0;
  padding: 12px 14px;
  border: 1px solid #eed698;
  border-radius: 10px;
  background: #fff9ea;
  color: #6f5316;
}
.transaction-document-inline-delegate.hidden { display: none; }
.transaction-document-inline-delegate strong { font-size: 12px; }
.transaction-document-inline-delegate span { font-size: 11px; line-height: 1.45; }
.transaction-document-inline-sign-body {
  padding: 18px 24px 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.transaction-document-inline-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
}
.transaction-document-inline-identity-grid label {
  display: grid;
  gap: 6px;
  color: #5f6d78;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.transaction-document-inline-identity-grid input {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 1px solid #d8e0e5 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #17324a !important;
  box-shadow: none !important;
  font-size: 16px !important;
  text-transform: none;
}
.transaction-document-inline-identity-grid input[readonly] { background: #f7f9fa !important; }
.transaction-document-inline-sign-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 12px;
}
.transaction-document-inline-sign-tabs button {
  min-height: 34px !important;
  padding: 0 16px !important;
  border: 1px solid #d9e1e6 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #75838e !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer;
}
.transaction-document-inline-sign-tabs button.active {
  border-color: #17324a !important;
  background: #17324a !important;
  color: #fff !important;
}
.transaction-document-inline-style-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.transaction-document-inline-style {
  min-height: 70px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 8px !important;
  border: 1px solid #dde4e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #17324a !important;
  box-shadow: none !important;
  cursor: pointer;
}
.transaction-document-inline-style.active {
  border-color: #d2b561 !important;
  box-shadow: 0 0 0 2px rgba(210, 181, 97, .18) !important;
  background: #fffdf7 !important;
}
.transaction-document-inline-style span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 23px;
  line-height: 1;
  font-weight: 400;
}
.transaction-document-inline-style[data-transaction-inline-sign-style="yellowtail"] span { font-family: "Yellowtail", "Segoe Script", cursive; }
.transaction-document-inline-style[data-transaction-inline-sign-style="dancing"] span { font-family: "Dancing Script", "Segoe Script", cursive; font-weight: 500; }
.transaction-document-inline-style[data-transaction-inline-sign-style="allura"] span { font-family: "Allura", "Segoe Script", cursive; }
.transaction-document-inline-style[data-transaction-inline-sign-style="caveat"] span { font-family: "Caveat", "Bradley Hand", cursive; font-weight: 500; }
.transaction-document-inline-style small { color: #7c8993; font-size: 9px; font-weight: 800; }
.transaction-document-inline-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, .65fr);
  gap: 10px;
}
.transaction-document-inline-preview-grid > div {
  display: grid;
  gap: 5px;
}
.transaction-document-inline-preview-grid canvas,
.transaction-document-inline-draw-pane canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #dce3e7;
  border-radius: 10px;
  background: #fff;
  touch-action: none;
}
.transaction-document-inline-preview-grid small {
  color: #89959e;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.transaction-document-inline-draw-pane.hidden,
.transaction-document-inline-type-pane.hidden { display: none; }
.transaction-document-inline-draw-pane p { margin: 7px 0 0; color: #7a8791; font-size: 10px; }
.transaction-document-inline-draw-pane .link-btn { margin-top: 7px; }
.transaction-document-inline-authority {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px solid #edd79b;
  border-radius: 10px;
  background: #fffaf0;
  color: #604b1c;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
}
.transaction-document-inline-authority.hidden { display: none; }
.transaction-document-inline-authority input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  margin: 1px 0 0 !important;
  accent-color: #17324a;
}
.transaction-document-inline-legal {
  margin-top: 15px;
  color: #6d7b86;
  font-size: 10px;
  line-height: 1.55;
}
#transactionDocumentInlineSignStatus { margin-top: 10px; }
.transaction-document-inline-sign-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 24px 18px;
  border-top: 1px solid #e8edf0;
  background: #fbfcfc;
}

@media (hover:none), (pointer:coarse) {
  .transaction-document-editor-field.is-inline-signable .transaction-document-inline-sign-hit {
    inset: auto 2px 2px 2px;
    min-height: 22px !important;
    opacity: .96;
    pointer-events: auto;
    font-size: 8px !important;
  }
}

@media (max-width: 680px) {
  .transaction-document-inline-sign-backdrop { padding: 0; align-items: end; }
  .transaction-document-inline-sign-dialog {
    width: 100%;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }
  .transaction-document-inline-sign-head { padding: 18px 18px 14px; }
  .transaction-document-inline-sign-head h3 { font-size: 24px; }
  .transaction-document-inline-delegate { margin: 12px 18px 0; }
  .transaction-document-inline-sign-body { padding: 15px 18px 12px; }
  .transaction-document-inline-identity-grid { grid-template-columns: 1fr 110px; gap: 10px; }
  .transaction-document-inline-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transaction-document-inline-preview-grid { grid-template-columns: 1fr; }
  .transaction-document-inline-preview-grid > div:nth-child(2) { max-width: 220px; }
  .transaction-document-inline-sign-foot {
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  }
  .transaction-document-inline-sign-foot button { flex: 1; min-height: 44px !important; }
}

/* ============================================================
   CRM 185 — fast draft agent signing + edit-after-sign reset
   ============================================================ */
.transaction-document-editor-field.has-agent-draft-signature {
  border-color: #39a86b !important;
  background: rgba(239, 252, 245, .94) !important;
  color: #17663e !important;
  overflow: visible !important;
}
.transaction-document-agent-draft-signature {
  position: absolute;
  inset: 1px 3px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.transaction-document-agent-draft-signature-image {
  display: block;
  width: auto;
  max-width: 86%;
  height: 94%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
}
.transaction-document-agent-draft-signature-image.is-initials {
  max-width: 78%;
}
.transaction-document-agent-draft-text {
  display: block;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(8px, .85vw, 12px);
  font-weight: 800;
  color: #17324a;
}
.transaction-document-agent-draft-badge {
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 5;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(34, 139, 84, .92);
  color: #fff;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .06em;
  pointer-events: none;
}
.transaction-document-editor-field.has-agent-draft-signature:hover {
  box-shadow: 0 0 0 2px rgba(57, 168, 107, .17);
}

/* ============================================================
   CRM 186 — signer color roles + faster Share UX
   Client signer fields = white / orange.
   Team agent signer fields = orange / white.
   ============================================================ */
.transaction-document-editor-field.is-signer.is-client-signer {
  border-color: #e39a32 !important;
  background: rgba(255,255,255,.96) !important;
  color: #cf7417 !important;
}
.transaction-document-editor-field.is-signer.is-client-signer .transaction-document-signer-label {
  color: #cf7417 !important;
  font-weight: 900;
}
.transaction-document-editor-field.is-signer.is-agent-signer,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable {
  border-color: #dc7a18 !important;
  background: rgba(224,126,31,.96) !important;
  color: #fff !important;
}
.transaction-document-editor-field.is-signer.is-agent-signer .transaction-document-signer-label,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable .transaction-document-signer-label {
  color: #fff !important;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(91,44,6,.18);
}
.transaction-document-editor-field.is-signer.is-agent-signer .transaction-document-inline-sign-hit {
  background: rgba(163,82,12,.96) !important;
  color: #fff !important;
}
.transaction-document-editor-field.is-agent-signer.has-agent-draft-signature {
  border-color: #dc7a18 !important;
  background: rgba(255,248,239,.97) !important;
  color: #17324a !important;
}
.transaction-document-editor-field.is-agent-signer.has-agent-draft-signature .transaction-document-agent-draft-badge {
  background: #dc7a18 !important;
  color: #fff !important;
}
.transaction-document-editor-field.is-agent-signer.has-agent-draft-signature:hover {
  box-shadow: 0 0 0 2px rgba(220,122,24,.18) !important;
}

/* ============================================================
   CRM 187 — readable two-line signer labels
   Role/name on line 1; field type/action on line 2.
   ============================================================ */
.transaction-document-editor-field.is-signer .transaction-document-signer-label {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1px 3px;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: .92;
  text-align: center;
  pointer-events: none;
}
.transaction-document-signer-role,
.transaction-document-signer-type {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-document-signer-role {
  font-size: clamp(6px, .72vw, 10px);
  font-weight: 900;
}
.transaction-document-signer-type {
  margin-top: 1px;
  font-size: clamp(5.5px, .62vw, 8.5px);
  font-weight: 800;
  letter-spacing: .01em;
  opacity: .94;
}
.transaction-document-editor-field.is-inline-signable .transaction-document-signer-label {
  padding: 1px 3px;
}

/* ============================================================
   CRM 188 — smoother autofill + softer document fields
   ============================================================ */
.transaction-document-autofill-backdrop {
  opacity: 0;
  transition: opacity .18s ease;
}
.transaction-document-autofill-backdrop.is-visible {
  opacity: 1;
}
.transaction-document-autofill-backdrop .transaction-document-autofill-panel {
  opacity: 0;
  transform: translateY(10px) scale(.992);
  transition: opacity .20s ease, transform .20s cubic-bezier(.22,.8,.24,1);
  will-change: opacity, transform;
}
.transaction-document-autofill-backdrop.is-visible .transaction-document-autofill-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.transaction-document-autofill-backdrop.is-closing {
  pointer-events: none;
}

/* Slightly rounded corners on every field placed over a transaction PDF. */
.transaction-document-editor-field,
.transaction-document-field-draw-preview,
.transaction-document-inline-sign-hit {
  border-radius: 6px !important;
}

@media (prefers-reduced-motion: reduce) {
  .transaction-document-autofill-backdrop,
  .transaction-document-autofill-backdrop .transaction-document-autofill-panel {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   CRM 189 — smooth share panel transitions
   ============================================================ */
.transaction-document-share-backdrop {
  opacity: 0;
  transition: opacity .2s ease;
}
.transaction-document-share-backdrop.is-visible {
  opacity: 1;
}
.transaction-document-share-backdrop .transaction-document-share-panel {
  opacity: 0;
  transform: translateY(12px) scale(.992);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,.8,.24,1);
  will-change: opacity, transform;
}
.transaction-document-share-backdrop.is-visible .transaction-document-share-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.transaction-document-share-backdrop.is-closing {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .transaction-document-share-backdrop,
  .transaction-document-share-backdrop .transaction-document-share-panel {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   CRM 192 — circular sidebar brand + larger outward loader pulse
   ============================================================ */
.sidebar .brand-mark.sidebar-wordmark-wrap {
  min-height: 86px !important;
  padding: 0 10px 14px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.sidebar-wordmark-logo {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  flex: 0 0 72px;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 50%;
  background: #fff;
}

.auth-loading-logo-pulse {
  position: relative;
  width: 288px;
  height: 288px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  isolation: isolate;
}
.auth-loading-logo-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 3px solid rgba(222, 190, 108, .82);
  border-radius: 50%;
  box-sizing: border-box;
  transform: scale(1);
  opacity: .7;
  animation: tkgLoadingRingOut 1.55s cubic-bezier(.2,.65,.3,1) infinite;
  pointer-events: none;
}
.auth-loading .brand-logo.loading,
body.app-loading-lock #loadingPage .brand-logo.loading {
  width: 288px !important;
  height: 288px !important;
  min-width: 288px !important;
  min-height: 288px !important;
  max-width: 288px !important;
  max-height: 288px !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}
@keyframes tkgLoadingRingOut {
  0% { transform: scale(1); opacity: .72; }
  72%, 100% { transform: scale(1.22); opacity: 0; }
}
@media (max-width: 620px) {
  .auth-loading-logo-pulse {
    width: 216px;
    height: 216px;
  }
  .auth-loading .brand-logo.loading,
  body.app-loading-lock #loadingPage .brand-logo.loading {
    width: 216px !important;
    height: 216px !important;
    min-width: 216px !important;
    min-height: 216px !important;
    max-width: 216px !important;
    max-height: 216px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-loading-logo-pulse::after { animation: none !important; opacity: 0; }
}


/* ============================================================
   CRM 193 — balanced loader + centered sidebar logo
   ============================================================ */
/* Keep screen-reader-only copy accessible without letting it appear visually. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sidebar: center the circular logo with comfortable breathing room. */
.sidebar .brand-mark.sidebar-wordmark-wrap {
  min-height: 188px !important;
  padding: 8px 0 18px !important;
  margin-bottom: 14px !important;
  align-items: center !important;
  justify-content: center !important;
}
.sidebar-wordmark-logo {
  width: 162px !important;
  height: 162px !important;
  max-width: 162px !important;
  max-height: 162px !important;
  flex: 0 0 162px !important;
  margin: 0 auto !important;
  object-position: center !important;
}

/* Main loading screen: slightly smaller than CRM 192, perfectly centered.
   The pulse ring begins exactly on the logo's own outer circle and only
   expands outward from there. */
.auth-loading-logo-pulse {
  width: 240px !important;
  height: 240px !important;
}
.auth-loading .brand-logo.loading,
body.app-loading-lock #loadingPage .brand-logo.loading {
  width: 240px !important;
  height: 240px !important;
  min-width: 240px !important;
  min-height: 240px !important;
  max-width: 240px !important;
  max-height: 240px !important;
}
.auth-loading-logo-pulse::after {
  inset: 0 !important;
  transform: scale(1);
  transform-origin: center center;
  animation: tkgLoadingRingOut193 1.45s cubic-bezier(.18,.67,.28,1) infinite !important;
}
@keyframes tkgLoadingRingOut193 {
  0%   { transform: scale(1); opacity: .72; }
  68%  { opacity: .24; }
  100% { transform: scale(1.19); opacity: 0; }
}
@media (max-width: 620px) {
  .sidebar .brand-mark.sidebar-wordmark-wrap {
    min-height: 154px !important;
    padding: 6px 0 16px !important;
  }
  .sidebar-wordmark-logo {
    width: 138px !important;
    height: 138px !important;
    max-width: 138px !important;
    max-height: 138px !important;
    flex-basis: 138px !important;
  }
  .auth-loading-logo-pulse {
    width: 190px !important;
    height: 190px !important;
  }
  .auth-loading .brand-logo.loading,
  body.app-loading-lock #loadingPage .brand-logo.loading {
    width: 190px !important;
    height: 190px !important;
    min-width: 190px !important;
    min-height: 190px !important;
    max-width: 190px !important;
    max-height: 190px !important;
  }
}


/* ============================================================
   CRM 194 — sidebar logo +50%
   ============================================================ */

/* ============================================================
   CRM 195 — Transactions row hover: Lift + Shadow
   Selected design direction. Desktop only; mobile card behavior stays intact.
   ============================================================ */
@media (min-width: 701px) {
  #transactionsView .transaction-table tbody tr[data-transaction-id] {
    position: relative;
    z-index: 1;
    transform: translateY(0);
    filter: none;
    transition:
      transform .16s cubic-bezier(.22,.8,.24,1),
      filter .16s ease;
  }

  #transactionsView .transaction-table tbody tr[data-transaction-id] > td {
    transition:
      background-color .16s ease,
      border-color .16s ease,
      box-shadow .16s ease;
  }

  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover {
    z-index: 12;
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 9px rgba(18, 43, 63, .12));
  }

  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover > td,
  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover > td.transaction-admin-column,
  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover > td:nth-child(1),
  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover > td:nth-child(2) {
    background: #f8fbfd !important;
    border-bottom-color: #e1e8ed !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(210,220,228,.72);
  }

  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover > td:first-child {
    box-shadow:
      inset 1px 0 0 rgba(210,220,228,.72),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(210,220,228,.72);
  }

  #transactionsView .transaction-table tbody tr[data-transaction-id]:hover > td:last-child {
    box-shadow:
      inset -1px 0 0 rgba(210,220,228,.72),
      inset 0 1px 0 rgba(255,255,255,.92),
      inset 0 -1px 0 rgba(210,220,228,.72);
  }

  /* The old hover-only "Open" label is intentionally removed. */
  #transactionsView .transaction-inline-open {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #transactionsView .transaction-table tbody tr[data-transaction-id],
  #transactionsView .transaction-table tbody tr[data-transaction-id] > td {
    transition: none !important;
  }
}


/* ============================================================
   CRM 196 — transaction names open instead of inline rename
   ============================================================ */
@media (min-width: 701px) {
  #transactionsView .transaction-table tbody tr[data-transaction-id] {
    cursor: pointer;
  }

  #transactionsView .transaction-table .transaction-row-open {
    cursor: pointer !important;
  }

  /* True inline-edit controls keep their normal control cursors. */
  #transactionsView .transaction-table input,
  #transactionsView .transaction-table textarea {
    cursor: text;
  }

  #transactionsView .transaction-table select,
  #transactionsView .transaction-table button,
  #transactionsView .transaction-table label,
  #transactionsView .transaction-table [data-transaction-select-id] {
    cursor: pointer;
  }
}

/* ============================================================
   CRM 197 — transaction workflow usability refinements
   ============================================================ */

/* iPad / touch: preserve natural document scrolling. Field drawing on touch
   is intentionally activated by the double-tap + drag gesture in app.js. */
.transaction-document-editor-page-overlay {
  touch-action: manipulation !important;
}

.activity-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.activity-delete-comment {
  appearance: none;
  border: 0;
  background: transparent;
  color: #a74b4b;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 0;
}
.activity-delete-comment:hover {
  color: #7f2626;
  text-decoration: underline;
}

.popby-remove-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7b8790;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.popby-remove-button:hover {
  color: #17324a;
}


/* ============================================================
   CRM 198 — iPad document scrolling + Pop-By removed tracking
   ============================================================ */
@media (pointer: coarse) {
  .transaction-document-editor-workspace {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior-y: contain;
  }

  .transaction-document-editor-pages,
  .transaction-document-editor-page,
  .transaction-document-editor-page-overlay,
  .transaction-document-editor-pages.is-adding-field .transaction-document-editor-page-overlay,
  .transaction-document-editor-field,
  .transaction-document-editor-field input,
  .transaction-document-editor-text,
  .transaction-document-signer-label {
    touch-action: pan-y pinch-zoom !important;
  }

  /* Move/resize handles are the only touch targets that intentionally capture a drag. */
  .transaction-document-field-move-handle,
  .transaction-document-field-resize-handle {
    touch-action: none !important;
  }
}

.popby-recipient-row.is-removed {
  background: #fafafa;
  opacity: .82;
}
.popby-recipient-row.is-removed:hover {
  background: #f7f8f8;
}
.popby-delivery-check.removed {
  display: grid;
  place-items: center;
  color: #8a969e;
  background: #f1f3f4;
  border-color: #dfe4e7;
  cursor: default;
}
.popby-contact-button:disabled {
  opacity: .5;
  cursor: default;
}
.popby-remove-button.restore {
  color: #2d6b52;
}
.popby-remove-button.restore:hover {
  color: #1d513d;
}

/* ============================================================
   CRM 199 — iPad native PDF panning (Safari desktop-mode safe)
   ============================================================ */
@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .transaction-document-editor-workspace {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
  }

  .transaction-document-editor-pages,
  .transaction-document-editor-page,
  .transaction-document-editor-page-overlay,
  .transaction-document-editor-pages.is-adding-field .transaction-document-editor-page-overlay,
  .transaction-document-editor-field,
  .transaction-document-editor-field input,
  .transaction-document-editor-text,
  .transaction-document-signer-label {
    touch-action: pan-y !important;
  }

  /* The PDF overlay must not behave like a drawing surface for an ordinary
     one-finger swipe. Geometry handles remain the deliberate drag controls. */
  .transaction-document-editor-page-overlay {
    -webkit-user-select: none;
    user-select: none;
  }

  .transaction-document-field-move-handle,
  .transaction-document-field-resize-handle {
    touch-action: none !important;
  }
}


/* ============================================================
   CRM 200 — complete New Listing submission details in transaction
   ============================================================ */
#transactionListingSubmissionDetail {
  padding-top: 4px;
}
.listing-submission-section {
  padding: 14px 0 4px;
}
.listing-submission-section:first-child {
  padding-top: 2px;
}
.listing-submission-section + .listing-submission-section {
  border-top: 1px solid var(--line, #e5eaed);
  margin-top: 12px;
}
.listing-submission-section h4 {
  margin: 0 0 12px;
  color: var(--navy, #17324a);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.listing-submission-grid {
  margin: 0;
}
.listing-submission-notes {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.listing-submission-availability-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.listing-submission-availability-row:last-child {
  margin-bottom: 0;
}
.listing-submission-availability-row strong {
  min-width: 52px;
  color: var(--navy, #17324a);
  font-size: 9px;
}
.listing-submission-availability-row span {
  color: inherit;
}
@media (max-width: 760px) {
  .listing-submission-availability-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }
}

/* CRM 201 — Transaction People + imported PDF signing preparation */
.transaction-documents-side-column{display:grid;align-content:start;gap:14px}
.transaction-people-card .profile-card-body{padding:0}
.transaction-people-list{display:grid}
.transaction-person-row{display:grid;grid-template-columns:34px minmax(0,1fr) 26px;gap:9px;align-items:start;padding:11px 13px;border-bottom:1px solid var(--line,#e7ecef)}
.transaction-person-row:last-child{border-bottom:0}
.transaction-person-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef4f7;border:1px solid #dbe5ea;color:#17324a;font-size:10px;font-weight:800;letter-spacing:.03em}
.transaction-person-copy{min-width:0;display:grid;gap:3px}
.transaction-person-name-line{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.transaction-person-name-line strong{font-size:11px;color:#17324a;line-height:1.25}
.transaction-person-role{font-size:8px;line-height:1;padding:4px 6px;border-radius:999px;background:#edf4f0;color:#34735a;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.transaction-person-copy a{font-size:9px;color:#6e8190;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.transaction-person-copy a:hover{color:#1e6ea9;text-decoration:underline}
.transaction-person-detail{font-size:9px;color:#8a9aa6;line-height:1.3}
.transaction-person-remove{width:26px;height:26px;border:0;background:transparent;border-radius:7px;color:#9babb6;font-size:18px;line-height:1;cursor:pointer}
.transaction-person-remove:hover{background:#fff0f0;color:#bb4f4f}
.transaction-people-empty{padding:14px;color:var(--muted);font-size:10px}
.transaction-person-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.transaction-person-form-wide{grid-column:1/-1}
@media(max-width:720px){.transaction-person-form-grid{grid-template-columns:1fr}.transaction-person-form-wide{grid-column:auto}}

/* CRM 202 — in-app signing prep + editable transaction people roles */
.transaction-signing-prep-backdrop{
  z-index:12000!important;
  padding:14px!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(9,28,43,.46)!important;
  backdrop-filter:blur(3px);
}
.transaction-signing-prep-modal{
  width:min(1480px,calc(100vw - 28px));
  height:min(940px,calc(100vh - 28px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(211,221,228,.95);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(8,31,48,.28);
}
.transaction-signing-prep-modal-header{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 16px 13px 20px;
  border-bottom:1px solid var(--line,#e5ebef);
  background:#fff;
}
.transaction-signing-prep-modal-header h3{margin:0;color:#17324a;font-size:17px;line-height:1.2}
.transaction-signing-prep-modal-header p{margin:4px 0 0;color:#7c8d99;font-size:10px}
.transaction-signing-prep-close{flex:0 0 auto}
.transaction-signing-prep-modal-body{min-height:0;background:#f4f7f9;overflow:hidden}
#transactionSigningPrepFrame{display:block;width:100%;height:100%;border:0;background:#f4f7f9}
body.modal-open{overflow:hidden!important}

.transaction-person-row{
  grid-template-columns:34px minmax(0,1fr) minmax(104px,126px)!important;
  align-items:start!important;
}
.transaction-person-actions{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}
.transaction-person-role-select{
  width:100%;
  max-width:126px;
  min-width:0;
  height:30px;
  padding:0 24px 0 8px;
  border:1px solid #dbe5ea;
  border-radius:9px;
  background:#f8fbfc;
  color:#2e6f58;
  font-size:8px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.025em;
  cursor:pointer;
  appearance:auto;
}
.transaction-person-role-select:hover{border-color:#b9cbd5;background:#fff}
.transaction-person-role-select:focus{outline:2px solid rgba(198,158,70,.22);border-color:#c69e46}
.transaction-person-role-select:disabled{opacity:.6;cursor:wait}
.transaction-person-remove{flex:0 0 26px}

@media(max-width:760px){
  .transaction-signing-prep-backdrop{padding:0!important}
  .transaction-signing-prep-modal{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;border:0}
  .transaction-signing-prep-modal-header{min-height:62px;padding:11px 12px 11px 15px}
  .transaction-signing-prep-modal-header p{display:none}
  .transaction-person-row{grid-template-columns:34px minmax(0,1fr)!important}
  .transaction-person-actions{grid-column:2;justify-content:flex-start;margin-top:3px}
  .transaction-person-role-select{max-width:170px}
}

/* ============================================================
   CRM 203 — balanced Documents layout + compact People roles
   ============================================================ */
@media (min-width: 1051px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: minmax(0, 1fr) clamp(410px, 29vw, 470px) !important;
    gap: 16px !important;
  }
}
@media (min-width: 1051px) and (max-width: 1280px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: 14px !important;
  }
}

/* Keep the main document list dense; the extra desktop width belongs to the
   people/signing column rather than empty white space inside document rows. */
#transactionDocumentFileCard .profile-card-header {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
#transactionDocumentFileCard .profile-card-body {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.transaction-documents-side-column {
  gap: 12px !important;
}

/* People card: smaller typography and a custom role picker so desktop browsers
   do not open the oversized native <select> menu. */
.transaction-people-card .profile-card-header {
  padding: 12px 14px !important;
  min-height: 52px;
}
.transaction-people-card .profile-card-header > span {
  font-size: 10px !important;
}
.transaction-people-card .profile-card-header .mini-btn {
  min-height: 31px !important;
  padding: 6px 10px !important;
  font-size: 9px !important;
}
.transaction-person-row {
  grid-template-columns: 31px minmax(0,1fr) minmax(118px,146px) !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  align-items: center !important;
}
.transaction-person-avatar {
  width: 31px !important;
  height: 31px !important;
  font-size: 9px !important;
}
.transaction-person-copy {
  gap: 2px !important;
}
.transaction-person-name-line strong {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}
.transaction-person-copy a,
.transaction-person-detail {
  font-size: 8px !important;
  line-height: 1.25 !important;
}
.transaction-person-actions {
  gap: 5px !important;
}
.transaction-person-role-button {
  width: 100%;
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid #dbe5ea;
  border-radius: 9px;
  background: #f8fbfc;
  color: #17324a;
  font: inherit;
  font-size: 8.5px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.transaction-person-role-button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.transaction-person-role-button:hover {
  border-color: #b9cbd5;
  background: #fff;
}
.transaction-person-role-button:focus-visible {
  outline: 2px solid rgba(198,158,70,.22);
  border-color: #c69e46;
}
.transaction-person-role-button:disabled {
  opacity: .6;
  cursor: wait;
}
.transaction-person-role-chevron {
  flex: 0 0 auto;
  color: #738995;
  font-size: 12px;
  transform: translateY(-1px);
}
.transaction-person-role-menu {
  position: fixed;
  z-index: 30000;
  display: grid;
  padding: 5px;
  max-height: min(330px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid #d9e3e8;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15,42,59,.18);
}
.transaction-person-role-menu-item {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #27445a;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.transaction-person-role-menu-item:hover,
.transaction-person-role-menu-item.active {
  background: #f2f6f8;
  color: #17324a;
}
.transaction-person-role-menu-item.active {
  font-weight: 800;
}
.transaction-person-role-check {
  color: #b48a2f;
  font-size: 10px;
}

/* Signing History in the wider side column should read like a compact activity
   card, not another large document panel. */
.transaction-signing-history-card .profile-card-header {
  padding: 12px 14px !important;
  min-height: 52px;
  align-items: center !important;
  flex-direction: row !important;
}
.transaction-signing-history-card .profile-card-header > span {
  font-size: 10px !important;
}
.transaction-signing-history-card .profile-card-header .mini-btn {
  margin-left: auto !important;
  min-height: 31px !important;
  padding: 6px 9px !important;
  font-size: 8.5px !important;
}
.transaction-signing-history-card .profile-card-body {
  padding: 10px 13px 13px !important;
}
.transaction-signing-history-card .signing-package-copy strong {
  font-size: 9px !important;
}
.transaction-signing-history-card .signing-package-copy,
.transaction-signing-history-card .signing-package-copy span,
.transaction-signing-history-card .signing-package-copy small {
  font-size: 8px !important;
}
.transaction-signing-history-card .mini-btn,
.transaction-signing-history-card .secondary-btn {
  font-size: 8.5px !important;
}

@media (max-width: 760px) {
  .transaction-person-row {
    grid-template-columns: 31px minmax(0,1fr) !important;
    align-items: start !important;
  }
  .transaction-person-actions {
    grid-column: 2;
    justify-content: flex-start !important;
    margin-top: 3px;
  }
  .transaction-person-role-button {
    width: auto;
    min-width: 132px;
    max-width: 180px;
  }
}

/* CRM 206 — Closing Day Post Agent Tool */
.agent-action-card.closing-day::after{background:rgba(216,187,115,.16)}
.closing-day .agent-action-icon{color:#8b6a20;background:#fff8e6;border:1px solid #ead9a6}
#closingDayView .workflow-check.compact{min-width:150px}
#closingDayView #cdTransactionStory{min-height:150px;resize:vertical}
@media(max-width:700px){
  #closingDayView .workflow-grid{grid-template-columns:1fr}
  #closingDayView .workflow-field.span-2{grid-column:auto}
  #closingDayView input,#closingDayView textarea{font-size:16px!important}
}

/* CRM 207 — transaction-linked Closing Day photo archive */
.transaction-closing-photo-entry {
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #e6ebef);
}
.transaction-closing-photo-entry:first-child { padding-top: 0; }
.transaction-closing-photo-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.transaction-closing-photo-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.transaction-closing-photo-summary > div:first-child { min-width: 0; }
.transaction-closing-photo-summary strong { display: block; color: #102a3d; }
.transaction-closing-photo-details { margin-top: 8px; }
.transaction-closing-photo-details summary {
  cursor: pointer;
  color: #64798a;
  font-size: 12px;
  font-weight: 700;
}
.transaction-closing-photo-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 10px;
}
.transaction-closing-photo-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.transaction-closing-photo-detail-grid > div.span-2 { grid-column: 1 / -1; }
.transaction-closing-photo-detail-grid span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a9aa7;
}
.transaction-closing-photo-detail-grid strong,
.transaction-closing-photo-detail-grid p {
  margin: 0;
  color: #263e50;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .transaction-closing-photo-summary { align-items: flex-start; flex-direction: column; }
  .transaction-closing-photo-detail-grid { grid-template-columns: 1fr; }
  .transaction-closing-photo-detail-grid > div.span-2 { grid-column: auto; }
}

/* CRM 208 — Closing Day transaction typeahead */
.closing-day-transaction-picker{position:relative}
#cdTransactionSearch{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border:1px solid #d7e0e6;
  border-radius:14px;
  background:#fff;
  color:#102c3d;
  font:inherit;
  box-shadow:0 1px 2px rgba(16,44,61,.03);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#cdTransactionSearch:focus{
  outline:none;
  border-color:#c7a349;
  box-shadow:0 0 0 4px rgba(199,163,73,.12);
}
.closing-day-transaction-results{
  position:absolute;
  z-index:80;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:360px;
  overflow:auto;
  padding:8px;
  border:1px solid #dce4e9;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 42px rgba(16,44,61,.16);
}
.closing-day-transaction-result{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:11px 12px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#102c3d;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,transform .14s ease;
}
.closing-day-transaction-result:hover,
.closing-day-transaction-result:focus-visible{
  background:#f3f7f8;
  outline:none;
}
.closing-day-transaction-result strong{font-size:14px;line-height:1.3;font-weight:800}
.closing-day-transaction-result span{font-size:12px;line-height:1.35;color:#6f8290}
.closing-day-transaction-empty{padding:14px 12px;color:#718491;font-size:13px}
@media (max-width:760px){
  .closing-day-transaction-results{max-height:300px}
  #cdTransactionSearch{min-height:50px}
}

/* CRM 215 — unified transaction document editor placement preview */
.transaction-document-placement-ghost {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px dashed rgba(199, 145, 35, .9);
  border-radius: 5px;
  background: rgba(255, 247, 224, .72);
  box-shadow: 0 8px 22px rgba(18, 43, 63, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a6b0c;
  font: 800 11px/1.1 inherit;
  letter-spacing: .01em;
}
.transaction-document-placement-ghost.is-signature {
  border-style: solid;
  background: rgba(232, 139, 28, .12);
}
.transaction-document-placement-ghost.is-initial {
  background: rgba(238, 243, 247, .82);
  border-color: rgba(89, 116, 139, .72);
  color: #36546b;
}


/* CRM 216 — restore FILE / MORE menus in the unified transaction editor */
.transaction-document-toolbar-menu-wrap { position: relative; height: 100%; display: flex; }
.transaction-document-toolbar-menu {
  position: absolute; top: calc(100% - 2px); right: 0; z-index: 140;
  min-width: 210px; padding: 6px 0; border: 1px solid rgba(20,49,72,.16); border-radius: 0 0 9px 9px;
  background: #59aef0; box-shadow: 0 14px 34px rgba(11,33,50,.24); overflow: hidden;
}
.transaction-document-toolbar-menu.hidden { display: none; }
.transaction-document-toolbar-menu button {
  width: 100%; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer;
  padding: 11px 14px; display: grid; gap: 2px; font: inherit;
}
.transaction-document-toolbar-menu button:hover { background: rgba(255,255,255,.15); }
.transaction-document-toolbar-menu button strong { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.transaction-document-toolbar-menu button small { color: rgba(255,255,255,.82); font-size: 9px; line-height: 1.25; font-weight: 650; text-transform: none; }
@media(max-width: 980px) {
  .transaction-document-editor-action, .transaction-document-editor-sign, .transaction-document-editor-share { min-width: 86px; padding-left: 12px; padding-right: 12px; }
  .transaction-document-editor-share { min-width: 124px; }
  .transaction-document-editor-sign { min-width: 108px; }
}

/* CRM 217 — clearer document history + polished Add-field icons/order */
.transaction-document-field-icon.initials-icon {
  font-size: 14px !important;
  letter-spacing: -.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.transaction-document-field-icon.person-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
.transaction-document-field-icon.person-icon svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: currentColor;
}

.transaction-document-history-backdrop {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 30, 44, .48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.transaction-document-history-backdrop.hidden { display: none; }
.transaction-document-history-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(800px, calc(100vh - 44px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 49, 72, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 72px rgba(9, 29, 43, .28);
}
.transaction-document-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 18px;
  border-bottom: 1px solid #e8edf1;
  background: linear-gradient(135deg, #15364d, #24546e);
  color: #fff;
}
.transaction-document-history-eyebrow {
  margin-bottom: 4px;
  color: #e3c56d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.transaction-document-history-header h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 800;
}
.transaction-document-history-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: 700 24px/1 inherit;
  cursor: pointer;
}
.transaction-document-history-close:hover { background: rgba(255,255,255,.16); }
.transaction-document-history-body {
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 10px;
  background: #fff;
}
.transaction-document-history-intro {
  margin: 0 0 20px;
  color: #667887;
  font-size: 13px;
  line-height: 1.45;
}
.transaction-document-history-content { display: grid; gap: 24px; }
.transaction-document-history-version { display: grid; gap: 0; }
.transaction-document-history-version-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid #cfd9df;
}
.transaction-document-history-version-head > strong {
  color: #263c4c;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.transaction-document-history-version-actions { display: flex; align-items: center; gap: 16px; }
.transaction-document-history-version-actions button {
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: #2e97e2;
  font: 900 11px/1 inherit;
  letter-spacing: .025em;
  text-transform: uppercase;
  cursor: pointer;
}
.transaction-document-history-version-actions button:hover { color: #176da9; }
.transaction-document-history-events { display: grid; }
.transaction-document-history-entry {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid #edf1f3;
}
.transaction-document-history-entry:last-child { border-bottom: 0; }
.transaction-document-history-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #d7e1e7;
  border-radius: 50%;
  background: #eef4f7;
  color: #23455c;
  font-size: 11px;
  font-weight: 900;
}
.transaction-document-history-entry.kind-shared .transaction-document-history-avatar,
.transaction-document-history-entry.kind-viewed .transaction-document-history-avatar { background: #eaf5fe; color: #247db8; border-color: #d1e9fa; }
.transaction-document-history-entry.kind-signed .transaction-document-history-avatar,
.transaction-document-history-entry.kind-completed .transaction-document-history-avatar { background: #edf8f0; color: #267a4f; border-color: #d7ebdf; }
.transaction-document-history-entry.kind-warning .transaction-document-history-avatar { background: #fff3f2; color: #b54a45; border-color: #f0d5d2; }
.transaction-document-history-entry-main { min-width: 0; }
.transaction-document-history-entry-text {
  color: #243b4b;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}
.transaction-document-history-entry-document {
  margin-top: 5px;
  overflow: hidden;
  color: #2d97e1;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-document-history-entry-time {
  align-self: end;
  padding-left: 12px;
  color: #8a969e;
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}
.transaction-document-history-empty {
  padding: 18px 0;
  color: #778994;
  font-size: 12px;
}
.transaction-document-history-empty.error { display: grid; gap: 4px; color: #a04440; }
.transaction-document-history-loading {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6e808d;
  font-size: 12px;
}
.transaction-document-history-loading span {
  width: 20px;
  height: 20px;
  border: 2px solid #dfe7ec;
  border-top-color: #b68f2d;
  border-radius: 50%;
  animation: transactionHistorySpin .75s linear infinite;
}
@keyframes transactionHistorySpin { to { transform: rotate(360deg); } }
.transaction-document-history-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid #e8edf1;
  background: #fbfcfd;
}
.transaction-document-history-footer .primary-btn { min-width: 122px; }
@media(max-width: 680px) {
  .transaction-document-history-backdrop { padding: 10px; }
  .transaction-document-history-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 14px; }
  .transaction-document-history-header { padding: 16px; }
  .transaction-document-history-header h3 { font-size: 20px; }
  .transaction-document-history-body { padding: 16px 16px 8px; }
  .transaction-document-history-entry { grid-template-columns: 36px minmax(0,1fr); }
  .transaction-document-history-avatar { width: 34px; height: 34px; }
  .transaction-document-history-entry-time { grid-column: 2; align-self: auto; padding: 0; margin-top: -4px; white-space: normal; }
}
\n\n/* ============================================================\n   CRM 218 — grab fields anywhere to move them\n   ============================================================ */\n@media (hover: hover) and (pointer: fine) {\n  .transaction-document-editor-field:not(.is-inline-signable) {\n    cursor: move;\n  }\n  .transaction-document-editor-field input.transaction-document-editor-text {\n    cursor: text;\n  }\n  .transaction-document-editor-field.is-checkbox input[type="checkbox"] {\n    cursor: pointer;\n  }\n  /* The whole field body is now the move target on desktop, so the old\n     upper-left handle no longer needs to visually imply it is required. */\n  .transaction-document-field-move-handle {\n    display: none !important;\n  }\n}\n
/* CRM 219 — unsaved document exit confirmation */
.transaction-document-unsaved-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:30000!important;
  pointer-events:auto!important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(9,31,47,.38);
  backdrop-filter:blur(3px);
}
.transaction-document-unsaved-backdrop.hidden{display:none!important;}
.transaction-document-unsaved-modal{
  position:relative;
  z-index:1;
  pointer-events:auto;
  width:min(520px,calc(100vw - 32px));
  background:#fff;
  border:1px solid rgba(19,43,63,.12);
  border-radius:22px;
  box-shadow:0 28px 80px rgba(9,31,47,.24);
  padding:0;
  overflow:hidden;
}
.transaction-document-unsaved-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:24px 24px 14px;
}
.transaction-document-unsaved-header h3{
  margin:4px 0 0;
  font-size:24px;
  line-height:1.15;
  color:#132b3f;
}
.transaction-document-unsaved-modal>p{
  margin:0;
  padding:0 24px 22px;
  color:#667b8c;
  font-size:15px;
  line-height:1.55;
}
.transaction-document-unsaved-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px 24px 24px;
  border-top:1px solid rgba(19,43,63,.08);
  background:#fbfcfd;
}
.transaction-document-unsaved-actions button{min-height:44px;}
.transaction-document-unsaved-actions .danger-outline{
  color:#a4443d;
  border-color:rgba(164,68,61,.28);
  background:#fff;
}
.transaction-document-unsaved-actions .danger-outline:hover{background:#fff7f6;}
@media (max-width:640px){
  .transaction-document-unsaved-actions{flex-direction:column-reverse;}
  .transaction-document-unsaved-actions button{width:100%;}
}


/* CRM 220 — unsaved confirmation must always sit above document/signing editors */
.transaction-document-editor-backdrop.is-behind-unsaved-prompt {
  pointer-events: none !important;
}
body > .transaction-document-unsaved-backdrop:not(.hidden) {
  display: flex !important;
}
\n\n/* CRM 221 — unsaved prompt lives inside the document editor modal */\n.transaction-document-editor-modal > .transaction-document-unsaved-backdrop.inside-document-editor {\n  position: absolute !important;\n  inset: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n  z-index: 100000 !important;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  pointer-events: auto !important;\n  background: rgba(9,31,47,.48) !important;\n  backdrop-filter: blur(5px) !important;\n  -webkit-backdrop-filter: blur(5px) !important;\n  border-radius: inherit;\n}\n.transaction-document-editor-modal > .transaction-document-unsaved-backdrop.inside-document-editor.hidden {\n  display: none !important;\n}\n.transaction-document-editor-modal > .transaction-document-unsaved-backdrop.inside-document-editor .transaction-document-unsaved-modal {\n  z-index: 100001 !important;\n}\n
/* ============================================================
   CRM 222 — fast transaction PDF first paint / lazy pages
   ============================================================ */
.transaction-document-editor-page.is-pending-render {
  background: #fff;
}
.transaction-document-page-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(247,249,250,.96) 28%, rgba(233,238,241,.92) 42%, rgba(247,249,250,.96) 58%);
  background-size: 220% 100%;
  animation: transactionDocumentPageSkeleton 1.15s ease-in-out infinite;
}
.transaction-document-editor-page:not(.is-pending-render) .transaction-document-page-skeleton {
  display: none;
}
@keyframes transactionDocumentPageSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .transaction-document-page-skeleton { animation: none; }
}

/* ============================================================
   CRM 223 — instant cached PDF preview surface
   ============================================================ */
.transaction-document-editor-page .transaction-document-page-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: #fff;
}
.transaction-document-editor-page.is-preview-render {
  background: #fff;
}
.transaction-document-editor-page.is-preview-render .transaction-document-editor-page-overlay {
  z-index: 3;
}

/* CRM 224 — Add Person launched from the document editor must live above the editor itself. */
#transactionPersonModalBackdrop {
  z-index: 20000 !important;
}
.transaction-document-editor-modal > #transactionPersonModalBackdrop.inside-transaction-document-editor {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100002 !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background: rgba(9,31,47,.48) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border-radius: inherit;
  overflow: auto !important;
  pointer-events: auto !important;
}
.transaction-document-editor-modal > #transactionPersonModalBackdrop.inside-transaction-document-editor.hidden {
  display: none !important;
}
.transaction-document-editor-modal > #transactionPersonModalBackdrop.inside-transaction-document-editor > .modal {
  position: relative !important;
  z-index: 100003 !important;
  width: min(620px, calc(100% - 28px)) !important;
  max-height: calc(100% - 44px) !important;
  margin: auto !important;
}


/* ============================================================
   CRM 225 — cleaner field toolbar + click-to-sign / drag-to-move
   ============================================================ */
.transaction-document-format-select.assignee select {
  min-width: 220px !important;
}
/* Agent signable fields must stay draggable across the full body. The subtle
   Sign-now veil is visual only; click-vs-drag is handled by the field shell. */
.transaction-document-editor-field.is-inline-signable {
  cursor: grab !important;
}
.transaction-document-editor-field.is-inline-signable:active {
  cursor: grabbing !important;
}
.transaction-document-inline-sign-hit,
.transaction-document-editor-field.is-inline-signable:hover .transaction-document-inline-sign-hit,
.transaction-document-inline-sign-hit:focus-visible {
  pointer-events: none !important;
}
@media (max-width: 760px) {
  .transaction-document-format-select.assignee select { min-width: 150px !important; }
}

/* ============================================================
   CRM 226 — Dotloop-style fast field assignment menu
   - Blank when no field is selected.
   - Custom click menu with instant hover feedback.
   - No Edit Text action.
   ============================================================ */
.transaction-document-assignee-wrap {
  position: relative;
  flex: 0 0 auto;
  min-width: 220px;
}
.transaction-document-assignee-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.transaction-document-assignee-button {
  width: 100%;
  min-width: 220px;
  height: 34px;
  border: 1px solid rgba(216,229,238,.78);
  border-radius: 8px;
  padding: 0 34px 0 12px;
  background: #f7fafc;
  color: #17324a;
  font: 850 11px/1 inherit;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  transition: border-color 90ms ease, background 90ms ease, box-shadow 90ms ease;
}
.transaction-document-assignee-button:hover:not(:disabled),
.transaction-document-assignee-button[aria-expanded="true"] {
  background: #fff;
  border-color: #69b4ef;
  box-shadow: 0 0 0 3px rgba(91,174,240,.14);
}
.transaction-document-assignee-button:disabled {
  cursor: default;
  background: rgba(247,250,252,.72);
  border-color: rgba(216,229,238,.55);
  box-shadow: none;
}
.transaction-document-assignee-button.is-empty > span:first-child { min-height: 1em; display:block; }
.transaction-document-assignee-caret {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-52%);
  color: #60798c;
  font-size: 14px;
  pointer-events: none;
}
.transaction-document-assignee-button:disabled .transaction-document-assignee-caret { opacity: .35; }
.transaction-document-assignee-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 1000;
  width: max(100%, 245px);
  padding: 5px;
  border: 1px solid rgba(20,49,72,.16);
  border-radius: 8px;
  background: #59aef0;
  box-shadow: 0 13px 30px rgba(11,33,50,.24);
  transform-origin: top left;
  animation: transactionAssigneeMenuIn226 85ms ease-out both;
}
.transaction-document-assignee-menu.hidden { display:none; }
@keyframes transactionAssigneeMenuIn226 {
  from { opacity:0; transform:translateY(-3px) scale(.99); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.transaction-document-assignee-option {
  width:100%;
  min-height:34px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 10px;
  text-align:left;
  font:800 11px/1.2 inherit;
  cursor:pointer;
  transition:background 55ms linear, padding-left 55ms linear;
}
.transaction-document-assignee-option:hover,
.transaction-document-assignee-option:focus-visible {
  outline:none;
  background:rgba(255,255,255,.19);
  padding-left:12px;
}
.transaction-document-assignee-option.is-selected { background:rgba(16,63,96,.18); }
.transaction-document-assignee-check { font-size:13px; font-weight:950; }

/* Make ADD feel instantaneous and menu-like instead of card-like. */
.transaction-document-add-menu {
  display:block !important;
  width:190px !important;
  padding:4px 0 !important;
  border-radius:0 0 7px 7px !important;
  background:#59aef0 !important;
  animation:transactionAddMenuIn226 75ms ease-out both;
}
.transaction-document-add-menu.hidden { display:none !important; }
@keyframes transactionAddMenuIn226 {
  from { opacity:0; transform:translateY(-2px); }
  to { opacity:1; transform:translateY(0); }
}
.transaction-document-add-menu button {
  width:100% !important;
  min-height:32px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  padding:7px 11px !important;
  font:900 11px/1.1 inherit !important;
  text-align:left !important;
  transition:background 55ms linear, padding-left 55ms linear !important;
}
.transaction-document-add-menu button:hover,
.transaction-document-add-menu button:focus-visible {
  outline:none !important;
  background:rgba(255,255,255,.18) !important;
  padding-left:13px !important;
}
.transaction-document-add-menu button strong,
.transaction-document-add-menu button svg {
  color:#fff !important;
  fill:currentColor !important;
  width:18px !important;
  min-width:18px !important;
  font-size:13px !important;
}
@media(max-width:760px) {
  .transaction-document-assignee-wrap,
  .transaction-document-assignee-button { min-width:150px; }
  .transaction-document-assignee-menu { width:max(100%,220px); }
}

/* CRM 227 — fast hover menus + visible field-assignee dropdown */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .transaction-document-editor-toolbar,
  .transaction-document-editor-actions,
  .transaction-document-toolbar-menu-wrap,
  .transaction-document-add-wrap {
    overflow: visible !important;
  }

  /* The assignee menu is a child of the formatting bar. Older overflow rules
     clipped it so it looked like there were no other people to choose from. */
  .transaction-document-format-toolbar {
    overflow: visible !important;
    position: relative;
    z-index: 330;
  }
  .transaction-document-assignee-wrap {
    position: relative;
    z-index: 350;
  }
  .transaction-document-assignee-menu {
    z-index: 5000 !important;
  }

  .transaction-document-toolbar-menu,
  .transaction-document-add-menu,
  .transaction-document-assignee-menu {
    transition: opacity 60ms ease, transform 60ms ease;
  }
}


/* ============================================================
   CRM 228 — robust floating menus + complete Dotloop-style field tools
   ============================================================ */
.transaction-document-toolbar-menu.is-floating-228,
.transaction-document-add-menu.is-floating-228,
.transaction-document-assignee-menu.is-floating-228,
.transaction-document-style-menu.is-floating-228 {
  margin: 0 !important;
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 16px 36px rgba(8, 30, 46, .28) !important;
  animation: transactionMenuQuickIn228 70ms ease-out both !important;
}
@keyframes transactionMenuQuickIn228 {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.transaction-document-assignee-divider {
  height: 1px;
  margin: 4px 8px;
  background: rgba(255,255,255,.28);
}
.transaction-document-assignee-add-person { color: #fff7d5 !important; }

.transaction-document-style-menu-wrap { position: relative; flex: 0 0 auto; }
.transaction-document-style-native-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
}
.transaction-document-style-menu-button {
  height: 34px;
  min-width: 96px;
  padding: 0 11px 0 12px;
  border: 1px solid rgba(216,229,238,.78);
  border-radius: 8px;
  background: #d9e5ec;
  color: #17324a;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 9px;
  font: 850 11px/1 inherit;
  cursor: pointer;
  transition: background 70ms ease, border-color 70ms ease, box-shadow 70ms ease;
}
.transaction-document-style-menu-button.size { min-width: 68px; }
.transaction-document-style-menu-button:hover:not(:disabled),
.transaction-document-style-menu-button[aria-expanded="true"] {
  background: #fff;
  border-color: #69b4ef;
  box-shadow: 0 0 0 3px rgba(91,174,240,.13);
}
.transaction-document-style-menu-button:disabled { opacity: .48; cursor: default; box-shadow: none; }
.transaction-document-style-menu {
  width: 150px;
  padding: 4px 0;
  border: 1px solid rgba(20,49,72,.16);
  background: #59aef0;
  color: #fff;
}
.transaction-document-style-menu.size { width: 92px; }
.transaction-document-style-menu.hidden { display: none !important; }
.transaction-document-style-menu button {
  width: 100%; min-height: 32px; padding: 7px 11px; border: 0;
  background: transparent; color: #fff; display: flex; align-items: center;
  font: 850 11px/1.1 inherit; text-align: left; cursor: pointer;
  transition: background 55ms linear, padding-left 55ms linear;
}
.transaction-document-style-menu button:hover,
.transaction-document-style-menu button:focus-visible {
  outline: none; background: rgba(255,255,255,.19); padding-left: 13px;
}
.transaction-document-editor-field.is-radio input[type="radio"] {
  width: 100%; height: 100%; margin: 0; accent-color: #17324a; cursor: pointer;
}
.transaction-document-editor-field.is-strikethrough {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(43,102,141,.55) !important;
}
.transaction-document-strikethrough-line {
  position: absolute; left: 2px; right: 2px; top: 50%; height: 2px;
  transform: translateY(-50%); background: #132b3f; border-radius: 2px; pointer-events: none;
}
.transaction-document-format-toolbar { overflow: visible !important; }
.transaction-document-assignee-wrap { min-width: 205px; }
.transaction-document-assignee-button { min-width: 205px; }
@media (max-width: 760px) {
  .transaction-document-style-menu-button { min-width: 82px; }
  .transaction-document-style-menu-button.size { min-width: 62px; }
  .transaction-document-assignee-wrap,
  .transaction-document-assignee-button { min-width: 145px; }
}
\n\n/* ============================================================\n   CRM 229 — clearer internal signing + correct template assignees\n   ============================================================ */\n/* Keep the internal signer field completely usable as a move/select target.\n   The signing action appears just below the field only while hovered/focused. */\n.transaction-document-editor-field.is-inline-signable {\n  overflow: visible !important;\n  cursor: grab !important;\n}\n.transaction-document-editor-field.is-inline-signable:active {\n  cursor: grabbing !important;\n}\n.transaction-document-editor-field.is-inline-signable .transaction-document-inline-sign-hit {\n  inset: auto !important;\n  left: 50% !important;\n  top: calc(100% + 5px) !important;\n  width: auto !important;\n  height: 27px !important;\n  min-width: 78px !important;\n  min-height: 27px !important;\n  padding: 0 11px !important;\n  display: inline-flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  white-space: nowrap !important;\n  border-radius: 7px !important;\n  background: #173a57 !important;\n  color: #fff !important;\n  box-shadow: 0 7px 18px rgba(17,40,60,.24) !important;\n  font-size: 10px !important;\n  font-weight: 900 !important;\n  line-height: 1 !important;\n  opacity: 0 !important;\n  visibility: hidden !important;\n  pointer-events: none !important;\n  transform: translate(-50%, -2px) !important;\n  transition: opacity .11s ease, transform .11s ease, visibility .11s ease !important;\n  z-index: 80 !important;\n}\n.transaction-document-editor-field.is-inline-signable:hover .transaction-document-inline-sign-hit,\n.transaction-document-editor-field.is-inline-signable:focus-within .transaction-document-inline-sign-hit,\n.transaction-document-inline-sign-hit:focus-visible {\n  opacity: 1 !important;\n  visibility: visible !important;\n  pointer-events: auto !important;\n  transform: translate(-50%, 0) !important;\n}\n.transaction-document-editor-field.is-inline-signable:hover .transaction-document-signer-label {\n  opacity: 1 !important;\n}\n/* The explicit Sign now control handles signing. The field itself remains the\n   move/select surface, including for admins signing on an agent's behalf. */\n.transaction-document-inline-sign-hit { cursor: pointer !important; }\n\n@media (hover: none), (pointer: coarse) {\n  /* Touch devices do not have hover. Keep the action compactly accessible just\n     under the selected internal signer field without taking over the field. */\n  .transaction-document-editor-field.is-inline-signable.is-primary-selected .transaction-document-inline-sign-hit {\n    opacity: 1 !important;\n    visibility: visible !important;\n    pointer-events: auto !important;\n    transform: translate(-50%, 0) !important;\n  }\n}\n
/* ============================================================
   CRM 230 — clean inline agent signing control
   Keep the signature field editable/movable; reveal a separate full-width
   Sign now action immediately beneath the field, matching the clean Dotloop
   interaction the team prefers.
   ============================================================ */
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable {
  overflow: visible !important;
  z-index: 30 !important;
  cursor: grab !important;
  border: 1.5px solid #ff7867 !important;
  background: rgba(255,255,255,.97) !important;
  color: #ff7867 !important;
  box-shadow: none !important;
}
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:active {
  cursor: grabbing !important;
}
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:hover,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:focus-within,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable.is-primary-selected {
  z-index: 900 !important;
  box-shadow: 0 0 0 2px rgba(255,120,103,.12) !important;
}
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable .transaction-document-signer-label {
  color: #ff7867 !important;
  text-shadow: none !important;
  pointer-events: none !important;
}
.transaction-document-editor-field.is-inline-signable .transaction-document-inline-sign-hit {
  position: absolute !important;
  inset: auto !important;
  left: -1.5px !important;
  right: -1.5px !important;
  top: 100% !important;
  width: calc(100% + 3px) !important;
  height: 31px !important;
  min-width: 0 !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #5aaef0 !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(231,235,238,.96), 0 8px 18px rgba(17,40,60,.18) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  transition: opacity .08s ease, visibility .08s ease, background .08s ease !important;
  z-index: 1000 !important;
  touch-action: manipulation !important;
}
.transaction-document-editor-field.is-inline-signable:hover .transaction-document-inline-sign-hit,
.transaction-document-editor-field.is-inline-signable:focus-within .transaction-document-inline-sign-hit,
.transaction-document-inline-sign-hit:hover,
.transaction-document-inline-sign-hit:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.transaction-document-editor-field.is-inline-signable .transaction-document-inline-sign-hit:hover,
.transaction-document-editor-field.is-inline-signable .transaction-document-inline-sign-hit:focus-visible {
  background: #459fe5 !important;
  outline: none !important;
}

@media (hover: none), (pointer: coarse) {
  .transaction-document-editor-field.is-inline-signable.is-primary-selected .transaction-document-inline-sign-hit {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* ============================================================
   CRM 231 — compact editor dropdowns + practical text-size range
   ============================================================ */
/* Keep toolbar menus quick and dense. The previous row heights made simple
   choices feel much taller than the rest of the editor. */
.transaction-document-style-menu {
  padding: 2px 0 !important;
  max-height: min(280px, calc(100vh - 24px)) !important;
}
.transaction-document-style-menu button {
  min-height: 24px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}
.transaction-document-style-menu button:hover,
.transaction-document-style-menu button:focus-visible {
  padding-left: 12px !important;
}
.transaction-document-style-menu.size {
  width: 78px !important;
}
.transaction-document-style-menu.size button {
  min-height: 23px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* FILE / ADD / MORE use the same compact rhythm. */
.transaction-document-toolbar-menu {
  padding: 3px 0 !important;
}
.transaction-document-toolbar-menu button {
  padding: 7px 12px !important;
  gap: 1px !important;
}
.transaction-document-toolbar-menu button strong {
  font-size: 10px !important;
}
.transaction-document-toolbar-menu button small {
  font-size: 8px !important;
}
.transaction-document-add-menu button {
  min-height: 27px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.transaction-document-assignee-menu button {
  min-height: 27px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* ============================================================
   CRM 232 — simple four-color text palette
   ============================================================ */
.transaction-document-style-menu-button.color {
  min-width: 58px !important;
  width: 58px !important;
  padding: 0 8px !important;
}
.transaction-document-color-button-swatch {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(20,49,72,.28);
}
.transaction-document-style-menu.color {
  width: 118px !important;
  min-width: 118px !important;
}
.transaction-document-style-menu.color button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 27px !important;
  padding: 5px 9px !important;
}
.transaction-document-style-menu.color button:hover,
.transaction-document-style-menu.color button:focus-visible {
  padding-left: 9px !important;
}
.transaction-document-style-menu.color button.is-selected::after {
  content: '✓';
  margin-left: auto;
  font-weight: 900;
}
.transaction-document-color-swatch {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(10,36,54,.2);
}

/* ============================================================
   CRM 233 — agent signer contrast + post-sign revision safety
   ============================================================ */
/* Keep unsigned agent signer fields in the established orange/white treatment.
   The separate Sign now action still appears beneath the field on hover. */
.transaction-document-editor-field.is-signer.is-agent-signer:not(.has-agent-draft-signature),
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:not(.has-agent-draft-signature) {
  border-color: #dc7a18 !important;
  background: rgba(224,126,31,.98) !important;
  color: #fff !important;
}
.transaction-document-editor-field.is-signer.is-agent-signer:not(.has-agent-draft-signature) .transaction-document-signer-label,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:not(.has-agent-draft-signature) .transaction-document-signer-label,
.transaction-document-editor-field.is-signer.is-agent-signer:not(.has-agent-draft-signature) .transaction-document-signer-role,
.transaction-document-editor-field.is-signer.is-agent-signer:not(.has-agent-draft-signature) .transaction-document-signer-type {
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(91,44,6,.2) !important;
}
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:not(.has-agent-draft-signature):hover,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:not(.has-agent-draft-signature):focus-within,
.transaction-document-editor-field.is-signer.is-agent-signer.is-inline-signable:not(.has-agent-draft-signature).is-primary-selected {
  border-color: #c96d10 !important;
  background: rgba(224,126,31,1) !important;
  box-shadow: 0 0 0 2px rgba(220,122,24,.18) !important;
}

/* CRM236 — controlled publishing to Public Listing Folder */
.document-admin-status.public {
  background: #eaf7ef;
  border-color: #b8dfc7;
  color: #1f6b3d;
}

.public-listing-publications {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 42, 61, 0.1);
}

.public-listing-publications-heading {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #425b6c;
  margin-bottom: 10px;
}

.public-listing-publications-empty {
  font-size: 13px;
  color: #687985;
  padding: 10px 0 2px;
}

.public-listing-publication-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(15, 42, 61, 0.08);
}

.public-listing-publication-row:first-of-type {
  border-top: 0;
}

.public-listing-publication-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.public-listing-publication-copy strong {
  color: #18384d;
  font-size: 13px;
}

.public-listing-publication-copy span {
  color: #6a7b87;
  font-size: 12px;
  line-height: 1.4;
}

.public-listing-publication-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.mini-btn.danger-soft {
  color: #9e3030;
  border-color: rgba(158, 48, 48, 0.24);
  background: #fff8f8;
}

.public-listing-history {
  margin-top: 10px;
  border-top: 1px solid rgba(15, 42, 61, 0.08);
  padding-top: 10px;
}

.public-listing-history summary {
  cursor: pointer;
  color: #516a7a;
  font-size: 12px;
  font-weight: 700;
}

.public-listing-history-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.public-listing-history-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: #60727f;
}

.public-listing-history-row span:first-child {
  font-weight: 700;
  color: #344d5d;
}

.public-publish-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12050;
  background: rgba(10, 30, 44, 0.58);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.public-publish-modal {
  width: min(590px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(6, 27, 42, 0.28);
  padding: 24px;
}

.public-publish-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.public-publish-header h3 {
  margin: 3px 0 5px;
  color: #15374d;
  font-size: 22px;
}

.public-publish-header p {
  margin: 0;
  color: #687985;
  font-size: 13px;
}

.public-publish-warning {
  margin: 18px 0;
  border: 1px solid #ecd6a1;
  background: #fffaf0;
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #735f2c;
  font-size: 13px;
  line-height: 1.45;
}

.public-publish-field {
  display: grid;
  gap: 7px;
  color: #344f60;
  font-size: 13px;
  font-weight: 700;
}

.public-publish-field select {
  width: 100%;
  border: 1px solid #cbd8df;
  border-radius: 12px;
  background: #fff;
  padding: 12px 13px;
  font: inherit;
  color: #18384d;
}

.public-publish-safe,
.public-publish-blocked {
  margin-top: 13px;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 12px;
  line-height: 1.45;
}

.public-publish-safe {
  background: #eef9f2;
  border: 1px solid #c5e5d0;
  color: #286b42;
}

.public-publish-blocked {
  display: grid;
  gap: 5px;
  background: #fff4f3;
  border: 1px solid #efc4bf;
  color: #8a3530;
}

.public-publish-blocked.admin-review {
  background: #fff8ed;
  border-color: #ebcf9c;
  color: #71551c;
}

.public-publish-blocked label {
  margin-top: 5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 700;
}

.public-publish-blocked input {
  margin-top: 2px;
}

.public-publish-destination {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 13px;
  border-radius: 12px;
  background: #f4f8fa;
  color: #6a7c88;
  font-size: 12px;
}

.public-publish-destination strong {
  color: #23485f;
  font-size: 13px;
}

.public-publish-footer {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 700px) {
  .public-listing-publication-row,
  .public-listing-history-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-publish-backdrop {
    padding: 12px;
  }

  .public-publish-modal {
    padding: 18px;
    border-radius: 18px;
  }
}

/* CRM238 — document type titles, automatic naming/foldering, and public eligibility */
.transaction-file-import-row.typed {
  align-items: flex-start;
  gap: 14px;
}
.transaction-file-import-file-copy {
  min-width: 0;
  flex: 1;
}
.transaction-file-type-field {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  max-width: 560px;
}
.transaction-file-type-field > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.transaction-file-type-field select,
.transaction-file-type-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d8e1e8;
  border-radius: 9px;
  background: #fff;
  padding: 7px 10px;
  font: inherit;
  color: var(--ink);
}
.transaction-file-generated-name {
  display: block;
  margin-top: 6px;
  color: #49616f;
  line-height: 1.35;
}
.document-admin-status.typed {
  background: #eef3f7;
  color: #19384b;
  border-color: #d5e0e7;
  font-weight: 800;
}
.document-type-manager-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
}
.document-type-manager-list {
  overflow: auto;
  padding: 4px 22px 16px;
  max-height: 56vh;
}
.document-type-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 4px;
  border-bottom: 1px solid #edf1f4;
}
.document-type-manager-row > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.document-type-manager-row strong {
  font-size: 13px;
  color: #173247;
}
.document-type-manager-row small {
  color: #70818d;
}
.document-type-public-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.document-type-public-toggle em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #425d6d;
}
.document-type-public-toggle input {
  width: 17px;
  height: 17px;
}
@media (max-width: 640px) {
  .document-type-manager-row { align-items: flex-start; flex-direction: column; }
  .transaction-file-import-row.typed { flex-direction: column; }
}


/* CRM 241 — publication errors stay visible above/in the publish modal */
.crm-toast-region {
  z-index: 2147483600 !important;
}
.public-publish-inline-error {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #efc2bd;
  border-radius: 12px;
  background: #fff5f4;
  color: #8f2f2b;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}
.public-publish-inline-error.hidden { display: none !important; }

/* CRM242 — linked Public Listing Photos */
.transaction-photo-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.transaction-photos-status {
  margin-bottom: 14px;
}
.transaction-photos-summary,
.transaction-photos-empty-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid #dce5ec;
  border-radius: 12px;
  background: #f8fafc;
  color: #52697b;
}
.transaction-photos-summary strong,
.transaction-photos-empty-callout strong {
  color: #173f57;
}
.transaction-photos-empty-callout span {
  flex: 1 1 420px;
}
.transaction-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.transaction-photo-card {
  overflow: hidden;
  border: 1px solid #dce5ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 53, 70, 0.06);
}
.transaction-photo-preview {
  display: block;
  aspect-ratio: 4 / 3;
  background: #edf2f5;
  overflow: hidden;
}
.transaction-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.transaction-photo-card-body {
  display: grid;
  gap: 7px;
  padding: 12px;
}
.transaction-photo-card-body > strong {
  color: #173f57;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-photo-card-body > span {
  color: #7a8d9b;
  font-size: 12px;
  line-height: 1.35;
}
.transaction-photo-card-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.public-listing-folder-content-row:first-of-type {
  margin-top: 2px;
}
@media (max-width: 700px) {
  .transaction-photos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .transaction-photo-card-body {
    padding: 10px;
  }
}
@media (max-width: 430px) {
  .transaction-photos-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   CRM 243 — Documents 62/38 workspace + Public Listing sidebar
   ============================================================ */
@media (min-width: 1051px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: minmax(0, 62fr) minmax(360px, 38fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
}

@media (min-width: 1051px) and (max-width: 1280px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: minmax(0, 60fr) minmax(340px, 40fr) !important;
    gap: 14px !important;
  }
}

.transaction-public-listing-side-card {
  min-width: 0;
}
.transaction-public-listing-side-card .profile-card-header {
  padding: 12px 14px !important;
  min-height: 52px;
}
.transaction-public-listing-side-card .profile-card-body {
  padding: 11px 14px 13px !important;
}
.transaction-public-listing-side-card .public-listing-drive-status {
  align-items: flex-start !important;
  gap: 10px !important;
}
.transaction-public-listing-side-card .public-listing-drive-actions {
  gap: 6px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
.transaction-public-listing-side-card .public-listing-drive-actions .mini-btn {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 9px !important;
}
.transaction-public-listing-side-card .public-listing-drive-copy p {
  line-height: 1.45 !important;
}
.transaction-public-listing-side-card .public-listing-folder-contents,
.transaction-public-listing-side-card .public-listing-publications,
.transaction-public-listing-side-card .public-listing-publication-list {
  min-width: 0;
}
.transaction-public-listing-side-card .public-listing-publication-row,
.transaction-public-listing-side-card .public-listing-folder-row {
  gap: 9px !important;
}
.transaction-public-listing-side-card .public-listing-publication-copy,
.transaction-public-listing-side-card .public-listing-folder-copy {
  min-width: 0;
}
.transaction-public-listing-side-card .public-listing-publication-copy strong,
.transaction-public-listing-side-card .public-listing-folder-copy strong {
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .transaction-documents-workspace-grid {
    grid-template-columns: 1fr !important;
  }
  .transaction-documents-side-column {
    gap: 14px !important;
  }
}


/* CRM246 — AI Email Assistant */
.email-ai-assist {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid #dbe5eb;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
}
.email-ai-assist-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.email-ai-assist-header strong { color:#17384c; font-size:14px; }
.email-ai-assist-header span { display:block; margin-top:2px; color:#718492; font-size:12px; }
.email-ai-assist-actions { display:flex; gap:7px; flex-wrap:wrap; }
.email-ai-action { border:1px solid #cfdae1; background:#fff; color:#17384c; border-radius:999px; padding:7px 11px; font-weight:700; font-size:12px; cursor:pointer; }
.email-ai-action:hover { background:#f0f6fa; border-color:#9fb7c6; }
.email-ai-action:disabled { opacity:.58; cursor:wait; }
.email-ai-assist-message { margin-top:8px; min-height:16px; }
.email-ai-preview-modal { width:min(960px, calc(100vw - 36px)); max-height:min(88vh, 820px); }
.email-ai-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.email-ai-preview-panel { min-width:0; border:1px solid #dce5eb; border-radius:14px; background:#fff; overflow:hidden; }
.email-ai-preview-panel.revised { border-color:#b8d9c8; background:#fbfffc; }
.email-ai-preview-panel-title { padding:10px 12px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#607786; border-bottom:1px solid #e7edf1; }
.email-ai-preview-subject { padding:12px; font-weight:800; color:#17384c; border-bottom:1px solid #eef2f5; }
.email-ai-preview-body { padding:14px; color:#2e4656; line-height:1.5; white-space:pre-wrap; max-height:46vh; overflow:auto; }
.email-ai-preview-body p:first-child { margin-top:0; }
.email-ai-preview-body p:last-child { margin-bottom:0; }
@media (max-width: 800px) {
  .email-ai-preview-grid { grid-template-columns:1fr; }
  .email-ai-preview-body { max-height:28vh; }
}


/* CRM 248 — transaction comments/email switch + completed checklist visibility */
.transaction-activity-switch-header {
  gap: 10px;
  align-items: center;
}
.transaction-activity-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid #dfe5e9;
  border-radius: 9px;
  background: #f6f8f9;
}
.transaction-activity-switch-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #667784;
  padding: 6px 9px;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.transaction-activity-switch-btn.active {
  background: #fff;
  color: #17324a;
  box-shadow: 0 1px 3px rgba(17,40,60,.10);
}
.transaction-activity-email-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
}
.transaction-activity-card #transactionActivityEmailPanel .transaction-email-history-note {
  padding: 10px 14px 6px;
}
.transaction-activity-card #transactionSidebarEmailHistoryList {
  padding: 0 14px 14px;
  max-height: 620px;
  overflow: auto;
}
.transaction-activity-card .transaction-email-history-item {
  padding: 12px 0;
}
.transaction-activity-card .transaction-email-history-subject {
  font-size: 12px;
}
.transaction-checklist-card #toggleCompletedTransactionTasks {
  white-space: nowrap;
}

/* CRM 249 — transaction document organization + Dotloop-style drag/reorder */
.transaction-document-organize-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 12px;
  padding:10px 12px;
  border:1px solid #dfe6eb;
  border-radius:10px;
  background:#f8fafb;
}
.transaction-document-organize-copy { min-width:0; display:grid; gap:2px; }
.transaction-document-organize-copy strong { color:var(--dark); font-size:11px; }
.transaction-document-organize-copy span { color:var(--muted); font-size:9px; line-height:1.35; }
.transaction-document-sort-control { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.transaction-document-sort-control > span { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.transaction-document-sort-control select {
  min-width:150px;
  height:34px;
  padding:0 30px 0 10px;
  border:1px solid #cfd9e0;
  border-radius:8px;
  background:#fff;
  color:var(--dark);
  font:inherit;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.transaction-document-row {
  grid-template-columns: 22px 20px minmax(0,1fr) auto !important;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 120ms ease;
}
.transaction-document-drag-handle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:30px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#95a2ac;
  font-size:14px;
  line-height:1;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.transaction-document-drag-handle:hover { background:#edf3f6; color:#526879; }
.transaction-document-drag-handle:active { cursor:grabbing; }
.transaction-document-drag-handle.disabled { opacity:.28; cursor:default; }
.transaction-document-drag-source { opacity:.18 !important; pointer-events:none; }
.transaction-document-drag-ghost {
  position:fixed !important;
  z-index:10030 !important;
  margin:0 !important;
  pointer-events:none !important;
  opacity:.96;
  background:#fff !important;
  border:1px solid rgba(26,55,76,.16) !important;
  border-radius:10px !important;
  box-shadow:0 14px 34px rgba(18,45,65,.20), 0 2px 8px rgba(18,45,65,.10) !important;
  transform-origin:top left;
  will-change:transform;
}
.transaction-document-drop-placeholder {
  margin:5px 0;
  border:1.5px dashed #b8a15c;
  border-radius:9px;
  background:rgba(210,181,97,.09);
  box-shadow:inset 0 0 0 1px rgba(210,181,97,.05);
  transition:height 150ms ease, margin 150ms ease, background-color 150ms ease;
}
.transaction-document-group.transaction-document-drop-target > .transaction-document-group-header {
  background:rgba(210,181,97,.08);
  box-shadow:inset 3px 0 0 #d2b561;
}
.transaction-document-dragging,
.transaction-document-dragging * { cursor:grabbing !important; }
@media (max-width: 760px) {
  .transaction-document-organize-bar { align-items:stretch; flex-direction:column; }
  .transaction-document-sort-control { justify-content:space-between; }
  .transaction-document-sort-control select { flex:1; min-width:0; }
  .transaction-document-row { grid-template-columns: 24px 20px minmax(0,1fr) auto !important; }
  .transaction-document-row-actions { grid-column:auto !important; }
}
.transaction-document-group.transaction-document-drop-target .transaction-document-group-empty { display:none; }


/* ============================================================
   CRM 254 — TRANSACTION SOCIAL MEDIA STUDIO
   ============================================================ */
.transaction-social-media-layout {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:18px;
  align-items:start;
}
.social-media-preview-column { display:grid; gap:18px; min-width:0; }
.social-media-header-actions,
.social-media-caption-actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.social-media-editor-body { display:grid; gap:18px; }
.social-media-form-grid {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.35fr) minmax(90px,.55fr) minmax(90px,.55fr) minmax(130px,.8fr);
  gap:12px;
  align-items:end;
}
.social-media-open-house-fields {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:12px;
  padding:14px;
  border:1px solid var(--border, #dfe5e8);
  background:#f8fafb;
  border-radius:12px;
}
.social-media-help { display:block; margin-top:5px; color:#74818a; font-size:12px; line-height:1.35; }
.social-media-section-heading,
.social-media-caption-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-top:4px;
}
.social-media-section-heading > div:first-child,
.social-media-caption-heading > div:first-child { display:grid; gap:2px; }
.social-media-section-heading span,
.social-media-caption-heading span { color:#73808a; font-size:12px; }
.social-media-photo-count { font-size:12px; font-weight:700; color:#44545d; white-space:nowrap; }
.social-media-photo-picker {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.social-media-photo-option {
  position:relative;
  border:2px solid transparent;
  border-radius:11px;
  overflow:hidden;
  background:#eef2f4;
  aspect-ratio:1 / 1;
  padding:0;
  cursor:pointer;
  box-shadow:0 0 0 1px #d8e0e4 inset;
}
.social-media-photo-option:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(19,39,48,.12); }
.social-media-photo-option.selected { border-color:#c8a86d; box-shadow:0 0 0 2px rgba(200,168,109,.2); }
.social-media-photo-option img { width:100%; height:100%; object-fit:cover; display:block; }
.social-media-photo-number {
  position:absolute;
  top:7px;
  left:7px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#1b313a;
  color:white;
  font-weight:800;
  font-size:13px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.social-media-emoji-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:-8px;
  margin-bottom:8px;
}
.social-emoji-btn {
  border:1px solid #d8e0e4;
  background:#fff;
  border-radius:10px;
  min-width:42px;
  height:38px;
  padding:0 10px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.social-emoji-btn:hover { background:#f5f8fa; border-color:#c7d1d7; }
.social-media-caption-textarea { min-height:260px; resize:vertical; line-height:1.5; }
.social-media-preview-body { display:grid; gap:10px; }
.social-media-preview-status { color:#687780; font-size:12px; min-height:18px; }
.social-media-canvas-shell {
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:#f1f3f4;
  border:1px solid #dfe4e7;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 7px 24px rgba(24,43,52,.08);
}
#socialMediaCanvas { width:100%; height:auto; display:block; background:white; }
.social-media-draft-list { display:grid; gap:8px; }
.social-media-draft-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #edf0f2;
}
.social-media-draft-row:last-child { border-bottom:0; }
.social-media-draft-copy { display:grid; gap:2px; min-width:0; }
.social-media-draft-copy strong { font-size:13px; color:#243a44; }
.social-media-draft-copy span { font-size:11px; color:#7b8991; }
.social-media-empty-photos {
  grid-column:1/-1;
  padding:22px;
  border:1px dashed #cfd8dd;
  border-radius:11px;
  text-align:center;
  color:#718089;
  background:#fafbfc;
}
@media (max-width: 1050px) {
  .transaction-social-media-layout { grid-template-columns:1fr; }
  .social-media-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-media-price-field { grid-column:auto; }
}
@media (max-width: 720px) {
  .social-media-form-grid, .social-media-open-house-fields { grid-template-columns:1fr; }
  .social-media-photo-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-media-section-heading, .social-media-caption-heading { align-items:flex-start; flex-direction:column; }
}

/* ============================================================
   CRM 268 — AGENT GOALS & EXPECTATIONS
   ============================================================ */
.agent-goals-view {
  max-width: 1480px;
  margin: 0 auto;
}

.agent-goals-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
  margin-bottom: 18px;
  border: 1px solid rgba(216,187,115,.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 15%, rgba(216,187,115,.18), transparent 28%),
    linear-gradient(135deg, #11283c 0%, #17354d 100%);
  box-shadow: 0 18px 42px rgba(17,40,60,.12);
  color: #fff;
}

.agent-goals-hero h1 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.agent-goals-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.65;
}

.agent-goals-kicker,
.agent-goal-modal-kicker,
.agent-goal-section-kicker {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.agent-goals-hero .primary-btn {
  flex: 0 0 auto;
  background: var(--gold);
  border-color: var(--gold);
  color: #11283c;
  font-weight: 800;
}

.agent-goals-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17,40,60,.05);
}

.agent-goals-toolbar .field {
  min-width: min(360px, 100%);
  margin: 0;
}

.agent-goals-person-summary {
  margin-left: auto;
  text-align: right;
}

.agent-goals-person-summary span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.agent-goals-person-summary strong {
  color: var(--dark);
  font-size: 18px;
}

.agent-goals-content {
  display: grid;
  gap: 28px;
}

.agent-goal-section {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17,40,60,.06);
  overflow: hidden;
}

.agent-goal-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #eee8dc;
  background: linear-gradient(180deg, #fff 0%, #fcfaf5 100%);
}

.agent-goal-section-heading h2 {
  margin: 2px 0 4px;
  color: var(--dark);
  font-size: 22px;
  line-height: 1.1;
}

.agent-goal-section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.agent-goal-section-count {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #e6d9bc;
  border-radius: 999px;
  background: var(--gold-pale);
  color: var(--dark);
  font-size: 13px;
  font-weight: 800;
}

.agent-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 20px;
}

.agent-goal-card {
  position: relative;
  min-height: 190px;
  padding: 20px;
  border: 1px solid #e9e4da;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17,40,60,.045);
}

.agent-goal-card.goal {
  border-top: 3px solid var(--gold);
}

.agent-goal-card.expectation {
  border-top: 3px solid #7ca3bd;
}

.agent-goal-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.agent-goal-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-goal-kind-badge,
.agent-goal-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.agent-goal-kind-badge.goal {
  background: var(--gold-pale);
  color: #745a18;
}

.agent-goal-kind-badge.expectation {
  background: #edf5f9;
  color: #2f607d;
}

.agent-goal-category-badge {
  background: #f3f3ef;
  color: #686760;
}

.agent-goal-edit-btn {
  border: 0;
  background: transparent;
  color: #556c7d;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 7px;
  border-radius: 7px;
}

.agent-goal-edit-btn:hover {
  background: #f3f6f8;
  color: var(--dark);
}

.agent-goal-card h3 {
  margin: 0 0 14px;
  color: var(--dark);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.agent-goal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.agent-goal-meta > div {
  min-width: 130px;
  padding: 9px 11px;
  border: 1px solid #ece6d9;
  border-radius: 10px;
  background: #fcfaf6;
}

.agent-goal-meta span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.agent-goal-meta strong {
  color: var(--dark);
  font-size: 13px;
}

.agent-goal-description {
  margin: 0;
  color: #526273;
  font-size: 13px;
  line-height: 1.65;
}

.agent-goals-empty {
  padding: 68px 24px;
  border: 1px dashed #d9cba9;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fdfbf7 100%);
  text-align: center;
}

.agent-goals-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border: 1px solid #dfc985;
  border-radius: 50%;
  background: var(--gold-pale);
  color: #806622;
  font-size: 26px;
}

.agent-goals-empty h2 {
  margin: 0 0 7px;
  color: var(--dark);
  font-size: 22px;
}

.agent-goals-empty p {
  margin: 0 auto 18px;
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.agent-goal-modal {
  max-width: 720px;
}

.agent-goal-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-goal-form-grid .field-span-2 {
  grid-column: 1 / -1;
}

.agent-goal-form-grid textarea {
  resize: vertical;
  min-height: 116px;
}

.field-optional {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.agent-goal-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.agent-goal-modal-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .agent-goal-grid {
    grid-template-columns: 1fr;
  }

  .agent-goals-hero {
    flex-direction: column;
  }

  .agent-goals-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-goals-person-summary {
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .agent-goals-hero {
    padding: 22px 20px;
    border-radius: 14px;
  }

  .agent-goals-hero .primary-btn {
    width: 100%;
  }

  .agent-goal-grid {
    padding: 14px;
  }

  .agent-goal-card {
    padding: 16px;
  }

  .agent-goal-form-grid {
    grid-template-columns: 1fr;
  }

  .agent-goal-form-grid .field-span-2 {
    grid-column: auto;
  }

  .agent-goal-modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .agent-goal-modal-actions {
    width: 100%;
    margin-left: 0;
  }

  .agent-goal-modal-actions > button,
  .agent-goal-modal-footer > .danger-btn {
    flex: 1;
  }
}

/* =========================================================
   CRM 271 — EMAIL TEMPLATE EDITOR MESSAGE HEIGHT
   Give the template body enough room to comfortably read and
   edit full emails while preserving manual vertical resizing.
   ========================================================= */
#emailTemplateModalBackdrop #emailTemplateBody {
  min-height: 360px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

@media (max-width: 820px) {
  #emailTemplateModalBackdrop #emailTemplateBody {
    min-height: 280px !important;
  }
}


/* CRM 272 — MONTHLY BOOKKEEPING */
.bookkeeping-topbar {
  align-items: flex-end;
  gap: 24px;
}
.bookkeeping-month-control {
  display: grid;
  gap: 7px;
  min-width: 190px;
  color: #68707b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bookkeeping-month-control input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d8dee7;
  border-radius: 10px;
  background: #fff;
  color: #20242a;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.bookkeeping-summary-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr);
  gap: 24px;
  align-items: center;
  margin: 4px 0 18px;
  padding: 16px 18px;
  border: 1px solid #e3e7ed;
  border-radius: 14px;
  background: #fff;
}
.bookkeeping-summary-row > div:first-child {
  display: grid;
  gap: 3px;
}
.bookkeeping-summary-row strong {
  color: #1f2933;
  font-size: 15px;
}
.bookkeeping-summary-row span:not(.bookkeeping-progress-track span) {
  color: #77808b;
  font-size: 13px;
}
.bookkeeping-progress-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f4;
}
.bookkeeping-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #1f2937;
  transition: width .22s ease;
}
.bookkeeping-message {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #f1d5a8;
  border-radius: 10px;
  background: #fff8eb;
  color: #7a5015;
  font-size: 13px;
}
.bookkeeping-table-shell {
  overflow-x: auto;
  border: 1px solid #dfe4ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(22, 30, 42, .04);
}
.bookkeeping-table {
  width: 100%;
  min-width: 1210px;
  border-collapse: separate;
  border-spacing: 0;
}
.bookkeeping-table th,
.bookkeeping-table td {
  border-right: 1px solid #e5e9ef;
  border-bottom: 1px solid #e5e9ef;
  padding: 13px 14px;
  text-align: center;
  vertical-align: middle;
}
.bookkeeping-table th:last-child,
.bookkeeping-table td:last-child { border-right: 0; }
.bookkeeping-table tbody tr:last-child td { border-bottom: 0; }
.bookkeeping-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  color: #4a525d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .015em;
}
.bookkeeping-table .bookkeeping-code-col {
  width: 105px;
  text-align: left;
}
.bookkeeping-table .bookkeeping-account-col {
  width: 245px;
  text-align: left;
}
.bookkeeping-table .bookkeeping-date-col {
  width: 170px;
}
.bookkeeping-statement-date {
  width: 170px;
}
.bookkeeping-statement-date-display {
  margin-bottom: 6px;
  color: #173a56;
  font-size: 14px;
  font-weight: 800;
}
.bookkeeping-statement-date-display.is-unset {
  color: #8a929c;
  font-weight: 650;
}
.bookkeeping-close-day-select {
  width: 150px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid #cfd6df;
  border-radius: 8px;
  background: #fff;
  color: #4a525d;
  font: inherit;
  font-size: 11px;
}
.bookkeeping-close-day-select:focus {
  outline: none;
  border-color: #6d7f8d;
  box-shadow: 0 0 0 3px rgba(23, 58, 86, .08);
}
.bookkeeping-close-day-select:disabled {
  opacity: .6;
  cursor: wait;
}
.bookkeeping-table td.bookkeeping-code,
.bookkeeping-table td.bookkeeping-account {
  text-align: left;
  white-space: nowrap;
}
.bookkeeping-table td.bookkeeping-code {
  color: #4f5965;
  font-weight: 700;
}
.bookkeeping-account-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: #252a31;
}
.bookkeeping-type-pill {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: #f1f3f6;
  color: #7a828d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bookkeeping-check {
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: #1f2937;
}
.bookkeeping-check:disabled { cursor: wait; opacity: .55; }
.bookkeeping-table tr.is-complete td { background: #fbfcfd; }
.bookkeeping-footnote {
  margin: 10px 2px 0;
  color: #7b838d;
  font-size: 12px;
}
@media (max-width: 760px) {
  .bookkeeping-topbar { align-items: stretch; }
  .bookkeeping-month-control { min-width: 0; width: 100%; }
  .bookkeeping-summary-row { grid-template-columns: 1fr; gap: 12px; }
}

/* CRM 272 — company dividers inside Monthly Bookkeeping */
.bookkeeping-table .bookkeeping-company-row td {
  padding: 11px 14px;
  border-right: 0;
  background: #eef3f7;
  color: #173a56;
  text-align: left;
  font-weight: 800;
}
.bookkeeping-company-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  margin-right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #173a56;
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
}
.bookkeeping-company-name {
  font-size: 13px;
  letter-spacing: .01em;
}

/* CRM 275 — compact Monthly Bookkeeping desktop layout */
@media (min-width: 1100px) {
  #bookkeepingView > .bookkeeping-topbar {
    min-height: 54px !important;
    margin-bottom: 7px !important;
    padding-top: 7px !important;
    padding-bottom: 5px !important;
    gap: 16px !important;
  }
  #bookkeepingView > .bookkeeping-topbar h1 {
    margin: 1px 0 1px !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
  }
  #bookkeepingView > .bookkeeping-topbar p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  #bookkeepingView .page-kicker {
    margin-bottom: 0 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
  #bookkeepingView .bookkeeping-month-control {
    min-width: 158px !important;
    gap: 3px !important;
    font-size: 10px !important;
  }
  #bookkeepingView .bookkeeping-month-control input {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  #bookkeepingView .bookkeeping-summary-row {
    grid-template-columns: 200px minmax(240px, 1fr) !important;
    gap: 16px !important;
    margin: 0 0 7px !important;
    padding: 7px 12px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }
  #bookkeepingView .bookkeeping-summary-row > div:first-child {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
  #bookkeepingView .bookkeeping-summary-row strong {
    font-size: 11px !important;
  }
  #bookkeepingView .bookkeeping-summary-row span:not(.bookkeeping-progress-track span) {
    font-size: 10px !important;
  }
  #bookkeepingView .bookkeeping-progress-track {
    height: 6px !important;
  }
  #bookkeepingView .bookkeeping-table-shell {
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(22,30,42,.035) !important;
  }
  #bookkeepingView .bookkeeping-table {
    min-width: 1080px !important;
    table-layout: fixed !important;
  }
  #bookkeepingView .bookkeeping-table th,
  #bookkeepingView .bookkeeping-table td {
    padding: 3px 8px !important;
    height: 29px !important;
    line-height: 1.08 !important;
  }
  #bookkeepingView .bookkeeping-table thead th {
    height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 9px !important;
    line-height: 1.12 !important;
  }
  #bookkeepingView .bookkeeping-table .bookkeeping-code-col {
    width: 72px !important;
  }
  #bookkeepingView .bookkeeping-table .bookkeeping-account-col {
    width: 235px !important;
  }
  #bookkeepingView .bookkeeping-table .bookkeeping-date-col {
    width: 178px !important;
  }
  #bookkeepingView .bookkeeping-table td.bookkeeping-code {
    font-size: 10px !important;
  }
  #bookkeepingView .bookkeeping-account-name {
    gap: 5px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  #bookkeepingView .bookkeeping-type-pill {
    padding: 2px 5px !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
  }
  #bookkeepingView .bookkeeping-statement-date {
    width: auto !important;
    white-space: nowrap !important;
  }
  #bookkeepingView .bookkeeping-statement-date-display {
    display: inline-block !important;
    min-width: 48px !important;
    margin: 0 5px 0 0 !important;
    font-size: 10px !important;
    line-height: 26px !important;
    vertical-align: middle !important;
  }
  #bookkeepingView .bookkeeping-close-day-select {
    display: inline-block !important;
    width: 94px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 1px 22px 1px 7px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
  #bookkeepingView .bookkeeping-check {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 auto !important;
  }
  #bookkeepingView .bookkeeping-table .bookkeeping-company-row td {
    height: 24px !important;
    padding: 2px 8px !important;
    line-height: 1 !important;
  }
  #bookkeepingView .bookkeeping-company-number {
    min-width: 28px !important;
    margin-right: 7px !important;
    padding: 2px 6px !important;
    font-size: 8px !important;
  }
  #bookkeepingView .bookkeeping-company-name {
    font-size: 10px !important;
  }
  #bookkeepingView .bookkeeping-footnote {
    margin: 4px 2px 0 !important;
    font-size: 9px !important;
  }
  #bookkeepingView .bookkeeping-message {
    margin-bottom: 6px !important;
    padding: 6px 9px !important;
    font-size: 10px !important;
  }
}

/* CRM 280 — Dashboard New Opportunity status/stage picker */
#transactionForm.opportunity-mode .opportunity-status-field {
  min-width: 0;
}

#transactionForm.opportunity-mode .opportunity-status-help {
  margin-top: 5px;
  line-height: 1.35;
}

/* CRM282 — Client Estimate broker fee % / $ toggle */
.estimate-fee-entry { display:flex; align-items:stretch; gap:7px; }
.estimate-fee-entry select { flex:0 0 72px; min-width:72px; font-weight:800; text-align:center; }
.estimate-fee-entry input { flex:1 1 auto; min-width:0; }