/* Mobile presentation shares the desktop controls, data and permission checks. */
.console-mobile-only, .console-menu-backdrop { display: none; }
@media (max-width: 780px) {
    .console-mobile-only { display: flex; }
    .app-shell, .workspace, .main-content, .tab-content { min-width: 0; max-width: 100%; }
    .workspace { padding-bottom: 0; }
    .topbar { height: 64px; padding: 0 12px; gap: 10px; }
    .topbar-context { display: none; }
    .console-mobile-brand { align-items: center; gap: 8px; min-width: 0; }
    .console-mobile-brand > img { display: block; width: 32px; height: 32px; object-fit: contain; flex: none; }
    .console-mobile-brand > span { display: grid; gap: 1px; }
    .console-mobile-brand strong { font-size: 17px; line-height: 21px; font-weight: 600; color: #26354d; white-space: nowrap; }
    .console-mobile-brand small { color: var(--muted); font-size: 12px; line-height: 14px; }
    .console-mobile-brand .btn-icon { width: 38px; min-width: 38px; height: 44px; padding: 8px; }
    .top-actions { gap: 7px; margin-left: auto; }
    .top-actions .connection-chip { padding: 0; }
    .top-actions .btn-icon { min-width: 38px; width: 38px; height: 40px; }
    #topAddMailButton { min-height: 40px; min-width: 40px; width: 40px; flex: 0 0 40px; padding: 8px; overflow: hidden; font-size: 0; white-space: nowrap; }
    #topAddMailButton::before { content: "+"; font-size: 23px; line-height: 24px; }
    .console-menu-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 89; border: 0; padding: 0; background: rgba(30, 33, 51, .28); }
    #centralSidebar { position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(310px, 88vw); height: 100vh; height: 100dvh; padding: 25px 14px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; border: 0; border-right: 1px solid var(--border); background: #fff; box-shadow: 8px 0 32px rgba(30, 33, 51, .12); visibility: hidden; transform: translateX(-100%); }
    #centralSidebar.mobile-menu-open { visibility: visible; transform: translateX(0); }
    #centralSidebar .btn, #centralSidebar .tab { transition-property: background-color, border-color, color; }
    #centralSidebar .sidebar-brand { display: flex; gap: 10px; padding: 4px 10px 26px; padding-right: 30px; }
    #centralSidebar .sidebar-brand .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
    #centralSidebar .sidebar-brand .xbro-brand-copy strong { font-size: 22px; line-height: 26px; font-weight: 600; }
    #centralSidebar .nav-label { display: block; margin: 0; padding: 0 14px 12px; font-size: 12px; }
    #centralSidebar .tabs { display: flex; flex-direction: column; gap: 5px; overflow: auto; min-height: 0; }
    #centralSidebar .tab { position: relative; display: flex; justify-content: flex-start; align-items: center; flex: none; gap: 14px; min-height: 48px; padding: 13px 14px; font-size: 14px; font-weight: 500; }
    #centralSidebar .tab > span:first-child { width: 20px; font-size: 18px; }
    #centralSidebar .nav-count { position: static; margin-left: auto; }
    #centralSidebar .sidebar-footer { display: block; margin-top: auto; padding-top: 16px; }
    #centralSidebar .user-card { padding: 5px; }
    #centralSidebar #logoutButton { min-width: 44px; min-height: 44px; }
    .mobile-menu-close { position: absolute; right: 12px; top: 22px; width: 36px; min-height: 40px; justify-content: center; align-items: center; font-size: 25px; }
    .main-content, #mainContent:has(#tab-account-ops.active #accountListView:not([hidden])) { padding: 18px 12px 32px; }
    .page-heading { margin-bottom: 14px; }
    .page-heading h2, .dashboard-hero h2 { font-size: 22px; font-weight: 600; }
    .page-heading p { font-size: 12px; line-height: 1.6; }
    .section-tabs { width: 100%; border-radius: 10px; gap: 2px; padding: 4px; }
    .section-tabs .section-tab { flex: 1 0 auto; min-height: 38px; padding: 9px 10px; font-size: 12px; white-space: nowrap; }
    .btn, summary.btn { min-height: 38px; }
    input.form-control, select.form-control, textarea.form-control { max-width: 100%; font-size: 16px; }
    .panel, .panel-body, .panel-header, .toolbar { min-width: 0; }
    .panel-header, .toolbar { flex-wrap: wrap; gap: 10px; }
    .toolbar .field { min-width: 0; }
    .toolbar .field.search { flex: 1 1 100%; }
    .pagination-actions { max-width: 100%; flex-wrap: wrap; }
    .login-container { min-height: 100dvh; padding: 32px 20px 24px; background: var(--bg, #f7f7fb); }
    .login-shell { display: block; min-height: 0; max-width: 420px; margin: 0 auto; background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .login-hero { min-height: 0; padding: 16px 0 30px; background: transparent; }
    .login-hero-brand { justify-content: center; gap: 10px; }
    .login-hero .brand-mark { width: 44px; height: 44px; flex-basis: 44px; padding: 0; background: transparent; }
    .login-hero .xbro-brand-copy strong { color: #26354d; font-size: 25px; line-height: 28px; font-weight: 600; }
    .login-hero .xbro-brand-copy small { color: var(--muted); }
    .login-container::before, .login-container::after { display: none; }
    .login-hero-copy, .login-orbit, .login-trust { display: none; }
    .login-box { padding: 28px 22px 24px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
    .login-box h1 { font-size: 26px; font-weight: 600; }
    .login-form-kicker { display: none; }
    .login-intro { font-size: 13px; margin: 10px 0 24px; }
    .login-box .form-group input { min-height: 46px; font-size: 16px; }
    .login-submit { min-height: 46px; margin-top: 24px; }
    .login-footnote { font-size: 12px; line-height: 1.6; margin-top: 24px; }
    .metric-grid.dashboard-primary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .dashboard-primary-metrics .metric-card { min-height: 108px; padding: 13px; }
    .dashboard-primary-metrics .metric-card:last-child { grid-column: 1 / -1; }
    .metric-card .label { font-size: 12px; }
    .metric-card .value { font-size: 26px; font-weight: 600; }
    .runtime-device-table tbody { display: grid; gap: 10px; padding: 0 10px 12px; }
    .runtime-device-table tr { border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
    .runtime-device-table td { grid-template-columns: 90px minmax(0, 1fr); font-size: 14px; padding-block: 6px; }
    .runtime-device-table td > * { min-width: 0; }
    .runtime-device-identity, .runtime-device-profile, .runtime-registration-summary, .runtime-last-success { min-width: 0; overflow-wrap: anywhere; }
    .runtime-current-execution strong, .runtime-device-profile > div { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .runtime-registration-primary, .runtime-last-success strong { white-space: normal; }
    .runtime-registration-primary { font-weight: 600; }
    .runtime-device-table .panel-actions { flex-wrap: wrap; }
    #accountListView .account-list-toolbar { padding: 0 12px 8px; }
    #accountListView .account-usage-tabs { gap: 15px; }
    #accountListView .account-usage-tabs button { font-size: 12px; padding-block: 13px; }
    #accountListView .account-filter-primary { padding: 12px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    #accountListView .account-search { grid-column: 1; position: relative; }
    #accountListView .account-search > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    #accountListView .account-search > input { padding-right: 37px; font-size: 16px; }
    #accountListView .mobile-search-submit { position: absolute; right: 0; top: 0; width: 38px; min-height: 40px; justify-content: center; align-items: center; padding: 8px; }
    #mobileAccountFiltersToggle { grid-column: 2; align-items: center; justify-content: center; min-height: 40px; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
    #mobileAccountFiltersToggle[aria-expanded="true"] { color: var(--brand); background: var(--brand-soft); }
    #mailFilterForm:not(.mobile-filters-open) .account-filter-primary > .field:not(.account-search),
    #mailFilterForm:not(.mobile-filters-open) .account-filter-actions,
    #mailFilterForm:not(.mobile-filters-open) .account-quick-filters,
    #mailFilterForm:not(.mobile-filters-open) .account-advanced-filters,
    #mailFilterForm:not(.mobile-filters-open) .account-shop-filters { display: none; }
    #mailFilterForm.mobile-filters-open .account-filter-primary > .field:not(.account-search) { grid-column: 1 / -1; }
    #accountListView .account-filter-actions { grid-column: 1 / -1; }
    #accountListView .account-active-filters .active-filter-chips:has(.active-filter-chip) { padding-bottom: 8px; }

    #accountListView .account-filter-actions { justify-content: flex-start; }
    #accountListView .account-quick-filters { padding: 0 12px 12px; gap: 6px; }
    #accountListView .quick-filter-chip { min-height: 34px; padding: 6px 9px; }
    #accountListView .form-control { font-size: 16px; }
    #accountListView .account-selection-toolbar, #accountListView .pagination { padding: 10px 12px; }
    #accountListView .account-list-meta { flex-wrap: wrap; white-space: normal; gap: 4px; }
    #accountListView .account-table-scroll { max-height: none; min-height: 0; overflow: visible; border-bottom: 0; }
    #accountListTable { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
    #accountListTable colgroup, #accountListTable thead { display: none; }
    #accountListTable tbody { display: block; width: 100%; }
    #accountListTable tbody tr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 100%; padding: 13px 12px 0; column-gap: 5px; row-gap: 6px; border-bottom: 1px solid var(--border); background: var(--account-row-bg, #fff); }
    #accountListTable td { position: static !important; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; grid-column: span 6; width: auto; min-width: 0; min-height: 0; height: auto; padding: 0; border: 0; box-shadow: none !important; background: transparent; font-size: 12px; }
    #accountListTable td::before { display: block; content: attr(data-label); flex: none; color: var(--muted); font-size: 12px; font-weight: 400; }
    #accountListTable td[data-account-column="account"] { grid-column: 1 / -1; padding: 0 0 3px; }
    #accountListTable td[data-account-column="account"]::before, #accountListTable td[data-account-column="method"]::before, #accountListTable td[data-account-column="device"]::before, #accountListTable td[data-account-column="actions"]::before { display: none; }
    #accountListTable .account-select-cell { gap: 8px; width: 100%; }
    #accountListTable .account-select-cell > input { margin-top: 3px; width: 18px; height: 18px; }
    #accountListTable .account-primary { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; white-space: normal; text-align: left; }
    #accountListTable .account-identity .copyable-value { font-size: 12px; }
    #accountListTable td[data-account-column="method"] { grid-column: 1 / 2; padding: 2px 0 4px; }
    #accountListTable .account-method-icon { width: 16px; height: 16px; margin: 0; }
    #accountListTable td[data-account-column="device"] { grid-column: 2 / -1; padding: 2px 0 4px; }
    #accountListTable .account-device-remark { font-size: 12px; line-height: 18px; }
    #accountListTable .badge { font-size: 12px; padding: 3px 5px; }
    #accountListTable td[data-account-column="connectivity"] > .btn, #accountListTable .account-shop-status { min-height: 28px; padding: 0; }
    #accountListTable td[data-account-column="registered"] { grid-column: 1 / -1; margin-top: 3px; padding-top: 8px; border-top: 1px solid #f0f1f5; }
    #accountListTable .table-time { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
    #accountListTable td[data-account-column="actions"] { grid-column: 1 / -1; justify-content: flex-end; padding: 0 0 7px; }
    #accountListTable .account-row-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; width: 100%; }
    #accountListTable .account-row-actions > .btn, #accountListTable .account-row-more > summary { min-height: 36px; padding: 6px 8px; font-size: 12px; }
    #accountListTable .account-row-actions > .verification-code-control { width: auto; min-width: 88px; }
    #accountListTable .verification-code-control .btn { min-height: 34px; padding: 6px 8px; }
    #accountListTable td[colspan] { grid-column: 1 / -1; display: block; }
    #accountListTable td[colspan]::before { display: none; }
    #accountListTable td[data-account-column="actions"]:has(.account-row-more[open]) { z-index: 70; }
    #accountDetailsDrawer { width: 100vw; box-shadow: none; }
    #accountDetailsDrawer .drawer-header { padding: 12px 16px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
    #accountDetailsDrawer .detail-eyebrow { display: none; }
    #accountDetailsDrawer .drawer-header h3 { font-size: 21px; font-weight: 600; }
    #accountDetailsDrawer #accountDetailsSubtitle { margin-top: 5px; font-size: 13px; }
    #accountDetailsDrawer #accountDetailsClose { display: none; }
    #accountDetailsDrawer #accountDetailsBack { min-height: 36px; padding: 4px 0; gap: 6px; color: var(--muted); font-size: 13px; }
    #accountDetailsDrawer .detail-tabs { padding: 0 16px; gap: 20px; }
    #accountDetailsDrawer .detail-tab { font-size: 12px; padding-block: 13px; font-weight: 500; }
    #accountDetailsDrawer .drawer-body { padding: 18px 16px; }
    #accountDetailsDrawer .detail-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    #accountDetailsDrawer .details-list > div { grid-template-columns: 90px minmax(0, 1fr); }
    #accountDetailsDrawer .details-section h4 { font-weight: 600; }
    #accountDetailsDrawer .detail-footer { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
    #accountDetailsDrawer .detail-footer .btn { min-height: 42px; }
    .settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-nav .section-tab, .settings-nav button { white-space: normal; }
    .operations-grid, .editor-card-grid { grid-template-columns: minmax(0, 1fr); }
    .modal, .modal-wide, .modal-extra-wide { max-width: calc(100vw - 24px); }
}
@media (max-width: 360px) {
    .topbar { padding-inline: 8px; gap: 4px; }
    .console-mobile-brand { gap: 5px; }
    .console-mobile-brand > img { width: 28px; height: 28px; }
    .console-mobile-brand strong { font-size: 15px; }
    .top-actions { gap: 4px; }
    #topAddMailButton { font-size: 0; padding-inline: 5px; }
    #accountListTable td { gap: 4px; }
    #accountListTable td::before { font-size: 12px; }
    #accountListTable .badge { font-size: 12px; }
}

/* At the narrowest widths a complete status may move below its label. */
@media (max-width: 360px) {
    #accountListTable td[data-account-column="registration"],
    #accountListTable td[data-account-column="health"],
    #accountListTable td[data-account-column="connectivity"],
    #accountListTable td[data-account-column="shop"] { flex-wrap: wrap; align-content: start; gap: 4px 6px; }
    #accountListTable .badge { flex-shrink: 0; }
}