/*=====================================================
  RESPONSIVE.CSS
  Tradeskillz Journal System
=====================================================*/


/*=====================================================
  ≤1600px
=====================================================*/

@media (max-width:1600px){

    .wrapper,
    .dashboard-container{

        max-width:1400px;

    }
    

}


/*=====================================================
  ≤1400px
=====================================================*/

@media (max-width:1400px){

    .wrapper,
    .dashboard-container{

        padding:0 20px;

    }

    .summary-cards{

        grid-template-columns:repeat(auto-fit,minmax(190px,1fr));

    }

    .dashboard-cards-7{

        grid-template-columns:repeat(4,1fr);

    }

}


/*=====================================================
  ≤1200px
=====================================================*/

@media (max-width:1200px){

    .trade-form{

        grid-template-columns:repeat(2,1fr);

    }

    .journal-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .modal-group{

        grid-template-columns:repeat(2,1fr);

    }

    .summary-cards{

        grid-template-columns:repeat(3,1fr);

    }

    .dashboard-cards-7,
    .dashboard-cards-5{

        grid-template-columns:repeat(3,1fr);

    }

    .dashboard-cards-4{

        grid-template-columns:repeat(2,1fr);

    }

}


/*=====================================================
  ≤992px
=====================================================*/

@media (max-width:992px){

    .wrapper,
    .dashboard-container{

        padding:0 15px;

    }

    .trade-form{

        grid-template-columns:1fr;

    }

    .journal-grid{

        grid-template-columns:1fr;

    }

    .modal-group{

        grid-template-columns:1fr;

    }

    .dashboard-filter-row{

        flex-direction:column;

        align-items:stretch;

    }

    .dashboard-filter button{

        width:100%;

        margin:0;

    }

    .option-filters{

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }

    .option-filters input,
    .option-filters select,
    .option-filters button{

        width:100%;

    }

    .summary-cards{

        grid-template-columns:repeat(2,1fr);

    }

    .dashboard-cards-7,
    .dashboard-cards-5,
    .dashboard-cards-4{

        grid-template-columns:repeat(2,1fr);

    }

}


/*=====================================================
  ≤768px
=====================================================*/

@media (max-width:768px){

    h1{

        font-size:28px;

    }

    h2{

        font-size:24px;

    }

    .section-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .summary-cards{

        grid-template-columns:1fr;

    }

    .dashboard-cards-7,
    .dashboard-cards-5,
    .dashboard-cards-4{

        grid-template-columns:1fr;

    }

    .option-filters{

        grid-template-columns:1fr;

    }

    .dashboard-section{

        padding:18px;

    }

    .summary-card{

        padding:18px;

    }

    .card-value,
    .summary-card h3{

        font-size:32px;

    }

    .dataTables_wrapper{
        overflow-x:auto;
    }

    table.display{

        min-width:1000px;

    }

    .dashboard-table{

        min-width:900px;

    }

}


/*=====================================================
  ≤576px
=====================================================*/

@media (max-width:576px){

    .wrapper,
    .dashboard-container{

        padding:0 12px;

    }

    .button,
    .button-primary{

        width:auto !important;

    }

    .modal-buttons{

        flex-direction:column;

    }

    .modal-buttons .button{

        width:100%;

    }

    .edit-modal-content{

        padding:20px;

    }
    

}


/*=====================================================
  ≤400px
=====================================================*/

@media (max-width:400px){

    h1{

        font-size:24px;

    }

    h2{

        font-size:20px;

    }

    .summary-card h3{

        font-size:28px;

    }

}