/* Mobile-first responsive layer — Task Management System */
/* Breakpoint: Bootstrap md = 768px */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

.wrapper,
.main-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* —— App cards (mobile lists) —— */
.mobile-card-list {
    width: 100%;
}

.app-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    box-shadow: var(--shadow-sm);
}

.app-card-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.app-card-dl {
    display: grid;
    grid-template-columns: minmax(5rem, 38%) 1fr;
    gap: 0.25rem 0.75rem;
    font-size: 0.875rem;
    margin: 0;
}

.app-card-dl dt {
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

.app-card-dl dd {
    margin: 0;
    word-break: break-word;
}

.app-card-actions .btn {
    width: 100%;
}

/* —— Mobile (<768px) —— */
@media (max-width: 767.98px) {
    .content-area {
        padding: 0.65rem !important;
    }

    .filter-bar {
        padding: 0.65rem !important;
        margin-bottom: 0.75rem !important;
    }

    .card-header-app.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .card-header-app.d-flex .btn {
        width: 100%;
    }


    .card-header-app .card-title {
        font-size: 1rem;
    }

    .card-body.p-0 + .mobile-card-list,
    .card-body > .mobile-card-list {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .page-title {
        font-size: 1.1rem !important;
    }

    .page-subtitle {
        display: none;
    }

    .header-bar {
        padding: 0.35rem 0 !important;
        gap: 0.35rem !important;
    }

    .header-user-chip {
        display: none !important;
    }

    /* Dashboard stat cards — full width stack */
    .dashboard-stats-row > [class*="col"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .stat-card .card-body {
        padding: 0.75rem 1rem !important;
    }

    .stat-card .stat-value {
        font-size: 1.35rem;
    }

    /* Full-width buttons */
    .modal-footer {
        flex-direction: column-reverse;
        gap: 0.5rem;
        padding: 0.75rem !important;
    }

    .modal-footer .btn,
    .modal-footer a.btn {
        width: 100%;
        margin: 0 !important;
    }

    .card-header-app .btn,
    .toolbar-actions .btn,
    .toolbar-actions form,
    .filter-bar .btn,
    .dashboard-search-form .btn {
        width: 100%;
    }

    .toolbar-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .toolbar-actions form.d-flex {
        max-width: none !important;
        width: 100%;
    }

    .input-group {
        flex-wrap: nowrap;
    }

    .dashboard-search-form .input-group {
        flex-direction: column;
    }

    .dashboard-search-form .input-group > * {
        width: 100%;
        border-radius: var(--radius) !important;
        margin: 0 0 0.35rem 0 !important;
    }

    /* Forms — larger touch targets */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom */
    }

    .form-control-sm,
    .form-select-sm {
        min-height: 44px;
        font-size: 16px;
    }

    .btn {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

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

    .touch-target {
        min-height: 44px;
    }

    /* Modals — native app feel */
    .modal-fullscreen-sm-down .modal-body {
        padding: 0.75rem;
    }

    .modal-fullscreen-sm-down .modal-header {
        padding: 0.75rem 1rem;
    }

    .task-modal .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Prevent horizontal scroll from wide content */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .task-meta-panel {
        max-height: none;
    }

    .status-log-table-mobile .app-card {
        margin-bottom: 0.5rem;
    }

    .app-footer {
        font-size: 0.75rem;
        padding: 0.75rem !important;
    }

    .list-group-item {
        padding: 0.75rem 1rem;
    }
}

[data-bs-theme="dark"] .app-card {
    background: var(--surface);
    border-color: var(--border);
}

.customer-picker-display {
    background: #f8fafc;
    min-height: 3.5rem;
}

.customer-pick-list {
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

[data-bs-theme="dark"] .customer-picker-display {
    background: #0f172a;
}

[data-bs-theme="dark"] .duration-card {
    background: var(--surface);
    border-color: var(--border);
}

@media (max-width: 430px) {
    .app-card {
        padding: 0.75rem;
    }

    .app-card-dl {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .app-card-dl dt {
        font-size: 0.75rem;
        margin-top: 0.35rem;
    }

    .content-area {
        padding: 0.5rem !important;
    }
}