/* ==========================================================
   Pool Service Dashboard
   mobile.css
   Responsive Layout
========================================================== */

/* ==========================================================
   LARGE TABLETS
========================================================== */

@media (max-width: 1200px) {

    .main {
        padding: 20px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ==========================================================
   TABLETS
========================================================== */

@media (max-width: 900px) {

    .screen {

        padding: 18px;

    }

    .screen-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    .toolbar input {

        max-width: 100%;

    }

    .grid-2,
    .grid-3 {

        grid-template-columns: 1fr;

    }

    .form-grid {

        grid-template-columns: 1fr;

    }

    #map {

        height: 450px;

    }
	
    .service-visit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-visit-span-two {
        grid-column: 1 / -1;
    }
	
    .modal.service-visit-modal {

        width: calc(100vw - 32px);

        max-width: none;

        min-width: 0;

    }

}

/* ==========================================================
   PHONES
========================================================== */

@media (max-width: 768px) {

    .top-nav {

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px;

        padding: 10px;

    }

    .nav-btn {

        flex: 1 1 calc(50% - 10px);

        min-width: 140px;

    }

    .main {

        padding: 12px;

    }

    .screen {

        padding: 15px;

    }

    table {

        min-width: 700px;

    }

    .table-container {

        overflow-x: auto;

    }

    .form-actions {

        flex-direction: column;

    }

    .form-actions button {

        width: 100%;

    }

    td button {

        width: 100%;

        margin-bottom: 6px;

    }
	
    .route-action-buttons button {
        width: auto;
        min-width: 0;
        margin-bottom: 0;
        padding: 10px 14px;
    }
	
    .history-action-buttons button {
        width: 96px;
        margin-bottom: 0;
    }

    #map {

        height: 350px;

    }

}

/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 480px) {

    body {

        font-size: 14px;

    }

    .app-header h1 {

        font-size: 22px;

    }

    h2 {

        font-size: 20px;

    }

    .screen {

        padding: 12px;

    }

    .nav-btn {

        min-width: 100%;

    }

    button {

        font-size: 14px;

        padding: 10px 14px;

    }

    input,
    select {

        font-size: 16px; /* Prevent iOS zoom */

    }

    #map {

        height: 300px;

    }

}

/*=========================================
    Service History
=========================================*/
@media (max-width: 900px) {

    .history-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
	
    .modal.service-visit-modal {
        width: calc(100vw - 32px);
        max-width: none;
        min-width: 0;
    }

    .service-visit-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-visit-edit-grid {
        width: 100%;
    }

    .service-visit-work-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .history-filter-grid {
        grid-template-columns: 1fr;
    }

    .history-filter-actions {
        flex-direction: column;
    }

    .history-filter-actions button {
        width: 100%;
    }

    .history-statistics {
        grid-template-columns: 1fr;
    }

    .history-results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #historyResultMessage {
        text-align: left;
    }

}


/*=========================================
    Service Visit Dialog
=========================================*/
@media (max-width: 900px) {

    .modal.service-visit-modal {
        width: calc(100vw - 32px);

        max-width: none;

        min-width: 0;

    }

    .service-visit-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .service-visit-edit-grid {
        width: 100%;

    }

    .service-visit-work-grid {
        grid-template-columns: 1fr;

    }

}

@media (max-width: 600px) {
	
    .service-visit-summary-grid,
    .service-visit-edit-grid {
        grid-template-columns: 1fr;
    }

    .service-visit-modal .modal-actions {
        flex-direction: column;
    }

    .service-visit-modal .modal-actions button {
        width: 100%;
    }

}

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

@media print {

    .top-nav,
    .form-actions,
    button {

        display: none !important;

    }

    body {

        background: white;

    }

    .screen {

        display: block !important;

        box-shadow: none;

        border: none;

    }

}