/* Omid CRM — responsive & visual refit layer (v1.0.0, 2026-09-27)
   Additive only: loaded LAST in resources/views/layout.blade.php and auth/frame.blade.php.
   Revert = remove the two <link> tags. No markup changes are required by this file.
   Breakpoints used: 1100 / 1024 / 900 / 768 / 560 / 400. */

/* ============================================================
   0 · Shared rhythm tokens
   ============================================================ */
:root{--om-gap:18px;--om-gap-sm:12px;--om-tap:44px;--om-tap-min:40px}

/* ============================================================
   1 · Global safety rails
   Every flex/grid child below can shrink; nothing forces the page wider than the viewport.
   ============================================================ */
.om-shell,.om-main,.om-page,.om-card,.om-page-heading,.om-heading-actions,.om-filter-bar,
.om-dashboard-grid,.om-profile-grid,.om-profile-content,.om-profile-aside,.om-settings-grid,
.om-kpi-grid,.om-metric-strip,.om-form-grid,.om-form-stack,.om-task-grid,.om-badge-grid,
.om-book-grid,.om-permissions,.om-campaign-form,.om-list-main,.om-person,.om-cell-note,
.app-workspace,.app-hero,.app-section,.app-two-column>div,.app-form-panel,.app-edit-panel,
.app-list-panel,.app-stat-grid,.app-shortcuts,.app-product-card,.app-campaign-card,
.om-dialog,.om-dialog>form,.om-dialog-body{min-width:0}

.om-page :where(td,th,li,strong,small,bdi,code,a){overflow-wrap:anywhere}
.om-page :where(h1,h2,h3,h4){overflow-wrap:anywhere}

/* Visible keyboard focus everywhere, including on tinted surfaces. */
.om-page :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--om-focus);outline-offset:2px}

/* ============================================================
   2 · Sign-in and second factor
   The show/hide control used to be cancelled by its own logical-property
   declaration (right:7px then inset-inline-end:auto in the same rule), so it
   dropped to the static position at the left edge of the input and sat on top
   of the typed password. Physical offsets are declared last here on purpose.
   ============================================================ */
.om-password-field{display:block;position:relative;direction:ltr}
.om-password-field>input{box-sizing:border-box;width:100%;direction:ltr;text-align:left;padding-left:14px;padding-right:54px}
.om-password-field>.om-icon-button{position:absolute;inset-inline-start:auto;inset-inline-end:auto;left:auto;right:6px;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;background:transparent;border:0;color:var(--om-muted);cursor:pointer}
.om-password-field>.om-icon-button:hover{background:var(--om-surface);color:var(--om-primary)}
.om-password-field>.om-icon-button:focus-visible{outline:2px solid var(--om-focus);outline-offset:1px}

.om-auth{min-height:100dvh;padding:clamp(12px,4vw,32px)}
.om-login-card{display:flex;flex-direction:column;gap:22px}
.om-login-card .om-form-stack{gap:16px}
.om-login-card .om-button{min-height:var(--om-tap)}
.om-auth-heading h2{font-size:clamp(22px,5.5vw,28px);line-height:1.5}
.om-auth-toolbar{gap:12px}
.om-auth-brand .om-brand-mark.is-image img{max-width:100%;height:auto;object-fit:contain}
.om-otp-input{letter-spacing:.45em;text-indent:.45em;text-align:center}
.om-resend-form .om-button{min-height:var(--om-tap-min)}

/* ============================================================
   3 · App shell: sidebar, topbar, page frame
   ============================================================ */
.om-nav a>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.om-global-search>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.om-sidebar-user>div{min-width:0;flex:1}
.om-sidebar-user .om-avatar{flex:0 0 auto}

.om-live-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}

/* Notch / home-indicator safe areas on phones. */
.om-page{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.om-sidebar{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}

@media(max-width:1024px){
  .om-topbar{gap:8px;padding-inline:12px}
  .om-menu-button,.om-icon-button{min-width:var(--om-tap);min-height:var(--om-tap)}
}
@media(max-width:768px){
  .om-topbar{height:64px}
  .om-topbar-actions{margin-inline-start:auto}
  .om-page{padding:18px 14px calc(28px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .om-global-search{padding-inline:10px}
  .om-theme-control select{width:112px}
}
@media(max-width:400px){
  .om-topbar{padding-inline:8px;gap:6px}
  .om-global-search>span{display:none}
  .om-global-search{flex:0 0 var(--om-tap);justify-content:center;padding-inline:0}
  .om-theme-control select{width:100px;font-size:11px}
  .om-page{padding:16px 12px calc(24px + env(safe-area-inset-bottom))}
}

/* ============================================================
   4 · Page heading and its actions
   ============================================================ */
.om-page-heading{align-items:flex-end;gap:16px 20px}
.om-page-heading h1{font-size:clamp(20px,5vw,25px);line-height:1.45}
.om-page-heading p{line-height:1.8}
@media(max-width:900px){.om-page-heading{flex-direction:column;align-items:stretch}.om-heading-actions{width:100%}}
@media(max-width:768px){
  .om-heading-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .om-heading-actions>.om-button,.om-heading-actions>a,.om-heading-actions>form{width:100%;min-width:0}
  .om-heading-actions>:only-child,.om-heading-actions>:last-child:nth-child(odd){grid-column:1/-1}
  .om-heading-actions .om-button{min-height:var(--om-tap);white-space:normal}
}
@media(max-width:400px){.om-heading-actions{grid-template-columns:1fr}.om-heading-actions>:nth-child(2){grid-column:auto}}

/* ============================================================
   5 · Filters, search fields, saved segments
   ============================================================ */
.om-search-field input{padding-inline-start:42px}
.om-search-field .om-icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.om-filter-bar>label,.om-filter-bar>.om-search-field{min-width:0}
.om-filter-bar .om-button{min-height:var(--om-tap-min)}
.om-segments{line-height:1.6}
.om-segment{align-items:center;gap:4px;min-height:36px;padding:4px 6px 4px 10px}
.om-segment>a{display:inline-flex;align-items:center;min-height:32px;padding:0 4px;font-size:12px}
.om-segment>form{display:flex}
.om-segment>form>button{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--om-muted);background:transparent;border:0;cursor:pointer}
.om-segment>form>button:hover{background:var(--om-danger-soft);color:var(--om-danger)}
@media(max-width:768px){
  .om-filter-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:10px}
  .om-filter-bar>.om-search-field,.om-filter-bar>label:has(textarea),.om-filter-bar>.om-button,.om-filter-bar>a,.om-filter-bar>div{grid-column:1/-1}
  .om-filter-bar>.om-check{grid-column:auto}
  .om-filter-bar .om-button{width:100%;min-height:var(--om-tap)}
}
@media(max-width:400px){.om-filter-bar{grid-template-columns:1fr}.om-filter-bar>.om-check{grid-column:auto}}

/* ============================================================
   6 · KPI cards, stat grids, metric strips
   Cards stay a single icon+text row at every width; the previous
   column layout left a large dead area on phones.
   ============================================================ */
.om-kpi-card{display:flex;flex-direction:row;align-items:center;gap:14px;min-height:104px;padding:16px}
.om-kpi-card>.om-kpi-icon{flex:0 0 auto;width:44px;height:44px;min-width:44px}
.om-kpi-card>div:last-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.om-kpi-card strong{font-size:clamp(18px,4.6vw,23px);line-height:1.4;overflow-wrap:anywhere}
.om-kpi-card span,.om-kpi-card small{overflow-wrap:anywhere}
.om-kpi-card small{line-height:1.6}
.app-stat-grid>div,.app-shortcuts>a{min-width:0}
.app-shortcuts>a{display:flex;align-items:center;gap:10px;min-height:var(--om-tap)}
.app-stat-grid strong{font-size:clamp(18px,4.6vw,24px);overflow-wrap:anywhere}

.om-metric-strip{display:grid}
.om-metric-strip>div{min-width:0}
.om-metric-strip strong{white-space:normal;overflow:visible;text-overflow:clip;font-size:clamp(14px,3.6vw,17px);line-height:1.6;overflow-wrap:anywhere}
.om-metric-strip span{line-height:1.6}
@media(max-width:900px){.om-metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .om-metric-strip{grid-template-columns:1fr}
  .om-metric-strip>div{border-left:0!important;border-bottom:1px solid var(--om-line)}
  .om-metric-strip>div:last-child{border-bottom:0!important}
}

/* ============================================================
   7 · Cards, panels, section heads, empty states
   ============================================================ */
.om-card-header{flex-wrap:wrap;gap:10px 14px}
.om-card-header>div{min-width:0;flex:1 1 220px}
.om-card-header a,.om-card-header .om-button,.om-card-header .om-soft-badge{display:inline-flex;align-items:center;justify-content:center;min-height:var(--om-tap-min);padding:6px 12px;border-radius:10px;white-space:nowrap}
.om-card-header h2{line-height:1.5}
.om-help{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px}
.om-empty{padding:28px 18px}
.om-empty p{max-width:46ch;margin-inline:auto}
.om-panel-pad{padding:clamp(14px,3.5vw,22px)}
.om-field-help{line-height:1.75}
.app-section-head{flex-wrap:wrap;gap:12px 16px}
.app-section-head>div{min-width:0}
.app-section-head .om-button,.app-jump a{min-height:var(--om-tap-min)}
.app-jump{gap:8px}
.app-jump a{display:inline-flex;align-items:center;padding:8px 14px}
@media(max-width:600px){
  .app-section-head{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;padding:18px}
  .app-section-head .om-button{width:100%}
}
.om-test-panel>summary{flex-wrap:wrap;gap:10px}
.om-test-panel>summary>span:first-child{min-width:0;flex:1}

/* ============================================================
   8 · Tables
   Wide tables stay pannable, but they now announce themselves: edge
   shadows appear only while there is more content in that direction.
   ============================================================ */
.om-table-wrap{
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  background-image:linear-gradient(90deg,var(--om-card) 28px,transparent),
                   linear-gradient(270deg,var(--om-card) 28px,transparent),
                   radial-gradient(farthest-side at 0 50%,rgba(8,25,37,.16),transparent),
                   radial-gradient(farthest-side at 100% 50%,rgba(8,25,37,.16),transparent);
  background-position:0 0,100% 0,0 0,100% 0;background-repeat:no-repeat;
  background-size:32px 100%,32px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll}
.om-table td{white-space:normal;vertical-align:middle}
.om-table .om-money,.om-table .om-date,.om-table .om-status{white-space:nowrap}
.om-table .om-person{min-width:0}
.om-table .om-person>span:last-child{min-width:0}
.om-row-action{text-align:start}
.om-row-action,.om-row-action form,.om-row-action .om-button{display:inline-flex;align-items:center;gap:6px}
.om-row-action .om-button{min-height:var(--om-tap-min)}
.om-table td>form{display:flex;gap:6px;min-width:0}
.om-table td>form>.om-button{flex:1 1 auto;min-width:0;min-height:var(--om-tap-min)}
@media(max-width:768px){
  .om-table{font-size:13px}
  .om-table th,.om-table td{padding:11px 12px}
}
@media(max-width:560px){
  .om-row-action{flex-wrap:wrap}
  .om-row-action .om-button{flex:1 1 auto;min-height:var(--om-tap)}
}

/* ============================================================
   9 · Forms, tags, permissions, dialogs, date picker
   ============================================================ */
.om-form-grid>label,.om-form-stack>label{min-width:0}
.om-form-grid input,.om-form-grid select,.om-form-grid textarea,
.om-form-stack input,.om-form-stack select,.om-form-stack textarea{width:100%;min-width:0}
.om-form-stack textarea{resize:vertical;min-height:88px}
.om-check,.om-check-card{line-height:1.7}
.om-check{align-items:flex-start}
.om-check-card{min-width:0}
.om-check-card>span,.om-check>span{min-width:0}
.om-check-card .om-form-grid,.om-check-card legend,.om-check-card>div{min-width:0}
.om-check>input[type=checkbox],.om-check>input[type=radio],
.om-check-card>input[type=checkbox],.om-check-card>input[type=radio]{flex:0 0 20px;width:20px;height:20px;min-height:20px;margin-top:2px;accent-color:var(--om-primary)}
.om-tag-field{min-width:0}
.om-tag-options{display:flex;flex-wrap:wrap;gap:8px}
.om-tag-option,.om-chip-check{display:inline-flex;align-items:center;min-height:34px}
.om-input-action{display:flex;gap:6px;align-items:stretch}
.om-input-action>input{flex:1;min-width:0}
.om-input-action .om-icon-button{flex:0 0 44px;min-width:44px;min-height:44px}
.om-date-field{min-width:0}
.om-date-field.is-missing .om-input-action input{border-color:var(--om-danger);box-shadow:0 0 0 3px var(--om-danger-soft)}
.om-date-field.is-missing>span{color:var(--om-danger)}
.om-permission-group{min-width:0}
.om-permissions{gap:14px}
.om-rule-row{min-width:0}
.om-rule-row>[data-params]{min-width:0}
.om-rule-row input,.om-rule-row select{min-width:0}
.om-campaign-form{gap:18px}
.om-campaign-form section{min-width:0}
.om-audience-preview{min-width:0}

.om-dialog{max-height:min(92dvh,900px);overscroll-behavior:contain}
.om-dialog>form{display:flex;flex-direction:column;max-height:inherit}
.om-dialog-body{overflow:auto}
.om-dialog footer{position:sticky;bottom:0;z-index:2;flex-wrap:wrap;gap:10px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.om-dialog footer .om-button{flex:1 1 auto;min-width:130px;min-height:var(--om-tap)}
@media(max-width:560px){
  .om-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}
  .om-dialog>form>header{padding:14px 16px}
  .om-dialog-body{padding:16px}
  .om-dialog footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .om-dialog footer .om-button{flex:1 1 100%}
}
.om-jalali-popover{display:grid;place-items:center;padding:16px;max-height:100dvh;overflow:auto}
.om-jalali-popover:not([open]){display:none}
.om-jalali-panel{max-height:calc(100dvh - 32px);overflow:auto}
.om-jalali-inputs,.om-jalali-time{min-width:0}
@media(max-width:400px){
  .om-jalali-inputs{grid-template-columns:1fr 1fr}
  .om-jalali-inputs>label:first-child{grid-column:1/-1}
}

/* ============================================================
   10 · Donor profile
   ============================================================ */
.om-profile-hero{position:relative;overflow:hidden}
.om-profile-main{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px}
.om-profile-main>.om-back{display:inline-flex;align-items:center;gap:6px;min-height:var(--om-tap-min);width:max-content;max-width:100%;opacity:.92}
.om-profile-person{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 260px}
.om-profile-person .om-avatar.is-large{flex:0 0 auto}
.om-profile-person>div{min-width:0}
.om-profile-person h1{font-size:clamp(19px,4.6vw,24px);line-height:1.5;overflow-wrap:anywhere}
.om-profile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;line-height:1.7}
.om-profile-total{display:flex;flex-direction:column;gap:2px;text-align:end;min-width:0}
.om-profile-total strong{font-size:clamp(21px,5vw,29px);line-height:1.4}
.om-profile-grid{align-items:start}
.om-profile-aside{min-width:0}
.om-profile-aside .om-card{min-width:0}
.om-document-list a{display:flex;align-items:center;gap:10px;min-height:var(--om-tap-min)}
.om-timeline article,.om-activity-stream article{grid-template-columns:35px minmax(0,1fr)}
.om-timeline article header,.om-activity-stream article header{flex-wrap:wrap;gap:4px 12px}
.om-timeline article header time,.om-activity-stream article header time{margin-inline-start:auto}
@media(max-width:768px){
  /* The hero is a row-wrap flex container and .om-profile-main carries
     flex-basis:0 — once the total block gets wide, main collapses to ~20px.
     Stacking the hero as a block removes that fight entirely. */
  .om-profile-hero{display:block}
  .om-profile-main{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;flex:0 0 auto;width:100%}
  .om-profile-total{width:100%}
  .om-profile-main>.om-back{order:-1}
  .om-profile-total{flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;text-align:start;border-top:1px solid rgba(255,255,255,.22);padding-top:12px}
  .om-earned-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:400px){
  .om-profile-person{align-items:flex-start;gap:10px}
  .om-profile-person .om-avatar.is-large{width:48px;height:48px;font-size:19px;flex-basis:48px}
  .om-earned-badges{grid-template-columns:1fr}
}

/* ============================================================
   11 · Lists, timelines, tasks, badges, contacts
   ============================================================ */
.om-list-row,.om-payment-list>div,.om-compact-list>div{min-width:0}
.om-list-row>*,.om-payment-list>div>*{min-width:0}
.om-list-row>b,.om-payment-list b{white-space:nowrap;font-variant-numeric:tabular-nums}
.om-list-main strong,.om-list-main small{overflow-wrap:anywhere;white-space:normal}
.om-task-card>header{flex-wrap:wrap;gap:6px 10px;align-items:flex-start}
.om-task-card>header>*{min-width:0}
.om-task-card h2{line-height:1.6;overflow-wrap:anywhere}
.om-task-card>p{line-height:1.75}
.om-task-meta{gap:8px 12px}
.om-task-meta span{min-width:0;display:inline-flex;align-items:center;gap:5px;line-height:1.6}
.om-task-actions{gap:8px;flex-wrap:nowrap}
.om-task-actions>*{min-width:0}
.om-task-actions input{flex:1 1 auto}
.om-task-actions .om-button{flex:0 0 auto;min-height:var(--om-tap-min)}
.om-badge-card{display:flex;flex-direction:column}
.om-badge-body>header{flex-wrap:wrap;gap:6px 10px;align-items:flex-start}
.om-badge-body h2{line-height:1.6}
.om-badge-body>p{line-height:1.8;min-height:0}
.om-badge-rules span{line-height:1.7}
.om-book-grid section{min-width:0}
.om-call-item form,.om-call-item textarea{max-width:100%}
.om-change-list{min-width:0}
.om-message-preview,.om-preview-box{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){
  .om-list-row{flex-wrap:wrap}
  .om-list-row>b{margin-inline-start:auto}
}

/* ============================================================
   12 · Reports, charts, pagination
   ============================================================ */
.om-bars,.om-line-chart svg{max-width:100%}
.om-line-chart svg{height:auto}
.om-chart-data table{min-width:0}
.om-report-bar{min-width:0}
.om-report-bar b,.om-report-amount,.om-report-total{font-variant-numeric:tabular-nums;white-space:nowrap}
.om-donut-layout{display:flex;align-items:center;justify-content:center;gap:16px}
.om-donut-legend{min-width:0;flex:1 1 180px}
.om-donut-legend li,.om-frequency-row{min-width:0}
.om-frequency-row>div:first-child{flex-wrap:wrap;gap:4px 10px}
.om-chart-switch{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--om-surface)}
.om-chart-switch button,.om-chart-switch label{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:4px 12px;border-radius:9px;cursor:pointer}
.om-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px}
.om-pager-links{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.om-page-link{display:inline-flex;align-items:center;justify-content:center;min-width:var(--om-tap-min);min-height:var(--om-tap);padding:6px 12px;border-radius:10px;border:1px solid var(--om-line);background:var(--om-card)}
.om-pager-summary{margin:0;min-width:0}
@media(max-width:560px){
  .om-pager{justify-content:center}
  .om-pager-number{display:none}
  .om-page-link{flex:1 1 0;min-width:120px}
  .om-bars{height:240px}
}

/* ============================================================
   13 · App-admin workspace (app-management pages)
   ============================================================ */
.app-hero{flex-wrap:wrap}
.app-hero>div{min-width:0;flex:1 1 260px}
.app-hero .om-button{align-self:flex-start}
.app-hero h1{font-size:clamp(21px,4.8vw,28px);line-height:1.5}
.app-workspace{gap:18px}
.app-two-column{grid-template-columns:minmax(0,1fr)}
.app-form-panel,.app-edit-panel,.app-list-panel{min-width:0}
.app-content-row summary{flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 14px}
.app-content-thumb{flex:0 0 52px;width:52px;height:52px}
.app-content-thumb img{width:100%;height:100%;object-fit:cover}
.app-content-title{flex:1 1 180px;min-width:0}
.app-content-title,.app-content-title *{overflow-wrap:anywhere}
.app-content-row .app-status,.app-content-row .app-count{margin-inline-start:0}
.app-product-card{min-width:0}
.app-product-heading{min-width:0}
.app-product-body{min-width:0}
.app-product-actions{display:flex;flex-wrap:wrap;gap:8px}
.app-product-actions form{display:flex;flex:1 1 auto;min-width:0}
.app-product-actions .om-button{width:100%;min-height:var(--om-tap-min)}
.app-product-price,.app-product-stock{white-space:nowrap}
.app-firebase-status{flex-wrap:wrap;gap:12px}
.app-firebase-status>div{min-width:0;flex:1 1 220px}
.app-recipient-preview,.app-donor-messages,.app-broadcast-list,.app-campaign-list{min-width:0}
.app-inner-alert{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 14px}
.app-inner-alert .om-button{min-height:var(--om-tap-min);width:auto}
.app-empty-state{padding:26px 16px}
.app-help-box{line-height:1.8}
@media(max-width:900px){
  .app-two-column{grid-template-columns:1fr}
  .app-form-panel{border-left:0;border-bottom:1px solid var(--om-line)}
}
@media(max-width:768px){
  .app-workspace{gap:16px}
  .app-hero{padding:20px}
  .app-hero .om-button{width:100%}
  .app-stat-grid,.app-shortcuts,.app-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-product-grid{padding:16px}
  .app-content-title{flex-basis:calc(100% - 64px)}
  .app-status{margin-inline-start:auto}
}
@media(max-width:560px){
  .app-stat-grid,.app-shortcuts,.app-product-grid{grid-template-columns:1fr}
  .app-two-column>.app-form-panel,.app-two-column>.app-list-panel,.app-campaign-create{padding:16px}
  .app-product-image{height:auto;min-height:0;aspect-ratio:16/9}
}

/* ============================================================
   14 · Messaging and mobile campaign screens
   ============================================================ */
.om-mobile-messaging{min-width:0}
.om-mobile-messaging .om-form-grid{gap:14px}
.om-identity-tabs{display:flex;flex-wrap:wrap;gap:8px}
.om-identity-tabs .om-button{flex:1 1 auto;min-width:0;min-height:var(--om-tap-min);white-space:normal}
.om-message-preview{line-height:1.9}
@media(max-width:560px){.om-identity-tabs{flex-direction:column;flex-wrap:nowrap}.om-identity-tabs .om-button{width:100%}}

/* ============================================================
   15 · Settings, cache, staff, integrations
   ============================================================ */
.om-settings-grid{align-items:start}
.om-health-card{flex-wrap:wrap;gap:12px}
.om-health-dot.is-error{background:var(--om-danger);box-shadow:0 0 0 4px var(--om-danger-soft)}
.om-health-card>div{min-width:0;flex:1 1 200px}
.om-health-card strong{white-space:normal;text-align:start}
.om-technical-actions{flex-wrap:wrap;gap:12px}
.om-technical-actions form{min-width:0}
.om-technical-actions .om-button{min-height:var(--om-tap-min)}
.om-settings-note{line-height:1.85}
.om-settings-note code{max-width:100%;overflow-wrap:anywhere}
.om-document-list{min-width:0}
.om-count-pill,.om-soft-badge,.om-status{display:inline-flex;align-items:center;white-space:normal;line-height:1.6}
@media(max-width:768px){
  .om-settings-grid{grid-template-columns:1fr}
  .om-health-card{align-items:flex-start}
  .om-technical-actions .om-button{flex:1 1 160px}
}

/* ============================================================
   16 · Checkout / gateway return (standalone pages)
   ============================================================ */
.om-page :where(.om-checkout,.om-return){max-width:680px;margin-inline:auto}
@media(max-width:560px){.om-page :where(.om-checkout,.om-return) .om-button{width:100%}}

/* ============================================================
   18 · Touch targets on phones
   Inline links used as row actions were 17-28px tall, which is very
   hard to hit with a thumb; they become full-height rows under 560px.
   ============================================================ */
@media(max-width:560px){
  .om-segment>a{min-height:36px}
  .om-segment>form>button{width:36px;height:36px}
  .om-segments>a,.om-segments .om-soft-badge{display:inline-flex;align-items:center;min-height:36px;padding:4px 10px}
  .om-page :is(.om-table,.om-list,.om-compact-list,.om-document-list,.om-book-grid,.om-payment-list,.om-campaign-list,.app-inner-alert,.om-frequency-list) a[href]{display:inline-flex;align-items:center;gap:6px;min-height:36px}
  .om-page .om-table a[href]{min-width:28px;padding-inline:4px}
  .om-page :is(.om-table) td>form>button,.om-page :is(.om-table) td>form>.om-button{min-width:var(--om-tap-min);min-height:var(--om-tap-min)}
  .om-page :is(.om-table) td>form{min-width:0}
}

/* ============================================================
   19 · Motion and print
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  .om-sidebar{transition:transform .22s ease}
  .om-dialog{transition:transform .16s ease,opacity .16s ease}
}
@media print{
  .om-table-wrap{background-image:none}
  .om-sidebar,.om-topbar,.om-sidebar-backdrop,.om-live-status,.om-heading-actions,.om-filter-bar,.om-pagination,.om-pager{display:none!important}
  .om-main{margin:0}
  .om-page{padding:0;max-width:none}
  .om-card{box-shadow:none;break-inside:avoid}
  .om-table{min-width:0}
}