/*
 * File / 文件：public/assets/responsive.css
 * EN: Canonical responsive layout layer and breakpoint contract.
 * 中文：该文件是统一的响应式布局层与断点契约。
 * Maintenance / 维护：Do not create competing breakpoint owners for the same component.
 * 维护要求：同一组件不要建立互相竞争的断点规则。
 */
/*
 * CoolerDepot Sales Posts — canonical responsive layer (v0.2.00)
 * --------------------------------------------------------------------------
 * This file is intentionally loaded AFTER app.css and owns viewport-specific
 * layout only. Historic component styles stay in app.css; breakpoint fixes
 * belong here so later releases do not create another chain of media-query
 * overrides inside the main stylesheet.
 *
 * Breakpoint policy:
 *   <=1120px : page-heading controls move below the heading.
 *   <=1050px : compact hamburger navigation keeps the universal header on one row.
 *   <=860px  : tablet dashboard/control groups wrap deliberately.
 *   <=680px  : phone controls become one-column/two-date-column layouts.
 *   <=480px  : compact phone spacing and single-column secondary forms.
 */

/* Intrinsic-size safety. These rules prevent grid/flex children from forcing
 * the viewport wider without hiding legitimate horizontal table/chart scroll. */
.page-head,
.panel,
.sales-portal-head,
.sales-portal-head > *,
.sales-portal-head-actions,
.admin-activity-head,
.admin-dashboard-heading,
.admin-dashboard-range-anchor,
.admin-dashboard-range-bar,
.report-result-panel,
.report-result-head,
.report-toolbar,
.settings-card,
.website-library,
.website-library-toolbar,
.sales-range-post-section,
.sales-range-post-head,
.review-modal,
.sales-submit-modal,
.sales-post-detail-modal {
    min-width:0;
    box-sizing:border-box;
}

img,
video,
canvas {
    max-width:100%;
}

input,
select,
textarea {
    max-width:100%;
    box-sizing:border-box;
}

/* --------------------------------------------------------------------------
 * Medium desktop / tablet landscape
 * ----------------------------------------------------------------------- */
@media (max-width:1120px) {
    /* v0.1.92+ forced every width >=861px onto one row. At 900–1024px that
     * made heading + period switch + dates + submit button overflow. */
    .sales-portal-head,
    .admin-activity-head {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        align-items:start !important;
        gap:16px !important;
    }

    .sales-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        justify-self:stretch !important;
        justify-content:start !important;
        width:100% !important;
    }

    .admin-dashboard-range-anchor {
        justify-self:stretch !important;
        justify-content:flex-start !important;
        width:100% !important;
    }

    .admin-activity-head .admin-dashboard-range-bar {
        width:100% !important;
    }

    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch,
    .sales-portal-head-actions .sales-head-period-switch {
        margin-top:18px !important;
    }

    .report-result-head {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .report-toolbar {
        flex:1 1 100%;
        width:100%;
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}

/* --------------------------------------------------------------------------
 * Tablet
 * ----------------------------------------------------------------------- */
@media (max-width:860px) {
    /* Header: preserve fixed language/nav slot widths, but wrap in known rows. */
    .topbar {
        align-items:flex-start !important;
        gap:10px !important;
        padding:10px 14px !important;
    }

    .topbar .brand {
        min-width:0;
        max-width:100%;
    }

    .topbar .nav {
        display:flex !important;
        width:100% !important;
        min-width:0 !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex-wrap:wrap !important;
        gap:6px !important;
    }

    .topbar .nav-user {
        flex:1 1 100% !important;
        width:100%;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    /* Language labels may change, the switch itself may not. */
    #appLanguageSwitch,
    .topbar[data-user-role="admin"] #appLanguageSwitch,
    .topbar[data-user-role="sales"] #appLanguageSwitch {
        display:grid !important;
        grid-template-columns:repeat(4,56px) !important;
        flex:0 0 230px !important;
        width:230px !important;
        min-width:230px !important;
        max-width:230px !important;
        order:10;
    }

    #appLanguageSwitch .app-language-button {
        width:56px !important;
        min-width:56px !important;
        max-width:56px !important;
        overflow:hidden;
        white-space:nowrap;
    }

    .topbar .nav > a,
    .topbar .nav > form,
    .topbar .admin-info-menu {
        order:20;
    }

    /* Sales toolbar: two deliberate rows instead of arbitrary flex wrapping. */
    .sales-portal-head-actions {
        display:grid !important;
        grid-template-columns:286px minmax(288px,1fr) !important;
        align-items:end !important;
        justify-content:start !important;
        gap:10px 12px !important;
    }

    .sales-portal-head-actions #salesPeriodSwitch {
        width:286px !important;
        min-width:286px !important;
        max-width:286px !important;
        margin-top:18px !important;
    }

    .sales-portal-head-actions #salesRangeForm {
        width:100% !important;
        min-width:0 !important;
    }

    .sales-portal-head-actions .sales-submit-cta {
        grid-column:1 / -1;
        justify-self:start;
        width:auto !important;
        min-width:158px !important;
    }

    /* Admin normal range uses the same tablet geometry. */
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        display:grid !important;
        grid-template-columns:286px minmax(288px,1fr) !important;
        align-items:end !important;
        gap:10px 12px !important;
    }

    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
        width:286px !important;
        min-width:286px !important;
        max-width:286px !important;
        margin-top:18px !important;
    }

    .admin-activity-head .dashboard-date-controls {
        width:100% !important;
        min-width:0 !important;
    }

    /* Tables keep horizontal scrolling inside their own card, never the page. */
    .table-wrap,
    .website-reference-tablewrap,
    .report-table-wrap,
    .report-table-scroll,
    .admin-table-wrap {
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* Settings action bars stack before their controls become cramped. */
    .website-library-toolbar {
        align-items:stretch !important;
        flex-direction:column !important;
    }

    .website-library-search-row {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }
}

/* --------------------------------------------------------------------------
 * Phone / narrow tablet
 * ----------------------------------------------------------------------- */
@media (max-width:680px) {
    .topbar {
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .topbar .nav {
        gap:5px !important;
    }

    /* Keep the language control fixed at 230px. Older mobile CSS changed it to
     * width:100%, which made language changes visibly resize the navigation. */
    #appLanguageSwitch,
    .topbar[data-user-role="admin"] #appLanguageSwitch,
    .topbar[data-user-role="sales"] #appLanguageSwitch {
        width:230px !important;
        min-width:230px !important;
        max-width:230px !important;
        flex-basis:230px !important;
    }

    .sales-portal-head,
    .admin-activity-head {
        gap:12px !important;
    }

    .sales-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        gap:9px !important;
    }

    .sales-portal-head-actions #salesPeriodSwitch,
    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
        box-sizing:border-box !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        margin-top:0 !important;
    }

    .sales-portal-head-actions #salesPeriodSwitch .sales-period-button,
    .admin-activity-head .sales-head-period-switch .sales-period-button {
        min-width:0 !important;
        padding-left:3px !important;
        padding-right:3px !important;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .sales-portal-head-actions #salesRangeForm,
    .admin-activity-head .dashboard-date-controls {
        width:100% !important;
    }

    .sales-portal-head-actions .activity-range-date-row,
    .admin-activity-head .activity-range-date-row {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        width:100% !important;
    }

    .sales-portal-head-actions .activity-range-field,
    .admin-activity-head .activity-range-field,
    .sales-portal-head-actions .admin-range-field-stack.activity-range-field,
    .admin-activity-head .admin-range-field-stack.activity-range-field,
    .sales-portal-head-actions .sales-to-field-stack.activity-range-field {
        flex:1 1 auto !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    .sales-portal-head-actions .activity-range-field input[type="date"],
    .admin-activity-head .activity-range-field input[type="date"] {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    .sales-portal-head-actions .sales-submit-cta {
        grid-column:auto;
        justify-self:stretch;
        width:100% !important;
        min-width:0 !important;
    }

    /* Dedicated Admin sticky deck: no horizontal scrolling. On phones it is a
     * clean two-row control: presets, then two dates; Back to today gets its
     * own tiny line so it remains visible without colliding with an input. */
    .admin-dashboard-sticky-inner {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        gap:5px !important;
        width:100% !important;
        padding:5px 10px 6px !important;
        overflow:visible !important;
    }

    .admin-sticky-period-switch {
        box-sizing:border-box !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        flex-basis:auto !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        margin:0 !important;
    }

    .admin-sticky-period-switch .sales-period-button {
        min-width:0 !important;
        padding-left:2px !important;
        padding-right:2px !important;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .admin-sticky-date-row {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        align-items:end !important;
        gap:5px 8px !important;
        width:100% !important;
        min-width:0 !important;
    }

    .admin-dashboard-sticky-range .admin-sticky-range-field,
    .admin-dashboard-sticky-range .activity-range-field {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        flex-basis:auto !important;
    }

    .admin-dashboard-sticky-range .admin-sticky-range-field input[type="date"],
    .admin-dashboard-sticky-range .activity-range-field input[type="date"] {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    .admin-dashboard-sticky-range .admin-sticky-back-today {
        position:static !important;
        grid-column:1 / -1;
        justify-self:end;
        width:auto !important;
        height:auto !important;
        min-height:12px !important;
        margin:0 !important;
        padding:0 !important;
        line-height:12px !important;
    }

    /* Dashboard cards and section headings should never fight for one row. */
    .admin-section-head-with-summary,
    .sales-range-post-head,
    .report-result-head,
    .settings-section-head {
        align-items:flex-start !important;
        flex-direction:column !important;
    }

    .admin-section-summary {
        align-self:flex-start;
    }

    .sales-range-post-filter {
        width:100% !important;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* Reports: range is full width; From/To remain paired until very small. */
    .report-toolbar {
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
        width:100% !important;
    }

    .report-range-control,
    .report-run-control,
    .report-download-button {
        grid-column:1 / -1;
    }

    .report-range-control .sales-head-period-switch {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }

    .report-date-field,
    .report-date-field input[type="date"],
    .report-sales-field,
    .report-sales-field select {
        width:100% !important;
        min-width:0 !important;
    }

    /* Settings */
    .settings-inline-form,
    #application-settings .settings-inline-form,
    .website-manual-grid,
    .website-settings-grid {
        grid-template-columns:minmax(0,1fr) !important;
    }

    #application-settings .settings-inline-form .btn {
        width:100% !important;
    }

    .website-manual-wide {
        grid-column:auto !important;
    }

    .website-card-actions > .btn,
    .website-library-search-row > .btn {
        flex:0 0 auto;
    }

    /* Modals: keep header/footer visible and content scrollable inside viewport. */
    .review-modal-backdrop,
    .sales-submit-modal-backdrop,
    .sales-post-detail-backdrop,
    .sales-person-settings-backdrop {
        padding:8px !important;
    }

    .review-modal,
    .sales-submit-modal,
    .sales-post-detail-modal,
    .sales-person-settings-modal {
        width:100% !important;
        max-width:100% !important;
        max-height:calc(100dvh - 16px) !important;
    }

    .review-modal-head,
    .sales-submit-modal-head,
    .sales-post-detail-head,
    .sales-person-settings-head {
        gap:10px !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .review-modal-footer,
    .sales-post-detail-footer,
    .sales-person-settings-footer {
        gap:7px !important;
        flex-wrap:wrap !important;
    }

    .review-modal-footer-actions {
        width:100%;
    }
}

/* --------------------------------------------------------------------------
 * Compact phone
 * ----------------------------------------------------------------------- */
@media (max-width:480px) {
    .topbar .brand {
        font-size:15px;
    }

    .topbar .nav > a,
    .topbar .nav > form,
    .topbar .nav > form button {
        min-height:36px;
    }

    .page-head h1 {
        font-size:clamp(22px,8vw,30px);
    }

    .sales-portal-subtitle {
        font-size:10px;
    }

    .sales-portal-head-actions .activity-range-date-row,
    .admin-activity-head .activity-range-date-row {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .activity-range-label-row .dashboard-back-today {
        font-size:7px !important;
    }

    .report-toolbar {
        grid-template-columns:minmax(0,1fr) !important;
    }

    .report-range-control,
    .report-run-control,
    .report-download-button {
        grid-column:auto;
    }

    .website-library-search-row {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
    }

    .website-library-search-row > * {
        width:100% !important;
    }

    .sales-delete-request-actions,
    .sales-post-detail-footer,
    .review-modal-footer-actions {
        align-items:stretch !important;
        flex-direction:column !important;
    }

    .sales-delete-request-actions .btn,
    .sales-post-detail-footer .btn,
    .sales-post-detail-footer a,
    .review-modal-footer-actions .btn {
        width:100% !important;
        flex:0 0 auto !important;
    }

    .admin-info-panel {
        left:0 !important;
        right:auto !important;
        width:min(360px,calc(100vw - 20px)) !important;
        max-width:calc(100vw - 20px) !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto !important;
    }
}

/* --------------------------------------------------------------------------
 * v0.2.01 — mobile navigation contract / 手机导航契约
 * EN: Desktop keeps the stable-width navigation. Phones use a compact
 * language strip plus a hamburger-controlled menu so links never collapse
 * into an accidental vertical column.
 * 中文：桌面端继续使用固定宽度导航；手机端使用语言缩写和汉堡菜单，
 * 避免导航链接在窄屏下被挤成失控的纵向列表。
 * ----------------------------------------------------------------------- */
.language-label-short,
.mobile-nav-toggle,
.mobile-nav-user {
    display:none !important;
}

.app-nav-menu {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.app-nav-menu > .app-nav-link,
.app-nav-menu > .app-nav-signout,
.app-nav-menu > .app-nav-signout button {
    box-sizing:border-box;
}

/* Desktop navigation sizing. Both roles use fixed slots so changing language
 * never shifts neighboring items. Admin uses compact fixed widths like Sales. */
.topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="dashboard"] { width:78px; min-width:78px; max-width:78px; }
.topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="submit"] { width:70px; min-width:70px; max-width:70px; }
.topbar[data-user-role="sales"] .app-nav-menu > .app-nav-signout { width:78px; min-width:78px; max-width:78px; }
.topbar[data-user-role="sales"] .app-nav-menu > .app-nav-signout button { width:78px; min-width:78px; max-width:78px; }

.topbar[data-user-role="admin"] .app-nav-menu { gap:4px; }
.topbar[data-user-role="admin"] .app-nav-menu > [data-nav-i18n="dashboard"] { width:78px; min-width:78px; max-width:78px; }
.topbar[data-user-role="admin"] .app-nav-menu > [data-nav-i18n="reports"] { width:72px; min-width:72px; max-width:72px; }
.topbar[data-user-role="admin"] .app-nav-menu > [data-nav-i18n="settings"] { width:86px; min-width:86px; max-width:86px; }
.topbar[data-user-role="admin"] .app-nav-menu > [data-nav-i18n="help"] { width:58px; min-width:58px; max-width:58px; }
.topbar[data-user-role="admin"] .app-nav-menu > .app-nav-signout { width:76px; min-width:76px; max-width:76px; }
.topbar[data-user-role="admin"] .app-nav-menu > .app-nav-signout button { width:76px; min-width:76px; max-width:76px; }

.mobile-nav-toggle {
    width:36px;
    min-width:36px;
    max-width:36px;
    height:34px;
    min-height:34px;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.24) !important;
    background:rgba(255,255,255,.04) !important;
    color:#fff !important;
}

.mobile-nav-toggle-bars {
    position:relative;
    width:16px;
    height:12px;
    display:block;
}

.mobile-nav-toggle-bars i {
    position:absolute;
    left:0;
    display:block;
    width:16px;
    height:2px;
    margin:0;
    border-radius:2px;
    background:currentColor;
    transform-origin:center;
    transition:top .16s ease,transform .16s ease,opacity .16s ease;
}
.mobile-nav-toggle-bars i:nth-child(1){top:0;}
.mobile-nav-toggle-bars i:nth-child(2){top:5px;}
.mobile-nav-toggle-bars i:nth-child(3){top:10px;}

.nav.mobile-open .mobile-nav-toggle-bars i:nth-child(1) { top:5px; transform:rotate(45deg); }
.nav.mobile-open .mobile-nav-toggle-bars i:nth-child(2) { opacity:0; }
.nav.mobile-open .mobile-nav-toggle-bars i:nth-child(3) { top:5px; transform:rotate(-45deg); }

@media (max-width:1050px) {
    .topbar[data-user-role="admin"],
    .topbar[data-user-role="sales"] {
        height:52px !important;
        min-height:52px !important;
        padding:6px 10px !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:8px !important;
        overflow:visible !important;
    }

    .topbar .brand {
        flex:1 1 auto !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:14px !important;
    }

    .topbar .nav {
        position:static !important;
        flex:0 0 auto !important;
        width:auto !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        flex-wrap:nowrap !important;
        gap:5px !important;
    }

    .topbar .nav-user {
        display:none !important;
    }

    .language-label-full {
        display:none !important;
    }

    .language-label-short {
        display:inline !important;
    }

    #appLanguageSwitch,
    .topbar[data-user-role="admin"] #appLanguageSwitch,
    .topbar[data-user-role="sales"] #appLanguageSwitch {
        display:grid !important;
        grid-template-columns:repeat(4,27px) !important;
        flex:0 0 111px !important;
        width:111px !important;
        min-width:111px !important;
        max-width:111px !important;
        gap:1px !important;
        order:0 !important;
        padding:1px !important;
    }

    #appLanguageSwitch .app-language-button,
    .topbar[data-user-role="admin"] .app-language-button,
    .topbar[data-user-role="sales"] .app-language-button {
        width:27px !important;
        min-width:27px !important;
        max-width:27px !important;
        height:30px !important;
        min-height:30px !important;
        padding:0 !important;
        font-size:9px !important;
        line-height:30px !important;
    }

    .topbar .admin-info-menu {
        order:0 !important;
        flex:0 0 34px !important;
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
    }

    .topbar .admin-info-toggle {
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        height:34px !important;
        min-height:34px !important;
        padding:0 !important;
    }

    .mobile-nav-toggle {
        display:inline-flex !important;
        order:0 !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .app-nav-menu {
        position:absolute !important;
        top:100% !important;
        left:0 !important;
        right:0 !important;
        z-index:105 !important;
        display:none !important;
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:5px 8px 8px !important;
        gap:4px !important;
        border-top:1px solid rgba(255,255,255,.10) !important;
        border-bottom:1px solid rgba(15,23,42,.20) !important;
        background:#101828 !important;
        box-shadow:0 12px 24px rgba(15,23,42,.22) !important;
    }

    /* EN: The narrow-screen menu is intentionally horizontal. Sales has four
     * actions and Admin has five; the user name spans the compact row above.
     * This keeps the expanded menu shallow instead of creating a tall stack.
     * 中文：窄屏菜单改为横向排列。Sales 有四个操作，Admin 有五个操作；
     * 用户名独占上方紧凑信息行，避免展开后形成很高的纵向菜单。 */
    .topbar[data-user-role="sales"] .app-nav-menu {
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }

    .topbar[data-user-role="admin"] .app-nav-menu {
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }

    .nav.mobile-open .app-nav-menu {
        display:grid !important;
    }

    .mobile-nav-user {
        display:block !important;
        grid-column:1 / -1 !important;
        min-height:20px !important;
        padding:2px 4px 3px !important;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        color:#93c5fd;
        font-size:10px;
        line-height:15px;
        font-weight:800;
    }

    .app-nav-menu > .app-nav-link,
    .app-nav-menu > .app-nav-signout,
    .app-nav-menu > .app-nav-signout button {
        box-sizing:border-box !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    .app-nav-menu > .app-nav-link,
    .app-nav-menu > .app-nav-signout button {
        min-height:34px !important;
        justify-content:center !important;
        padding:0 4px !important;
        overflow:hidden !important;
        text-align:center !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        font-size:11px !important;
    }

    .app-nav-menu > .app-nav-signout {
        display:block !important;
    }

    .app-nav-menu > .app-nav-signout button {
        display:flex !important;
    }

    .admin-info-panel {
        position:fixed !important;
        top:calc(var(--cdsp-topbar-height,52px) + 4px) !important;
        left:10px !important;
        right:10px !important;
        width:auto !important;
        max-width:none !important;
    }
}

@media (max-width:420px) {
    .topbar[data-user-role="admin"],
    .topbar[data-user-role="sales"] {
        gap:5px !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .topbar .brand {
        font-size:13px !important;
    }

    #appLanguageSwitch,
    .topbar[data-user-role="admin"] #appLanguageSwitch,
    .topbar[data-user-role="sales"] #appLanguageSwitch {
        grid-template-columns:repeat(4,25px) !important;
        flex-basis:103px !important;
        width:103px !important;
        min-width:103px !important;
        max-width:103px !important;
    }

    #appLanguageSwitch .app-language-button,
    .topbar[data-user-role="admin"] .app-language-button,
    .topbar[data-user-role="sales"] .app-language-button {
        width:25px !important;
        min-width:25px !important;
        max-width:25px !important;
    }

    /* EN: Preserve one horizontal action row even around 390-420px by
     * tightening label typography rather than reverting to vertical stacking.
     * 中文：约 390-420px 仍保持单行横向菜单，通过压缩字号和间距，
     * 不再退回纵向堆叠。 */
    .app-nav-menu {
        column-gap:3px !important;
        padding-left:6px !important;
        padding-right:6px !important;
    }

    .app-nav-menu > .app-nav-link,
    .app-nav-menu > .app-nav-signout button {
        min-height:32px !important;
        padding-left:2px !important;
        padding-right:2px !important;
        font-size:10px !important;
    }
}

/* EN: Neutralize the legacy phone rule that gave Back to today a 100% flex
 * basis inside a two-column date grid; that rule caused a 1px page overflow.
 * 中文：覆盖旧手机规则中 Back to today 的 100% flex-basis，避免双列日期
 * 网格在 390/480px 下产生 1px 页面横向溢出。 */
@media (max-width:680px) {
    .activity-range-label-row .dashboard-back-today,
    .sales-to-field-stack .activity-range-label-row .sales-back-today,
    .admin-range-field-stack .activity-range-label-row .dashboard-back-today {
        flex:0 0 auto !important;
        width:auto !important;
        max-width:100% !important;
        margin-left:auto !important;
    }
}

/* ========================================================================
 * v0.2.08 — Unified activity-header responsive toolbar
 * EN: This final responsive layer is the single owner of the Sales/Admin
 * activity header geometry. It removes historical right-floating and early
 * stacking rules so the title, presets, dates, and Submit button follow one
 * predictable layout at every viewport width.
 * 中文：本最终响应式层统一接管 Sales/Admin Activity 页头布局，覆盖历史上
 * 右浮、过早换行等冲突规则，使标题、快捷日期、From/To 与 Submit 按钮在
 * 所有屏幕宽度下遵循同一套稳定布局。
 * ====================================================================== */

/* EN: Keep the page identity on its own row and place the entire control deck
 * directly below it. This prevents Admin dates from drifting to the far right
 * while Sales controls sit on another geometry.
 * 中文：标题区独占一行，整组筛选控件紧接其下；避免 Admin 日期漂到最右侧，
 * 同时保证 Sales 与 Admin 使用相同的视觉结构。 */
.sales-portal-head,
.admin-page-head.sales-portal-head,
.admin-activity-head {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:start !important;
    justify-items:start !important;
    gap:14px !important;
}

.sales-portal-head > :first-child,
.admin-activity-head .admin-dashboard-heading {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
}

.admin-dashboard-range-anchor,
.admin-activity-head .admin-dashboard-range-anchor {
    display:block !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
}

.admin-activity-head .admin-dashboard-range-bar {
    width:100% !important;
    max-width:none !important;
}

/* EN: Desktop control deck. Presets, date pair and CTA share one baseline.
 * 中文：桌面工具栏。快捷范围、日期组和 CTA 使用同一底部基线。 */
.sales-portal-head-actions,
.admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:max-content max-content max-content !important;
    align-items:end !important;
    justify-content:start !important;
    justify-items:start !important;
    justify-self:start !important;
    column-gap:10px !important;
    row-gap:8px !important;
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
}

.admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
    grid-template-columns:max-content max-content !important;
}

/* EN: Five presets always occupy one balanced row. The old 3/4-column rules
 * are intentionally neutralized here.
 * 中文：五个快捷范围始终保持单行均分，明确覆盖历史 3/4 列规则。 */
.sales-portal-head-actions .sales-head-period-switch,
.admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-self:end !important;
    width:286px !important;
    min-width:286px !important;
    max-width:286px !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:2px !important;
    gap:2px !important;
}

.sales-portal-head-actions .sales-head-period-switch .sales-period-button,
.admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch .sales-period-button {
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 6px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

/* EN: Date pair is one component: two equal fields, one label row, fixed
 * desktop geometry. / 中文：From/To 作为一个组件，桌面下两列等宽且标签对齐。 */
.sales-portal-head-actions #salesRangeForm,
.admin-activity-head .dashboard-date-controls {
    box-sizing:border-box !important;
    width:296px !important;
    min-width:296px !important;
    max-width:296px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:end !important;
}

.sales-portal-head-actions .activity-range-date-row,
.admin-activity-head .activity-range-date-row {
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:start !important;
    gap:8px !important;
    width:100% !important;
    min-width:0 !important;
}

.sales-portal-head-actions .activity-range-field,
.admin-activity-head .activity-range-field,
.sales-portal-head-actions .sales-to-field-stack.activity-range-field,
.admin-activity-head .admin-range-field-stack.activity-range-field {
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    flex:1 1 auto !important;
}

.sales-portal-head-actions .activity-range-field input[type="date"],
.admin-activity-head .activity-range-field input[type="date"] {
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    margin:0 !important;
    padding:0 10px !important;
    line-height:40px !important;
}

.sales-portal-head-actions .activity-range-label-row,
.admin-activity-head .activity-range-label-row {
    height:16px !important;
    min-height:16px !important;
    line-height:16px !important;
}

.sales-portal-head-actions .activity-range-label-row label,
.admin-activity-head .activity-range-label-row label {
    font-size:8px !important;
    line-height:16px !important;
}

.sales-portal-head-actions .sales-submit-cta {
    box-sizing:border-box !important;
    align-self:end !important;
    justify-self:start !important;
    width:158px !important;
    min-width:158px !important;
    max-width:158px !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 16px !important;
}

/* EN: Medium screens keep presets + date pair on the first toolbar row; the
 * Sales CTA moves to a deliberate second row instead of arbitrary wrapping.
 * 中文：中等宽度下快捷范围与日期保持第一行，Sales CTA 明确进入第二行，
 * 不再依赖浏览器随机换行。 */
@media (max-width:999px) {
    .sales-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        grid-template-columns:286px 296px !important;
        width:min(100%,592px) !important;
        max-width:100% !important;
    }

    .sales-portal-head-actions .sales-submit-cta {
        grid-column:1 / -1 !important;
        grid-row:2 !important;
    }
}

/* EN: Phone/narrow tablet uses three deliberate full-width rows: presets,
 * date pair, CTA. Date fields remain paired while there is enough room.
 * 中文：手机/窄平板使用三行稳定结构：快捷范围、日期组、CTA；空间允许时
 * From/To 继续保持并排。 */
@media (max-width:640px) {
    .sales-portal-head,
    .admin-page-head.sales-portal-head,
    .admin-activity-head {
        gap:12px !important;
    }

    .admin-dashboard-range-anchor,
    .admin-activity-head .admin-dashboard-range-anchor,
    .admin-activity-head .admin-dashboard-range-bar {
        width:100% !important;
        max-width:100% !important;
    }

    .sales-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        max-width:100% !important;
        gap:9px !important;
    }

    .sales-portal-head-actions .sales-head-period-switch,
    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch,
    .sales-portal-head-actions #salesRangeForm,
    .admin-activity-head .dashboard-date-controls {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    .sales-portal-head-actions .sales-submit-cta {
        grid-column:auto !important;
        grid-row:auto !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        justify-self:stretch !important;
    }
}

/* EN: Very small phones stack native date inputs to avoid cramped calendar
 * controls or horizontal overflow. / 中文：超窄手机将原生日期控件改为单列，
 * 防止日历控件被挤压或产生横向溢出。 */
@media (max-width:360px) {
    .sales-portal-head-actions .activity-range-date-row,
    .admin-activity-head .activity-range-date-row {
        grid-template-columns:minmax(0,1fr) !important;
    }
}


/* --------------------------------------------------------------------------
 * v0.2.09 — authoritative Sales/Admin activity toolbar geometry
 * EN: Keep the quick presets left, keep From/To right, and place Submit Post
 * on its own second row aligned to the right. Admin and Sales share the same
 * responsive geometry.
 * 中文：快捷日期固定在左侧，From/To 固定在右侧，Submit Post 单独放在第二行右对齐；
 * Admin 与 Sales 共用同一套响应式布局。
 * ----------------------------------------------------------------------- */
.sales-portal-head-actions,
.admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
    display:grid !important;
    grid-template-columns:minmax(286px,max-content) minmax(300px,max-content) !important;
    align-items:end !important;
    justify-content:space-between !important;
    justify-items:stretch !important;
    gap:10px 18px !important;
    width:100% !important;
}

.sales-portal-head-actions #salesPeriodSwitch,
.admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
    grid-column:1 !important;
    grid-row:1 !important;
    width:286px !important;
    min-width:286px !important;
    max-width:286px !important;
    margin-top:0 !important;
    justify-self:start !important;
    align-self:end !important;
}

.sales-portal-head-actions #salesRangeForm,
.admin-activity-head .admin-dashboard-range-bar .dashboard-date-controls {
    grid-column:2 !important;
    grid-row:1 !important;
    width:auto !important;
    min-width:300px !important;
    justify-self:end !important;
    align-self:end !important;
}

.sales-portal-head-actions .sales-date-control-row,
.admin-activity-head .dashboard-date-control-row.activity-range-date-row {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(144px, 1fr)) !important;
    align-items:end !important;
    gap:8px !important;
}

.sales-portal-head-actions .activity-range-field,
.admin-activity-head .activity-range-field,
.sales-portal-head-actions .sales-to-field-stack.activity-range-field,
.admin-activity-head .admin-range-field-stack.activity-range-field {
    width:100% !important;
    min-width:0 !important;
}

.sales-portal-head-actions .activity-range-field input[type="date"],
.admin-activity-head .activity-range-field input[type="date"] {
    width:100% !important;
    min-width:0 !important;
}

.sales-portal-head-actions .sales-submit-cta {
    grid-column:2 !important;
    grid-row:2 !important;
    justify-self:end !important;
    align-self:start !important;
    width:auto !important;
    min-width:160px !important;
    margin-top:0 !important;
}

@media (max-width:999px) {
    .sales-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        grid-template-columns:minmax(0,1fr) minmax(300px,max-content) !important;
        gap:10px 14px !important;
    }

    .sales-portal-head-actions #salesPeriodSwitch,
    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }
}

@media (max-width:720px) {
    .sales-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        grid-template-columns:minmax(0,1fr) !important;
        gap:9px !important;
    }

    .sales-portal-head-actions #salesPeriodSwitch,
    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch,
    .sales-portal-head-actions #salesRangeForm,
    .admin-activity-head .admin-dashboard-range-bar .dashboard-date-controls,
    .sales-portal-head-actions .sales-submit-cta {
        grid-column:1 !important;
        justify-self:stretch !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    .sales-portal-head-actions #salesPeriodSwitch,
    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
        grid-row:auto !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    }

    .sales-portal-head-actions #salesRangeForm,
    .admin-activity-head .admin-dashboard-range-bar .dashboard-date-controls {
        grid-row:auto !important;
    }

    .sales-portal-head-actions .sales-submit-cta {
        grid-row:auto !important;
        justify-self:end !important;
        width:auto !important;
    }
}

@media (max-width:640px) {
    .sales-portal-head-actions .activity-range-date-row,
    .admin-activity-head .activity-range-date-row {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .sales-portal-head-actions .sales-submit-cta {
        justify-self:stretch !important;
        width:100% !important;
    }
}

@media (max-width:480px) {
    .sales-portal-head-actions .activity-range-date-row,
    .admin-activity-head .activity-range-date-row {
        grid-template-columns:minmax(0,1fr) !important;
    }
}

/* v0.2.307 — Add Provider uses the existing composer as a responsive modal. */
@media (max-width:760px){
    .provider-modal{
        place-items:stretch;
        padding:8px;
    }
    .provider-modal-card{
        width:100%;
        max-width:none;
        max-height:calc(100vh - 16px);
        max-height:calc(100dvh - 16px);
        margin:0;
        border-radius:6px;
    }
    .provider-modal-head{
        align-items:flex-start;
        gap:8px;
    }
    .provider-composer-actions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .provider-composer-actions .btn{
        width:100%;
    }
}

@media (max-width:460px){
    .provider-modal{
        padding:0;
    }
    .provider-modal-card{
        max-height:100vh;
        max-height:100dvh;
        min-height:100vh;
        min-height:100dvh;
        border-radius:0;
    }
    .provider-composer-actions{
        grid-template-columns:minmax(0,1fr);
    }
}

/* v0.2.10 — Provider Chain / Jobs responsive split */
@media (min-width:1181px){
    .provider-operations-grid{
        grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr) !important;
    }
}

@media (max-width:1180px){
    .provider-operations-grid{
        grid-template-columns:minmax(0,1fr) !important;
    }
}

/* V0.2.106 — restore the approved Admin desktop date/filter geometry in the
 * canonical responsive layer (which loads after app.css). This is Admin-only:
 * quick periods stay flush left, From/To stay flush right, full content width. */
@media (min-width:721px) {
    .admin-activity-head .admin-dashboard-range-anchor,
    .admin-activity-head .admin-dashboard-range-bar,
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions,
    .admin-activity-head .admin-dashboard-range-bar .admin-toolbar-row-filter {
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }
    .admin-activity-head .admin-dashboard-range-bar .admin-portal-head-actions {
        display:block !important;
    }
    .admin-activity-head .admin-dashboard-range-bar .admin-toolbar-row-filter {
        display:grid !important;
        grid-template-columns:max-content minmax(24px,1fr) max-content !important;
        align-items:end !important;
        justify-content:stretch !important;
        gap:0 !important;
    }
    .admin-activity-head .admin-dashboard-range-bar .sales-head-period-switch {
        grid-column:1 !important;
        grid-row:1 !important;
        justify-self:start !important;
        margin:0 !important;
    }
    .admin-activity-head .admin-dashboard-range-bar .dashboard-date-controls {
        grid-column:3 !important;
        grid-row:1 !important;
        justify-self:end !important;
        margin:0 !important;
        width:auto !important;
        min-width:296px !important;
        max-width:296px !important;
    }
}


/* v0.2.194 — Keep the Post Review Close button at the exact same
   coordinates during loading and loaded states on every breakpoint. */
@media (max-width:680px) {
    .review-modal.is-review-loading .review-modal-head .icon-close {
        top:16px !important;
        right:12px !important;
    }
}

@media (max-width:460px) {
    .review-modal.is-review-loading .review-modal-head .icon-close {
        top:13px !important;
        right:12px !important;
    }

    .review-modal-loading {
        padding:18px !important;
    }

    .review-modal-loading::before {
        width:26px;
        height:26px;
    }
}


/* v0.2.200 — Image refresh indicators remain compact on small screens. */
@media (max-width:460px) {
    .sales-post-tile.is-image-refreshing .sales-post-card-media::after {
        width:24px;
        height:24px;
        margin:-12px 0 0 -12px;
    }

    .review-image-refresh-loading {
        width:100%;
        max-width:220px;
        min-height:132px;
        aspect-ratio:4/3;
    }

    .review-image-refresh-spinner {
        width:26px;
        height:26px;
    }
}


/* v0.2.287 — Sales desktop navigation uses the same fixed-slot grammar as Admin.
   User/title slot is fixed for both roles so longer names never shove the menu. */
@media (min-width:1051px) {
    .topbar[data-user-role="admin"] .nav-user,
    .topbar[data-user-role="sales"] .nav-user {
        box-sizing:border-box !important;
        flex:0 0 92px !important;
        width:92px !important;
        min-width:92px !important;
        max-width:92px !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .topbar[data-user-role="sales"] .app-nav-menu {
        gap:4px !important;
        flex-wrap:nowrap !important;
    }

    .topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="dashboard"] {
        width:78px !important;
        min-width:78px !important;
        max-width:78px !important;
    }

    /* The Sales markup uses bulkSubmit, not the historical submit key. */
    .topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="bulkSubmit"] {
        width:86px !important;
        min-width:86px !important;
        max-width:86px !important;
    }

    .topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="help"] {
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
    }

    .topbar[data-user-role="sales"] .app-nav-menu > .app-nav-signout,
    .topbar[data-user-role="sales"] .app-nav-menu > .app-nav-signout button {
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;
    }
}


/* v0.2.288 — Admin/Sales desktop header parity.
   "Same menu" means the same typography AND the same control geometry,
   not only fixed widths. Both roles now share one explicit desktop grammar. */
@media (min-width:1051px) {
    .topbar[data-user-role="admin"],
    .topbar[data-user-role="sales"] {
        min-height:52px !important;
        height:52px !important;
        gap:12px !important;
        padding:0 18px !important;
    }

    .topbar[data-user-role="admin"] .brand,
    .topbar[data-user-role="sales"] .brand {
        font-size:16px !important;
        font-weight:800 !important;
        line-height:1 !important;
    }

    .topbar[data-user-role="admin"] .nav,
    .topbar[data-user-role="sales"] .nav {
        gap:4px !important;
        flex-wrap:nowrap !important;
        font-size:12px !important;
        line-height:1 !important;
    }

    .topbar[data-user-role="admin"] .nav-user,
    .topbar[data-user-role="sales"] .nav-user {
        font-size:12px !important;
        font-weight:700 !important;
        line-height:1 !important;
    }

    .topbar[data-user-role="admin"] .app-nav-menu,
    .topbar[data-user-role="sales"] .app-nav-menu {
        gap:4px !important;
        align-items:center !important;
        flex-wrap:nowrap !important;
    }

    .topbar[data-user-role="admin"] .app-nav-link,
    .topbar[data-user-role="sales"] .app-nav-link,
    .topbar[data-user-role="admin"] .app-nav-signout button,
    .topbar[data-user-role="sales"] .app-nav-signout button {
        min-height:30px !important;
        height:30px !important;
        padding:0 8px !important;
        font-size:12px !important;
        font-weight:700 !important;
        line-height:1 !important;
    }

    .topbar[data-user-role="admin"] #appLanguageSwitch,
    .topbar[data-user-role="sales"] #appLanguageSwitch {
        padding:1px !important;
    }

    .topbar[data-user-role="admin"] .app-language-button,
    .topbar[data-user-role="sales"] .app-language-button {
        min-height:28px !important;
        height:28px !important;
        padding:3px 6px !important;
        font-size:9px !important;
        font-weight:900 !important;
        line-height:1 !important;
    }

    /* Keep the v0.2.287 fixed desktop slots. */
    .topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="dashboard"] {
        width:78px !important;
        min-width:78px !important;
        max-width:78px !important;
    }
    .topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="bulkSubmit"] {
        width:86px !important;
        min-width:86px !important;
        max-width:86px !important;
    }
    .topbar[data-user-role="sales"] .app-nav-menu > [data-nav-i18n="help"] {
        width:58px !important;
        min-width:58px !important;
        max-width:58px !important;
    }
    .topbar[data-user-role="sales"] .app-nav-menu > .app-nav-signout,
    .topbar[data-user-role="sales"] .app-nav-menu > .app-nav-signout button {
        width:76px !important;
        min-width:76px !important;
        max-width:76px !important;
    }
}

/* v0.2.292 — Delete Request Message Center responsive contract */
@media (max-width:760px) {
    #adminInfoPanel.admin-info-center {
        padding:8px !important;
    }

    #adminInfoPanel .admin-info-dialog {
        width:100% !important;
        max-width:none !important;
        max-height:calc(100dvh - 16px) !important;
    }

    #adminInfoPanel .admin-info-head {
        padding:12px !important;
    }

    #adminInfoPanel .admin-info-head strong {
        font-size:16px !important;
    }

    #adminInfoPanel .admin-info-toolbar {
        align-items:stretch !important;
        flex-direction:column !important;
        padding:10px 12px !important;
    }

    #adminInfoApproveAll {
        width:100% !important;
    }

    #adminInfoPanel .admin-info-list {
        padding:8px !important;
    }

    #adminInfoPanel .admin-info-actions {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        padding:0 12px 12px !important;
    }

    #adminInfoPanel .admin-info-actions .btn {
        width:100% !important;
        min-width:0 !important;
    }

    #adminInfoPanel .admin-info-post-open {
        padding:11px 12px 9px !important;
    }
}

@media (max-width:420px) {
    #adminInfoPanel .admin-info-head {
        gap:10px !important;
    }

    #adminInfoPanel .admin-info-head .eyebrow {
        font-size:7px !important;
    }

    #adminInfoPanel .admin-info-item-meta {
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    #adminInfoPanel .admin-info-item-meta>b,
    #adminInfoPanel .admin-info-summary-title,
    #adminInfoPanel .admin-info-summary-reason {
        max-width:100% !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    #adminInfoPanel .admin-info-actions {
        grid-template-columns:minmax(0,1fr) !important;
    }
}

/* v0.2.300 Sales access/settings responsive ownership */
@media (max-width:760px) {
    .sales-access-head { flex-direction:column; align-items:stretch; }
    .sales-access-counts { justify-content:flex-start; }
    .sales-directory-url-row { grid-template-columns:minmax(0,1fr); }
    .sales-directory-url-row .btn { width:100%; }
    .sales-access-row { align-items:flex-start; flex-direction:column; }
    .sales-access-row>form,
    .sales-access-row>form .tiny { width:100%; }
}

@media (max-width:480px) {
    .sales-access-tabs { display:grid; grid-template-columns:1fr 1fr; }
    .sales-access-tabs a { justify-content:center; text-align:center; }
    .sales-directory-sync-actions { align-items:stretch; flex-direction:column; }
    .sales-directory-sync-actions form,
    .sales-directory-sync-actions .btn { width:100%; }
    .sales-directory-last-sync { justify-content:space-between; }
}

/* v0.2.301 — Compact Sales access card grid responsive contract */
@media (max-width:980px) {
    .sales-access-list {
        grid-template-columns:repeat(auto-fill,minmax(170px,1fr)) !important;
        gap:7px !important;
    }
}

@media (max-width:760px) {
    .sales-access-list {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .sales-access-row {
        min-height:88px !important;
        display:grid !important;
        grid-template-rows:minmax(0,1fr) auto !important;
        align-items:start !important;
        gap:7px !important;
        padding:8px 9px !important;
    }
    .sales-access-row>form {
        width:auto !important;
        justify-self:start !important;
    }
    .sales-access-row>form .tiny {
        width:auto !important;
        min-height:27px !important;
        padding:4px 7px !important;
        font-size:9px !important;
    }
}

@media (max-width:460px) {
    .sales-access-list {
        grid-template-columns:minmax(0,1fr) !important;
    }
    .sales-access-row {
        min-height:0 !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        grid-template-rows:auto !important;
        align-items:center !important;
        gap:10px !important;
    }
    .sales-access-row>form {
        justify-self:end !important;
    }
    .sales-access-row>form .tiny {
        max-width:110px !important;
        white-space:normal !important;
    }
}

/* v0.2.302 — Sales access browser responsive contract */
@media (max-width:760px) {
    .sales-access-browser-tools {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        align-items:stretch !important;
        gap:8px !important;
    }
    .sales-access-tabs {
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        width:100% !important;
    }
    .sales-access-tabs button {
        width:100% !important;
        min-width:0 !important;
    }
    .sales-access-search {
        width:100% !important;
    }
    .sales-access-search input {
        width:100% !important;
    }
}

@media (max-width:460px) {
    .sales-access-tabs button {
        min-height:34px !important;
        padding:6px 7px !important;
        font-size:10px !important;
    }
    .sales-access-search>span {
        font-size:8px !important;
    }
    .sales-access-search input {
        height:34px !important;
        font-size:10px !important;
    }
}

/* v0.2.304 — Compact Active/Archived navigation stays compact on every width. */
@media (max-width:1020px) {
    .admin-sales-progress-section > .admin-sales-directory-tools{
        grid-template-columns:auto minmax(200px,240px) minmax(0,1fr) !important;
        gap:8px !important;
    }
    .admin-sales-scope-link{
        min-height:27px !important;
        padding:3px 6px !important;
    }
}

@media (max-width:760px) {
    .admin-sales-progress-section > .admin-sales-directory-tools{
        grid-template-columns:minmax(0,1fr) !important;
        align-items:stretch !important;
        gap:8px !important;
    }
    .admin-sales-scope-nav{
        width:auto !important;
        justify-self:start !important;
        display:inline-flex !important;
        flex-wrap:wrap !important;
        gap:3px !important;
    }
    .admin-sales-scope-link{
        width:auto !important;
        min-width:0 !important;
        min-height:28px !important;
        padding:3px 7px !important;
    }
    .admin-sales-progress-section > .admin-sales-directory-tools .admin-sales-search-field,
    .admin-sales-progress-section > .admin-sales-directory-tools .admin-sales-location-filter-wrap{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin-left:0 !important;
    }
}

@media (max-width:460px) {
    .admin-sales-scope-link{
        min-height:27px !important;
        gap:4px !important;
        padding:3px 6px !important;
        font-size:8px !important;
    }
    .admin-sales-scope-link b{
        min-width:15px !important;
        height:15px !important;
        font-size:7px !important;
    }
}

/* v0.2.305 — Search first, then scope, then Location at every responsive size. */
@media (max-width:1020px) {
    .admin-sales-progress-section > .admin-sales-directory-tools{
        grid-template-columns:minmax(220px,280px) auto minmax(0,1fr) !important;
    }
}
@media (max-width:760px) {
    .admin-sales-progress-section > .admin-sales-directory-tools{
        grid-template-columns:minmax(0,1fr) !important;
    }
    .admin-sales-progress-section > .admin-sales-directory-tools .admin-sales-search-field{
        grid-row:1 !important;
    }
    .admin-sales-progress-section > .admin-sales-directory-tools .admin-sales-scope-nav{
        grid-row:2 !important;
    }
    .admin-sales-progress-section > .admin-sales-directory-tools .admin-sales-location-filter-wrap{
        grid-row:3 !important;
    }
}

/* v0.2.308 — Browser-tab icon setting stays compact on desktop and stacks safely on phones. */
@media (max-width:720px){
    #application-settings .application-icon-control-row{
        grid-template-columns:44px minmax(0,1fr);
        align-items:start;
    }
    #application-settings .application-icon-upload-form{
        grid-template-columns:minmax(0,1fr);
    }
    #application-settings .application-icon-upload-form .application-setting-save{
        width:100% !important;
    }
    #application-settings .application-icon-reset-form{
        grid-column:1 / -1;
        width:100%;
    }
    #application-settings .application-icon-reset{
        width:100%;
    }
}
@media (max-width:420px){
    #application-settings .application-icon-control-row{
        grid-template-columns:minmax(0,1fr);
    }
    #application-settings .application-icon-preview-wrap{
        width:40px;
        height:40px;
    }
    #application-settings .application-icon-preview{
        width:30px;
        height:30px;
    }
}