/* Dandelion CRM on the phone - people area (the owner's page-by-page review, 2026-10-21): Attendance & leave, Reports &
   Analytics, and what leaves the phone. Rules only inside @media (max-width: 900px), scoped html.ui-2026 body:not(#dn26)
   (the contract of core.css); above 900px nothing here matches. Tokens only, logical properties (RTL). The behaviour is in
   assets/js/mobile/people.js. */
@media (max-width: 900px){
  /* ---- item 35: a word button (Refresh, Update, Configure targets) is replaced by the round icon people.js puts beside it;
          the icon follows the word's own visibility (hidden = managers-only word the page did not show) ---- */
  html.ui-2026 body:not(#dn26) .dnm-ppl-word{ display: none !important; }
  html.ui-2026 body:not(#dn26) .dnm-ppl-ib[hidden]{ display: none !important; }

  /* ---- Attendance & leave, HR tab (items 15, 16, 35) ---- */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-mgr-toolbar{ display: flex; align-items: center; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-mgr-toolbar > .crm-sq{ flex: 1 1 auto; min-width: 0; }
  /* the table's box goes with the table: the cards stand on the page like every other list */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-agents-table-wrap.dnm-at-carded{
    border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0; overflow: visible; padding: 0;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents{ margin-bottom: 14px; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-card{ cursor: pointer; gap: 8px; }
  /* the table's one-cell note ("Loading agents…", "No agents found.") is one muted line, not a person card (reviewer 2026-10-21) */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-card.dnm-at-note{ cursor: default; border: 0; background: transparent; padding: 18px 0; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-at-note .dnm-card-row{ justify-content: center; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-at-note .dnm-card-row > .dnm-k{ display: none; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-at-note .dnm-card-row > .dnm-v{
    display: block; flex: 0 1 auto; text-align: center; font-size: 14px; font-weight: 400; color: var(--text-muted);
  }
  /* photo + name on the first line (the page's own .at-table-person) */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .at-table-person{ display: flex; align-items: center; gap: 10px; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .at-table-person img,
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .at-table-person .at-team-avatar{
    width: 40px; height: 40px; flex: 0 0 40px; min-width: 40px; border-radius: 50%; object-fit: cover;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .at-table-person strong{ font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
  /* status pill with its reason under it, at the row's end; the time buttons keep the page's own look */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-v{ display: flex; flex-direction: column; align-items: flex-end; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-card-row.is-first > .dnm-v{ display: block; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-v .at-table-reason{ display: block; max-width: none; margin-top: 3px; text-align: end; font-size: 11px; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .dnm-at-agents .dnm-v .at-cell-btn{ font-size: 14px; }
  /* Team attendance today (Today tab): the title row with its round refresh at the end */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-section-title-row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  /* the caption's ::after rule line is a flex child too: the icon goes after it, at the row's end */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-section-title-row > .dnm-ppl-ib{ order: 99; margin-inline-start: auto; }

  /* ---- Reports & Analytics (items 25, 35) ---- */
  /* the row the title left (header.css): the period tabs fill it, the round Update sits at its end */
  html.ui-2026 body:not(#dn26) #page-analytics .an-hdr-right{ display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; width: 100%; }
  /* ui.css's phone rule for every [class$="-tabs"] strip (width 100% + 24px, margin-inline -12px, padding-inline 12px, all
     !important) hangs the pill 12px past its slot on each side; as a flex child beside the round Update that put it over
     the content edge and under the icon (reviewer 2026-10-21): squared with the tiles below, same weight */
  html.ui-2026 body:not(#dn26) #page-analytics .an-period-tabs{
    flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
    width: auto !important; margin-inline: 0 !important; padding-inline: 3px !important;
  }
  html.ui-2026 body:not(#dn26) #page-analytics .an-period-tabs::-webkit-scrollbar{ display: none; }
  /* three labels (This Week / This Month / Three months) in the 266px the round Update leaves: no wrap, no scroll */
  html.ui-2026 body:not(#dn26) #page-analytics .an-period-tab{ flex: 1 1 auto; padding-inline: 5px; font-size: 11.5px; text-align: center; white-space: nowrap; }
  /* owner rule, no explanatory text: the note under the Contact evidence figures (Reports and the attendance Today tab) */
  html.ui-2026 body:not(#dn26) :is(#page-analytics, #page-agent-tracker) .lce-foot{ display: none !important; }
  /* item 25: two tiles a row; the last tile alone on its row (Agents) spans both columns so the edges align */
  html.ui-2026 body:not(#dn26) #page-analytics .an-metric-bar-row{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.ui-2026 body:not(#dn26) #page-analytics .an-metric-col:nth-child(odd):last-child{ grid-column: 1 / -1; }
  /* KPIs: month arrows and the round gear in one row at the end */
  html.ui-2026 body:not(#dn26) #page-analytics .kpi-header-right{ gap: 8px; }
  /* owner 2026-10-22 (KPIs by Day / Week / Month): the period pill is a row of its own, the Reports pill's look; the
     ‹ date › bar fills the row under it beside the round gear, so a long day or week label never moves the pill */
  html.ui-2026 body:not(#dn26) #page-analytics #anl-pane-kpi .kpi-header > .kpi-header-right{ flex: 1 1 100%; width: 100% !important; flex-wrap: wrap; }
  html.ui-2026 body:not(#dn26) #page-analytics #anl-pane-kpi .kpi-header-right > .kpi-period-tabs{ flex: 1 1 100% !important; }
  html.ui-2026 body:not(#dn26) #page-analytics #anl-pane-kpi .kpi-header-right > .kpi-month-nav{ flex: 1 1 auto; min-width: 0; justify-content: space-between; }
  html.ui-2026 body:not(#dn26) #page-analytics #anl-pane-kpi .kpi-month-nav > .kpi-month-val{ flex: 1 1 auto; min-width: 0; }

  /* ---- item 27: AML reviews are gone from the phone entirely - the Settings tile "Compliance (AML)" too ---- */
  html.ui-2026 body:not(#dn26) #page-settings .set-tile[onclick*="'compliance'"]{ display: none !important; }
}

/* Owner 2026-10-22 («این دکمه‌ها رو هماهنگ کن»): the period tabs and the round Update are one family - the same 44px
   height, the same soft fill, equal tabs with the active one a white pill (the Calendar's views row looks the same). */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-analytics .an-period-tabs{
    display: flex !important; height: var(--dnm-ctrl); box-sizing: border-box; padding: 3px !important; gap: 2px;
    background: var(--dnm-soft) !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; overflow: hidden;
  }
  html.ui-2026 body:not(#dn26) #page-analytics .an-period-tab{
    flex: 1 1 0 !important; min-width: 0; height: 100%; min-height: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  }
  html.ui-2026 body:not(#dn26) #page-analytics .an-period-tab.active{ background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
  html.ui-2026 body:not(#dn26) #page-analytics .an-hdr-right > .dnm-ib{ flex: 0 0 var(--dnm-ctrl); width: var(--dnm-ctrl); height: var(--dnm-ctrl); background: var(--dnm-soft); border: 0; }
  /* the Calendar's views row at the same 44px */
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segments{ height: var(--dnm-ctrl); box-sizing: border-box; }
  html.ui-2026 body:not(#dn26) #page-calendar .zcal-segment{ min-height: 0 !important; height: 100%; }
}

/* Owner 2026-10-22 («این مودال هم پایینش کرو نیست»): the KPI targets dialog floats in the middle of the screen, so it is a
   card with all four corners round and a 12px side inset (ui.css gave it the bottom-sheet corners of the full-width sheets);
   its explanatory line goes (rule: no explanatory text). */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) .kpi-modal-backdrop .kpi-modal{
    width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin: 0 12px !important;
    border-radius: 20px !important; overflow: hidden; max-height: calc(var(--app-vh, 100dvh) - 48px) !important;
  }
  html.ui-2026 body:not(#dn26) .kpi-modal-backdrop .kpi-modal-desc{ display: none !important; }
}

/* Owner 2026-10-22 («این تب‌ها رو هم هماهنگ کن، باکس سمت راست بسته نشده»): the Attendance tabs (Today / Attendance /
   Requests + its count / HR) are the same 44px segmented pill as Reports' period tabs - equal parts, the active one a
   white pill, the Requests count a small badge inside its part, nothing past the right edge. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs{
    display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 2px; box-sizing: border-box;
    width: 100% !important; margin-inline: 0 !important; height: var(--dnm-ctrl); padding: 3px !important;
    background: var(--dnm-soft) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab, html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab-slot{ flex: 1 1 0; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab[hidden]{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab-slot{ position: relative; display: flex; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab{
    width: 100%; height: 100%; min-height: 0 !important; padding: 0 4px !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
    color: var(--text-muted) !important; font-size: 12.5px !important; font-weight: 600 !important; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab.active{ background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab-slot > .at-badge{
    position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px; margin: 0;
    border-radius: 8px; font-size: 10px; line-height: 16px; z-index: 1;
  }
}
@media (max-width: 900px){
  /* equal parts: the direct tabs and the Requests slot share the row; only the tab inside the slot fills its slot */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab, html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab-slot{ flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab-slot > .at-tab{ flex: 1 1 auto !important; width: 100% !important; }
}
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-analytics .an-hdr .an-refresh-btn, html.ui-2026 body:not(#dn26) #page-analytics .an-hdr-right > .dnm-ppl-ib[aria-label="Update"]{ display: none !important; }
  /* the Requests count: a small round badge in its part's corner, the word kept clear of it */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab-slot > .at-badge{ top: 3px !important; inset-inline-end: 3px !important; border-radius: 999px !important; background: var(--danger, #dc2626) !important; color: #fff !important; border: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab-slot:has(> .at-badge:not([hidden])) > .at-tab{ padding-inline-end: 14px !important; }
}
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs .at-tab-slot > .at-badge{ height: 16px !important; min-height: 0 !important; max-height: 16px; min-width: 16px !important; width: auto !important; padding: 0 4px !important; line-height: 16px !important; font-size: 10px !important; bottom: auto !important; display: inline-flex; align-items: center; justify-content: center; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs .at-tab-slot > .at-badge[hidden]{ display: none !important; }
}
@media (max-width: 900px){
  /* the right end of the Attendance pill faded out (ui-2026-phone.css's edge mask for scrolling strips): it no longer scrolls */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs, html.ui-2026 body:not(#dn26) #page-analytics .an-period-tabs, html.ui-2026 body:not(#dn26) #page-calendar .zcal-segments{ -webkit-mask-image: none !important; mask-image: none !important; }
}

/* ==========================================================================================================================
   Phone review 2026-10-22 (owner-style pass at 390px), people area. Same contract: @media (max-width: 900px), html.ui-2026
   body:not(#dn26); nothing above 900px. Behaviour in people.js (the second block, "review 2026-10-22").
   ========================================================================================================================== */
@media (max-width: 900px){
  /* ---- Transactions: one 16px gutter, no toolbar card, a 44px search, the period pill in four equal parts ---- */
  html.ui-2026 body:not(#dn26) #page-transactions > .txn-root{ padding: 0 0 24px !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-header{ position: static !important; margin: 0 0 10px !important; background: transparent !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-header-right{ width: 100%; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-period-tabs{
    display: flex !important; width: 100% !important; margin: 0 !important; height: var(--dnm-ctrl); box-sizing: border-box; padding: 3px !important; gap: 2px;
    background: var(--dnm-soft) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-ptab{
    flex: 1 1 0 !important; min-width: 0; height: 100%; min-height: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-ptab.active{ background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-toolbar{
    position: static !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 0 !important; margin: 0 0 12px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; height: auto !important;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-search-wrap{
    flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; max-height: var(--dnm-ctrl);
    box-sizing: border-box; padding: 0 6px 0 14px !important; padding-inline: 14px 6px !important; border-radius: 999px !important;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-search-wrap > #txn-search{ height: 100% !important; min-height: 0 !important; max-height: none; padding: 0 !important; flex: 1 1 auto; min-width: 0; font-size: 15px; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-search-wrap > .crm-sq-go{ order: 2; flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-agent-filter-wrap{ flex: 1 1 100%; min-width: 0; height: var(--dnm-ctrl); border-radius: 999px; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-agent-filter{ min-width: 0; flex: 1 1 auto; height: 100% !important; min-height: 0 !important; border: 0 !important; }
  /* the deals stand on the page (no panel around the cards): no card in a card */
  html.ui-2026 body:not(#dn26) #page-transactions .txn-list-col, html.ui-2026 body:not(#dn26) #page-transactions .txn-agent-col{
    border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; overflow: visible !important;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-list-hdr, html.ui-2026 body:not(#dn26) #page-transactions .txn-agent-hdr{ min-height: 0 !important; padding: 6px 0 10px !important; border: 0 !important; background: transparent !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-list-title{ font-size: 15px; }
  /* the count repeats the Closed deals tile (and was English in Persian), the source badge is a desktop note */
  html.ui-2026 body:not(#dn26) #page-transactions :is(#txn-list-count, .txn-source-badge){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-transactions #txn-cards{ padding: 0 !important; gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-m-card{ margin-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-load-more{ height: var(--dnm-ctrl); border-radius: 999px; padding-inline: 20px; }
  /* Employee finance: no eyebrow / caption, flat panels, the table as cards (people.js) */
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-section{ border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin-top: 18px; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-header{ gap: 10px; padding: 0 !important; margin-bottom: 12px; border: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-header :is(.txn-finance-eyebrow, p){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-header h2{ font-size: 15px !important; font-weight: 700; margin: 0; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-actions{ display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-filter-wrap{ flex: 1 1 100%; min-width: 0; height: var(--dnm-ctrl); border-radius: 999px; box-sizing: border-box; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-filter-wrap select{ flex: 1 1 auto; min-width: 0; height: 100% !important; min-height: 0 !important; border: 0 !important; background-color: transparent !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-btn{ flex: 1 1 0; min-width: 0; height: var(--dnm-ctrl); border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-panel{ padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-panel-head{ min-height: 0 !important; padding: 14px 0 8px !important; border: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-panel-head strong{ font-size: 15px !important; font-weight: 700; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-panel-head > span{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-table-wrap{ overflow: visible !important; border: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .dnm-txn-fin .dnm-card{ cursor: pointer; }
  html.ui-2026 body:not(#dn26) #page-transactions .dnm-txn-fin .dnm-card.is-active{ border-color: var(--text); }
  html.ui-2026 body:not(#dn26) #page-transactions .dnm-txn-fin .dnm-card-row.is-first > .dnm-v small{ display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-grid{ padding: 0 !important; gap: 0 !important; border: 0 !important; background: transparent !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .dnm-txn-fin .dnm-card-row.dnm-zero{ display: none; }
  /* the five totals: separate tiles two a row (no shared frame with divider lines) */
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-stats{
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-stats > article{
    border: 1px solid var(--border) !important; border-radius: var(--dnm-radius) !important; background: var(--surface) !important; padding: 12px 14px !important; margin: 0 !important; box-shadow: none !important;
  }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-stats > article:last-child:nth-child(odd){ grid-column: 1 / -1; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-stats > article > span{ text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal) .txn-detail-source{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-ledger-list, html.ui-2026 body:not(#dn26) #page-transactions .txn-salary-history{ padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-transactions .txn-finance-empty{ padding: 12px 0 !important; text-align: start; white-space: normal; }

  /* the transaction record: full screen, no glass, the × a round 44px button inside the head */
  html.ui-2026 body:not(#dn26) #txn-detail-modal.visible, html.ui-2026 body:not(#dn26) #txn-finance-modal.visible{
    padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; background: var(--surface) !important;
  }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal) > .txn-modal{
    width: 100% !important; max-width: none !important; height: var(--app-vh, 100dvh) !important; max-height: none !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; overflow: hidden;
  }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal) > .txn-modal > form{ display: flex; flex-direction: column; height: 100%; min-height: 0; }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal) .txn-modal-hdr{
    flex: 0 0 auto; padding: calc(10px + var(--dn-safe-top, 0px)) var(--dnm-gutter) 10px !important; padding-inline-end: calc(var(--dnm-gutter) + 52px) !important; min-height: 64px; box-sizing: border-box;
  }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal) .txn-modal-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px var(--dnm-gutter) calc(20px + var(--dn-safe-bottom, 0px)) !important; max-height: none !important; }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal) .txn-modal-close{
    top: calc(var(--app-vh-top, 0px) + 10px + var(--dn-safe-top, 0px)) !important; inset-inline-end: var(--dnm-gutter) !important;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; box-shadow: none !important; color: var(--text) !important;
  }
  html.ui-2026 body:not(#dn26) #txn-finance-modal .txn-finance-form-footer{ flex: 0 0 auto; display: flex; gap: 8px; padding: 10px var(--dnm-gutter) calc(10px + var(--dn-safe-bottom, 0px)) !important; border-top: 1px solid var(--border); }
  /* Cancel and Save side by side (TestFlight 20): the form used to have Save alone, with its head and footer under the bars */
  html.ui-2026 body:not(#dn26) #txn-finance-modal .txn-finance-form-footer > .txn-finance-btn{ flex: 1 1 auto; height: var(--dnm-ctrl); border-radius: 999px; }

  /* ---- Reports & Analytics: one 16px gutter; no explanatory card note, no "Updated just now" footer ---- */
  html.ui-2026 body:not(#dn26) #page-analytics .an-wrap{ padding-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-analytics :is(.an-card-note, .an-footer){ display: none !important; }
  /* the lone Agents tile spanning the row: one compact line (label at the start, figure at the end), no half-empty chart */
  html.ui-2026 body:not(#dn26) #page-analytics .an-metric-col:nth-child(odd):last-child{
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px !important; text-align: start;
  }
  html.ui-2026 body:not(#dn26) #page-analytics .an-metric-col:nth-child(odd):last-child > .an-mbar-group{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-analytics .an-metric-col:nth-child(odd):last-child > .an-metric-lbl{ order: -1; margin: 0; font-size: 14px; }
  html.ui-2026 body:not(#dn26) #page-analytics .an-metric-col:nth-child(odd):last-child > .an-metric-total{ font-size: 22px; }

  /* ---- KPIs: no second gutter; the month switch and the round gear on one 44px row ---- */
  html.ui-2026 body:not(#dn26) #anl-pane-kpi .kpi-root{ padding: 0 0 24px !important; }
  html.ui-2026 body:not(#dn26) #anl-pane-kpi .kpi-header{ margin: 0 0 12px !important; gap: 0 !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #anl-pane-kpi .kpi-header-left:not(:has(.kpi-month-label:not(:empty))){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-analytics #anl-pane-kpi .kpi-header > .kpi-header-right{ display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; width: 100% !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #anl-pane-kpi .kpi-root{ gap: 12px !important; }
  html.ui-2026 body:not(#dn26) #anl-pane-kpi #kpi-org-stats:empty{ display: none !important; }
  html.ui-2026 body:not(#dn26) #anl-pane-kpi .kpi-month-nav{ flex: 1 1 auto; min-width: 0; height: var(--dnm-ctrl); display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;
    padding: 0 3px !important; border: 0 !important; border-radius: 999px !important; background: var(--dnm-soft) !important; box-shadow: none !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #anl-pane-kpi .kpi-month-btn{ width: 38px !important; height: 38px !important; min-height: 0 !important; border-radius: 50% !important; border: 0 !important; background: var(--surface) !important; display: inline-flex; align-items: center; justify-content: center; }
  /* the old month arrows carry the right-to-left glyphs (previous = ">", next = "<"); in left-to-right they turn round
     (the Day / Week / Month version has kpiShift() buttons with the right glyphs: not matched here) */
  html.ui-2026:not([dir="rtl"]) body:not(#dn26) #anl-pane-kpi :is(button[onclick^="kpiPrevMonth"], button[onclick^="kpiNextMonth"]) svg{ transform: scaleX(-1); }

  /* ---- Contact evidence (KPIs and the attendance Today tab): the 9-column table is per-agent cards (people.js) ---- */
  html.ui-2026 body:not(#dn26) :is(#kpi-contact-evidence, #at-contact-evidence) .lce-table-wrap:has(> table.dnm-lce-done){ overflow: visible !important; border: 0 !important; background: transparent !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) :is(#kpi-contact-evidence, #at-contact-evidence) table.lce-table.dnm-lce-done{ display: none !important; }
  html.ui-2026 body:not(#dn26) .dnm-lce-cards{ display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  html.ui-2026 body:not(#dn26) .dnm-lce-card{ border: 1px solid var(--border); border-radius: var(--dnm-radius); background: var(--surface); padding: 12px 14px; }
  html.ui-2026 body:not(#dn26) .dnm-lce-card > b{ display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) .dnm-lce-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
  html.ui-2026 body:not(#dn26) .dnm-lce-grid > div{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html.ui-2026 body:not(#dn26) .dnm-lce-grid strong{ font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
  html.ui-2026 body:not(#dn26) .dnm-lce-grid span{ font-size: 11px; line-height: 1.25; color: var(--text-muted); overflow-wrap: normal; word-break: normal; }
  html.ui-2026 body:not(#dn26) .dnm-lce-grid .is-flag strong{ color: var(--danger, #B03E30); }
  html.ui-2026 body:not(#dn26) .dnm-lce-note{ margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }

  /* ---- Daily report under My Work: only the My Work tabs (people.css's two-id .at-tabs rule outranked ui-2026.css's hide) ---- */
  html.ui-2026 body.crm-mywork-report:not(#dn26) #page-agent-tracker :is(.at-tabs, .at-page-head){ display: none !important; }
  /* "Your day": two tiles a row like everywhere else, no helper lines, the send label on one line */
  html.ui-2026 body:not(#dn26) #at-panel-report .act-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.ui-2026 body:not(#dn26) #at-panel-report :is(.act-stepper-row > small.act-muted, .act-foot-note){ display: none !important; }
  html.ui-2026 body:not(#dn26) #at-panel-report .act-foot-row .act-btn{ white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #at-report-team-wrap{ margin-bottom: 12px !important; }

  /* ---- Attendance & leave ---- */
  /* the pill parts sized by their words (Persian «درخواست‌ها» / «حضور و غیاب» ran into each other); HR stays narrow */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab, html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > .at-tab-slot{ flex: 1 1 auto !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tabs > #at-tab-manager{ flex: 0 0 auto !important; padding-inline: 14px !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-tab{ padding-inline: 8px !important; }
  /* section heads: sentence case, 15px, like Home (no grey uppercase captions, no rule line) */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-section-title{
    text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; margin: 18px 0 10px !important;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-section-title::after{ display: none !important; }
  /* the quick actions: the word in the middle of its tile */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-quick-btn{
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; text-align: center;
    line-height: 1.2 !important; min-height: var(--dnm-ctrl) !important; height: auto !important; padding: 8px 10px !important;
  }
  /* Today / This week / This month / Rank: four separate tiles like the stat cards, no hanging divider */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-score-row{
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-score-row > *{
    border: 1px solid var(--border) !important; border-radius: var(--dnm-radius) !important; background: var(--surface) !important; margin: 0 !important; padding: 12px 14px !important;
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-score-row > * > span{ font-size: 12px; color: var(--text-muted); }
  /* an empty timeline: just the note, no rail */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-timeline:has(> .at-timeline-empty:only-child){ padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-timeline:has(> .at-timeline-empty:only-child)::before{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-timeline > .at-timeline-empty:only-child{ padding: 6px 0 !important; text-align: start; }
  /* Team attendance today: the card opens on tap (people.js), no Details word, first in / total as one small line */
  html.ui-2026 body:not(#dn26) #at-team-today-list .at-team-row.dnm-tap{ cursor: pointer; }
  html.ui-2026 body:not(#dn26) #at-team-today-list .at-team-actions{ display: none !important; }
  html.ui-2026 body:not(#dn26) #at-team-today-list .at-team-row{ padding-bottom: 12px !important; min-height: 0 !important; }
  html.ui-2026 body:not(#dn26) #at-team-today-list .dnm-at-times{ display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; text-align: end; }
  /* the HR Leaderboard Today / Week / Month: the same 44px segmented pill as the tabs, on the gutter */
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-lb-tabs{
    display: flex !important; width: 100% !important; margin: 0 0 10px !important; height: var(--dnm-ctrl); box-sizing: border-box; padding: 3px !important; gap: 2px;
    background: var(--dnm-soft) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden; -webkit-mask-image: none !important; mask-image: none !important;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-lb-tab{
    flex: 1 1 0 !important; min-width: 0; height: 100%; min-height: 0 !important; padding: 0 4px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  }
  html.ui-2026 body:not(#dn26) #page-agent-tracker .at-lb-tab.active{ background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
  /* Attendance tab: the export form and the records filters live in drawers behind two round icons (people.js) */
  html.ui-2026 body:not(#dn26) #at-panel-attendance .dnm-at-hide{ display: none !important; }
  html.ui-2026 body:not(#dn26) #at-panel-attendance .dnm-at-tools{ display: flex; justify-content: flex-end; gap: 8px; margin: 14px 0 10px; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-body :is(#at-exp-xlsx, #at-exp-pdf){
    height: var(--dnm-ctrl); border-radius: 999px !important; justify-content: center !important; text-align: center !important; font-weight: 600;
    background: var(--text) !important; color: var(--surface) !important; border: 0 !important; display: inline-flex; align-items: center;
  }
  html.ui-2026 body:not(#dn26) .dnm-drawer-body #at-exp-pdf{ background: var(--dnm-soft) !important; color: var(--text) !important; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-body > .at-filter-input{ flex: 0 0 auto !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; max-height: var(--dnm-ctrl); }
  html.ui-2026 body:not(#dn26) #at-att-list .at-att-row.dnm-tap{ cursor: pointer; }
  html.ui-2026 body:not(#dn26) #at-att-list .at-att-row.dnm-tap > .at-view-btn{ display: none !important; }
  html.ui-2026 body:not(#dn26) #at-att-list .dnm-at-times{ display: block; text-align: start; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-body #at-exp-hint{ font-size: 13px; color: var(--text-muted); }
}
@media (max-width: 900px){
  /* ---- Settings (home, sub-pages, My Profile): the page's one 16px gutter (the shell added 12px more) ---- */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-pro-shell{ padding-inline: 0 !important; padding-top: 0 !important; }
  /* no explanatory subtitles under the tiles, no raw host under the company name; the title centred in the tile */
  html.ui-2026 body:not(#dn26) #page-settings :is(.set-tile .set-tile-txt > small, .set-org .set-org-txt > small){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-settings .set-tile .set-tile-txt{ justify-content: center; }
  html.ui-2026 body:not(#dn26) #page-settings .set-tile .set-tile-txt > strong{ font-size: 14px; }
  /* Integration: one switch - the drop-down doing the same job goes; the tabs on one line, the count a small badge */
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-select{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-sec-head{ flex-wrap: wrap; row-gap: 10px; }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-tabs{
    display: flex !important; flex: 1 1 100%; width: auto; margin-inline: calc(-1 * var(--dnm-gutter)) !important; padding: 0 var(--dnm-gutter) !important; gap: 6px;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none !important; mask-image: none !important;
  }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-tabs::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-tabs > button{
    flex: 0 0 auto !important; height: 36px; min-height: 0 !important; padding: 0 12px !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px !important; background: var(--dnm-soft) !important; color: var(--text) !important; font-size: 13px !important;
  }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-tabs > button.is-on{ background: var(--text) !important; color: var(--surface) !important; }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-n{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-tabs{ gap: 4px !important; }
  html.ui-2026 body:not(#dn26) #page-settings #set-int .set-int-tabs > button{ padding: 0 10px !important; font-size: 12.5px !important; }
  /* the integration cards are tile rows like the ones above: logo at the start, the name, a chevron (no "Open" box) */
  html.ui-2026 body:not(#dn26) #page-settings .set-int-grid{ grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  html.ui-2026 body:not(#dn26) #page-settings .set-int-card{
    flex-direction: row !important; align-items: center !important; gap: 12px !important; min-height: 58px !important; padding: 10px 14px !important; border-radius: 28px !important;
  }
  html.ui-2026 body:not(#dn26) #page-settings .set-int-card > .set-int-logo{ flex: 0 0 36px; border-radius: 50%; }
  html.ui-2026 body:not(#dn26) #page-settings .set-int-card > .set-int-name{ flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-settings .set-int-card > .set-int-act{ margin: 0 !important; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; flex: 0 0 auto; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) #page-settings .set-int-card > .set-int-act > span{ display: none; }
  html.ui-2026 body:not(#dn26) #page-settings .set-int-card > .set-int-act.is-on{ color: var(--brand-text, var(--brand)); }
  /* sub-pages: no page title / caption (a section title with its own inline size stays), no card-heading explanations */
  html.ui-2026 body:not(#dn26) #page-settings .settings-pro-main > .stab-page-header:has(> .stab-page-title:not([style])){ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-pro-main .settings-card-heading small{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-settings :is(.cc-row-desc, .ac-section-head p, .ac-section-head > div > p){ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-settings .settings-pro-main > :is(.settings-section, .settings-card, .settings-profile-card) .settings-section{ border: 0 !important; box-shadow: none !important; }
  /* Kiosk Setup shows its own card only: not the Users & Access head, caption, New user and tabs above it */
  html.ui-2026 body:not(#dn26) #page-settings .settings-pro-main > .stab-page-header + #settings-users-wrap :is(.ac-header, .ac-tabs){ display: none !important; }
  /* Control Center: the switch at its own 38 x 22 (the phone's 44px min-height stretched it into a grey oval); a 44px tap area around it */
  html.ui-2026 body:not(#dn26) :is(.cc-toggle, .conn-toggle){ min-height: 0 !important; height: 22px !important; width: 38px !important; flex: none !important; position: relative; overflow: visible; }
  html.ui-2026 body:not(#dn26) :is(.cc-toggle, .conn-toggle)::before{ content: ""; position: absolute; inset: -11px -6px; }

  /* ---- My Profile ---- */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-pro-main .settings-card-heading{ padding: 0 0 12px !important; margin: 0 0 14px !important; gap: 0 !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-pro-main .settings-card-heading > .settings-card-icon{ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-pro-main .settings-card-heading strong{ font-size: 16px; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-card{ padding: 16px !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-work-heading{ margin-top: 18px !important; }
  /* a value reads as a value, a placeholder as a hint */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-form input{ font-weight: 500 !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-form input::placeholder{ font-weight: 400 !important; color: var(--text-muted) !important; opacity: .8; }
  /* no explanatory lines under the fields, the reminder and the PDF photos */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) :is(.settings-profile-form > label > small, #sp-work-hours-note, .settings-reminder-toggle small, .pp-tile .pp-meta small:not(.pp-src)){ display: none !important; }
  /* the avatar's own round camera badge instead of a full-width "Change photo" */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero{
    display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av id"; align-items: center; column-gap: 14px; padding: 16px !important;
  }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-profile-avatar{ grid-area: av; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-profile-identity{ grid-area: id; min-width: 0; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-avatar-action{
    grid-area: av; align-self: end; justify-self: end; z-index: 1; width: 32px !important; height: 32px !important; min-height: 0 !important; padding: 0 !important; margin: 0 -4px -4px 0 !important;
    border-radius: 50% !important; border: 2px solid var(--surface) !important; background: var(--text) !important; color: var(--surface) !important;
    display: inline-flex !important; align-items: center; justify-content: center; font-size: 0 !important; box-shadow: none !important;
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-avatar-action{ margin: 0 0 -4px -4px !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-avatar-action > span{ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-avatar-action svg{ width: 15px; height: 15px; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-hero > .settings-avatar-action::before{ content: ""; position: absolute; inset: -8px; }
  /* My photos on PDFs: the tile itself is the tap (its hidden file input's label covers it), a camera badge, no card in a card */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card{ padding: 16px !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card .pp-grid{ gap: 10px; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card .pp-tile{ position: relative; border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card .pp-tile .lm-btnrow > label.btn{
    position: absolute; inset: 0; z-index: 2; opacity: 0; margin: 0; padding: 0; border: 0; min-height: 0; width: auto; height: auto; cursor: pointer;
  }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card .pp-tile .lm-btnrow > button{ position: relative; z-index: 3; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card .pp-tile .pp-img{ position: relative; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) #pp-card .pp-tile .pp-img::after{
    content: ""; position: absolute; inset-block-end: 6px; inset-inline-end: 6px; width: 30px; height: 30px; border-radius: 50%; background-color: var(--text);
    -webkit-mask: none; box-shadow: 0 0 0 2px var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
  }

  /* ---- Users & Access (the Users page and Settings › Users & Access): ---- */
  /* one card level: the content box is not a card around the cards */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-content{ border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
  html.ui-2026 body:not(#dn26) #stg-users-content .ac-header > div:has(> h2){ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-header{ display: flex !important; justify-content: flex-end; align-items: center; margin: 0 0 10px !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-header > .ac-primary{ height: var(--dnm-ctrl); border-radius: 999px; padding: 0 18px; width: auto !important; margin-inline-start: auto !important; }
  /* the tabs: one line each, a scrolling chip strip on the gutter (no 3-line "Marketing Execution Routing") */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-tabs{
    display: flex !important; flex-wrap: nowrap !important; gap: 6px; overflow-x: auto; scrollbar-width: none; border: 0 !important;
    margin: 0 calc(-1 * var(--dnm-gutter)) 12px !important; padding: 0 var(--dnm-gutter) !important; -webkit-mask-image: none !important; mask-image: none !important;
  }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-tabs::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-tabs > button{
    flex: 0 0 auto !important; white-space: nowrap !important; height: 36px !important; min-height: 0 !important; padding: 0 14px !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; background: var(--dnm-soft) !important; color: var(--text) !important; font-size: 13px !important; font-weight: 600; box-shadow: none !important;
  }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-tabs > button.active{ background: var(--text) !important; color: var(--surface) !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-tabs > button::after{ display: none !important; }
  /* the toolbar: one row - a 44px search and round buttons; no 150px search, no blank column */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar{
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; height: auto !important; min-height: 0 !important;
    padding: 0 0 10px !important; margin: 0 !important; border: 0 !important; background: transparent !important;
  }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > *{ flex: 0 0 auto !important; height: auto; min-height: 0; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > :is(label.ac-search, .crm-sq){ flex: 1 1 auto !important; min-width: 0; height: var(--dnm-ctrl) !important; border-radius: 999px !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > label.ac-search > input{ height: 100% !important; min-height: 0 !important; min-width: 0; flex: 1 1 auto; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > .crm-sq > input{ height: 100% !important; min-height: 0 !important; border: 0 !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > select{ flex: 0 1 40% !important; min-width: 0; height: var(--dnm-ctrl) !important; border-radius: 999px; }
  /* the counts ("7 active users", "0 pending · 0 active", "3 roles") and the archived switch's label (a round icon instead) */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > span:not(.crm-sq), html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > label:has(> input[type="checkbox"]){ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar:not(:has(> :not(span):not([hidden]))){ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > .dnm-ac-arch[aria-pressed="true"]{ background: var(--text); color: var(--surface); }
  /* New role / New rule: a round + (the word stays its accessible name) */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > .ac-primary{
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-width: 0; padding: 0 !important; margin-inline-start: auto !important; border-radius: 50% !important;
    font-size: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > .ac-primary svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-toolbar > .btn-xs{ height: 36px; border-radius: 999px; }
  /* section heads: the title only */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-section-head{ margin-top: 14px !important; padding: 0 !important; border: 0 !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-section-head p{ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-section-head h3{ font-size: 15px !important; margin: 0 !important; }
  /* Role hierarchy's buttons: the standard ghost pill; Kiosk devices' Refresh: a round icon */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .rh-head-actions{ display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .rh-head-actions > button{
    height: 40px; min-height: 0 !important; border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important;
    font-weight: 600; padding: 0 16px !important; width: auto !important; flex: 0 0 auto; box-shadow: none !important;
  }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-kiosk-head > button{
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; margin-inline-start: auto; border-radius: 50% !important; border: 0 !important;
    background: var(--dnm-soft) !important; font-size: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; overflow: hidden;
  }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-kiosk-head > button svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) .ac-table-wrap{ border: 0 !important; background: transparent !important; overflow: visible !important; padding: 0 !important; box-shadow: none !important; }
  /* the user list as compact person cards (people.js): photo / initials, name, role and status; a tap opens Manage access */
  html.ui-2026 body:not(#dn26) :is(#users-content, #stg-users-content) table.ac-table.dnm-ac-done{ display: none !important; }
  html.ui-2026 body:not(#dn26) .dnm-ac-cards{ display: flex; flex-direction: column; gap: 8px; }
  html.ui-2026 body:not(#dn26) .dnm-ac-card{
    display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; padding-inline: 12px 8px; border: 1px solid var(--border); border-radius: var(--dnm-radius); background: var(--surface); cursor: pointer; min-width: 0;
  }
  html.ui-2026 body:not(#dn26) .dnm-ac-card > .ac-avatar{ flex: 0 0 44px; width: 44px !important; height: 44px !important; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--dnm-soft); }
  html.ui-2026 body:not(#dn26) .dnm-ac-card > .ac-avatar img{ width: 100%; height: 100%; object-fit: cover; }
  html.ui-2026 body:not(#dn26) .dnm-ac-main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  html.ui-2026 body:not(#dn26) .dnm-ac-main > b{ font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) .dnm-ac-chips{ display: flex; flex-wrap: wrap; gap: 4px; }
  html.ui-2026 body:not(#dn26) .dnm-ac-chips > *{ font-size: 11px !important; padding: 2px 8px !important; border-radius: 999px !important; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) .dnm-ac-card > .dnm-ib{ flex: 0 0 auto; }
}
@media (max-width: 900px){
  /* the fields on the card's own 16px (the form added its own inset: the fields sat 41px from the screen edge) */
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-card > .settings-profile-form{ padding-inline: 0 !important; margin-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) :is(#page-settings, #page-profile) .settings-profile-card > .settings-reminder-toggle{ margin-inline: 0 !important; }
}
@media (max-width: 900px){
  /* My Profile › Change photo: full screen (core.css), no second "Image Profile <name>" line, the theme's buttons: a soft
     Select image pill, Save the one primary (muted while nothing is chosen), no Cancel beside the × */
  html.ui-2026 body:not(#dn26) #small-modal #avatar-crop-wrap > div:nth-child(2):has(> b){ display: none !important; }
  html.ui-2026 body:not(#dn26) #small-modal #small-modal-body button[onclick*="avatar-file-inp"]{
    height: var(--dnm-ctrl); padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: var(--dnm-soft) !important; color: var(--text) !important; font-size: 14px !important;
  }
  html.ui-2026 body:not(#dn26) #small-modal #small-modal-body button[onclick^="removeAvatar"]{ height: var(--dnm-ctrl); border-radius: 999px !important; padding: 0 20px !important; }
  html.ui-2026 body:not(#dn26) #small-modal #small-modal-footer:has(#avatar-save-btn) > button:not(#avatar-save-btn){ display: none !important; }
  html.ui-2026 body:not(#dn26) #small-modal #avatar-save-btn{
    flex: 1 1 auto; width: 100%; height: var(--dnm-ctrl); border-radius: 999px !important; background: var(--text) !important; color: var(--surface) !important; font-size: 15px !important;
  }
  html.ui-2026 body:not(#dn26) #small-modal #avatar-save-btn:disabled{ opacity: .35; }
}
@media (max-width: 900px){
  /* ---- Team chat: the list on the 16px gutter (no boxed grey panel, no "Messages" title, no right border) ---- */
  html.ui-2026 body:not(#dn26) #page-team-chat :is(.tch-wrap, #tc-sidebar-wrap){ border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-sidebar-head{ display: flex !important; align-items: center; gap: 8px; padding: 0 0 10px !important; border: 0 !important; background: transparent !important; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-sidebar-head > div:first-child{ order: 2; margin: 0 !important; flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-sidebar-head .tch-sidebar-title{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-sidebar-head > .tch-search-wrap{ order: 1; flex: 1 1 auto; min-width: 0; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-search-wrap > .tch-search-input{ height: var(--dnm-ctrl) !important; min-height: 0 !important; border-radius: 999px !important; padding-inline: 16px 40px !important; }
  html.ui-2026 body:not(#dn26) #page-team-chat :is(.tch-new-btn, .tch-search-in-chat){
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 50% !important; background: var(--dnm-soft) !important; color: var(--text) !important; box-shadow: none !important;
    display: inline-flex !important; align-items: center; justify-content: center; font-size: 22px !important; line-height: 1 !important; flex: 0 0 auto;
  }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-search-in-chat{ font-size: 0 !important; margin-inline-start: auto; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-search-in-chat svg{ width: 18px; height: 18px; }
  html.ui-2026 body:not(#dn26) #page-team-chat #conv-list{ padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
  html.ui-2026 body:not(#dn26) #page-team-chat #conv-list .tch-conv-item{ margin: 0 !important; }
  /* the name starts beside the avatar, the time after a gap; previews cut by the line, at their own end in any language */
  html.ui-2026 body:not(#dn26) #conv-list .tch-conv-name{ flex: 1 1 auto; min-width: 0; text-align: start !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #conv-list .tch-conv-time{ flex: 0 0 auto; margin-inline-start: 8px; }
  html.ui-2026 body:not(#dn26) #conv-list .tch-conv-sub{ flex: 1 1 auto; min-width: 0; max-width: none !important; text-align: start !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-team-chat :is(.tch-conv-sub, .tch-conv-name, .tch-bubble, .tch-chat-head-status){ unicode-bidi: plaintext; }
  /* the thread's back: a round 44px chevron (people.js), pointing back in either direction */
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-chat-head > button.dnm-tc-back{ font-size: 0 !important; }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-team-chat .tch-chat-head > button.dnm-tc-back svg{ transform: scaleX(-1); }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-chat-head-status{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #page-team-chat .tch-chat-head > div:not([style*="position"]){ min-width: 0; flex: 1 1 auto; }
  /* inputs with no inner padding: the chat composer, the documents search, an idea's comment */
  html.ui-2026 body:not(#dn26) :is(#dm-input, #grp-input, #doc-cloud-content .dc-search, [id^="ideas-comment-"]){ padding-inline: 14px !important; }
  html.ui-2026 body:not(#dn26) #doc-cloud-content .dc-search{ height: var(--dnm-ctrl) !important; border-radius: 999px !important; }

  /* ---- Private documents › a folder: a round back, the folder name, a round download (ZIP) on one row ---- */
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-wrap .dc-head:has(> button[data-act="back"]){ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; justify-content: flex-start !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-wrap .dc-head:has(> button[data-act="back"]) .dc-title{ display: flex !important; flex: 1 1 auto; min-width: 0; order: 0; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-wrap .dc-head:has(> button[data-act="back"]) .dc-title > div:has(> h1){ display: block !important; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-wrap .dc-head:has(> button[data-act="back"]) .dc-title > .dc-folder-ic,
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-wrap .dc-head:has(> button[data-act="back"]) .dc-title small{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-wrap .dc-head:has(> button[data-act="back"]) .dc-title h1{ font-size: 17px !important; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-head > button.dnm-dc-ib{
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto; order: 0;
    border: 0 !important; border-radius: 50% !important; background: var(--dnm-soft) !important; color: var(--text) !important; box-shadow: none !important;
    display: inline-flex !important; align-items: center; justify-content: center; position: static !important;
  }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-head > button.dnm-dc-ib svg{ width: 20px; height: 20px; }
  html.ui-2026[dir="rtl"] body:not(#dn26) #page-doc-cloud .dc-head > button.dnm-dc-ib[data-act="back"] svg{ transform: scaleX(-1); }
  /* a file opens its preview on tap; Download is a round icon at the row end; the file name one line */
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file.dnm-tap{ cursor: pointer; display: flex !important; align-items: center; gap: 12px; flex-wrap: nowrap !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file .dc-file-main{ flex: 1 1 auto; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file .dc-file-main > small[dir]{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal !important; overflow-wrap: normal !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file.dnm-tap .dc-file-act{ flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file.dnm-tap .dc-file-act > button[data-act="view"]{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file.dnm-tap .dc-file-act > button[data-act="dl"]{
    width: var(--dnm-ctrl) !important; height: var(--dnm-ctrl) !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
    background: var(--dnm-soft) !important; color: var(--text) !important; font-size: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file.dnm-tap .dc-file-act > button[data-act="dl"] svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file .dc-file-act > .dc-chip{ white-space: nowrap; font-size: 11px; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file:has(.dc-chip.is-bad){ display: flex !important; align-items: center; gap: 12px; flex-wrap: wrap !important; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file:has(.dc-chip.is-bad) > .dc-file-main{ flex: 1 1 0 !important; min-width: 0; }
  html.ui-2026 body:not(#dn26) #page-doc-cloud .dc-file:has(.dc-chip.is-bad) > .dc-file-act{ flex: 1 1 100% !important; width: auto !important; margin: 0 !important; padding: 0 !important; padding-inline-start: 56px !important; }

  /* ---- Ideas ---- */
  /* one photo per author (the name decorator added a second) */
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-author .agent-inline-avatar{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-empty span{ display: none !important; }
  /* who can see it: the segmented control spans the row in three equal parts */
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-vis{ display: flex !important; width: 100% !important; flex: 1 1 100%; box-sizing: border-box; }
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-vis > .ideas-vis-btn{ flex: 1 1 0 !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the feed filters: one 44px segmented pill (the Attendance family), not four chunky pills */
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-filters{
    display: flex !important; flex-wrap: nowrap !important; width: 100% !important; height: var(--dnm-ctrl); box-sizing: border-box; padding: 3px !important; gap: 2px !important; margin-inline: 0 !important;
    background: var(--dnm-soft) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; overflow: hidden; grid-template-columns: none !important;
  }
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-filters > .ideas-filter{
    flex: 1 1 auto !important; min-width: 0; height: 100% !important; min-height: 0 !important; padding: 0 8px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important;
    background: transparent !important; color: var(--text-muted) !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 600 !important; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
  }
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-filters > .ideas-filter.is-on{ background: var(--surface) !important; color: var(--text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.12) !important; }
  /* the composer folds behind the page's one primary action, "New idea" (people.js) */
  html.ui-2026 body:not(#dn26) #page-ideas .ideas-composer.dnm-folded{ display: none !important; }
  html.ui-2026 body:not(#dn26) #page-ideas .dnm-ideas-new{ display: flex; justify-content: flex-end; margin: 0 0 12px; }
  html.ui-2026 body:not(#dn26) #page-ideas .dnm-ideas-new > .btn{ height: var(--dnm-ctrl); border-radius: 999px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px; }
}
@media (max-width: 900px){
  /* ---- New user / Manage access (full screen from core.css): no helper lines, the title on one line, one footer row ---- */
  html.ui-2026 body:not(#dn26) #small-modal .modal.ac-modal :is(.ac-form-grid label > small:not([id]), #ac-u-mailbox-switch-hint, .ac-form-section > div:first-child > small, .ac-info){ display: none !important; }
  html.ui-2026 body:not(#dn26) #small-modal:has(.modal.ac-modal) #small-modal-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.ui-2026 body:not(#dn26) #small-modal .modal.ac-modal input{ text-overflow: ellipsis; }
  html.ui-2026 body:not(#dn26) #small-modal:has(.modal.ac-modal) #small-modal-footer{ display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px; }
  html.ui-2026 body:not(#dn26) #small-modal:has(.modal.ac-modal) #small-modal-footer > .btn{ flex: 1 1 0 !important; width: auto !important; min-width: 0; height: var(--dnm-ctrl); border-radius: 999px !important; margin: 0 !important; }
  html.ui-2026 body:not(#dn26) #small-modal:has(.modal.ac-modal) #small-modal-footer > .btn-ghost{ flex: 0 1 auto !important; padding-inline: 20px; }
}

/* App TestFlight feedback 2026-10-23 (item 16): the daily report's date (an earlier day can be written / edited) - every width */
.at-report-daybar{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.at-report-daybar .at-report-day{ width: auto; max-width: 170px; height: 36px; min-height: 36px; padding: 4px 10px; font-size: 13px; }