/* Evensteer Desk — the same rules on every page (loaded last, after the page sheets)
   Dialogs keep their buttons in view, a page's subtitle is one readable line, a row of tabs that is too wide scrolls
   instead of cutting the last tab off, filters wrap on a phone, and the floating Eve is smaller there. */

/* a dialog never pushes its Save or Cancel below the screen: the footer stays at the bottom while the body scrolls */
.modal{max-height:calc(100dvh - 48px)}
.modal .modal-foot{position:sticky;bottom:0;z-index:2;background:var(--card,#fff)}

/* the line under a page title reads as one line, not a paragraph */
.page-sub{max-width:68ch}

/* tabs on a record or a page scroll sideways when there are more than fit, with a soft edge saying so */
.tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tabs::-webkit-scrollbar{display:none}
.tabs > .tab{flex:none}

/* the meetings filters wrap onto a second line on a narrow screen instead of running off it */
.mb-tools{flex-wrap:wrap}
@media (max-width:640px){.mb-tools > *{flex:1 1 150px;min-width:0}}

/* on a phone Eve is smaller and her Ask button stays in the top bar, so she covers less of the page */
@media (max-width:767px){
  .eve-float{width:96px}
  .eve-float .ef-stage{height:112px}
  .eve-float .ef-bar{display:none}
}

/* a header's actions: secondary ones first, the main one last, and on a phone the main one first and full width */
@media (max-width:600px){
  .head-actions{display:flex;flex-wrap:wrap;gap:8px}
  .head-actions > .btn:not(.btn-ghost):last-child{order:-1;flex:1 1 100%}
}

/* a note that says this is the demo looks the same on every page: one quiet line, never a warning */
.demo-note{margin:0 0 16px;padding:9px 14px;border:1px solid var(--hair);border-radius:10px;background:var(--surface-2);color:var(--ink-soft);font-size:13px;line-height:1.45}
.panel-body .demo-note{margin:0}
.demo-note b{color:var(--ink);font-weight:600}

/* Settings, Menu names: one heading per menu group above its boxes */
.mn-group{grid-column:1/-1;margin:8px 0 0;font-size:12.5px;font-weight:600;color:var(--ink-dim)}
.mn-group:first-child{margin-top:0}

/* on a phone a wide table (Clients, Leads, Workflows, Newsletters) shows each row as a card: the name on top,
   then each value under its column name from data-label, and the row's buttons always shown */
@media (max-width:600px){
  .crm-cards,.crm-cards tbody{display:block}
  .crm-cards thead{display:none}
  .crm-cards tbody tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;padding:12px 14px;border-bottom:1px solid var(--hair)}
  .crm-cards td{display:block;padding:0;border:0;max-width:none;min-width:0;overflow:visible;white-space:normal;overflow-wrap:anywhere}
  .crm-cards td:empty{display:none}
  .crm-cards td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;color:var(--ink-dim)}
  .crm-cards td.cell-name,.crm-cards td[colspan],.crm-cards td.row-tools{grid-column:1/-1}
  .crm-cards td.cell-name{padding-right:34px}
  .crm-cards td.chk{position:absolute;top:12px;right:14px;width:auto}
  .crm-cards td.row-tools{opacity:1;text-align:left;display:flex;gap:8px;flex-wrap:wrap}
}