/* =============================================================================
   GLOBAL RESPONSIVE DESIGN SYSTEM
   Large Screen Adaptive Layout for All Pages
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Base Container Responsive Scaling
   ----------------------------------------------------------------------------- */

/* Laptop (13-15 inch, typically 1280-1440px) */
@media (min-width: 1280px) and (max-width: 1439px) {
    .container,
    .container-fluid,
    .slds-container,
    .slds-container-lg,
    .slds-container-xl {
        max-width: 95%;
    }
}

/* Desktop / Large Laptop (15-17 inch, 1440-1680px) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .slds-container {
        max-width: 1400px;
    }

    .slds-container-lg {
        max-width: 1500px;
    }

    .slds-container-xl {
        max-width: 1600px;
    }
}

/* External Monitor / Large Desktop (1680-1920px) */
@media (min-width: 1680px) {
    .container {
        max-width: 1600px;
    }

    .slds-container {
        max-width: 1600px;
    }

    .slds-container-lg {
        max-width: 1700px;
    }

    .slds-container-xl {
        max-width: 1800px;
    }

    /* Scale up typography slightly */
    body {
        font-size: 15px;
    }

    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    h3 { font-size: 1.6rem; }
}

/* Full HD External Monitor (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }

    .slds-container {
        max-width: 1800px;
    }

    .slds-container-lg {
        max-width: 95%;
    }

    .slds-container-xl {
        max-width: 95%;
    }

    body {
        font-size: 16px;
    }

    h1 { font-size: 3rem; }
    h2 { font-size: 2.4rem; }
    h3 { font-size: 1.75rem; }

    /* Increase spacing */
    .container,
    .slds-container,
    .slds-container-lg,
    .slds-container-xl {
        padding-left: 32px;
        padding-right: 32px;
    }

    /* Larger form controls */
    .form-control {
        padding: 10px 14px;
        font-size: 15px;
    }

    .btn {
        padding: 10px 20px;
    }

    .btn-lg {
        padding: 14px 28px;
        font-size: 18px;
    }
}

/* QHD / 2K Monitor (2560px+) */
@media (min-width: 2560px) {
    .container {
        max-width: 2200px;
    }

    .slds-container {
        max-width: 2200px;
    }

    .slds-container-lg {
        max-width: 95%;
    }

    .slds-container-xl {
        max-width: 95%;
    }

    body {
        font-size: 17px;
        line-height: 1.6;
    }

    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.8rem; }
    h3 { font-size: 2rem; }
    h4 { font-size: 1.5rem; }

    .container,
    .slds-container,
    .slds-container-lg,
    .slds-container-xl {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* Larger form controls */
    .form-control {
        padding: 12px 16px;
        font-size: 16px;
        height: auto;
    }

    .btn {
        padding: 12px 24px;
        font-size: 16px;
    }

    .btn-lg {
        padding: 16px 32px;
        font-size: 20px;
    }

    /* Card-like elements */
    .panel {
        border-radius: 12px;
    }

    .panel-heading {
        padding: 16px 24px;
    }

    .panel-body {
        padding: 24px;
    }

    /* Tables */
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 14px 16px;
    }

    /* Alerts */
    .alert {
        padding: 18px 24px;
        border-radius: 8px;
    }

    /* Modal */
    .modal-dialog {
        width: 700px;
    }

    .modal-lg {
        width: 1000px;
    }
}

/* 4K Monitor (3840px+) */
@media (min-width: 3840px) {
    .container {
        max-width: 3000px;
    }

    .slds-container {
        max-width: 3000px;
    }

    .slds-container-lg {
        max-width: 95%;
    }

    .slds-container-xl {
        max-width: 95%;
    }

    body {
        font-size: 20px;
        line-height: 1.7;
    }

    h1 { font-size: 4.5rem; }
    h2 { font-size: 3.5rem; }
    h3 { font-size: 2.5rem; }
    h4 { font-size: 2rem; }

    .container,
    .slds-container,
    .slds-container-lg,
    .slds-container-xl {
        padding-left: 60px;
        padding-right: 60px;
    }

    /* Larger form controls */
    .form-control {
        padding: 16px 20px;
        font-size: 18px;
        border-radius: 8px;
    }

    .btn {
        padding: 16px 32px;
        font-size: 18px;
        border-radius: 8px;
    }

    .btn-lg {
        padding: 20px 40px;
        font-size: 22px;
    }

    /* Tables */
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 18px 20px;
        font-size: 18px;
    }

    /* Modal */
    .modal-dialog {
        width: 900px;
    }

    .modal-lg {
        width: 1400px;
    }

    .modal-content {
        border-radius: 16px;
    }

    .modal-header {
        padding: 24px 32px;
    }

    .modal-body {
        padding: 32px;
    }

    .modal-footer {
        padding: 24px 32px;
    }
}

/* -----------------------------------------------------------------------------
   Grid System Enhancements for Large Screens
   ----------------------------------------------------------------------------- */

/* Make grids more flexible on large screens */
@media (min-width: 1920px) {
    .row {
        margin-left: -20px;
        margin-right: -20px;
    }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 2560px) {
    .row {
        margin-left: -24px;
        margin-right: -24px;
    }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* -----------------------------------------------------------------------------
   Navigation Enhancements
   ----------------------------------------------------------------------------- */

@media (min-width: 1680px) {
    .navbar {
        padding: 12px 0;
    }

    .navbar-brand {
        font-size: 22px;
    }

    .navbar-nav > li > a {
        padding: 16px 18px;
        font-size: 15px;
    }
}

@media (min-width: 1920px) {
    .navbar {
        padding: 14px 0;
    }

    .navbar-brand {
        font-size: 24px;
    }

    .navbar-nav > li > a {
        padding: 18px 20px;
        font-size: 16px;
    }
}

@media (min-width: 2560px) {
    .navbar {
        padding: 18px 0;
    }

    .navbar-brand {
        font-size: 28px;
    }

    .navbar-nav > li > a {
        padding: 20px 24px;
        font-size: 18px;
    }
}

/* -----------------------------------------------------------------------------
   Footer Enhancements
   ----------------------------------------------------------------------------- */

@media (min-width: 1680px) {
    .footer, footer {
        padding: 32px 0;
    }
}

@media (min-width: 1920px) {
    .footer, footer {
        padding: 40px 0;
    }
}

@media (min-width: 2560px) {
    .footer, footer {
        padding: 56px 0;
        font-size: 16px;
    }
}

/* -----------------------------------------------------------------------------
   Utility Classes for Large Screens
   ----------------------------------------------------------------------------- */

/* Extra large padding/margin utilities */
@media (min-width: 1920px) {
    .p-xl-4 { padding: 2rem !important; }
    .p-xl-5 { padding: 3rem !important; }
    .m-xl-4 { margin: 2rem !important; }
    .m-xl-5 { margin: 3rem !important; }
}

@media (min-width: 2560px) {
    .p-xxl-4 { padding: 2.5rem !important; }
    .p-xxl-5 { padding: 4rem !important; }
    .m-xxl-4 { margin: 2.5rem !important; }
    .m-xxl-5 { margin: 4rem !important; }
}

/* -----------------------------------------------------------------------------
   Hero Section & SLDS Components for Large Screens
   ----------------------------------------------------------------------------- */

/* Make hero content use full width on large screens */
@media (min-width: 1920px) {
    .slds-hero .slds-container-lg,
    .slds-hero .slds-hero-content {
        max-width: 95%;
    }

    .slds-hero {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 2560px) {
    .slds-hero .slds-container-lg,
    .slds-hero .slds-hero-content {
        max-width: 95%;
    }

    .slds-hero {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (min-width: 3840px) {
    .slds-hero .slds-container-lg,
    .slds-hero .slds-hero-content {
        max-width: 95%;
    }

    .slds-hero {
        padding-left: 64px;
        padding-right: 64px;
    }
}