/* ==========================================================================
   mobile.css — phone layer for SYNC
   Loaded last (after {% block page_styles %}) so the mobile layer wins.
   Consumes the tokens from theme.css; defines no colours of its own.
   Breakpoint 991.98px matches Bootstrap lg, where layout.html swaps the
   fixed sidebar for the bottom nav + drawer.
   ========================================================================== */

:root {
  --nav-h: 52px;
  --tap: 40px;
}

/* ==========================================================================
   Shell
   ========================================================================== */
@media (max-width: 991.98px) {
  /* The 280px sidebar offset only applies where the sidebar exists (lg+).
     Left unguarded it gave phones ~110px of usable width. */
  body.with-sidebar { margin-left: 0; }

  html, body { max-width: 100%; overflow-x: hidden; }

  /* layout.html wraps content in .d-flex, which on a phone forces the content
     column to share a row it has no room for. */
  body > .d-flex { display: block !important; }

  body.with-sidebar {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
  }

  /* One screen gutter everywhere, whatever container a template reached for. */
  .container, .container-fluid, .main-content {
    width: 100%;
    max-width: 100%;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .container.p-4, .container-fluid.p-4, .main-content.p-4 {
    padding-top: var(--sp-2) !important;
    padding-bottom: var(--sp-2) !important;
  }

  .row { --bs-gutter-x: var(--sp-2); --bs-gutter-y: var(--sp-2); }
}

/* ==========================================================================
   Bottom navigation
   The markup existed in layout.html but had no CSS at all, so it rendered as
   inline content at the top of every page.
   ========================================================================== */
.mobile-nav { display: none; }

@media (max-width: 991.98px) {
  .mobile-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--c-white);
    border-top: var(--border);
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--tap);
    border: 0;
    background: none;
    color: var(--c-400);
    font-size: var(--t-meta);
    font-weight: 450;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-item i { font-size: 1rem; }
  .mobile-nav-item:active { color: var(--c-900); background: var(--c-050); }
  .mobile-nav-item.active { color: var(--c-black); font-weight: 500; }

  /* _sidebar.html is absolutely positioned for desktop; inside the drawer it
     has to flow normally. */
  .offcanvas .sidebar-container {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
  }
  .offcanvas { width: min(300px, 86vw) !important; }
  .offcanvas-header { padding: var(--sp-2); }
  .offcanvas-body { padding: var(--sp-1) var(--sp-2) var(--sp-3); }
}

/* ==========================================================================
   Screen header — title block, then actions beneath
   8 templates share `d-flex justify-content-between` for this.
   ========================================================================== */
@media (max-width: 991.98px) {
  .d-flex.justify-content-between:has(> h1, > h2, > h3, > h4, > .h3, > .h4) {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
    margin-bottom: var(--sp-2) !important;
  }

  .d-flex.justify-content-between:has(> h1, > h2, > h3, > h4, > .h3, > .h4) > .d-flex {
    gap: var(--sp-1) !important;
  }

  .d-flex.justify-content-between:has(> h1, > h2, > h3, > h4, > .h3, > .h4) > .d-flex > .btn {
    flex: 1;
  }

  .btn { white-space: nowrap; }

  h1, .h1 { font-size: var(--t-display); }
  h2, .h2 { font-size: var(--t-title); }
}

/* ==========================================================================
   Cards -> list rows
   The brief: rely on spacing, type and dividers rather than floating panels.
   A stat card becomes a plain row in a hairline-divided list, with no outer
   frame — boxes inside boxes is exactly what we are avoiding.

   theme.css sets border-color/radius with !important to normalise the mixed
   .shadow-sm/.border-light/.rounded-3 stacking, so the overrides here must
   also be !important to win.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Strip all card chrome; the row is defined by a single bottom hairline. */
  .row > [class*="col-"] > .card:has(.stat-icon-box) {
    border: 0 !important;
    border-bottom: 1px solid var(--c-200) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 12px 0 !important;
  }

  .row > [class*="col-"]:last-child > .card:has(.stat-icon-box) {
    border-bottom: 0 !important;
  }

  /* No outer frame; rows sit flush in the screen gutter. */
  .row:has(> [class*="col-"] > .card .stat-icon-box) {
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .row:has(> [class*="col-"] > .card .stat-icon-box) > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Row content: label leads, figure is the emphasis, caption is metadata. */
  .card:has(.stat-icon-box) h6 {
    font-size: var(--t-small);
    font-weight: 450;
    color: var(--c-900);
    margin-bottom: 2px !important;
  }

  .card:has(.stat-icon-box) .fs-2 {
    font-size: 1.25rem !important;
    line-height: 1.15;
    margin-bottom: 0 !important;
  }

  .card:has(.stat-icon-box) p.small {
    font-size: var(--t-meta);
    color: var(--c-400);
    margin-top: 2px;
  }

  /* Icon recedes to a quiet glyph rather than a filled tile. */
  .stat-icon-box {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  .stat-icon { font-size: 14px !important; color: var(--c-300) !important; }
}

/* ==========================================================================
   Tables
   ========================================================================== */
@media (max-width: 991.98px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }

  .table > thead th { padding: 6px 12px; }
  .table > tbody td { padding: 10px 12px; white-space: nowrap; }

  /* nowrap keeps columns their shape while the table scrolls sideways, but a
     long-text cell must be allowed to wrap — otherwise it renders as one line
     and is clipped at the column edge, which reads as text running into the
     next column. */
  .table > tbody td:has(> .cell-collapse) { white-space: normal; }
  .cell-collapse,
  .cell-collapse__peek,
  .cell-collapse__body { white-space: normal; }

  /* Sticky headers fight their scroll container on iOS. */
  .table-responsive .sticky-top { position: static; }

  /* A table sitting directly in a card shouldn't add a second border. */
  .card > .table-responsive { border: 0; }
}

/* ==========================================================================
   Touch targets & forms
   ========================================================================== */
@media (max-width: 991.98px) {
  .btn {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-sm { min-height: 34px; }
  td .btn, td .btn-sm { min-height: 34px; min-width: 34px; }

  .nav-link, .dropdown-item { min-height: var(--tap); display: flex; align-items: center; }

  /* 16px prevents iOS zooming the page on focus. */
  .form-control, .form-select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="search"],
  textarea, select {
    font-size: 16px;
    min-height: var(--tap);
  }

  .form-check-input { width: 1.15rem; height: 1.15rem; }

  /* Modals behave as bottom sheets — reachable with a thumb. */
  .modal-dialog {
    margin: 0;
    position: fixed;
    inset: auto 0 0 0;
    max-width: 100%;
  }
  .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    max-height: 90vh;
  }
  .modal-body { overflow-y: auto; }
  .modal-footer {
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    position: sticky;
    bottom: 0;
    background: var(--c-white);
  }
  .modal-footer .btn { flex: 1; }
}

/* ==========================================================================
   Rhythm
   ========================================================================== */
@media (max-width: 767.98px) {
  .card + .card { margin-top: var(--sp-2); }
  .mb-4 { margin-bottom: var(--sp-3) !important; }
  .mt-4 { margin-top: var(--sp-3) !important; }
  .p-4  { padding: var(--sp-2) !important; }

  /* Long unbroken strings (emails, IDs) must not widen the page. */
  td, th, p, a, .card-title { overflow-wrap: anywhere; }
  h1, h2, h3, h4, h5, h6, .card-title { min-width: 0; }
}

/* ==========================================================================
   Alignment — everything hangs off one left edge
   A card wrapping a table adds its own inset, so its heading sat indented
   relative to the screen title. On a phone the card frame earns nothing:
   drop it and let the content align to the screen gutter.
   ========================================================================== */
@media (max-width: 767.98px) {
  .card:has(.table),
  .card:has(> .table-responsive) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: var(--sp-1);
  }

  .card:has(.table) > .card-body,
  .card:has(.table) > div:not(.table-responsive) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .card:has(.table) .card-header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0;
  }

  /* Table rules run the full width of the screen gutter. */
  .card:has(.table) .table > thead th:first-child,
  .card:has(.table) .table > tbody td:first-child { padding-left: 0; }

  /* A count/summary line beside a heading shouldn't wrap onto two lines. */
  .card:has(.table) h5,
  .card:has(.table) h6 { margin-bottom: var(--sp-1); }
}

/* ==========================================================================
   Stacked tables
   A six-column table cannot fit 390px, and sideways scrolling hides columns.
   Tables marked .table-stack reflow into one block per record: the header is
   hidden and each cell shows its own label, taken from data-label.

   To apply to another table: add .table-stack to the <table> and
   data-label="..." to each <td>.
   ========================================================================== */
@media (max-width: 767.98px) {
  .table-stack,
  .table-stack thead,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }

  /* Column headings are redundant once each cell carries its own label. */
  .table-stack thead { display: none; }

  .table-stack tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--c-200);
  }

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

  .table-stack td {
    /* A fixed two-column grid: labels and values line up down the record,
       including labels that wrap to a second line. */
    display: grid;
    /* Label sits left; the value column takes the rest and its content is
       pushed to the far right edge of the row. */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sp-2);
    padding: 6px 0 !important;
    border: 0 !important;
    text-align: right;
  }

  .table-stack td::before {
    content: attr(data-label);
    justify-self: start;
    text-align: left;
    min-width: 0;
    /* `.table > tbody td { white-space: nowrap }` outranks `.table-stack td`,
       and ::before inherits it — so a two-word label refused to wrap and
       spilled over its value. */
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: var(--t-meta);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-400);
    line-height: 1.35;
    padding-top: 3px;
  }

  /* Cells with no label (or no content) shouldn't leave an empty line. */
  .table-stack td:empty { display: none; }

  /* The record's identity leads the block, full width, no label. */
  .table-stack td[data-label="Name / Email"] {
    display: block;
    text-align: left;
    padding-bottom: 10px !important;
  }
  .table-stack td[data-label="Name / Email"]::before { display: none; }
  .table-stack td[data-label="Name / Email"] .fw-semibold { font-size: var(--t-subtitle); }

  /* Controls align right and stay comfortably tappable. */
  .table-stack td > .form-select,
  .table-stack td > .d-flex {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  .table-stack td .form-select { min-width: 0 !important; width: 100%; max-width: 190px; }
  .table-stack td .btn { min-height: 34px; }

  /* The card frame around a stacked table adds nothing. */
  .card:has(.table-stack) { border: 0 !important; }
  .table-stack { font-size: var(--t-small); }
}

/* ==========================================================================
   Back bar
   Every screen except the dashboard gets a way back, since the bottom nav
   only exposes three destinations.
   ========================================================================== */
.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 var(--gutter);
  background: var(--c-white);
  border-bottom: var(--border);
}

.mobile-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px 0 0;
  border: 0;
  background: none;
  color: var(--c-700);
  font-size: var(--t-small);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}

.mobile-back i { font-size: 12px; }
.mobile-back:active { color: var(--c-black); }

/* ==========================================================================
   Bottom nav: give the label room so it is not clipped
   ========================================================================== */
@media (max-width: 991.98px) {
  :root { --nav-h: 62px; }

  .mobile-nav-item {
    gap: 4px;
    padding: 8px 4px;
    line-height: 1.15;
  }

  .mobile-nav-item i { font-size: 1.0625rem; }
  .mobile-nav-item span { display: block; }

  /* Clear the fixed bar with room to spare. */
  body.with-sidebar {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-4));
  }
}

/* ==========================================================================
   Denser controls
   Selects, dropdowns and inline options were carrying body-size text, which
   made option-heavy screens (Tickets, Projects, Responsibility) feel packed.
   Inputs stay at 16px — below that iOS zooms the page on focus.
   ========================================================================== */
@media (max-width: 991.98px) {
  .form-select,
  select.form-select,
  .form-select option,
  select option,
  .dropdown-item,
  .dropdown-menu,
  .select2-container,
  .select2-results__option,
  .select2-selection__rendered {
    font-size: var(--t-small) !important;
  }

  .form-select-sm,
  .form-select-sm option,
  .btn-sm,
  .badge,
  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    font-size: var(--t-meta) !important;
  }

  .form-select { padding: 8px 28px 8px 10px; }
  .form-select-sm { padding: 6px 24px 6px 8px; min-height: 34px; }

  .dropdown-item { padding: 7px 9px; min-height: 38px; }

  /* Filter/toolbar clusters sit tighter. */
  .d-flex.gap-2 > .form-select,
  .d-flex.gap-2 > .form-control { min-height: 38px; }

  /* Inline label + control pairs stop wrapping onto three lines. */
  .form-label { font-size: var(--t-meta); margin-bottom: 4px; }
  .form-check-label { font-size: var(--t-small); }
  .input-group-text { font-size: var(--t-small); padding: 6px 10px; }
}

/* ==========================================================================
   Filter toolbars
   Tickets/Projects build filters as .filter-dropdown-trigger inside wrappers
   carrying inline widths (200px / 220px / 140px), so on a phone they wrapped
   into ragged rows. Override to an even two-up grid.
   ========================================================================== */
@media (max-width: 767.98px) {
  .position-relative:has(> .filter-dropdown-trigger) {
    width: auto !important;
    flex: 1 1 calc(50% - var(--sp-1));
    min-width: 0;
  }

  .filter-dropdown-trigger {
    height: 38px !important;
    font-size: var(--t-small) !important;
    padding: 6px 10px;
  }

  .filter-dropdown-option { font-size: var(--t-small); padding: 8px 10px !important; }

  /* The dropdown panel should not be narrower than its trigger. */
  .position-relative:has(> .filter-dropdown-trigger) .dropdown-menu {
    width: 100%;
    min-width: 0 !important;
  }

  .form-control-sm { font-size: var(--t-small) !important; min-height: 38px; }
}

/* ==========================================================================
   Empty states inside tables
   .table td is nowrap so columns keep their shape while scrolling, but that
   clipped the full-width "no results" cell.
   ========================================================================== */
@media (max-width: 991.98px) {
  .table td[colspan] {
    white-space: normal;
    text-align: left;
    color: var(--c-500);
    padding: var(--sp-4) 0;
    /* The table is wider than the screen, so a full-row cell would otherwise
       start off to the right, out of view. Pin it to the visible edge. */
    position: sticky;
    left: 0;
    display: block;
    width: calc(100vw - (2 * var(--gutter)));
    max-width: 100%;
  }
}

/* ==========================================================================
   Corrections
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Bar taller so the icon and its label both clear the safe area; the icons
     themselves are unchanged. */
  :root { --nav-h: 72px; }

  .mobile-nav-item { gap: 5px; padding: 10px 4px; }
  .mobile-nav-item i { font-size: 1.0625rem; }
  .mobile-nav-item span { font-size: var(--t-meta); }

  /* Only enough clearance to sit above the bar — the extra 32px left a gap
     under the calendar. */
  body.with-sidebar {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-1));
  }

  /* The calendar panel was the worst offender for trailing space. */
  .sync-summary-card { margin-bottom: 0; }
  .main-content > :last-child { margin-bottom: 0 !important; }
}

/* Search and text fields read smaller.
   Note: iOS zooms the page when a focused field is under 16px, so the size is
   restored on focus — the field looks compact but never triggers the zoom. */
@media (max-width: 991.98px) {
  .form-control,
  input[type="text"], input[type="search"], input[type="email"] {
    font-size: var(--t-small) !important;
  }

  .form-control::placeholder { font-size: var(--t-small); }

  .form-control:focus,
  input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
  input[type="password"]:focus, input[type="number"]:focus, textarea:focus {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   Stacked rows: tighten and stop the value column crowding its label
   ========================================================================== */
@media (max-width: 767.98px) {
  .table-stack tr { padding: 12px 0 10px; }

  /* (earlier flex-based tuning removed — the grid above governs) */
}

/* ==========================================================================
   Page subtitles
   Several screens use Bootstrap's .lead (1.25rem) under the screen title,
   which on a phone competes with the title itself.
   ========================================================================== */
@media (max-width: 991.98px) {
  .lead {
    font-size: var(--t-small) !important;
    font-weight: 400;
    color: var(--c-500);
    margin-bottom: var(--sp-2);
  }
}

/* ==========================================================================
   Modals: the sheet was taller than the screen, so the footer fell off
   ========================================================================== */
@media (max-width: 991.98px) {
  .modal-dialog {
    max-height: 100dvh;
    display: flex;
    align-items: flex-end;
  }

  .modal-content {
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
  }

  .modal-header {
    flex: none;
    align-items: flex-start;
    gap: var(--sp-1);
  }

  .modal-title {
    font-size: var(--t-subtitle);
    font-weight: 600;
    line-height: 1.35;
  }

  .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer always reachable, never clipped. */
  .modal-footer {
    flex: none;
    position: static;
    padding: var(--sp-2);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    border-top: var(--border);
    background: var(--c-white);
  }

  .modal-footer .btn { flex: 1; min-height: 44px; }
}

/* ==========================================================================
   Avatar link
   ========================================================================== */
.dash-avatar-link {
  flex: none;
  display: block;
  line-height: 0;
  border-radius: 50%;
}

.dash-avatar-link:active { opacity: .7; }

.dash-avatar--img { object-fit: cover; }

/* ==========================================================================
   Tab + filter toolbars
   tasks.html puts .nav-tabs and the project filter in one
   `d-flex justify-content-between` row. On a phone the tabs and a dropdown
   cannot share a line, so they were overlapping and clipped.
   ========================================================================== */
@media (max-width: 767.98px) {
  .d-flex.justify-content-between:has(> .nav-tabs) {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--sp-2);
  }

  /* Tabs scroll as a group rather than wrapping or being cut off. */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs::-webkit-scrollbar { display: none; }

  .nav-tabs .nav-item { flex: none; }

  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: var(--t-small) !important;
  }

  /* The filter gets its own full-width row beneath. */
  .d-flex.justify-content-between:has(> .nav-tabs) > .dropdown { width: 100%; }
  .d-flex.justify-content-between:has(> .nav-tabs) > .dropdown > .btn { width: 100%; }

  /* Inline width:260px on the panel overflowed the screen. */
  .dropdown-menu[style*="width"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: calc(100vw - (2 * var(--gutter)));
  }
}

/* modern.css forces the active tab to solid black with !important. Directly
   above a full-width black filter button that reads as two heavy slabs, so on
   phones the tabs revert to the underline treatment used elsewhere. */
@media (max-width: 767.98px) {
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    background-color: transparent !important;
    color: var(--c-black) !important;
    border-color: transparent transparent var(--c-black) !important;
    border-bottom-width: 2px !important;
    font-weight: 600;
  }

  .nav-tabs .nav-link:not(.active) { color: var(--c-500) !important; }
}

/* ==========================================================================
   Touch devices keep no hover state
   On a phone the row hover fill sticks after a tap, leaving a record shaded
   grey with no way to clear it.
   ========================================================================== */
@media (hover: none) {
  /* Rows and tiles only. `.card:hover` must NOT be included: forcing a card
     to `transparent` lets the white page through, and a dark panel then has
     white text on white. */
  .table-hover > tbody > tr:hover > *,
  .table-stack tr:hover,
  .tile:hover {
    background-color: transparent !important;
  }

  /* Feedback comes from the press itself, not a lingering fill. */
  .table-stack tr:active,
  .tile:active { background-color: var(--c-050); }
}

/* Buttons that pair an icon with a label need a consistent gap; several
   templates rely on whitespace in the markup, which collapses. */
@media (max-width: 991.98px) {
  .btn > i:first-child { margin-right: 6px; }
  .btn.d-flex > i:first-child { margin-right: 0; }
}

/* Cells carrying inline max-width / white-space (projects) must not keep them
   once the row is stacked — that is what made Description overlap Status. */
@media (max-width: 767.98px) {
  .table-stack td[style] {
    max-width: none !important;
    white-space: normal !important;
  }

  .table-stack td { white-space: normal; }

  /* Description stays in the grid; its text lives behind the View toggle. */
  .table-stack td[data-label="Description"] .cell-collapse__body {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* Column picker on phones: full-width tap target, panel spans the gutter. */
@media (max-width: 767.98px) {
  .colpick__btn { min-height: 38px; }

  .colpick__panel {
    left: 0;
    right: 0;
    min-width: 0;
    max-height: 60vh;
  }

  .colpick__row { padding: 10px 8px; min-height: 40px; }
}

/* ==========================================================================
   Stacked rows — uniform grid corrections
   ========================================================================== */
@media (max-width: 767.98px) {
  /* Everything in the value column aligns to the far right. */
  .table-stack td > * { justify-self: end; max-width: 100%; }

  .table-stack td > .form-select,
  .table-stack td > .form-control { width: auto; max-width: 65%; }

  .table-stack td > .d-flex { justify-content: flex-end; }

  /* Identity block spans both columns and carries no label. */
  .table-stack td[data-label="Name / Email"],
  .table-stack td[data-label="Name"] {
    grid-template-columns: 1fr;
    text-align: left;
    padding-bottom: 8px !important;
  }

  .table-stack td[data-label="Name / Email"] > *,
  .table-stack td[data-label="Name"] > * { justify-self: start; }

  .table-stack td[data-label="Name / Email"]::before,
  .table-stack td[data-label="Name"]::before { display: none; }

  .table-stack td[data-label="Name / Email"] .fw-semibold,
  .table-stack td[data-label="Name"] { font-size: var(--t-subtitle); font-weight: 600; }

  /* On a phone the text is hidden entirely — only the toggle shows, so a
     long description never dominates the record. */
  .cell-collapse {
    width: 100%;
    max-width: none;
    align-items: flex-end;
  }

  .cell-collapse__peek { display: none !important; }

  .cell-collapse__more > summary {
    min-height: 26px;
    font-size: var(--t-small);
  }

  .cell-collapse__more > summary::after {
    content: '\f078';                     /* chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    color: var(--c-400);
    transition: transform .15s ease;
  }

  .cell-collapse__more[open] > summary::after { transform: rotate(180deg); }

  .cell-collapse.is-open .cell-collapse__body {
    padding-top: 6px;
    font-size: var(--t-small);
    text-align: right;
  }
}

/* ==========================================================================
   Current location, in the brand accent
   ========================================================================== */
@media (max-width: 991.98px) {
  .mobile-nav-item.active,
  .mobile-nav-item.active i,
  .mobile-nav-item.active span {
    color: var(--accent) !important;
  }

  .mobile-nav-item.active { font-weight: 500; }
}