/* JenAir AI Marketing & Sales — screen-size rules only (tokens and components live in sales.css) */

@media (max-width: 1180px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split { grid-template-columns: minmax(0, 1fr) 320px; }
    .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    /* Sidebar becomes an off-canvas drawer */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 24px 0 48px -12px rgba(0, 0, 0, 0.7);
    }
    body.nav-open .sidebar { transform: none; }
    body.nav-open .scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(5, 2, 12, 0.6);
        backdrop-filter: blur(2px);
    }
    .only-desktop { display: none !important; }

    .topbar { padding: 0 1rem; gap: 0.5rem; }
    .content { padding: 1.2rem 1rem 2.5rem; }

    .split, .split-wide, .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }

    .auth { grid-template-columns: 1fr; }
    .auth-art { padding: 1.75rem 1.5rem 1.5rem; border-right: 0; border-bottom: 1px solid var(--border); }
    .auth-art h1 { font-size: 1.7rem; }
    .auth-art .lede, .auth-foot { display: none; }
    .flow { margin-top: 1rem; }

    .hero-stats { grid-template-columns: repeat(2, auto); }
}

@media (min-width: 981px) {
    .only-mobile { display: none !important; }
}

@media (max-width: 720px) {
    body { font-size: 14px; }
    h1 { font-size: 1.35rem; }

    .user-chip-name, .topbar .btn-label { display: none; }
    .user-chip { padding: 0.2rem; }

    .kpis { gap: 0.7rem; }
    .kpi { padding: 0.9rem 0.95rem; }
    .kpi-value { font-size: 1.35rem; }
    .kpi-label { font-size: 0.68rem; }

    .grid-3, .checks, .facts-grid { grid-template-columns: 1fr; }
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }

    .card-head, .card-body, .form-section, .form-actions, .list-item { padding-left: 1rem; padding-right: 1rem; }
    .tl-item { padding-left: 1rem; padding-right: 1rem; }
    .tl-item::before { left: calc(1rem + 16px); }
    .form-actions .btn { flex: 1; }

    .page-head { align-items: stretch; }
    .page-head .actions { width: 100%; }
    .page-head .actions .btn { flex: 1; }

    .toolbar > * { flex: 1 1 140px; }
    .toolbar .select, .toolbar .input { min-width: 0; width: 100%; }
    .seg { width: 100%; }
    .seg a { flex: 1; justify-content: center; padding: 0 0.5rem; }

    .profile-head { flex-wrap: wrap; padding: 1.1rem; }
    .profile-actions { margin-left: 0; width: 100%; justify-content: flex-start; }

    /* Tables turn into stacked cards */
    .table.stackable thead { display: none; }
    .table.stackable, .table.stackable tbody, .table.stackable tr, .table.stackable td { display: block; width: 100%; }
    .table.stackable tr { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
    .table.stackable tbody tr:last-child { border-bottom: 0; }
    .table.stackable td { padding: 0.15rem 0; border: 0; }
    .table.stackable td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 96px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--faint);
    }
    .table.stackable td.actions { text-align: left; padding-top: 0.5rem; }
    .table.stackable td.right { text-align: left; }
    .table.stackable td .t-sub { display: inline; margin-left: 0.35rem; }
    .table.stackable td:first-child .t-sub { display: block; margin-left: 0; }

    .list-item { align-items: flex-start; flex-wrap: wrap; }
    .list-item .grow { flex-basis: 60%; }
    .list-item .grow > a, .list-item .grow > strong, .list-item .meta { white-space: normal; }
    .table.stackable td.hide-sm { display: none; }

    /* Board: one column per screen, swipe sideways; a "Move to" picker replaces drag */
    .board { grid-auto-columns: 86%; }
    .col { max-height: none; }
    .kcard { cursor: default; }
    .kcard-move { display: block; }

    .bar-row { grid-template-columns: 88px minmax(0, 1fr) 32px; }

    .hours { gap: 2px; height: 110px; padding: 0.5rem 0.4rem 0; }
    .hour-label { font-size: 0.55rem; }
    .hour:nth-child(odd) .hour-label { visibility: hidden; }
}

@media (max-width: 420px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .search { padding: 0 0.7rem; }
}