/* =============================================
   RESPONSIVE BREAKPOINTS - Full Mobile Support
   ============================================= */

/* ---- TABLET: 1200px ---- */
@media (max-width: 1200px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- TABLET: 1024px ---- */
@media (max-width: 1024px) {
    /* Sidebar becomes off-canvas */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }

    .main-area {
        margin-left: 0;
    }

    .topbar__toggle {
        display: flex;
    }

    .topbar__search input {
        width: 200px;
    }

    .topbar__search input:focus {
        width: 240px;
    }

    .content {
        padding: var(--space-6);
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* 2-1 grids stack */
    .grid--2-1 { grid-template-columns: 1fr; }
}

/* ---- TABLET SMALL / LARGE PHONE: 768px ---- */
@media (max-width: 768px) {
    /* Grids become single column */
    .grid--2, .grid--3, .grid--4 {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Page headers stack */
    .content__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .content__header-actions {
        flex-wrap: wrap;
    }

    /* Topbar simplification */
    .topbar {
        padding: 0 var(--space-4);
    }

    .topbar__search {
        display: none;
    }

    .topbar__user-info {
        display: none;
    }

    .topbar__breadcrumb span:not(:last-child) {
        display: none;
    }

    /* Tables: horizontal scroll wrapper */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table th,
    .data-table td {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: var(--fs-sm);
    }

    /* Detail lists stack vertically */
    .detail-list__item {
        flex-direction: column;
        gap: var(--space-1);
    }

    .detail-list__label {
        min-width: 0;
    }

    .detail-list__value {
        text-align: left;
    }

    /* Card headers wrap */
    .card__header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    /* Settings nav: horizontal scroll */
    .settings-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .settings-nav::-webkit-scrollbar {
        display: none;
    }

    .settings-nav__item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Form actions wrap */
    .form-actions {
        flex-wrap: wrap;
    }

    .form-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Search inline filters stack */
    .search-inline {
        width: 100%;
    }

    .form-input--filter,
    .form-input--search {
        width: 100%;
        min-width: 0;
    }

    /* Breadcrumbs scroll */
    .breadcrumb {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    /* Campaign cards */
    .campaign-card {
        flex-wrap: wrap;
    }

    /* Template grid */
    .template-grid {
        grid-template-columns: 1fr;
    }

    /* Toast less wide */
    .toast {
        min-width: 0;
        max-width: calc(100vw - 2rem);
    }

    .toast-container {
        left: var(--space-4);
        right: var(--space-4);
    }

    /* Page header titles */
    .page-header__title,
    .content__header h1 {
        font-size: var(--fs-xl);
    }
}

/* ---- PHONE: 480px ---- */
@media (max-width: 480px) {
    .content {
        padding: var(--space-3);
    }

    /* Cards */
    .card__body {
        padding: var(--space-4);
    }

    .card__header {
        padding: var(--space-4);
    }

    .card__footer {
        padding: var(--space-3) var(--space-4);
    }

    /* Stat cards */
    .stat-card {
        padding: var(--space-4);
    }

    .stat-card__icon {
        width: 40px;
        height: 40px;
    }

    .stat-card__icon svg {
        width: 20px;
        height: 20px;
    }

    .stat-card__value {
        font-size: var(--fs-xl);
    }

    /* Stat minis */
    .stat-mini {
        padding: var(--space-3) var(--space-4);
    }

    .stat-mini__value {
        font-size: var(--fs-md);
    }

    /* Modals */
    .modal {
        margin: var(--space-3);
        max-height: calc(100vh - 1.5rem);
        border-radius: var(--radius-lg);
    }

    .modal__header,
    .modal__body,
    .modal__footer {
        padding: var(--space-4);
    }

    /* Alerts */
    .alert {
        padding: var(--space-3) var(--space-4);
        font-size: var(--fs-sm);
    }

    /* Buttons */
    .btn--lg {
        padding: 12px 20px;
        font-size: var(--fs-base);
    }

    /* Form inputs bigger touch targets - 16px prevents iOS zoom */
    .form-input {
        padding: 12px 14px;
        font-size: 16px;
    }

    select.form-input {
        font-size: 16px;
    }

    textarea.form-input {
        font-size: 16px;
    }

    /* Dashboard stats secondary grid */
    .dashboard-stats-secondary {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    /* Attention grid */
    .attention-grid {
        grid-template-columns: 1fr;
    }

    /* Activity items */
    .activity-item {
        padding: var(--space-3) var(--space-4);
    }

    /* Compliance summary */
    .compliance-summary__numbers {
        font-size: var(--fs-2xl);
    }

    /* Empty state */
    .empty-state {
        padding: var(--space-10) var(--space-4);
    }

    /* Topbar */
    .topbar {
        padding: 0 var(--space-3);
        height: 56px;
    }

    .topbar__left {
        gap: var(--space-2);
    }

    /* Wizard steps scroll */
    .wizard-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Table actions */
    .table-actions {
        flex-wrap: nowrap;
    }

    .table-actions .btn {
        padding: 4px 8px;
        font-size: var(--fs-xs);
    }

    /* Page header description */
    .page-header__desc {
        font-size: var(--fs-sm);
    }

    /* Search inline stacks */
    .search-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .search-inline .form-input {
        width: 100%;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
    }

    .pagination__item {
        min-width: 32px;
        height: 32px;
        font-size: var(--fs-xs);
    }

    /* Tag list */
    .tag {
        font-size: var(--fs-xs);
        padding: var(--space-1) var(--space-2);
    }

    /* Recipient list */
    .recipient-list {
        max-height: 300px;
    }
}

/* ---- VERY SMALL PHONE: 360px ---- */
@media (max-width: 360px) {
    .content {
        padding: var(--space-2);
    }

    .card__body {
        padding: var(--space-3);
    }

    .stat-card {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .stat-card__value {
        font-size: var(--fs-lg);
    }

    .dashboard-stats-secondary {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .stat-mini {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }

    .topbar__avatar {
        width: 32px;
        height: 32px;
        font-size: var(--fs-xs);
    }
}

/* ---- SAFE AREA (notch phones) ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .content {
        padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
    }
}

/* ---- TOUCH DEVICE OPTIMIZATIONS ---- */
@media (hover: none) and (pointer: coarse) {
    /* Bigger touch targets */
    .sidebar__link {
        padding: var(--space-4) var(--space-6);
    }

    .btn {
        min-height: 44px;
    }

    .btn--sm {
        min-height: 36px;
    }

    .form-check input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    .pagination__item {
        min-width: 40px;
        height: 40px;
    }

    /* Remove hover effects on touch */
    .stat-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    .data-table tbody tr:hover {
        background: transparent;
    }

    /* Recipient items bigger */
    .recipient-item {
        padding: var(--space-3) var(--space-2);
    }
}

/* ---- LANDSCAPE PHONE ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .modal {
        max-height: 95vh;
    }

    .auth-card {
        padding: var(--space-6);
    }

    .setup-cta {
        padding: var(--space-8) var(--space-6);
    }
}

/* ---- PRINT ---- */
@media print {
    .sidebar,
    .topbar,
    .sidebar-overlay,
    .no-print {
        display: none !important;
    }

    .main-area {
        margin-left: 0 !important;
    }

    .content {
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
}