/*
 * Central responsive behavior. This fixes wrapping and overflow by giving
 * components usable mobile layouts instead of hiding issues with global
 * overflow-x:hidden.
 */

html,
body {
    max-width: 100%;
}

.wrap,
.shell,
.aat-wrap,
.aat-shell,
.aat-page,
.aat-command-shell,
.aat-biz-shell,
.aat-ai-page,
.aat-public-shell,
.card,
.aat-card,
.provider-card,
.hf-card,
.panel,
.aat-panel {
    min-width: 0;
}

.aat-biz-tabs,
.aat-ai-tabs,
.hf-tabs,
.aat-tabs,
.tabs {
    max-width: 100%;
}

.hf-tabs,
.aat-ai-tabs,
.tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.aat-biz-tabs {
    flex-flow: row wrap;
    overflow: visible;
}

.aat-biz-tab,
.aat-ai-tab,
.hf-tab,
.tabs a {
    flex: 0 0 auto;
    max-width: 100%;
}

.card,
.aat-card,
.provider-card,
.hf-card,
.panel,
.aat-panel,
.table-wrap,
.table-scroll,
pre,
code,
.sc-output,
.hf-output,
.slack-code {
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .row-form-grid,
    .import-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .wrap,
    .shell,
    .aat-wrap,
    .aat-shell,
    .aat-command-shell,
    .aat-biz-shell,
    .aat-ai-page {
        width: min(100% - var(--aat-page-gutter-tablet), var(--aat-page-max));
    }

    .topbar,
    .aat-topbar,
    .section-head,
    .page-head {
        flex-direction: column;
    }

    .tools,
    .toolbar {
        justify-content: flex-start;
        width: 100%;
    }

    .aat-grid-3,
    .aat-grid-4,
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .start-grid,
    .quick-help-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .aat-grid-2,
    .aat-grid-3,
    .aat-grid-4,
    .hf-grid,
    .hf-row,
    .hf-scopes,
    .row-form-grid,
    .aat-form-row,
    .compact-form,
    .import-form,
    .metric-grid,
    .fc-cards,
    .acc-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .toolbar,
    .tools,
    .action-row,
    .actions,
    .form-actions,
    .btn-row,
    .manager-actions {
        align-items: stretch;
    }

    .tools > *,
    .toolbar > *,
    .action-row > *,
    .form-actions > *,
    .btn-row > *,
    .btn-row form,
    .actions form,
    .manager-actions > * {
        min-width: 0;
    }

    .aat-shared-nav {
        padding: 8px 0;
        margin-bottom: 12px;
    }

    .aat-shared-nav-inner {
        column-gap: 7px;
        row-gap: 9px;
    }

    .aat-shared-nav .aat-nav-btn {
        min-height: 38px;
        padding: 0 11px;
        font-size: 12px;
        white-space: normal;
    }
}

@media (max-width: 640px) {
    .wrap,
    .shell,
    .aat-wrap,
    .aat-shell,
    .aat-command-shell,
    .aat-biz-shell,
    .aat-ai-page,
    .aat-public-shell {
        width: calc(100% - var(--aat-page-gutter-mobile));
        padding-top: 12px;
    }

    .topbar,
    .page-head {
        gap: 14px;
    }

    .btn,
    .button,
    .aat-btn,
    .hf-btn,
    .slack-btn,
    .skool-btn {
        min-height: 42px;
        white-space: normal;
        text-align: center;
    }

    .card,
    .aat-card,
    .provider-card,
    .hf-card,
    .panel,
    .aat-panel,
    .metric {
        padding: 16px !important;
    }

    .card > .card-head:first-child,
    .aat-card > .aat-card-head:first-child,
    .panel > .panel-head:first-child {
        margin: -14px -14px 0;
    }

    .card-body,
    .aat-card-body,
    .panel-body {
        padding: 14px;
    }

    .card-head,
    .aat-card-head,
    .panel-head {
        padding: 14px;
    }

    .search-box,
    .input-group {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .search-box > *,
    .input-group > * {
        flex: 1 1 100%;
    }

    .table-action,
    .row-actions {
        text-align: left;
        justify-content: flex-start;
    }

    .ait-site-header {
        min-height: 70px;
        padding: 9px 13px;
        gap: 10px;
    }

    .ait-site-header-menu-button {
        width: 52px;
        height: 52px;
    }

    .ait-site-header-menu-button span {
        width: 27px;
        height: 4px;
    }

    .ait-site-header-logo-badge {
        width: 43px;
        height: 43px;
        border-radius: 9px;
        font-size: 20px;
    }

    .ait-site-header-title {
        flex: 1 1 auto;
        font-size: 19px;
        line-height: 1.15;
        white-space: normal;
    }

    .ait-site-header-mode {
        flex: 0 0 auto;
        margin-left: 0;
        padding: 6px 10px;
        font-size: 12.5px;
    }
}

@media (max-width: 430px) {
    :root {
        --aat-page-gutter-mobile: 14px;
    }

    .aat-biz-tabs {
        gap: 6px;
    }

    .aat-biz-tab,
    .aat-ai-tab,
    .hf-tab,
    .tabs a {
        min-height: 38px;
        padding: 8px 10px;
        font-size: .84rem;
    }

    .ait-site-header {
        gap: 11px;
        padding-inline: 11px;
    }

    .ait-site-header-logo-badge {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .ait-site-header-title {
        font-size: 17px;
    }

    .ait-site-header-mode {
        padding: 6px 9px;
        font-size: 11.5px;
    }
}

@media (max-width: 360px) {
    :root {
        --aat-page-gutter-mobile: 12px;
    }

    .aat-biz-tab,
    .aat-ai-tab,
    .hf-tab,
    .tabs a {
        padding-inline: 9px;
        font-size: .8rem;
    }

    th,
    td {
        padding: 10px 11px;
    }
}

/* Legacy Agent Command responsive grid compatibility */
@media(max-width:980px){.ui-grid-3,.ui-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.ui-grid-2,.ui-grid-3,.ui-grid-4{grid-template-columns:1fr}}


/* Voice Agent responsive */
@media (max-width:1100px){#ui-voice-agents .va-stats{grid-template-columns:repeat(3,minmax(0,1fr))}#ui-voice-agents .va-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
#ui-voice-agents.va-shell{gap:14px}
#ui-voice-agents .va-hero{padding:16px;display:grid;gap:14px}
#ui-voice-agents .va-hero-actions{width:100%}
#ui-voice-agents .va-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#ui-voice-agents .va-stat{padding:12px}
#ui-voice-agents .va-grid{grid-template-columns:1fr}
#ui-voice-agents .va-grid>.full,#ui-voice-agents .va-grid>.third,#ui-voice-agents .va-grid>.card{grid-column:1}
#ui-voice-agents .va-checks,#ui-voice-agents .va-setup-options,#ui-voice-agents .va-form-grid{grid-template-columns:1fr}
#ui-voice-agents .va-field-full{grid-column:1}
#ui-voice-agents .va-primary-tabs,#ui-voice-agents .va-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
#ui-voice-agents .va-primary-tab,#ui-voice-agents .va-tab{flex:0 0 auto;white-space:nowrap}
#ui-voice-agents .va-save-row>*{flex:1 1 auto}
#ui-voice-agents .va-switch-row{align-items:flex-start}
#ui-voice-agents .va-quickrow{grid-template-columns:1fr;gap:3px}
}
@media (max-width:430px){#ui-voice-agents .va-stats{grid-template-columns:1fr 1fr}#ui-voice-agents .va-stat-value{font-size:1rem}#ui-voice-agents .va-grid>article,#ui-voice-agents .va-card{padding:15px}}

/* Email Marketing */
@media (max-width:980px){.business-content .ui-mail-shell .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.business-content .ui-mail-shell .two-col{grid-template-columns:1fr}.business-content .ui-mail-hero{display:grid;grid-template-columns:1fr}.business-content .ui-mail-shell .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.business-content .ui-mail-shell{gap:var(--aat-space-3)}.business-content .ui-mail-hero{padding:14px}.business-content .ui-mail-tabs{margin-inline:-4px;padding-inline:4px}.business-content .ui-mail-shell .kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.business-content .ui-mail-shell .kpi{padding:12px}.business-content .ui-mail-shell .kpi strong{font-size:1.15rem}.business-content .ui-mail-shell .form-grid{grid-template-columns:1fr}.business-content .ui-mail-shell .form-grid .full{grid-column:auto}.business-content .ui-mail-shell .inline-form>*{flex:1 1 100%;min-width:0}.business-content .ui-mail-shell .card-head,.business-content .ui-mail-shell .card-body{padding:14px}.business-content .ui-mail-shell .detail-grid,.business-content .ui-mail-shell .mini-grid{grid-template-columns:1fr}.business-content .ui-mail-shell .dns-row{grid-template-columns:1fr;gap:4px}.business-content .ui-mail-shell .dns-row.header{display:none}.business-content .ui-mail-shell .quick-actions>a{flex:1 1 calc(50% - 8px);text-align:center;justify-content:center}}

/* CRM — responsive Business Command layout */
@media (max-width: 760px) {
    .business-content .crm > header {
        padding: 14px;
        flex-direction: column;
    }
    .crm-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .crm-nav .btn { flex: 0 0 auto; }
    .crm .actions { align-items: stretch; }
    .crm .actions > *, .crm .actions form { flex: 1 1 auto; min-width: 0; }
    .crm .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-lead-top, .crm-lead-detail-head { flex-direction: column; }
    .crm-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
    .crm .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .crm .cards > div, .crm-lead-list > .card, .crm-lead-detail { padding: 12px; }
}

/* CRM mobile toolbar cleanup */
@media (max-width: 640px) {
    .crm .crm-lead-search { grid-template-columns: 1fr; }
    .crm .crm-lead-search .btn { width: 100%; }
    .crm .crm-view-actions { align-items: stretch; }
    .crm .crm-view-actions > .btn,
    .crm .crm-view-actions > form { flex: 1 1 140px; }
    .crm .crm-view-actions > form .btn { width: 100%; }
    .crm-nav.aat-shared-nav,
    .crm-lead-filters.aat-shared-nav { padding: 8px; }
}


/* Native Toolbox Command V3 responsive compatibility */
@media (max-width:900px){
.vs-grid-2,.vs-grid-3,.ab-grid-2,.ab-grid-3,.fs-grid-2,.fs-grid-3,.ui-vd-builder,.ui-vd-provider-grid,.vs-connections{grid-template-columns:1fr}
.vs-stats,.ui-vd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
.vs-two,.vs-checks,.ui-vd-checks{grid-template-columns:1fr}
.vs-actions>.vs-btn,.ui-vd-actions>.ui-vd-btn{width:100%}
}

/* Funnel Builder responsive layout */
@media (max-width:1100px){
  .fs-builder-shell{grid-template-columns:190px minmax(0,1fr)}
  .fs-inspector{grid-column:1/-1;position:static;max-height:none}
  .fs-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .fs-builder-shell,.fs-grid-2,.fs-grid-3{grid-template-columns:1fr}
  .fs-library,.fs-inspector{position:static;max-height:none}
  .fs-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .fs-library h3{grid-column:1/-1}
  .fs-library .btn,.fs-step-link{margin:0}
  .fs-builder-toolbar>*{flex:1 1 calc(50% - 8px)}
  .fs-funnel-head,.fs-hero{flex-direction:column}
  .fs-flow{align-items:stretch}
  .fs-node{min-width:210px}
  .fs-inspector-grid,.fs-seo-grid{grid-template-columns:1fr}
}
@media (max-width:430px){
  .fs-metrics{grid-template-columns:1fr 1fr}
  .fs-library{grid-template-columns:1fr}
  .fs-builder-toolbar>*{flex:1 1 100%}
  .fs-canvas{padding:10px;min-height:380px}
  .fs-canvas-item{padding:12px}
}

/* Pricing savings selector */
@media (max-width: 760px) {
    .pricing-savings-banner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pricing-savings-card {
        padding: 16px;
        text-align: center;
    }

    .pricing-savings-badge {
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 520px) {
    .pricing-card-savings-selectors {
        grid-template-columns: 1fr;
    }
}


/* Shared Email Marketing responsive spacing */
@media (max-width:980px){
    .ui-mail-shell .kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:700px){
    .ui-mail-shell{
        gap:var(--aat-space-3,12px);
    }
    .ui-mail-shell .kpi-grid{
        grid-template-columns:1fr;
        gap:10px;
    }
    .ui-mail-shell .kpi{
        padding:14px;
    }
    .ui-mail-shell .kpi strong{
        font-size:1.2rem;
    }
    .ui-mail-shell .quick-actions{
        gap:10px;
    }
    .ui-mail-shell .quick-actions>a,
    .ui-mail-shell .quick-actions>button{
        flex:1 1 calc(50% - 10px);
        justify-content:center;
        text-align:center;
    }
}
@media (max-width:430px){
    .ui-mail-shell .quick-actions>a,
    .ui-mail-shell .quick-actions>button{
        flex:1 1 100%;
    }
}

/* Dashboard desktop-mode/narrow-viewport overrides.
   Loaded last so generic responsive grids do not collapse the dashboard
   into a single vertical column when a browser uses Desktop Site mode. */
@media (max-width: 760px) {
    .dashboard-page .dashboard-plan-card > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-plan-card > .grid > .stat-card:last-child {
        grid-column: 1 / -1;
    }

    .dashboard-page .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-card-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .dashboard-page .dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-plan-card > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-ai-section .dashboard-card-grid-3 {
        grid-template-columns: 1fr;
    }

    .dashboard-page .dashboard-quick-section .dashboard-card-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}