/* WeEdit — phone readability pass (≤760px only; the PC layout is untouched).
   Tables become easy-to-read cards, text is larger, KPI tiles sit two per row. */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .eyebrow { font-size: 11.5px !important; letter-spacing: .08em; }
  .pagehead h1 { font-size: 29px !important; }
  .subtitle { font-size: 15px !important; }
  .panelsub { font-size: 13px !important; }
  .paneltitle { font-size: 17px !important; }

  /* KPI tiles: one per row, compact — label & note on the left, the number on the right */
  .cards { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .cards > :not(.card) { grid-column: 1 / -1; }
  .cards > .card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top num" "note num"; align-items: center; column-gap: 14px; row-gap: 3px; padding: 13px 16px !important; min-height: 0 !important; }
  .cards > .card > .cardtop { grid-area: top; font-size: 14.5px !important; margin: 0 !important; line-height: 1.25; }
  .cards > .card > .metric { grid-area: num; font-size: 25px !important; margin: 0 !important; text-align: end; white-space: nowrap; }
  .cards > .card > .metric small { font-size: 12px !important; }
  .cards > .card > .trend { grid-area: note; font-size: 12.5px !important; line-height: 1.3; margin: 0 !important; }
  .cards > .card .cardicon { display: none !important; }

  /* Every data table becomes a list of cards */
  .table-scroll { overflow: visible !important; }
  .table-scroll table { min-width: 0 !important; width: 100% !important; border-collapse: separate !important; }
  .table-scroll thead { display: none !important; }
  .table-scroll tbody { display: flex !important; flex-direction: column; gap: 10px; padding: 4px 12px 14px; }
  .table-scroll tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 14px !important; border: 1px solid #0000001a; border-radius: 14px; background: #00000003; }
  .table-scroll td { display: block !important; padding: 0 !important; border: 0 !important; white-space: normal !important; min-width: 0 !important; font-size: 15px !important; line-height: 1.35; overflow-wrap: anywhere; }
  .table-scroll td::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8b948e; margin-bottom: 4px; }
  .table-scroll td:first-child, .table-scroll td[data-label=""], .table-scroll td[colspan] { grid-column: 1 / -1; }
  .table-scroll td:first-child::before, .table-scroll td[data-label=""]::before, .table-scroll td[colspan]::before { display: none; }
  .table-scroll td:has(.entityactions), .table-scroll td:has(> button) { grid-column: 1 / -1; }
  .table-scroll td:has(.entityactions)::before, .table-scroll td:has(> button)::before { display: none; }
  .table-scroll td:first-child b { max-width: none !important; white-space: normal !important; font-size: 16.5px !important; }
  .table-scroll td small { font-size: 13.5px !important; }
  .table-scroll .clientcell { gap: 12px !important; }
  .table-scroll .clientmini, .table-scroll .cphoto { width: 44px !important; height: 44px !important; flex: 0 0 44px; font-size: 15px !important; }
  .table-scroll .status, .table-scroll .payment-state, .table-scroll .board-tag { font-size: 12.5px !important; padding: 4px 10px !important; }
  .table-scroll .progress { min-width: 0 !important; }
  .table-scroll .progress small { font-size: 13px !important; }
  .table-scroll .entityactions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .table-scroll .entityactions .tinybtn, .table-scroll td[data-label=""] .tinybtn { flex: 1 1 auto; min-height: 42px; font-size: 13.5px !important; }
  .table-scroll .money { font-size: 15px !important; }
  #reportRows tr td:first-child b { font-size: 17px !important; }
  body.dark .table-scroll tr { border-color: #ffffff1a; background: #ffffff05; }

  /* Lists and small text */
  .tx { font-size: 15px !important; padding: 14px 16px !important; }
  .tx small { font-size: 13px !important; }
  .notif-item, .notif-item small { font-size: 14px !important; }
  .board-card h3 { font-size: 17px !important; }
  .board-card p { font-size: 14px !important; }
  .legendlist { font-size: 14px !important; }
  .footer { font-size: 13px !important; }
  .drawer { font-size: 15px; }
  .drawer small { font-size: 13px !important; }
}

/* ===== Phone header like a native app + icons on key numbers ===== */
#mHam, .kicon { display: none; }
@media (max-width: 760px) {
  html body .topbar { display: flex !important; align-items: center; gap: 6px; }
  body:not(.cloud-editor) #mHam { display: grid; place-items: center; width: 42px; height: 42px; margin-inline-start: -8px; border: 0; background: none; color: inherit; cursor: pointer; flex: 0 0 auto; }
  #mHam svg { width: 26px; height: 26px; }
  html body .topbar .top-right { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; margin-inline-start: auto !important; justify-content: flex-end !important; gap: 4px !important; }
  html body .top-right > * { order: 9; }
  html body .top-right > #themeToggle { order: 1; }
  html body .top-right > .langbtn { order: 2; }
  html body .top-right > #notificationButton { order: 3; }
  html body .top-right > .avatar { order: 4; }
  html body .top-right #themeToggle, html body .top-right .langbtn, html body .top-right #notificationButton { border: 0 !important; background: transparent !important; box-shadow: none !important; width: 40px !important; height: 40px !important; }
  html body .top-right .langbtn svg { display: none !important; }
  html body .top-right .langbtn::before { font-size: 24px; line-height: 1; content: '🇬🇧'; }
  html[lang=fr] body .top-right .langbtn::before { content: '🇫🇷'; }
  html[lang=ar] body .top-right .langbtn::before { content: '🇲🇦'; }
  body:not(.cloud-editor) .top-right > .avatar { display: grid !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background-size: cover !important; background-position: center !important; margin-inline-start: 4px; box-shadow: 0 0 0 2px #c8a96b55; font-size: 13px; }
  body:not(.cloud-editor) #weeditCloudSignout, body:not(.cloud-editor) #weeditChangePw { display: none !important; }

  /* Key-number cards: coloured icon on the left so you know what you are looking at */
  .cards > .card { grid-template-columns: 42px minmax(0, 1fr) auto !important; grid-template-areas: "ico top num" "ico note num" !important; column-gap: 12px !important; }
  .cards > .card > .kicon { grid-area: ico; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #c8a96b22; color: #b99c62; align-self: center; }
  .cards > .card > .kicon svg { width: 22px; height: 22px; }
}