html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: auto;
    position: relative;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page {
    width: 100%;
    margin: 0 auto;
}

.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem;
}

.content {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.table-container {
    width: 100%;
    overflow: auto;
}

/* iOS specific */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: -webkit-fill-available;
    }

    #app {
        min-height: -webkit-fill-available;
    }

    main {
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
    }

    button,
    [role="button"],
    select,
    input {
        min-height: 44px;
        touch-action: manipulation;
    }
}
.sticky-tops {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 995;
}
.btn-pink {
    color: #fff !important;
}
.search-main-input {
    padding: 5px;
    display: flex;
    gap: 5px;
}
    .search-main-input .search-input{width:180px;}

.toast-container {
    z-index: 99999 !important;
    margin-top: 2rem;
}

.blazored-toast-container.position-topright {
    z-index: 1100 !important;
}

@media screen and (max-width:1024px) {
    #app .content{padding-top:2.5rem;}
}
@media screen and (max-width:767px) {
    #app .content {
        padding-top: 0.5rem;
    }
    #app main, #app .page.main-outer-page {
        overflow: visible !important;
    }
    body .h4, body h4, body .sync-title, body .summary-header h4, body .updates-header h4, body .stat-card p{
        font-size: 16px;
    }
    body .h3, body h3 {
        font-size: 18px;
    }

    body .btn {
        font-size: 12px;
    }
    .sync-button-container .sync-button {
        display: inline-flex;
        width: auto;
        margin-bottom: 10px;
        vertical-align: top;
    }

    .updates-section .table-container {
        margin: 0;
    }
    #app .grid-3, #app .grid-2 {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    #app .form-group{
        margin-top: 5px;
    }

    #app .final-payment-button {
        flex-wrap: wrap;
    }
    #app main{padding:5px;}
    .action-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    body .db-status-page{padding-top:0;}


    .work-order-table-list .d-flex.justify-content-between {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

        .work-order-table-list .d-flex.justify-content-between nav {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

            .work-order-table-list .d-flex.justify-content-between nav .pagination {
                width: 100%;
                margin: 0;
            }

    .main-layout-wrapper {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }
        #app .table-menu-payment{margin-top:0.5rem;}
    body .ElectricMeterReadings{height:auto !important;}


}

.spinner-border {
    width: 20px !important; /* Fixed width */
    height: 20px !important; /* Fixed height */
    border-width: 2px !important; /* Adjust thickness */
    aspect-ratio: 1 / 1; /* Ensures a perfect circle */
    display: inline-block; /* Prevents unwanted stretching */
}




@media screen and (max-width:499px) {
    body .keypad-grid {
        max-width:100%;
    }
}

.reset-button {
    border: 2px;
    border-radius: 10% !important;
    background-color: #1d6ff8;
    color: white;
    padding: 5px 10px;
}


@media screen and (max-width: 767px) {
    .reset-button {
        font-size: 14px;
    }
}

.table-security-width {
    width: 80vw;
}

@media screen and (max-width:430px) {
    .table-security-width {
        width: 95vw;
    }
}

.striped-table tr:nth-child(odd) {
    background-color: #f2f2f2; 
}

.striped-table tr:nth-child(even) {
    background-color: #ffffff; 
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1130px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 985px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 760px !important;
    }
}

/* Responsive attachment styling - preserves aspect ratio */
.responsive-attachment {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.attachment-item img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 767px) {
    .attachment-item img,
    .responsive-attachment {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .view-attachment-container {
        width: 100vw;
        margin-left: 2rem;
    }
    .attachment-item {
        margin-bottom: 1rem;
    }
}

@media (min-width: 768px) {
    .attachment-item img,
    .responsive-attachment {
        max-width: 500px;
        height: auto;
        object-fit: contain;
    }
}

@media (min-width: 1024px) {
    .attachment-item img,
    .responsive-attachment {
        max-width: 43rem;
        height: auto;
        object-fit: contain;
    }
}





.sticky-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background-color: #fff !important;
}