/* Container Standardization for Desktop Viewports
 * Applies consistent 1000px width and 24px card padding
 * across all templates for desktop devices only.
 * Mobile has 360px max-width.
 */

/* Mobile Container Standardization */
@media (max-width: 768px) {
    /* Mobile container - remove default padding */
    main .container,
    .dashboard-container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Profile template mobile width */
    .profile-content-wrapper {
        max-width: 360px !important;
        width: 360px !important;
    }

    /* Ensure cards and their containers are exactly 360px */
    .card,
    .mb-4 {
        max-width: 360px !important;
        width: 360px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Mobile card padding and text wrapping */
    .card-body {
        padding: 1.25rem !important;  /* 20px for mobile */
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Ensure all text content wraps properly */
    .card-body p,
    .card-body h1,
    .card-body h2,
    .card-body h3,
    .card-body h4,
    .card-body h5,
    .card-body h6,
    .card-body div,
    .card-body span,
    .card-body small,
    .card-body strong {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* Ensure lead paragraphs also wrap */
    .card-body .lead {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
}

/* Desktop Container Standardization */
@media (min-width: 769px) {
    /* Navbar horizontal padding for desktop */
    .navbar .container-fluid {
        padding-left: 150px !important;
        padding-right: 150px !important;
    }

    /* Standard container width across all templates (excludes navbar) */
    main .container,
    .dashboard-container {
        max-width: 1000px !important;
    }

    /* Chart overview containers */
    .chart-overview-container {
        max-width: 100% !important;
    }

    /* Standardized card body padding */
    .card-body {
        padding: 1.5rem !important;  /* 24px all sides */
    }

    /* Profile template: Override Bootstrap grid width */
    .profile-content-wrapper {
        max-width: 1000px !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        margin: 0 auto;
    }
}