/* ===================================
   RESPONSIVE DESIGN STYLES
   Mobile-First Approach
   =================================== */

/* Base styles */
.custom_menu_power {
    background-color: var(--color-primary-menu);
}

.responsive-mobile {
    display: none;
}

/* ===================================
   MOBILE STYLES (up to 767px)
   =================================== */
@media (max-width: 767.98px) {

    /* Mobile visibility toggles */
    .responsive-pc {
        display: none;
    }

    .responsive-mobile {
        display: block;
    }

    /* Header and navigation */
    .container-header {
        padding: 0 !important;
    }

    .navbar-nav {
        padding: 5px;
    }

    .logo-header {
        position: absolute;
        top: 5px;
        left: 75px;
    }

    .navbar-toggler {
        position: absolute;
        left: 10px;
        top: 15px;
        border: 1px solid #fff;
    }

    /* Menu styles */
    .custom_menu_mobile {
        background-color: var(--color-primary-menu);
        margin-top: 76px;
    }

    .custom_menu_power .custom_menu,
    .custom_menu_power .custom_menu a {
        display: flex !important;
        justify-content: flex-start !important;
    }

    .custom_menu_mobile .nav-link,
    #navbarTogglerDemo01 .nav-item {
        justify-content: flex-start !important;
        padding: 5px !important;
        line-height: 20px;
    }

    /* Form styles */
    .responsive-mobile .form-item {
        display: inline !important;
    }

    .responsive-mobile .form-inline-header.form-inline {
        float: left;
        border-top: 1px solid #fff;
        padding-top: 7px;
        width: 100%;
        display: block !important;
    }

    .responsive-mobile .form-inline-header.form-inline .d-flex,
    .form-inline-header.form-inline button {
        margin-bottom: 7px;
    }

    .responsive-mobile .form-inline-header.form-inline .d-flex {
        flex-direction: column;
        align-items: flex-start;
        padding: 5px;
    }

    .form-inline-header.form-inline button {
        margin: 0 10px 0 7px;
    }

    .form-login {
        display: flex !important;
        margin-bottom: 5px;
    }

    .form-login .form-item input {
        width: auto;
    }

    .form-inline-header-login {
        border-top: 1px solid;
    }

    .form-inline-header-login .user,
    .form-inline-header-login li a {
        height: 35px;
        margin: 8px 0;
    }
}

/* ===================================
   TABLET PORTRAIT (768px - 993px)
   =================================== */
@media (min-width: 768px) and (max-width: 993.98px) {

    /* Shared tablet/desktop styles */
    .container-header {
        padding: 0 !important;
    }

    .navbar-nav {
        padding: 5px;
    }

    .logo-header {
        position: absolute;
        top: 5px;
        left: 75px;
    }

    .navbar-toggler {
        position: absolute;
        left: 10px;
        top: 15px;
        border: 1px solid #fff;
    }

    .custom_menu_mobile {
        background-color: var(--color-primary-menu);
        margin-top: 76px;
    }

    .custom_menu_power .custom_menu,
    .custom_menu_power .custom_menu a {
        display: flex !important;
        justify-content: flex-start !important;
    }

    .custom_menu_mobile .nav-link,
    #navbarTogglerDemo01 .nav-item {
        justify-content: flex-start !important;
        padding: 5px !important;
        line-height: 20px;
    }

    /* Form positioning for tablet */
    .form-inline-header-login {
        position: absolute;
        right: 0;
        top: 0;
    }

    .form-inline-header.form-inline {
        position: absolute;
        right: 5px;
        top: 0;
    }

    /* Tablet-specific form styles */
    .form-login div label {
        min-width: 80px;
    }

    .form-login .form-item input {
        width: 140px;
    }
}

/* ===================================
   TABLET LANDSCAPE / SMALL DESKTOP (992px - 1199px)
   =================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Inherits tablet styles with same layout structure */
    .container-header {
        padding: 0 !important;
    }

    .navbar-nav {
        padding: 5px;
    }

    .logo-header {
        position: absolute;
        top: 5px;
        left: 75px;
    }

    .navbar-toggler {
        position: absolute;
        left: 10px;
        top: 15px;
        border: 1px solid #fff;
    }

    .custom_menu_mobile {
        background-color: var(--color-primary-menu);
        margin-top: 76px;
    }

    .custom_menu_power .custom_menu,
    .custom_menu_power .custom_menu a {
        display: flex !important;
        justify-content: flex-start !important;
    }

    .custom_menu_mobile .nav-link,
    #navbarTogglerDemo01 .nav-item {
        justify-content: flex-start !important;
        padding: 5px !important;
        line-height: 20px;
    }

    .form-inline-header-login {
        position: absolute;
        right: 0;
        top: 0;
    }

    .form-inline-header.form-inline {
        position: absolute;
        right: 5px;
        top: 0;
    }
}

/* ===================================
   DESKTOP (1200px - 1440px)
   =================================== */
@media (min-width: 1200px) and (max-width: 1440.98px) {
    .container-header {
        padding: 0 10px;
    }

    #navbarTogglerDemo01 .nav-item {
        padding: 0;
    }

    .nav-link {
        font-size: 14px;
    }

    .form-inline-header-login .user,
    .form-inline-header-login li a {
        padding: 0 5px;
    }
}

/* ===================================
   LARGE DESKTOP / 4K (1920px+)
   =================================== */
@media (min-width: 1920px) and (max-width: 2560px) {

    /* Full HD Display optimizations */
    table.scroll.loan-detail th,
    table.scroll.loan-detail td,
    table.scroll.loan-detail tr,
    table.scroll.loan-detail thead,
    table.scroll.loan-detail tbody {
        display: revert;
    }
}