/* =========================================================
 FILE :: /public/assets/css/core/smx.css
 MODULE :: UI
 DOMAIN :: UI
 LAYER :: Presentation Asset
 PURPOSE :: Style the governed BusinessOS mobile experience
 OWNER :: UI Domain Authority
 VERSION :: 2.1.0
 ========================================================= */

/*
 * SwiftItCode Mobile Experience (SMX)
 * Mobile is an action center, not a responsive desktop dashboard.
 */

.smx-topbar,
.smx-home-screen,
.smx-drawer,
.smx-fab {
    display: none;
}

html.smx-mobile body {
    background: #f5f7fb;
    padding-bottom: calc(var(--businessos-footer-height) + var(--businessos-mobile-nav-height) + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    touch-action: manipulation;
}

html.smx-mobile .app-navbar,
html.smx-mobile .businessos-organization-banner {
    display: none !important;
}

html.smx-mobile #app-footer {
    display: block;
    margin-bottom: 0;
}

html.smx-mobile #app-main {
    padding: 12px !important;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html.smx-mobile body.platform-home #app-main,
html.smx-mobile body.dashboard-page #app-main {
    display: none;
}

html.smx-mobile .smx-topbar {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    display: flex;
    height: 54px;
    justify-content: space-between;
    left: 0;
    padding: 8px 12px;
    position: sticky;
    right: 0;
    top: 0;
    z-index: 2200;
    padding-top: max(8px, env(safe-area-inset-top));
}

html.smx-mobile .smx-brand {
    align-items: center;
    color: #0f172a;
    display: inline-flex;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
}

html.smx-mobile .smx-brand span {
    align-items: center;
    background: #2563eb;
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    height: 32px;
    justify-content: center;
    width: 32px;
}

html.smx-mobile .smx-brand strong {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.smx-mobile .smx-topbar__actions {
    align-items: center;
    display: flex;
    gap: 6px;
}

html.smx-mobile .smx-topbar__actions a,
html.smx-mobile .smx-topbar__actions button,
html.smx-mobile .smx-drawer header button {
    align-items: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    color: #1e293b;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

html.smx-mobile a,
html.smx-mobile button,
html.smx-mobile input,
html.smx-mobile select,
html.smx-mobile textarea,
html.smx-mobile summary {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.18);
}

html.smx-mobile button,
html.smx-mobile a,
html.smx-mobile [role="button"],
html.smx-mobile summary {
    touch-action: manipulation;
}

html.smx-mobile body.platform-home .smx-home-screen,
html.smx-mobile body.dashboard-page .smx-home-screen {
    display: grid;
}

html.smx-mobile .smx-home-screen {
    gap: 10px;
    min-height: 0;
    max-height: calc(100dvh - 54px - 76px - env(safe-area-inset-bottom));
    overflow: hidden;
    padding: 10px 12px 8px;
}

html.smx-mobile .smx-status-card,
html.smx-mobile .smx-section,
html.smx-mobile .smx-ai-card,
html.smx-mobile .smx-action-card,
html.smx-mobile .smx-alert-card,
html.smx-mobile .smx-timeline-row,
html.smx-mobile .smx-quick-grid a,
html.smx-mobile .smx-quick-grid button {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    color: #0f172a;
    text-decoration: none;
}

html.smx-mobile .smx-status-card {
    display: grid;
    gap: 2px;
    min-height: 76px;
    padding: 12px;
}

html.smx-mobile .smx-status-card span,
html.smx-mobile .smx-status-card em,
html.smx-mobile .smx-action-card em,
html.smx-mobile .smx-alert-card em,
html.smx-mobile .smx-ai-card span,
html.smx-mobile .smx-timeline-row time {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
}

html.smx-mobile .smx-status-card strong {
    color: #0f9f6e;
    font-size: 24px;
    line-height: 1.05;
}

html.smx-mobile .smx-section {
    display: grid;
    gap: 8px;
    padding: 10px;
}

html.smx-mobile .smx-section > header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

html.smx-mobile .smx-section > header a {
    color: #2563eb;
    font-weight: 800;
    text-decoration: none;
}

html.smx-mobile .smx-action-card,
html.smx-mobile .smx-alert-card,
html.smx-mobile .smx-timeline-row,
html.smx-mobile .smx-ai-card,
html.smx-mobile .smx-mobile-card,
html.smx-mobile .smx-swipe-card,
html.smx-mobile .smx-mobile-profile {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 54px;
    padding: 10px;
}

html.smx-mobile .smx-action-card,
html.smx-mobile .smx-alert-card,
html.smx-mobile .smx-ai-card,
html.smx-mobile .smx-timeline-row,
html.smx-mobile .smx-search-shortcuts a,
html.smx-mobile .smx-notification-list a {
    min-height: 56px;
}

html.smx-mobile .smx-action-card i,
html.smx-mobile .smx-ai-card i,
html.smx-mobile .smx-mobile-card i,
html.smx-mobile .smx-swipe-card i,
html.smx-mobile .smx-mobile-profile i {
    color: #2563eb;
    font-size: 18px;
}

html.smx-mobile .smx-alert-card span,
html.smx-mobile .smx-dot {
    background: #0f9f6e;
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

html.smx-mobile .smx-dot--critical {
    background: #dc2626;
}

html.smx-mobile .smx-dot--warning {
    background: #b7791f;
}

html.smx-mobile .smx-dot--info {
    background: #2563eb;
}

html.smx-mobile .smx-quick-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html.smx-mobile .smx-quick-grid a,
html.smx-mobile .smx-quick-grid button {
    align-items: center;
    border: 0;
    display: grid;
    font-size: 12px;
    font-weight: 800;
    gap: 5px;
    min-height: 70px;
    place-items: center;
}

html.smx-mobile .smx-quick-grid i {
    color: #2563eb;
    font-size: 20px;
}

html.smx-mobile .platform-mobile-bottom-nav {
    display: none;
}

html.smx-mobile .smx-bottom-nav {
    background: #ffffff;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    bottom: var(--businessos-footer-height);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.12);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    left: 0;
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    right: 0;
    z-index: 3010;
}

html.smx-mobile .smx-bottom-nav a,
html.smx-mobile .smx-bottom-nav button {
    align-items: center;
    background: transparent;
    border: 0;
    color: #334155;
    display: inline-flex;
    flex-direction: column;
    font-size: 11px;
    font-weight: 800;
    gap: 3px;
    justify-content: center;
    min-height: 62px;
    text-decoration: none;
}

html.smx-mobile .smx-bottom-nav i {
    color: #2563eb;
    font-size: 19px;
}

html.smx-mobile .smx-fab {
    align-items: center;
    background: #2563eb;
    border: 0;
    border-radius: 18px;
    bottom: calc(var(--businessos-footer-height) + var(--businessos-mobile-nav-height) + env(safe-area-inset-bottom));
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
    color: #ffffff;
    display: inline-flex;
    height: 54px;
    justify-content: center;
    position: fixed;
    right: 16px;
    width: 54px;
    z-index: 3020;
}

html.smx-mobile .smx-fab::after {
    background: #7c3aed;
    border: 2px solid #ffffff;
    border-radius: 999px;
    content: "";
    height: 14px;
    position: absolute;
    right: -1px;
    top: -1px;
    width: 14px;
}

html.smx-mobile .smx-drawer {
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    bottom: 0;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.24);
    display: grid;
    gap: 12px;
    grid-template-rows: auto auto minmax(0, 1fr);
    left: 0;
    max-height: 88dvh;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 3040;
}

html.smx-mobile.smx-drawer-open body {
    overflow: hidden;
}

html.smx-mobile .smx-drawer[hidden] {
    display: none;
}

html.smx-mobile .smx-drawer header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

html.smx-mobile .smx-search {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    display: flex;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
}

html.smx-mobile .smx-search input {
    background: transparent;
    border: 0;
    flex: 1;
    font-size: 16px;
    outline: none;
}

html.smx-mobile .smx-search-shortcuts,
html.smx-mobile .smx-notification-list {
    display: grid;
    gap: 8px;
    overflow: auto;
}

html.smx-mobile .smx-search-shortcuts a,
html.smx-mobile .smx-notification-list a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    color: #0f172a;
    display: grid;
    gap: 8px;
    grid-template-columns: auto 1fr auto;
    min-height: 52px;
    padding: 10px;
    text-decoration: none;
}

html.smx-mobile .smx-touch-toolbar {
    display: grid;
    gap: 8px;
    grid-auto-flow: column;
    overflow-x: auto;
    padding: 8px 0;
}

html.smx-mobile .smx-touch-toolbar .bos-quick-action {
    min-width: 112px;
}

/*
 * Mobile SEDS workspace adaptation.
 * Desktop remains the command center. Mobile becomes an action center.
 */

html.smx-mobile .seds-shell,
html.smx-mobile .seds-dashboard-shell,
html.smx-mobile .seds-workspace-shell {
    background: transparent;
    display: grid;
    gap: 10px;
    min-height: auto;
    padding: 0 0 calc(88px + env(safe-area-inset-bottom));
    width: 100%;
}

html.smx-mobile .seds-workspace-header,
html.smx-mobile .seds-command-bar {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    min-height: 52px;
    padding: 10px;
}

html.smx-mobile .seds-workspace-header {
    align-items: start;
}

html.smx-mobile .seds-workspace-header h1 {
    font-size: 18px;
    line-height: 1.12;
}

html.smx-mobile .seds-workspace-header p {
    display: none;
}

html.smx-mobile .seds-workspace-header span {
    font-size: 11px;
}

html.smx-mobile .seds-workspace-header .seds-icon-button span,
html.smx-mobile .seds-search-bar kbd,
html.smx-mobile .seds-workspace-header kbd {
    display: none;
}

html.smx-mobile .seds-icon-button,
html.smx-mobile .seds-toolbar-button,
html.smx-mobile .seds-primary-action,
html.smx-mobile .seds-action-item__button,
html.smx-mobile .bos-action-item__button,
html.smx-mobile .bos-primary-action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

html.smx-mobile .seds-kpi-row {
    display: grid;
    gap: 8px;
    grid-auto-columns: minmax(132px, 42vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    margin: 0 -12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 12px 2px;
    scroll-snap-type: x proximity;
}

html.smx-mobile .seds-kpi-row::-webkit-scrollbar,
html.smx-mobile .smx-touch-toolbar::-webkit-scrollbar {
    display: none;
}

html.smx-mobile .seds-card {
    min-height: 78px;
    padding: 10px;
    scroll-snap-align: start;
}

html.smx-mobile .seds-card strong {
    font-size: 20px;
}

html.smx-mobile .seds-three-panel {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    min-height: 0;
}

html.smx-mobile .seds-three-panel .seds-panel {
    min-height: 0;
    max-height: 240px;
}

html.smx-mobile .seds-three-panel .seds-action-panel {
    max-height: 280px;
}

html.smx-mobile .seds-widget-grid,
html.smx-mobile .seds-tile-grid,
html.smx-mobile .seds-activity-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

html.smx-mobile .seds-widget-grid > .seds-panel,
html.smx-mobile .seds-widget-grid > .seds-widget,
html.smx-mobile .seds-activity-row > .seds-panel {
    max-height: 260px;
}

html.smx-mobile .seds-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.smx-mobile .seds-tile {
    border-radius: 12px;
    min-height: 112px;
    padding: 12px;
}

html.smx-mobile .seds-panel,
html.smx-mobile .seds-widget,
html.smx-mobile .seds-tile,
html.smx-mobile .seds-card,
html.smx-mobile .seds-data-grid,
html.smx-mobile .seds-expandable-panel,
html.smx-mobile .seds-dockable-panel {
    border-radius: 12px;
}

html.smx-mobile .seds-panel > header,
html.smx-mobile .seds-widget > header {
    min-height: 46px;
}

html.smx-mobile .seds-panel > header a,
html.smx-mobile .seds-widget > header a {
    align-items: center;
    display: inline-flex;
    min-height: 36px;
    padding: 0 4px;
}

html.smx-mobile .seds-action-item,
html.smx-mobile .seds-alert-row,
html.smx-mobile .seds-timeline-item,
html.smx-mobile .seds-insight-card,
html.smx-mobile .seds-ai-card,
html.smx-mobile .bos-action-item,
html.smx-mobile .bos-timeline-item,
html.smx-mobile .bos-health-card {
    border-radius: 12px;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 58px;
    padding: 10px;
}

html.smx-mobile .seds-action-item .seds-action-item__button,
html.smx-mobile .bos-action-item .bos-action-item__button,
html.smx-mobile .seds-alert-row .seds-alert-badge,
html.smx-mobile .seds-timeline-item time,
html.smx-mobile .bos-timeline-item time {
    grid-column: 2;
    justify-self: start;
}

html.smx-mobile .seds-action-item p,
html.smx-mobile .seds-insight-card p,
html.smx-mobile .bos-action-item p {
    display: none;
}

html.smx-mobile .seds-search-bar {
    min-height: 46px;
    min-width: 0;
    width: 100%;
}

html.smx-mobile .seds-search-bar input,
html.smx-mobile input,
html.smx-mobile select,
html.smx-mobile textarea {
    font-size: 16px;
}

html.smx-mobile .seds-toolbar,
html.smx-mobile .seds-command-bar__actions {
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

html.smx-mobile .seds-toolbar-button span {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.smx-mobile .seds-quick-action-bar,
html.smx-mobile .ecc-quickbar {
    bottom: calc(var(--businessos-footer-height) + var(--businessos-mobile-nav-height) + env(safe-area-inset-bottom));
    display: grid;
    gap: 8px;
    grid-auto-columns: minmax(98px, 1fr);
    grid-auto-flow: column;
    left: 8px;
    max-width: calc(100vw - 82px);
    overflow-x: auto;
    position: fixed;
    right: 72px;
    z-index: 3000;
}

html.smx-mobile .seds-data-grid {
    max-width: 100%;
    overflow: auto;
}

html.smx-mobile .seds-data-grid table,
html.smx-mobile .seds-data-grid thead,
html.smx-mobile .seds-data-grid tbody,
html.smx-mobile .seds-data-grid tr,
html.smx-mobile .seds-data-grid th,
html.smx-mobile .seds-data-grid td {
    display: block;
}

html.smx-mobile .seds-data-grid thead {
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

html.smx-mobile .seds-data-grid table {
    min-width: 0;
}

html.smx-mobile .seds-data-grid tr {
    background: var(--seds-surface-2, #f8fafc);
    border: 1px solid var(--seds-border, rgba(15, 23, 42, 0.1));
    border-radius: 12px;
    margin: 0 0 8px;
    padding: 8px;
}

html.smx-mobile .seds-data-grid td {
    border: 0;
    padding: 6px 2px;
    white-space: normal;
    word-break: break-word;
}

html.smx-mobile .seds-slideout,
html.smx-mobile .seds-notification-center {
    border-left: 0;
    border-radius: 18px 18px 0 0;
    bottom: 0;
    height: min(88dvh, 720px);
    max-width: 100vw;
    top: auto;
    width: 100vw;
}

html.smx-mobile .seds-command-palette,
html.smx-mobile .seds-modal {
    padding: max(12px, env(safe-area-inset-top)) 10px 10px;
}

html.smx-mobile .seds-command-palette__dialog,
html.smx-mobile .seds-modal__dialog {
    border-radius: 16px;
    max-height: calc(100dvh - 24px);
    max-width: 100%;
}

html.smx-mobile .seds-command-palette__results {
    max-height: calc(100dvh - 150px);
}

html.smx-mobile .seds-command-palette__results a {
    min-height: 52px;
}

html.smx-mobile .seds-modal__dialog > div {
    max-height: calc(100dvh - 96px);
    overflow: auto;
}

html.smx-mobile form:not(.smx-search):not(.seds-search-bar) {
    display: grid;
    gap: 12px;
}

html.smx-mobile label {
    font-size: 13px;
    font-weight: 800;
}

html.smx-mobile .form-control,
html.smx-mobile .form-select,
html.smx-mobile input[type="text"],
html.smx-mobile input[type="email"],
html.smx-mobile input[type="password"],
html.smx-mobile input[type="tel"],
html.smx-mobile input[type="number"],
html.smx-mobile input[type="date"],
html.smx-mobile textarea,
html.smx-mobile select {
    min-height: 46px;
}

html.smx-mobile .btn,
html.smx-mobile button {
    min-height: 44px;
}

html.smx-mobile [class*="container"],
html.smx-mobile .row,
html.smx-mobile [class*="col-"] {
    max-width: 100%;
}

html.smx-mobile .row {
    margin-left: 0;
    margin-right: 0;
}

html.smx-mobile [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

html.smx-mobile img,
html.smx-mobile svg,
html.smx-mobile canvas,
html.smx-mobile video {
    max-width: 100%;
}

/*
 * Legacy Bootstrap/module surface adaptation.
 * This prevents older workspaces from behaving like shrunken desktop pages.
 */

html.smx-mobile .container,
html.smx-mobile .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.smx-mobile .card {
    border-radius: 12px;
    margin-bottom: 10px;
}

html.smx-mobile .card-header,
html.smx-mobile .card-body,
html.smx-mobile .card-footer {
    padding: 10px;
}

html.smx-mobile .nav,
html.smx-mobile .nav-tabs,
html.smx-mobile .nav-pills {
    display: grid;
    gap: 8px;
    grid-auto-columns: minmax(110px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 2px;
}

html.smx-mobile .nav-link,
html.smx-mobile .dropdown-item,
html.smx-mobile .list-group-item {
    align-items: center;
    display: flex;
    min-height: 46px;
}

html.smx-mobile .dropdown-menu {
    border-radius: 14px;
    min-width: min(92vw, 360px);
    padding: 8px;
}

html.smx-mobile .table-responsive {
    border: 0;
    overflow: visible;
}

html.smx-mobile table.table,
html.smx-mobile .table-responsive table {
    display: block;
    min-width: 0 !important;
    width: 100%;
}

html.smx-mobile table.table thead,
html.smx-mobile .table-responsive thead {
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

html.smx-mobile table.table tbody,
html.smx-mobile table.table tr,
html.smx-mobile table.table td,
html.smx-mobile .table-responsive tbody,
html.smx-mobile .table-responsive tr,
html.smx-mobile .table-responsive td {
    display: block;
    width: 100%;
}

html.smx-mobile table.table tr,
html.smx-mobile .table-responsive tr {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    margin-bottom: 8px;
    padding: 8px;
}

html.smx-mobile table.table td,
html.smx-mobile .table-responsive td {
    border: 0;
    padding: 6px 4px;
    white-space: normal;
}

html.smx-mobile .modal {
    padding: 0 !important;
}

html.smx-mobile .modal-dialog {
    align-items: end;
    display: flex;
    margin: 0;
    max-width: 100%;
    min-height: 100%;
}

html.smx-mobile .modal-content {
    border-radius: 18px 18px 0 0;
    max-height: 88dvh;
    overflow: hidden;
}

html.smx-mobile .modal-body {
    overflow: auto;
}

html.smx-mobile .btn-group,
html.smx-mobile .btn-toolbar {
    display: grid;
    gap: 8px;
    grid-auto-columns: minmax(104px, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
}

html.smx-mobile .btn-group > .btn,
html.smx-mobile .btn-toolbar .btn {
    border-radius: 10px !important;
}

html.smx-tablet .seds-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.smx-tablet .seds-three-panel,
html.smx-tablet .seds-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.smx-tablet body {
    overflow-x: hidden;
}

html.smx-tablet #app-main {
    max-width: 100%;
}

html.smx-tablet .seds-shell {
    padding: 10px;
}

html.smx-tablet .seds-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.smx-tablet .seds-card,
html.smx-tablet .seds-tile,
html.smx-tablet .seds-action-item,
html.smx-tablet .seds-alert-row,
html.smx-tablet .seds-timeline-item {
    min-height: 56px;
}

@media (max-width: 430px) {
    html.smx-mobile #app-main {
        padding: 10px !important;
    }

    html.smx-mobile .smx-home-screen {
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    html.smx-mobile .seds-kpi-row {
        grid-auto-columns: minmax(126px, 44vw);
    }
}

@media (max-width: 414px) {
    html.smx-mobile .smx-brand strong {
        max-width: 168px;
    }

    html.smx-mobile .smx-quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    html.smx-mobile .seds-tile-grid {
        grid-template-columns: 1fr;
    }

    html.smx-mobile .smx-quick-grid a,
    html.smx-mobile .smx-quick-grid button {
        font-size: 11px;
        min-height: 64px;
    }
}

@media (max-width: 375px) {
    html.smx-mobile .smx-topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    html.smx-mobile .smx-topbar__actions {
        gap: 4px;
    }

    html.smx-mobile .seds-card strong {
        font-size: 18px;
    }
}

@media (max-width: 360px) {
    html.smx-mobile .smx-brand strong {
        max-width: 124px;
    }

    html.smx-mobile .smx-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.smx-mobile .smx-section--activity {
        display: none;
    }
}

@media (max-width: 320px) {
    html.smx-mobile .smx-status-card strong {
        font-size: 20px;
    }

    html.smx-mobile .smx-section {
        padding: 8px;
    }

    html.smx-mobile .smx-action-card,
    html.smx-mobile .smx-alert-card,
    html.smx-mobile .smx-ai-card,
    html.smx-mobile .smx-timeline-row {
        min-height: 52px;
        padding: 8px;
    }

    html.smx-mobile .seds-kpi-row {
        grid-auto-columns: minmax(118px, 58vw);
    }
}

@media (min-width: 768px) and (max-width: 899px) {
    html.smx-tablet .seds-kpi-row,
    html.smx-tablet .seds-widget-grid,
    html.smx-tablet .seds-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) and (max-width: 1023px) {
    html.smx-tablet .seds-kpi-row,
    html.smx-tablet .seds-tile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html.smx-tablet .seds-kpi-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    html.smx-tablet .seds-three-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    html.smx-desktop .seds-kpi-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) and (max-width: 1599px) {
    html.smx-desktop .seds-kpi-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Governed semantic appearance for touch/mobile shell surfaces. */
html.smx-mobile body { background: var(--bos-page-background); color: var(--bos-text-primary); }
html.smx-mobile :is(.smx-topbar, .smx-status-card, .smx-section, .smx-ai-card, .smx-action-card, .smx-alert-card, .smx-timeline-row, .smx-quick-grid a, .smx-quick-grid button, .smx-bottom-nav, .smx-drawer, table.table tr, .table-responsive tr) { background: var(--bos-surface-card); color: var(--bos-text-primary); border-color: var(--bos-border); box-shadow: var(--bos-shadow); }
html.smx-mobile :is(.smx-brand, .smx-topbar__actions a, .smx-topbar__actions button, .smx-drawer header button, .smx-bottom-nav a, .smx-bottom-nav button, .smx-search-shortcuts a, .smx-notification-list a) { color: var(--bos-text-primary); }
html.smx-mobile :is(.smx-topbar__actions a, .smx-topbar__actions button, .smx-drawer header button, .smx-search, .smx-search-shortcuts a, .smx-notification-list a) { background: var(--bos-surface-elevated); border-color: var(--bos-border); }
html.smx-mobile :is(.smx-status-card span, .smx-status-card em, .smx-action-card em, .smx-alert-card em, .smx-ai-card span, .smx-timeline-row time) { color: var(--bos-text-muted); }
html.smx-mobile .smx-search input { color: var(--bos-text-primary); }