/* =========================================================
   MyInvoice ERP - Global Responsive CSS
   Mobile + Tablet + Desktop
   ========================================================= */

/* ---------- Global ---------- */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Buttons */
button,
input[type="submit"],
input[type="button"],
.btn {
    max-width: 100%;
}

/* ---------- Main Containers ---------- */

.container,
.container-fluid,
.main-container,
.content,
.main-content,
.page-content,
.dashboard-content {
    max-width: 100%;
}

/* Prevent long text from breaking layout */
h1,
h2,
h3,
h4,
h5,
h6,
p,
td,
th,
label {
    overflow-wrap: break-word;
}

/* =========================================================
   TABLE RESPONSIVE
   ========================================================= */

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

/* Normal tables on desktop */
@media (min-width: 769px) {
    table {
        width: 100%;
    }
}

/* Mobile tables */
@media (max-width: 768px) {

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        border-radius: 8px;
    }

    table {
        min-width: 700px;
    }

    th,
    td {
        white-space: nowrap;
    }

    /* Customer / Sales / Invoice tables */
    .customer-table,
    .sales-table,
    .invoice-table,
    .data-table {
        min-width: 750px;
    }
}

/* =========================================================
   FORMS
   ========================================================= */

.form-row,
.form-grid,
.row {
    max-width: 100%;
}

input,
select,
textarea {
    max-width: 100%;
}

@media (max-width: 768px) {

    .form-row,
    .form-grid {
        display: block !important;
        width: 100% !important;
    }

    .form-group,
    .form-field,
    .field,
    .input-group {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 14px;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px;
    }

    textarea {
        min-height: 100px;
    }

    button,
    .btn {
        min-height: 42px;
    }
}

/* =========================================================
   CARDS
   ========================================================= */

.cards,
.card-grid,
.stats-grid,
.dashboard-cards {
    max-width: 100%;
}

@media (max-width: 768px) {

    .cards,
    .card-grid,
    .stats-grid,
    .dashboard-cards {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   FLEX ELEMENTS
   ========================================================= */

@media (max-width: 768px) {

    .flex,
    .d-flex,
    .toolbar,
    .action-bar,
    .page-header {
        flex-wrap: wrap !important;
    }

    .page-header,
    .action-bar {
        gap: 10px;
    }
}

/* =========================================================
   BUTTON GROUP
   ========================================================= */

@media (max-width: 768px) {

    .button-group,
    .btn-group,
    .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .button-group .btn,
    .btn-group .btn,
    .actions .btn {
        flex: 1 1 auto;
    }
}

/* =========================================================
   SIDEBAR
   ========================================================= */

@media (max-width: 768px) {

    .sidebar {
        width: 260px;
        max-width: 85vw;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar:not(.open) {
        transform: translateX(-100%);
    }

    .main,
    .main-content,
    .content-area {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* =========================================================
   TOPBAR / NAVBAR
   ========================================================= */

@media (max-width: 768px) {

    .topbar,
    .navbar,
    .header,
    .top-header {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .topbar {
        flex-wrap: wrap;
    }

    .topbar-title,
    .page-title {
        font-size: 20px !important;
    }
}

/* =========================================================
   CUSTOMER LIST SCROLL
   ========================================================= */

.customer-list-scroll {
    width: 100%;
    max-width: 100%;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

/* Sticky table header */
.customer-list-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* =========================================================
   SALES LIST
   ========================================================= */

.sales-list-scroll,
.invoice-list-scroll,
.order-list-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   MODAL
   ========================================================= */

@media (max-width: 768px) {

    .modal {
        width: 100% !important;
        max-width: 100% !important;
    }

    .modal-content {
        width: calc(100% - 20px) !important;
        max-width: 500px !important;
        margin: 10px auto !important;
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* =========================================================
   INVOICE
   ========================================================= */

.invoice-container,
.invoice-wrapper,
.invoice-paper {
    max-width: 100%;
}

@media (max-width: 768px) {

    .invoice-container,
    .invoice-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
    }

    .invoice-paper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        overflow-x: auto;
    }

    .invoice-paper table {
        min-width: 650px;
    }
}

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

@media print {

    html,
    body {
        overflow: visible !important;
    }

    .sidebar,
    .topbar,
    .navbar,
    .header,
    .no-print,
    .print-btn,
    button {
        display: none !important;
    }

    .main,
    .main-content,
    .content,
    .invoice-container,
    .invoice-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .invoice-paper {
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
}

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

@media (max-width: 480px) {

    body {
        font-size: 14px;
    }

    h1 {
        font-size: 22px !important;
    }

    h2 {
        font-size: 19px !important;
    }

    h3 {
        font-size: 17px !important;
    }

    .card {
        padding: 12px !important;
    }

    .btn {
        padding: 9px 12px !important;
        font-size: 14px !important;
    }

    .page-title {
        font-size: 20px !important;
    }

    .table-responsive {
        border-radius: 6px;
    }
}

/* =========================================================
   VERY SMALL SCREEN
   ========================================================= */

@media (max-width: 360px) {

    .btn {
        width: 100%;
    }

    .actions .btn {
        width: 100%;
        flex: 1 1 100%;
    }

    .card {
        padding: 10px !important;
    }
}

/* =========================================================
   PREVENT HORIZONTAL PAGE SCROLL
   ========================================================= */

.container,
.container-fluid,
main,
section,
header,
footer,
.content,
.main-content,
.page-content {
    max-width: 100%;
}

/* Allow only designated areas to scroll horizontally */
.table-responsive,
.customer-list-scroll,
.sales-list-scroll,
.invoice-list-scroll,
.order-list-scroll {
    overflow-x: auto;
}