/* V75 — readable navigation, dated agendas and balanced actions on phones.
   Loaded after the shared V72 rules; desktop tables retain local scrolling. */
body[data-portal] .messages-filter-actions {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
body[data-portal] .messages-filter-actions>.button { min-height:44px; }
body[data-portal] .messages-tab-count {
  display:inline-block; min-width:1.6em; padding:1px 6px; margin:0;
  border-radius:999px; background:#ffffff30; font-size:13px; line-height:1.4;
  white-space:nowrap; text-align:center;
}
body[data-portal] .messages-total-count { font-weight:650; }
body[data-portal] .messages-table .messages-empty {
  text-align:left; white-space:normal; vertical-align:top;
}
body[data-portal] .messages-empty-text {
  display:block; max-width:min(32rem,calc(100vw - 110px)); line-height:1.5;
  white-space:normal; overflow-wrap:break-word;
}

@media (max-width:900px) {
  /* Seven finance tabs must wrap as complete labels, not shrink into columns
     a few letters wide. The same contract covers planning/document tabs. */
  body[data-portal] :is(.v27-finance-tabs,.v27-training-tabs,.v52-planning-tabs,.v28-doc-tabs) {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; max-width:100%; min-width:0; gap:8px; padding:6px;
  }
  body[data-portal] :is(.v27-finance-tabs,.v27-training-tabs,.v52-planning-tabs,.v28-doc-tabs)>button {
    flex:none; width:100%; min-width:0; min-height:48px; height:auto;
    margin:0; padding:10px 8px; font-size:15px; line-height:1.35;
    white-space:normal; overflow-wrap:normal; word-break:normal; hyphens:none;
    text-align:center; justify-content:center;
  }
  body[data-portal] :is(.v27-finance,.v27-finance>.panel) {
    min-width:0; max-width:100%;
  }
  body[data-portal] .v27-finance .table-scroll {
    width:100%; min-width:0; max-width:100%; overflow:auto;
    overscroll-behavior-x:contain;
  }
  body[data-portal] .v27-finance-pagination { flex-wrap:wrap; gap:12px; }
  body[data-portal] .v27-finance-pagination>div {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; min-width:0; gap:10px;
  }
  body[data-portal] .v27-finance-pagination>div>.button {
    width:100%; min-height:44px; margin:0; padding:10px;
    white-space:normal; word-break:normal; overflow-wrap:normal;
  }

  /* The real date element is v72-calendar-date. The older mobile rule used
     v52-calendar-date and hid both the short number and the full date. */
  body[data-portal] .v52-calendar-grid { min-width:0; width:100%; }
  body[data-portal] .v52-calendar-weekdays { display:none; }
  body[data-portal] .v52-calendar-days {
    display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  }
  body[data-portal] .v52-calendar-day {
    min-width:0; min-height:52px; padding:0 12px 8px; border-right:0;
  }
  body[data-portal] .v52-calendar-day>header {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    min-height:44px; padding:10px 0; color:#345565;
  }
  body[data-portal] .v52-calendar-day>header>strong { display:none; }
  body[data-portal] .v52-calendar-day>header>.v72-calendar-date {
    display:inline; font-size:16px; font-weight:750; line-height:1.4;
    white-space:normal; word-break:normal; overflow-wrap:normal;
  }
  body[data-portal] .v52-calendar-day>header>small {
    font-size:12px; line-height:1.4;
  }
  body[data-portal] .v52-calendar-day.today>header {
    padding:10px; margin:0 -12px 8px;
  }
  body[data-portal] .v52-calendar-event button,
  body[data-portal] .v52-calendar-absence {
    min-height:44px; font-size:14px; line-height:1.45;
  }
  body[data-portal] .v52-calendar-event strong { font-size:16px; }
  body[data-portal] .v52-calendar-event small { font-size:12px; }
  body[data-portal] .v52-calendar-event :is(.v52-calendar-options,.v54-calendar-report),
  body[data-portal] .v52-calendar-event .v55-calendar-contacts>button {
    min-height:44px; font-size:13px;
  }
  body[data-portal] .v52-calendar-period {
    display:grid; grid-template-columns:44px minmax(0,1fr) 44px;
    width:100%; min-width:0; gap:8px;
  }
  body[data-portal] .v52-calendar-period h3 { min-width:0; font-size:19px; }
  body[data-portal] .v52-calendar-period>.button {
    width:100%; min-width:0; min-height:44px; padding:10px;
  }
  body[data-portal] .v52-calendar-period [data-action="v52-calendar-today"] { grid-column:1/-1; }
  body[data-portal] .v52-calendar-toolbar .field { width:100%; min-width:0; }
  body[data-portal] .v52-calendar-toolbar::after { content:none; }

  /* A client record is a title followed by its actions. The title must not
     compete with the six-button toolbar for half of a phone's width. */
  body[data-portal] #modal.v64-record-modal .modal-header {
    display:grid; grid-template-columns:minmax(0,1fr); align-items:start;
    gap:14px; padding:14px; margin:0;
  }
  body[data-portal] #modal.v64-record-modal .modal-header>div:first-child {
    display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch;
    width:100%; min-width:0; flex:none; gap:6px;
  }
  body[data-portal] #modal.v64-record-modal .modal-header h2 {
    margin:0; font-size:23px; line-height:1.25; overflow-wrap:break-word;
  }
  body[data-portal] #modal.v64-record-modal .modal-header p {
    font-size:15px; line-height:1.4; margin:0; overflow-wrap:anywhere;
  }
  body[data-portal] #modal.v64-record-modal .modal-header>div:first-child>.pill {
    justify-self:start; max-width:100%;
  }
  body[data-portal] #modal.v64-record-modal .modal-header>.v64-record-toolbar {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; min-width:0; max-width:none; flex:none; gap:8px;
    align-items:stretch; justify-content:stretch;
  }
  body[data-portal] #modal.v64-record-modal .v64-record-toolbar>.button {
    display:flex; width:100%; min-width:0; min-height:44px; height:auto;
    padding:10px 8px; font-size:14px; line-height:1.35;
    white-space:normal; word-break:normal; overflow-wrap:normal;
    justify-content:center; align-items:center;
  }

  /* Search fields and the two search actions form stable rows in either
     orientation. Counter badges stay next to their labelled category. */
  body[data-portal] .messages-filter-bar {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; min-width:0; gap:14px 10px; align-items:end;
  }
  body[data-portal] .messages-filter-bar>label,
  body[data-portal] .messages-filter-bar>label:first-child {
    min-width:0; width:100%; max-width:100%; margin:0; font-size:14px;
  }
  body[data-portal] .messages-filter-bar>label:first-child { grid-column:1/-1; }
  body[data-portal] .messages-filter-bar :is(input,select) {
    width:100%; min-width:0; min-height:46px; font-size:16px;
  }
  body[data-portal] .messages-filter-bar>.messages-filter-actions {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    grid-column:1/-1; width:100%; min-width:0; gap:10px;
  }
  body[data-portal] .messages-filter-actions>.button {
    width:100%; min-width:0; min-height:46px; height:auto;
    padding:10px 8px; margin:0; font-size:15px; line-height:1.35;
    white-space:normal; overflow-wrap:normal; word-break:normal;
  }
  body[data-portal] .messages-tabs {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  }
  body[data-portal] .messages-tabs>.messages-tab {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:0; min-height:62px; width:100%; padding:8px 5px; gap:3px;
    white-space:normal; overflow-wrap:normal; word-break:normal; font-size:14px;
  }
  body[data-portal] .messages-summary {
    display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:start;
  }
  body[data-portal] .messages-summary>.messages-pending-filter {
    width:100%; min-width:0; min-height:46px; padding:10px 12px;
    white-space:normal; word-break:normal; overflow-wrap:normal; line-height:1.4;
  }
  body[data-portal] .messages-summary>small { margin:0; font-size:13px; line-height:1.5; }
  body[data-portal] .messages-pagination { flex-wrap:wrap; }
  body[data-portal] .messages-pagination>div {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:10px;
  }
  body[data-portal] .messages-pagination>div>.button {
    width:100%; min-width:0; min-height:44px; padding:10px;
    white-space:normal; overflow-wrap:normal; word-break:normal;
  }
}

@media (min-width:600px) and (max-width:900px) {
  body[data-portal] :is(.v27-finance-tabs,.v27-training-tabs,.v28-doc-tabs) {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body[data-portal] .v52-calendar-days { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-portal] .v52-calendar-day:nth-child(odd) { border-right:1px solid #bfd0da; }
  body[data-portal] #modal.v64-record-modal .modal-header>.v64-record-toolbar {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body[data-portal] .messages-filter-bar { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body[data-portal] .messages-filter-bar>label:first-child { grid-column:auto; }
  body[data-portal] .messages-tabs>.messages-tab { flex-direction:row; gap:8px; min-height:48px; }
  body[data-portal] .messages-summary { grid-template-columns:auto minmax(0,1fr); align-items:center; }
  body[data-portal] .messages-summary>small { grid-column:1/-1; }
}

/* Native select text needs a full row on narrow phones; its action buttons
   remain a balanced pair below the fields. */
@media (max-width:480px) {
  body[data-portal] .messages-filter-bar>label { grid-column:1/-1; }
}

/* In a short landscape viewport, scroll the complete record instead of
   reserving all available height for its header. All actions remain present. */
@media (orientation:landscape) and (max-width:950px) and (max-height:500px) {
  body[data-portal] #modal.v64-record-modal .modal-inner {
    display:block; overflow:auto; max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px); overscroll-behavior:contain;
  }
  body[data-portal] #modal.v64-record-modal .modal-body { overflow:visible; }
  body[data-portal] #modal.v64-record-modal .modal-header { gap:10px; padding:12px; }
}

/* Client record actions stay together; the account removal has its own place
   after the other actions in both visual and keyboard order. */
body[data-portal] #modal .v64-record-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}
body[data-portal] #modal .v76-record-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
body[data-portal] #modal .v64-record-footer > .button[data-action="delete-client"] {
  --v76-delete-bg: #c81024;
  justify-self: end;
  background: var(--v76-delete-bg) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #900e20 !important;
  filter: none !important;
}
body[data-portal] #modal .v64-record-footer > .button[data-action="delete-client"]:hover {
  --v76-delete-bg: #ae0c1e;
}
body[data-portal] #modal .v64-record-footer > .button[data-action="delete-client"]:active {
  --v76-delete-bg: #940b1a;
}
body[data-portal] #modal .v64-record-footer > .button[data-action="delete-client"]:focus-visible {
  outline: 3px solid #172e3b !important;
  outline-offset: 3px;
}
body[data-portal] #modal .v76-client-access-panel {
  display: grid;
  gap: 22px;
}
body[data-portal] #modal .v76-client-access-commands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 14px;
  align-items: stretch;
}
body[data-portal] #modal .v76-client-access-commands > .button {
  width: 100%;
  min-height: 44px;
  white-space: normal;
  line-height: 1.35;
}
body[data-portal] #modal .v76-client-access-panel > .v29-password-help { margin: 0; }
@media (max-width: 640px) {
  body[data-portal] #modal .v64-record-footer { grid-template-columns: minmax(0, 1fr); }
}

.v76-client-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  grid-column: 1 / -1;
  min-width: 0;
}
body[data-portal] #modal .v76-client-title h2 {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}
.v76-client-status {
  --status-bg: #e5ebee;
  --status-fg: #243c49;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  max-width: 100%;
  padding: .2em .6em;
  color: var(--status-fg);
  background-color: var(--status-bg);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: .86rem;
  line-height: 1.25;
  font-weight: 750;
}
.v76-client-status .icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  stroke-width: 2.5;
}
.v76-client-status[data-client-status="approved"] {
  --status-bg: #00bf67;
  --status-fg: #062f18;
}
.v76-client-status[data-client-status="suspended"] {
  --status-bg: #994000;
  --status-fg: #fff;
  --status-flash-bg: #ffad42;
  --status-flash-fg: #421500;
}
.v76-client-status[data-client-status="blocked"] {
  --status-bg: #ac102b;
  --status-fg: #fff;
  --status-flash-bg: #ff5962;
  --status-flash-fg: #27040a;
}
.v76-client-title .v76-client-status {
  padding: .3em .78em;
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 800;
}
@keyframes v76-client-status-blink {
  0%, 100% { background-color: var(--status-bg); color: var(--status-fg); }
  50% { background-color: var(--status-flash-bg); color: var(--status-flash-fg); }
}
@media (prefers-reduced-motion: no-preference) {
  .v76-client-title .v76-client-status:is([data-client-status="suspended"], [data-client-status="blocked"]) {
    animation: v76-client-status-blink 1.4s steps(1, end) infinite;
  }
}

/* Pending approvals are visible even when e-mail confirmation is outstanding. */
.v77-client-status-group { display: inline-flex; flex-flow: column; align-items: flex-start; gap: .2rem; }
.v77-email-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; line-height: 1.25; color: #344e5e; }
.v77-email-status .icon { flex: none; width: 1em; height: 1em; }
body[data-portal] .navigation .nav-item[data-action="show-pending"] { box-shadow: inset 4px 0 #b89ae9; }
body[data-portal] .nav-item [data-badge="pending_clients"]:not([hidden]) {
  inset-block-start: 50%; transform: translateY(-50%); min-width: 1.8rem; height: 1.8rem;
  padding-inline: .3rem; font-family: inherit; font-weight: 800; font-size: .92rem;
  background: #e4d1ff; color: #361663; border: 2px solid #593484;
}
/* A steady icon and label stay readable in both frames. */
.v76-client-status[data-client-status="pending"] {
  --status-bg: #594089; --status-fg: #fff;
  --status-flash-bg: #e4d1ff; --status-flash-fg: #361663;
}
.v76-client-status[data-client-status="unconfirmed"] {
  --status-bg: #ffb748; --status-fg: #362008;
  --status-flash-bg: #864100; --status-flash-fg: #fff;
}
.v76-client-status[data-client-status="rejected"] {
  --status-bg: #902448; --status-fg: #fff;
  --status-flash-bg: #ffd0db; --status-flash-fg: #63102c;
}
.v76-client-status[data-client-status="access_pending"] {
  --status-bg: #16647e; --status-fg: #fff;
  --status-flash-bg: #c4efff; --status-flash-fg: #123e54;
}
.v76-client-status[data-client-status="archived"] {
  --status-bg: #475664; --status-fg: #fff;
  --status-flash-bg: #e5ebee; --status-flash-fg: #243c49;
}
.v76-client-status[data-client-status="unknown"] {
  --status-bg: #645c3c; --status-fg: #fff;
  --status-flash-bg: #f8eac6; --status-flash-fg: #453a24;
}
body[data-portal] button.v77-pending-filter {
  background: #594089; color: #fff; border-color: #403066; font-weight: 800;
}
@keyframes v77-pending-blink {
  0%, 100% { background-color: #e4d1ff; color: #361663; }
  50% { background-color: #593484; color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-portal] .navigation [data-badge="pending_clients"]:not([hidden]),
  body[data-portal] button.v77-pending-filter {
    animation: v77-pending-blink 1.4s steps(1, end) infinite;
  }
  .v76-client-status:not([data-client-status="approved"]) {
    animation: v76-client-status-blink 1.4s steps(1, end) infinite;
  }
}
body[data-portal] .nav-item [data-badge="pending_clients"][hidden] { display: none; }
.v77-creation-approval {
  margin: 0; padding: .85rem 1rem 1rem; min-width: 0;
  border: 1px solid #a6bbc5; border-radius: .7rem;
}
.v77-creation-approval legend { font-weight: 700; padding-inline: .25rem; }
body[data-portal] .v77-creation-approval label { display: flex; align-items: center; gap: .65rem; min-height: 2.5rem; cursor: pointer; }
body[data-portal] .v77-creation-approval input { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; }
#client-force-approval {
  width: min(32rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; margin: auto;
  padding: 0; border: 1px solid #8da9b5; border-radius: 1rem; background: #f5f9fb; color: #1f3949;
  box-shadow: 0 1.3rem 3rem #12293555;
}
#client-force-approval::backdrop { background: #1027369e; }
#client-force-approval header { padding: 1rem 1.3rem; border-bottom: 1px solid #bbced6; background: #e1ebef; }
#client-force-approval h2 { margin: 0; font-size: 1.3rem; }
#client-force-approval header p { margin: .25rem 0 0; }
#client-force-approval form > div { padding: 1rem 1.3rem; }
#client-force-message { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
#client-force-approval footer { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .65rem; justify-content: flex-end; }
#client-force-approval .button { min-height: 44px; }
#client-force-approval .button[value="force"] { background: #146847 !important; color: white !important; border: 1px solid #0a4830; }

body[data-portal] button[data-action="approve-user"] {
  background: #146847 !important; border-color: #0a4830; color: #fff !important;
}

body[data-portal] #modal .v64-send-activation { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem .75rem; }
.v77-trial-field { grid-column: 1/-1; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; }
body[data-portal] #modal .v64-send-activation textarea { width: 100%; grid-column: 1; grid-row: 2; }
body[data-portal] #modal .v64-send-activation button[type="submit"] { grid-column: 2; grid-row: 2; }
.v77-trial-feedback, .v64-send-activation [data-form-error] { grid-column: 1/-1; margin: 0; }
.v77-trial-feedback:empty { display: none; }
@media(max-width: 720px) {
  body[data-portal] #modal .v64-send-activation { grid-template-columns: minmax(0,1fr); }
  body[data-portal] #modal .v64-send-activation button[type="submit"] { grid-column: 1; grid-row: auto; }
  body[data-portal] #modal .v77-trial-field .button { white-space: normal; min-height: 44px; }
}