/* ==========================================================================================
   Dandelion CRM on the phone — the 2026-10-21 round (owner, page by page in the phone preview):
   "the app IS the website" (app 3.0), so the phone layout of THIS site is the app's UI.
   ------------------------------------------------------------------------------------------
   Contract (same as ui-2026-phone.css): every rule sits inside `@media (max-width: 900px)` and
   starts with `html.ui-2026 body:not(#dn26)`. Above 900px nothing here matches: the desktop is
   untouched. Colours are the palette tokens only; logical properties only (RTL); dark mode is
   body.dark through the same tokens. Shared pieces live here; each area has its own file
   (assets/css/mobile/<area>.css + assets/js/mobile/<area>.js), all loaded after ui-2026-phone.
   ========================================================================================== */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26){
    --dnm-gutter: 16px;            /* the ONE side gap of every page (owner: "fasele az kenar estandard") */
    --dnm-radius: 18px;            /* cards */
    --dnm-pill: 999px;
    --dnm-ctrl: 44px;              /* round icon buttons (ChatGPT-size) */
    --dnm-soft: var(--surface-muted, var(--dn-surface-2, #f1f1f1));
  }
  /* no glass anywhere: a bar that scrolls under content stays flat and opaque (item 4) */
  html.ui-2026 body:not(#dn26) :is(#topbar, #mobile-bottom-nav, .crm-pagetabs, .own-toolbar, .lead-modal .lm-mbar, .dn-sticky-head, [class*="toolbar"], [class*="-head"]){
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.ui-2026 body:not(#dn26) #topbar{ background: var(--surface) !important; }
  html.ui-2026 body:not(#dn26) #mobile-bottom-nav{ background: var(--surface) !important; }
  html.ui-2026 body:not(#dn26) .crm-pagetabs{ background: var(--surface) !important; }

  /* ---- the round icon button (search, filter, sort, stats, hamburger) ---- */
  html.ui-2026 body:not(#dn26) .dnm-ib{
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: var(--dnm-ctrl); height: var(--dnm-ctrl); border-radius: 50%;
    background: var(--dnm-soft); color: var(--text); border: 0; padding: 0; cursor: pointer;
    box-shadow: none; -webkit-tap-highlight-color: transparent; position: relative;
  }
  html.ui-2026 body:not(#dn26) .dnm-ib:active{ transform: scale(.96); }
  html.ui-2026 body:not(#dn26) .dnm-ib svg{ width: 20px; height: 20px; }
  html.ui-2026 body:not(#dn26) .dnm-ib .dnm-ib-badge{
    position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger, #B03E30); border: 1.5px solid var(--surface);
  }
  /* the row of round buttons beside a search field */
  html.ui-2026 body:not(#dn26) .dnm-tools{ display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
  html.ui-2026 body:not(#dn26) .dnm-tools > .dnm-search{ flex: 1 1 auto; min-width: 0; }

  /* ---- one scrolling row of chips (counts, filters, suggestions) ---- */
  html.ui-2026 body:not(#dn26) .dnm-row{
    display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity;
    padding: 2px var(--dnm-gutter) 6px; margin-inline: calc(-1 * var(--dnm-gutter));
  }
  html.ui-2026 body:not(#dn26) .dnm-row::-webkit-scrollbar{ display: none; }
  html.ui-2026 body:not(#dn26) .dnm-row > *{ flex: 0 0 auto !important; white-space: nowrap; scroll-snap-align: start; }

  /* ---- the side drawer (filters, sort, stats): slides in from the end edge ---- */
  html.ui-2026 body:not(#dn26) .dnm-drawer-scrim{
    position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1200; opacity: 0; transition: opacity .22s ease;
  }
  html.ui-2026 body:not(#dn26) .dnm-drawer-scrim.is-on{ opacity: 1; }
  html.ui-2026 body:not(#dn26) .dnm-drawer{
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(86vw, 360px); z-index: 1201;
    background: var(--surface); color: var(--text); display: flex; flex-direction: column;
    border-start-start-radius: 0; border-end-start-radius: 0;
    box-shadow: -12px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
    padding-top: var(--dn-safe-top, 0px); padding-bottom: var(--dn-safe-bottom, 0px);
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) .dnm-drawer{ transform: translateX(-100%); box-shadow: 12px 0 40px rgba(0,0,0,.18); }
  html.ui-2026 body:not(#dn26) .dnm-drawer.is-on{ transform: none; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-head{
    display: flex; align-items: center; gap: 10px; padding: 14px var(--dnm-gutter) 10px; flex: 0 0 auto;
    font-weight: 700; font-size: 17px;
  }
  html.ui-2026 body:not(#dn26) .dnm-drawer-head > span{ flex: 1 1 auto; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-body{ flex: 1 1 auto; overflow-y: auto; padding: 4px var(--dnm-gutter) 16px; display: flex; flex-direction: column; gap: 12px; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-body > *{ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-foot{ display: flex; gap: 8px; padding: 10px var(--dnm-gutter) 14px; border-top: 1px solid var(--border); flex: 0 0 auto; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-foot[hidden]{ display: none; }
  html.ui-2026 body:not(#dn26) .dnm-drawer-foot .btn{ flex: 1 1 0; height: 44px; border-radius: var(--dnm-pill); }
  /* the label a moved filter gets inside the drawer */
  html.ui-2026 body:not(#dn26) .dnm-drawer-label{ font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 6px 0 -6px; text-transform: uppercase; letter-spacing: .4px; }

  /* ---- a table turned into cards (dnMobile.tableToCards) ---- */
  html.ui-2026 body:not(#dn26) .dnm-cards{ display: flex; flex-direction: column; gap: 10px; }
  html.ui-2026 body:not(#dn26) .dnm-card{
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--dnm-radius); padding: 12px 14px;
    display: flex; flex-direction: column; gap: 6px;
  }
  html.ui-2026 body:not(#dn26) .dnm-card-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  html.ui-2026 body:not(#dn26) .dnm-card-row > .dnm-k{ flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }
  html.ui-2026 body:not(#dn26) .dnm-card-row > .dnm-v{ flex: 1 1 auto; min-width: 0; text-align: end; font-size: 14px; overflow-wrap: anywhere; }
  html.ui-2026 body:not(#dn26) .dnm-card-row.is-first > .dnm-v{ text-align: start; font-weight: 700; font-size: 15px; }
  html.ui-2026 body:not(#dn26) .dnm-card-row.is-first > .dnm-k{ display: none; }
  html.ui-2026 body:not(#dn26) .dnm-card-actions{ display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
  html.ui-2026 body:not(#dn26) .dnm-card-actions > *{ flex: 1 1 auto; }
  html.ui-2026 body:not(#dn26) table.dnm-carded{ display: none !important; }

  /* ---- a stats block hidden behind a button (dnMobile.statsToggle) ---- */
  html.ui-2026 body:not(#dn26) .dnm-stats-hidden{ display: none !important; }
  html.ui-2026 body:not(#dn26) .dnm-stats-open .dnm-stats-hidden{ display: block !important; }

  /* ---- the dandelion placeholder for a listing with no photo (same box as a photo) ---- */
  html.ui-2026 body:not(#dn26) .dnm-nophoto{
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background: var(--dnm-soft); color: var(--text-muted);
  }
  html.ui-2026 body:not(#dn26) .dnm-nophoto svg{ width: 40%; max-width: 72px; height: auto; opacity: .55; }

  /* ---- the standard side gap: one value for every page's content ---- */
  html.ui-2026 body:not(#dn26) #content > .page{ padding-inline: var(--dnm-gutter) !important; }

  /* ---- what leaves the phone (items 26, 27, 29, 31, 33, 34): hidden here, their routes are refused in core.js ---- */
  html.ui-2026 body:not(#dn26) .dnm-gone{ display: none !important; }
}

/* Above 900px nothing of the phone layer may show, even after a resize from a phone width (reviewers 2026-10-21): the
   added pieces are removed by core.js restoreMoved(); this is the belt to those braces. */
@media (min-width: 901px){
  html.ui-2026 body:not(#dn26) :is(.dnm-cards, .dnm-tools, .dnm-ib, .dnm-drawer, .dnm-drawer-scrim, #dnm-menu, .dnm-menu-scrim, .dnm-moved, [data-dnm-added], .dnm-back, .dnm-modal-back){ display: none !important; }
  html.ui-2026 body:not(#dn26) .dnm-stats-hidden{ display: revert !important; }
}

/* Owner 2026-10-22: ui.css gives every input a 42px min-height on the phone, which stretched check boxes into tall rectangles */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) input[type="checkbox"], html.ui-2026 body:not(#dn26) input[type="radio"]{
    width: 20px !important; height: 20px !important; min-height: 0 !important; min-width: 0 !important; flex: 0 0 20px; margin: 0 8px 0 0; accent-color: var(--text);
  }
  html.ui-2026[dir="rtl"] body:not(#dn26) input[type="checkbox"], html.ui-2026[dir="rtl"] body:not(#dn26) input[type="radio"]{ margin: 0 0 0 8px; }
}

/* Owner 2026-10-22 («این خط اسکرول رو بردار کلاً از همه جای اپ»): no scrollbar anywhere on the phone - every scroller
   still scrolls by touch / wheel, only the bar itself is gone (modals, drawers, chip rows, the page). */
@media (max-width: 900px){
  html.ui-2026, html.ui-2026 *{ scrollbar-width: none !important; -ms-overflow-style: none !important; }
  html.ui-2026 ::-webkit-scrollbar, html.ui-2026 *::-webkit-scrollbar{ display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }
}

/* ===== Owner-style review at 390px (2026-10-22), what every page shares ===== */
@media (max-width: 900px){
  /* no glass anywhere (owner: «بلور نه»): ui.css's blanket [class$="-backdrop"] rule, the consent sheet's backdrop, the attendance /
     KPI dialogs, the photo chips (.prp-card-stat, .dev-pcard-status) - every backdrop-filter on the phone is off; scrims stay a flat tint */
  html.ui-2026 body:not(#dn26) *, html.ui-2026 body:not(#dn26) *::before, html.ui-2026 body:not(#dn26) *::after{
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.ui-2026 body:not(#dn26) :is(#page-properties .prp-card-img > .prp-card-stat, .dev-pcard-media .dev-pcard-status){
    background: var(--surface) !important; color: var(--text) !important;
  }

  /* the activity-consent sheet (and every .act-sheet): a full-screen page, no grabber */
  html.ui-2026 body:not(#dn26) .act-layer .act-sheet{
    inset: 0 !important; max-height: none !important; height: var(--app-vh, 100dvh); border-radius: 0 !important; box-shadow: none !important;
    padding-top: var(--dn-safe-top, env(safe-area-inset-top, 0px)); animation: none;
  }
  html.ui-2026 body:not(#dn26) .act-layer .act-head::before{ display: none; }
  html.ui-2026 body:not(#dn26) .act-layer .act-foot .act-btn{ border-radius: var(--dnm-pill); }

  /* dialogs are full screen: every #small-modal that holds a form field (New user, Manage access, New group, Report a problem,
     filters, Links & QR …) plus the full-screen form families - square, borderless, edge to edge (they kept 20px corners and
     1px side borders from the sheet look) */
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:is(.crm-form-gold-v2, .task-modal-gold-v2, .usr-modal-gold-v2, .adv-modal-gold-v2, .rent-modal-gold-v2, .blueprint-modal-v1, .ztask-form-modal) .modal,
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:has(#small-modal-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea)) .modal,
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal .modal.ac-modal{
    height: 100% !important; max-height: none !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  }
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:has(#small-modal-body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea)) .modal-header,
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal:has(.modal.ac-modal) .modal-header{ padding-top: max(8px, var(--dn-safe-top)) !important; }
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal :is(.modal-footer, #small-modal-footer){
    margin: 0 !important; width: 100% !important; border-radius: 0 !important; border-inline: 0 !important; background: var(--surface) !important;
  }
  html.ui-2026 body:not(#dn26) #small-modal.ztask-form-modal :is(label, .form-label, .ztask-field-label){ font-weight: 500 !important; }
  /* the task form: on the one 16px gutter (the body's 16px + the form's 14px drew it at 30px), its footer edge to edge */
  html.ui-2026.crm-mobile-lock body:not(#dn26) #small-modal.ztask-form-modal #small-modal-body{ padding-inline: 0 !important; }
  html.ui-2026 body:not(#dn26) #small-modal.ztask-form-modal .ztask-form{ padding-inline: var(--dnm-gutter) !important; }
  html.ui-2026 body:not(#dn26) #small-modal.ztask-form-modal .ztask-modal-footer{
    margin: 0 !important; width: 100% !important; box-sizing: border-box; border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--border) !important;
    background: var(--surface) !important; padding: 10px var(--dnm-gutter) calc(10px + var(--dn-safe-bottom, 0px)) !important;
  }
  /* a footer whose only button is Close: the × in the head already closes */
  html.ui-2026 body:not(#dn26) #small-modal #small-modal-footer:has(> .btn:only-child:is([onclick*="closeModal"], [onclick*="closeSmallModal"])){ display: none !important; }
  /* the attendance request and the KPI targets dialogs: full screen too */
  html.ui-2026 body:not(#dn26) .at-modal-overlay:not([hidden]){ padding: 0 !important; align-items: stretch !important; }
  html.ui-2026 body:not(#dn26) .at-modal-overlay .at-modal-box{
    max-width: none !important; width: 100% !important; height: var(--app-vh, 100dvh) !important; max-height: none !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-top: var(--dn-safe-top, 0px);
  }
  html.ui-2026 body:not(#dn26) #kpi-targets-modal{ padding: 0 !important; align-items: stretch !important; }
  html.ui-2026 body:not(#dn26) #kpi-targets-modal .kpi-modal-card{
    max-width: none !important; width: 100% !important; height: var(--app-vh, 100dvh) !important; max-height: none !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-top: var(--dn-safe-top, 0px);
  }

  /* one control height: inputs and selects are 44px (some were 46-50px); text areas keep their rows */
  html.ui-2026 body:not(#dn26) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]), select):not([multiple]):not([size]){
    height: var(--dnm-ctrl); min-height: var(--dnm-ctrl); box-sizing: border-box;
  }

  /* a sheet's first control is focused on open: no thick ring as if it were selected (touch, not keyboard) */
  html.ui-2026 body:not(#dn26) :is(button, select, a, [tabindex], [role="button"], [role="menuitem"]):focus:not(:focus-visible),
  html.ui-2026 body:not(#dn26) :is(#small-modal, .modal-overlay, .dnm-drawer, .dnm-menu, [role="dialog"], .prp-more-menu, .prp-pv) :is(button, select, a, [tabindex], [role="button"], [role="menuitem"]):focus-visible{
    outline: none !important;
  }
}
@media (max-width: 900px){
  /* the IT help form (Help › Report a problem): fields on the sheet itself, not each in its own bordered card; the picked files
     are listed by name under the button, so the "No file chosen" label beside it leaves; an auto-focused select keeps its
     resting border (it read as selected / in error) */
  html.ui-2026 body:not(#dn26) #small-modal .aia-form .prp-doc-input{ border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  html.ui-2026 body:not(#dn26) #small-modal .aia-form #it-file-count{ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#small-modal, .modal-overlay, .dnm-drawer) select:focus{ border-color: var(--border) !important; box-shadow: none !important; }
}

/* TestFlight 3 + 6 (owner 2026-10-27: «عکس پروفایل مشاور کامل نیست»): the agent's round photo beside the name on a lead / contact / property
   card was cut: the 20px circle sits in a line box that clips (overflow hidden, height = the circle) and its ring - the touch screen keeps
   :hover after a tap, and ui-2026.css draws a 2px ring on .agent-inline-avatar:hover - fell outside that box on three sides. Now the
   line is as tall as the photo and clips nothing, the photo is a full 24px circle, no ring, object-fit: cover, a little above the middle
   (a portrait keeps its face). */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) #content .has-agent-avatar{ overflow: visible !important; min-height: 26px; align-items: center; }
  html.ui-2026 body:not(#dn26) #content .agent-inline-avatar{
    box-sizing: border-box; width: 24px !important; min-width: 24px !important; max-width: 24px !important;
    height: 24px !important; min-height: 24px !important; max-height: 24px !important; flex: 0 0 24px !important;
    border-radius: 50% !important; overflow: hidden !important; box-shadow: none !important;
  }
  html.ui-2026 body:not(#dn26) #content .agent-inline-avatar img{ width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 28%; border-radius: 50%; display: block; }
}

/* TestFlight 11 + 20 (owner 2026-10-27: «از اینجا راه برگشت به صفحه‌ی قبل نداریم» / «رو این صفحه حالت بک هم نداره یا کنسل»): a round Back button
   at the start of every full-screen dialog's head (core.js hoistDialogs) and of the top bar on every page opened from the menu
   (header.js). The arrow points to the start edge: ‹ in English, › in Persian / Arabic. The dialog's own × goes (Back does the same),
   its footer keeps Cancel and Save side by side. */
@media (max-width: 900px){
  html.ui-2026 body:not(#dn26) :is(.dnm-modal-back, .dnm-back){
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--dnm-ctrl);
    width: var(--dnm-ctrl); min-width: var(--dnm-ctrl); height: var(--dnm-ctrl); padding: 0; margin: 0;
    border: 0; border-radius: 50%; background: var(--dnm-soft); color: var(--text); box-shadow: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.ui-2026 body:not(#dn26) :is(.dnm-modal-back, .dnm-back) svg{ width: 22px; height: 22px; }
  html.ui-2026[dir="rtl"] body:not(#dn26) :is(.dnm-modal-back, .dnm-back) svg{ transform: scaleX(-1); }
  html.ui-2026 body:not(#dn26) :is(.dnm-modal-back, .dnm-back):active{ transform: scale(.96); }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal, #kpi-targets-modal, #own-form-modal) .dnm-hasback{ display: flex !important; align-items: center; gap: 12px; padding-inline-end: var(--dnm-gutter) !important; }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal, #kpi-targets-modal, #own-form-modal) .dnm-hasback > :is(.txn-modal-close, .kpi-modal-close, .own-modal-close){ display: none !important; }
  html.ui-2026 body:not(#dn26) :is(#txn-detail-modal, #txn-finance-modal, #kpi-targets-modal, #own-form-modal) .dnm-hasback > div{ min-width: 0; flex: 1 1 auto; }
  /* the top bar: Back stands where the AI button stands, on every page that is not one of the tabs (header.js sets data-dnm-back) */
  html.ui-2026 body:not(#dn26) #topbar .dnm-back{ display: none; }
  html.ui-2026 body[data-dnm-back]:not(#dn26) #topbar .dnm-back{ display: inline-flex; }
  html.ui-2026 body[data-dnm-back]:not(#dn26) #topbar .dnm-ai{ display: none !important; }
}