/*
|--------------------------------------------------------------------------
| SAANVI Finance Cloud
| Responsive Styles
|--------------------------------------------------------------------------
| Tabler / Bootstrap handle the core responsive grid.
| This file contains only SAANVI-specific responsive adjustments.
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {

    /*
    |--------------------------------------------------------------------------
    | Keep content comfortable on large displays
    |--------------------------------------------------------------------------
    */

    .page-body .container-xl,
    .page-header .container-xl,
    .app-header .container-xl {
        max-width: 1600px;
    }

}


/* ==========================================================================
   DESKTOP / SMALL LAPTOP
   ========================================================================== */

@media (max-width: 1199.98px) {

    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    .app-company-name {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /*
    |--------------------------------------------------------------------------
    | Dashboard
    |--------------------------------------------------------------------------
    */

    .dashboard-kpi-value {
        font-size: 1.5rem;
    }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 991.98px) {

    /*
    |--------------------------------------------------------------------------
    | Page
    |--------------------------------------------------------------------------
    */

    .page-header {
        margin-bottom: 1rem;
    }

    .page-body {
        margin-top: 1rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Menubar
    |--------------------------------------------------------------------------
    */

    .app-company-name {
        max-width: 180px;
    }


    /*
    |--------------------------------------------------------------------------
    | Dashboard
    |--------------------------------------------------------------------------
    */

    .dashboard-welcome {
        margin-bottom: 1rem;
    }

    .dashboard-kpi-card .card-body {
        padding: 1rem;
    }

    .dashboard-quick-actions .card-body {
        padding: 1rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Login
    |--------------------------------------------------------------------------
    */

    .login-page .login-left {
        display: none !important;
    }

    .login-page .login-right {
        min-height: auto;
    }

    .login-page .login-card {
        margin: 20px;
    }

}


/* ==========================================================================
   MOBILE / TABLET PORTRAIT
   ========================================================================== */

@media (max-width: 767.98px) {

    /*
    |--------------------------------------------------------------------------
    | Page Header
    |--------------------------------------------------------------------------
    */

    .page-header .row {
        row-gap: .75rem;
    }

    .page-header .page-title {
        font-size: 1.25rem;
    }

    .page-header .page-pretitle {
        font-size: .7rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Page Body
    |--------------------------------------------------------------------------
    */

    .page-body {
        margin-top: .75rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Cards
    |--------------------------------------------------------------------------
    */

    .card-header {
        min-height: 52px;
    }


    /*
    |--------------------------------------------------------------------------
    | Dashboard Welcome
    |--------------------------------------------------------------------------
    */

    .dashboard-welcome h2 {
        font-size: 1.2rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Dashboard KPI
    |--------------------------------------------------------------------------
    */

    .dashboard-kpi-value {
        font-size: 1.4rem;
    }

    .dashboard-kpi-description {
        font-size: .75rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Quick Actions
    |--------------------------------------------------------------------------
    */

    .dashboard-action {
        min-height: 60px;
        padding-left: .75rem;
        padding-right: .75rem;
        font-size: .8125rem;
    }

    .dashboard-action i {
        font-size: 1.1rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Tables
    |--------------------------------------------------------------------------
    */

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }


    /*
    |--------------------------------------------------------------------------
    | Dropdown
    |--------------------------------------------------------------------------
    */

    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 575.98px) {

    /*
    |--------------------------------------------------------------------------
    | Containers
    |--------------------------------------------------------------------------
    */

    .page-header .container-xl,
    .page-body .container-xl,
    .footer .container-xl {
        padding-left: 12px;
        padding-right: 12px;
    }


    /*
    |--------------------------------------------------------------------------
    | Page Header
    |--------------------------------------------------------------------------
    */

    .page-header {
        margin-bottom: .75rem;
    }

    .page-header .page-title {
        font-size: 1.15rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Dashboard Welcome
    |--------------------------------------------------------------------------
    */

    .dashboard-welcome {
        margin-bottom: .875rem;
    }

    .dashboard-welcome h2 {
        font-size: 1.1rem;
    }


    /*
    |--------------------------------------------------------------------------
    | KPI Cards
    |--------------------------------------------------------------------------
    */

    .dashboard-kpi-card .card-body {
        padding: .875rem;
    }

    .dashboard-kpi-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .dashboard-kpi-icon i {
        font-size: 1.2rem;
    }

    .dashboard-kpi-value {
        font-size: 1.3rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Quick Actions
    |--------------------------------------------------------------------------
    */

    .dashboard-quick-actions .card-body {
        padding: .875rem;
    }

    .dashboard-action {
        min-height: 56px;
        font-size: .75rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Dashboard Widgets
    |--------------------------------------------------------------------------
    */

    .dashboard-widget .empty {
        padding: 1.5rem .75rem;
    }

    .dashboard-widget .empty-img i {
        font-size: 2rem !important;
    }


    /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */

    .form-control,
    .form-select,
    .btn {
        font-size: .875rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Modals
    |--------------------------------------------------------------------------
    */

    .modal-dialog:not(.modal-fullscreen) {
        margin: .75rem;
    }


    /*
    |--------------------------------------------------------------------------
    | Login
    |--------------------------------------------------------------------------
    */

    .login-page .container-tight {
        width: 100%;
    }

    .login-page .login-card {
        margin: 12px;
    }

    .login-page .login-title {
        font-size: 24px;
    }

    .login-page .login-right .p-5 {
        padding: 1.5rem !important;
    }

    .login-page .login-logo {
        height: 60px;
    }


    /*
    |--------------------------------------------------------------------------
    | Footer
    |--------------------------------------------------------------------------
    */

    .footer {
        text-align: center;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 399.98px) {

    .page-header .container-xl,
    .page-body .container-xl,
    .footer .container-xl {
        padding-left: 10px;
        padding-right: 10px;
    }

    .dashboard-action {
        min-height: 52px;
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .dashboard-kpi-card .subheader {
        font-size: .6875rem;
    }

}


/* ==========================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (hover: none) {

    /*
    |--------------------------------------------------------------------------
    | Disable desktop hover movement on touch devices
    |--------------------------------------------------------------------------
    */

    .dashboard-kpi-card:hover {
        transform: none;
    }

}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

    /*
    |--------------------------------------------------------------------------
    | Remove unnecessary UI
    |--------------------------------------------------------------------------
    */

    .navbar-vertical,
    .navbar-toggler,
    .app-header,
    .footer,
    .btn,
    .dropdown {
        display: none !important;
    }

    .page,
    .page-wrapper,
    .page-body {
        background: #ffffff !important;
    }

    .card {
        box-shadow: none !important;
    }

}