/* Keep public header controls on one row across the phone breakpoint, in LTR and RTL. */
@media(max-width:519px){
  .public-header{gap:8px;padding-inline:12px}
  .public-header .brand{min-width:0;flex-shrink:0}
  .public-header .brand img{width:clamp(104px,30vw,120px);height:auto}
  .public-header .actions{flex-wrap:nowrap;flex-shrink:0;gap:6px}
  .public-header .language-toggle,.public-header .public-menu{width:44px;min-width:44px;height:44px;min-height:44px;flex-shrink:0}
  .public-header .public-start{min-height:44px;padding-inline:10px;font-size:11px;white-space:nowrap}
}
/* Accessibility correction: the sidebar stays dark in both workspace themes. */
.sidebar-user .icon-btn{background:#172229;color:#c4cdd4;border-color:#617480}
.sidebar-user .icon-btn:hover{background:#29363e;border-color:#9eabb5}
/* The existing root preference controls icons without waiting for an interactive circuit. */
.theme-sun{display:none}
html[data-theme=dark] .theme-sun{display:block}
html[data-theme=dark] .theme-moon{display:none}
/* An authenticator key is indivisible data; wrap it within the approved mobile dialog. */
.mfa-setup-key{overflow-wrap:anywhere;user-select:all}
.mfa-qr-code{display:flex;justify-content:center;margin-block:8px;direction:ltr}
.mfa-qr-code img{display:block;width:224px;height:auto;max-width:100%;background:#fff;border-radius:8px;image-rendering:pixelated}
/* Keep long customer names/emails inside the approved identity slots, including the closed mobile drawer. */
.sidebar-user .grow{min-width:0}
.sidebar-user strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-person{min-width:0;max-width:160px}
.topbar-person strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Keep the approved phone width stable when a real draft is empty or short. */
.preview-phone.native-message-preview{width:min(325px,100%)}

/* Connection recovery uses the approved portal colors, type and controls in both themes. */
dialog.native-reconnect{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);overflow:auto}
dialog.native-reconnect::backdrop{background:#10182099}
dialog.native-reconnect h2{font-size:19px}
/* The framework reveals this only for an unrecoverable circuit error; no raw exception is shown. */
.native-circuit-error{display:none;position:fixed;inset-inline:16px;inset-block-end:16px;z-index:150;padding:18px;max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--red);border-radius:var(--radius);background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}

/* Keep the dark sidebar scrollbar distinct and clear of navigation, in both directions. */
.sidebar-scroll{padding-inline-end:14px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#647681 #172229}
@supports selector(::-webkit-scrollbar){
.sidebar-scroll{scrollbar-width:auto;scrollbar-color:auto}
.sidebar-scroll::-webkit-scrollbar{width:8px}
.sidebar-scroll::-webkit-scrollbar-track{background:#172229;border-radius:10px;margin-block:8px}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#647681;border:2px solid #172229;border-radius:10px;min-height:48px}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#91a2ad}
.sidebar-scroll::-webkit-scrollbar-thumb:active{background:#ffb638}
.sidebar-scroll::-webkit-scrollbar-button{display:none}
}

/* Route headings receive focus for announcements, without an interactive-control outline. */
h1[tabindex="-1"]:focus{outline:none}

.notice{margin-bottom:20px}

.media-library-grid{gap:24px;margin-block:28px 24px;align-items:start}
.media-library-card{min-width:0;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 12px rgb(0 0 0 / 3%)}
.media-library-preview{height:240px;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center}
.media-library-preview img{display:block;width:100%;height:100%;object-fit:contain;border-radius:6px}
.media-library-document{flex-direction:column;gap:16px;text-align:center;color:var(--muted)}
.media-library-document>.icon{width:40px;height:40px}.media-library-document h3{max-width:100%;font-size:13px;overflow-wrap:anywhere}
.media-library-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 4px 4px}
.media-library-meta{display:flex;flex-direction:column;gap:6px;min-width:0}.media-library-kind{font-size:12px;font-weight:600;color:var(--ink)}
.media-library-actions{display:flex;align-items:center;gap:8px}.media-library-actions .icon-btn{width:40px;height:40px;border-radius:9px}
.media-library-pagination{margin-block:8px 24px;padding:16px 0}
@media(max-width:600px){.media-library-grid{gap:18px;margin-block:20px}.media-library-preview{height:220px}.media-library-card{padding:10px}}

.media-library-expand{width:100%;cursor:zoom-in}.media-library-expand:hover{border-color:var(--amber)}.media-library-expanded-image{display:block;width:100%;max-height:70dvh;object-fit:contain;border-radius:8px}

.topup-packs{gap:20px;margin-block:20px 28px}.topup-price{font-size:26px;font-weight:700;margin-block:20px 8px;color:var(--ink)}

/* Single-line selection controls align with adjacent counts and actions; consent prose keeps its own layout. */
:is(.toolbar, .pages-bulk-actions, .job-heading) .check-line { align-items:center; line-height:1.5; }
:is(.toolbar, .pages-bulk-actions, .job-heading) .check-line input[type=checkbox] { margin:0; align-self:center; }
.jobs-selection > .tiny { line-height:1.5; }

/* Owner-approved list cleanup: opt-in toolbars preserve page-specific layouts. */
.tidy-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:16px; padding:24px; }
.tidy-toolbar > .searchbox { flex:1 1 260px; width:auto; max-width:none; min-width:0; height:48px; }
.tidy-toolbar > .searchbox input { min-width:0; width:100%; }
.tidy-toolbar > .btn { min-height:48px; }
.tidy-toolbar > .filter-tabs { flex:1 0 100%; order:3; display:flex; flex-wrap:wrap; gap:8px; padding-top:18px; border-top:1px solid var(--line); }
.tidy-toolbar > .field { flex:1 1 200px; margin:0; min-width:0; }
.tidy-toolbar > .field :is(input,select),.tidy-toolbar > .control-select { min-height:48px; }
.tidy-toolbar > .control-select { flex:0 1 240px; width:auto; }
.tidy-toolbar:has(> .field) { align-items:flex-end; }
.tidy-toolbar:has(> .customer-picker) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.tidy-toolbar > .customer-picker { grid-column:1/-1; }
.customer-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; }
.customer-picker :is(.customer-picker-search,.customer-picker-choice) { display:flex; flex-direction:column; gap:8px; min-width:0; }
.customer-picker .flex { gap:10px; align-items:center; }
.customer-picker .flex input { min-width:0; flex:1; }
.customer-picker :is(input,select,.btn) { min-height:48px; }
.customer-picker .customer-picker-choice small { line-height:1.6; }
.customer-picker > .error { grid-column:1/-1; }
.kv-list > div:not(.kv) { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-block:10px; border-bottom:1px solid var(--line); }
.kv-list > div:not(.kv) > :first-child { min-width:0; flex:1; }
.kv-list > div:not(.kv) > :last-child { min-width:0; max-width:65%; overflow-wrap:anywhere; text-align:end; }
.kv-list > div:not(.kv):last-child { border-bottom:0; }
.upload-zone input[type=file] { display:block; width:100%; max-width:420px; margin:16px auto 0; padding:8px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font:inherit; font-size:12px; }
.upload-zone input[type=file]::file-selector-button { border:1px solid var(--line); border-radius:7px; padding:10px 14px; margin-inline-end:12px; background:var(--amber-pale); color:var(--amber-strong); font:inherit; font-weight:600; cursor:pointer; }
.upload-zone input[type=file]:disabled::file-selector-button { cursor:default; opacity:.55; }
.observation-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-block:18px; line-height:1.7; }
.overview-lower-grid { align-items:start; }
@media(max-width:760px) {
 .tidy-toolbar { padding:20px; gap:12px; }
 .tidy-toolbar > .field,.tidy-toolbar > .control-select { flex:1 1 100%; width:100%; }
 .tidy-toolbar:has(> .customer-picker),.customer-picker { grid-template-columns:minmax(0,1fr); }
 .tidy-toolbar > .customer-picker { grid-column:auto; }
 .tidy-toolbar:has(> .customer-picker) > .btn { width:100%; }
}/* Keep empty list feedback and navigation consistent on the cleaned-up screens. */
.panel:has(.tidy-toolbar) .inline-empty { padding:36px 24px; margin:0; text-align:center; color:var(--muted); line-height:1.7; }
.panel:has(.tidy-toolbar) .panel-foot { gap:16px; flex-wrap:wrap; }
.panel:has(.tidy-toolbar) .panel-foot > .actions { margin-inline-start:auto; gap:8px; flex-wrap:wrap; }
.tidy-toolbar > label.field { display:flex; flex-direction:column; gap:8px; }
.tidy-toolbar > label.field > select { width:100%; }

/* Keep descriptive record actions readable as toolbars wrap. */
.row-actions:has(.described-action) { flex-wrap: wrap; gap: 8px; }
.described-action { width: auto; height: auto; white-space: normal; text-align: start; }
.metric-value { white-space: normal; overflow-wrap: anywhere; max-inline-size: 100%; }
body:is([data-area="customer"],[data-area="admin"]) .row-actions { flex-wrap: wrap; min-inline-size: 0; }
body:is([data-area="customer"],[data-area="admin"]) .data-table td { overflow-wrap: anywhere; }
@media(min-width:760px) and (max-width:1199px) {
    .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}