/* Shared phone layout for the admin, public portal, and sign in pages. */
html, body { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }

.mobile-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.public-main .form-control, .public-main .form-select {
    background-color: #fff;
    border: 1px solid #cbd5e1;
    min-height: 38px;
}

@media (max-width: 767.98px) {
    body, #layout-wrapper, .main-content, .page-content,
    .page-content .container-fluid, .public-main, .public-main .container {
        min-width: 0;
        max-width: 100%;
    }

    .page-content .container-fluid { padding-left: 12px; padding-right: 12px; }
    .page-content .row > *, .public-main .row > * { min-width: 0; }
    .page-title-box { flex-wrap: wrap; gap: 8px; }
    .page-title-box h4 { overflow-wrap: anywhere; }
    .card, .card-body, .modal-content, .modal-body { min-width: 0; }
    .card-header { flex-wrap: wrap; gap: 10px; }
    .card-header > .d-flex, .card-header > .btn,
    .card-header > .btn-group { max-width: 100%; flex-wrap: wrap; }

    .navbar-header { min-width: 0; }
    .navbar-header > .d-flex { min-width: 0; }
    #page-topbar .dropdown-menu { max-width: calc(100vw - 24px); }
    #page-header-notifications-dropdown + .dropdown-menu { width: min(320px, calc(100vw - 24px)); }
    .navbar-brand-box.horizontal-logo .logo-lg img { max-width: 110px; height: auto; }

    .top-controls-container, .bottom-controls-container,
    .left-controls, .right-controls, .search-wrapper,
    .buttons-wrapper, .dt-buttons {
        width: 100%;
        min-width: 0;
        justify-content: flex-start !important;
        align-items: stretch !important;
        flex-wrap: wrap;
    }
    .right-controls { margin-top: 8px; }
    .status-filter-wrapper { margin: 0 !important; }
    .dataTables_length { margin-top: 0 !important; }
    .dataTables_filter { float: none !important; width: 100%; }
    .dataTables_filter label, .dataTables_filter input { width: 100%; }
    .dataTables_wrapper .row > div { min-width: 0; }
    .dataTables_paginate { max-width: 100%; overflow-x: auto; }
    .table-responsive, .table-scroll-container { max-width: 100%; -webkit-overflow-scrolling: touch; }
    .mobile-table-scroll > table { width: max-content; min-width: 100%; }

    .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
    .modal-body .mobile-table-scroll { margin-bottom: 12px; }
    .form-control, .form-select, input, select, textarea { max-width: 100%; }
    .input-group { flex-wrap: wrap; }
    .btn { white-space: normal; }

    .public-header { padding: 12px 0; }
    .public-header img { width: 42px; height: 42px; flex: none; }
    .public-header .site-title { font-size: .95rem; }
    .public-header .site-subtitle { font-size: .72rem; }
    .public-main { padding-top: 18px; padding-bottom: 24px; }
    .public-main > .container > .row { margin-left: 0; margin-right: 0; }
    .public-footer { position: static; padding: 12px 8px; }
    .hero-section { padding: 24px 0 !important; }
    .hero-section h1 { font-size: 1.5rem !important; }
    .how-section { padding: 20px !important; margin-top: 24px !important; }
    #docTypeSelect { min-width: 0; }
    .document-add-controls { flex-wrap: wrap; }
    .document-add-controls #docTypeSelect { flex: 1 1 100%; }
    .document-add-controls #addDocBtn { flex: 1 1 100%; min-width: 0 !important; }

    /* Form fields use one label and one full-width control per line on phones. */
    .purchase-request-form .card-body,
    .supplier-form .card-body { padding: 18px 16px; }
    .purchase-request-form .form-group.row,
    .supplier-form .form-group.row {
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 4px;
    }
    .purchase-request-form .form-group.row > .col,
    .purchase-request-form .form-group.row > .col-auto,
    .supplier-form .form-group.row > .col,
    .supplier-form .form-group.row > .col-auto {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .purchase-request-form .form-group.row > label,
    .supplier-form .form-group.row > label { padding-top: 0; padding-bottom: 0; }
    .purchase-request-form .form-control,
    .supplier-form .form-control { width: 100%; min-height: 38px; }
    .purchase-request-form input[type="date"] { min-width: 0; }
    .purchase-request-form .mobile-entry-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        white-space: normal;
    }
    .purchase-request-form .select2-container { width: 100% !important; max-width: 100%; }
    .purchase-request-form .me-5 { margin-right: 0 !important; }

    .supplier-form > .card-body > form > .row > [class*="col-md-"] { margin-bottom: 14px; }
    .supplier-form > .card-body > form > .row > [class*="col-md-"] > .d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px;
    }
    .supplier-form > .card-body > form > .row label { white-space: normal !important; }
    .supplier-form .text-end.mt-4 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

    /* Repeated entry rows become stacked cards so every field remains visible. */
    .mobile-table-scroll > .mobile-entry-table { width: 100% !important; min-width: 0; }
    .mobile-entry-table,
    .mobile-entry-table tbody,
    .mobile-entry-table tr,
    .mobile-entry-table td { display: block; width: 100%; }
    .mobile-entry-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .mobile-entry-table tbody tr {
        padding: 12px;
        margin: 0 0 12px;
        border: 1px solid #d9e1ea;
        border-radius: 8px;
        background: #fff;
    }
    .mobile-entry-table tbody td {
        border: 0 !important;
        padding: 4px 0 8px;
        text-align: left !important;
    }
    .mobile-entry-table tbody td::before {
        display: block;
        margin-bottom: 5px;
        color: #49566a;
        font-size: .82rem;
        font-weight: 600;
    }
    .mobile-entry-table tbody td:last-child:empty { display: none; }
    .mobile-entry-table tbody td:last-child .btn { margin-left: auto; display: block; }
    .mobile-entry-table input[type="file"] { min-width: 0; }

    #aip-codes-table td:nth-child(1)::before { content: "AIP Code"; }
    #aip-codes-table td:nth-child(2)::before { content: "Account Code"; }
    #users-table td:nth-child(1)::before { content: "User"; }
    #gso-officers-table td:nth-child(1)::before { content: "GSO Officer"; }
    #items-table td:nth-child(1)::before { content: "Item No."; }
    #items-table td:nth-child(2)::before { content: "Quantity"; }
    #items-table td:nth-child(3)::before { content: "Unit of Issue"; }
    #items-table td:nth-child(4)::before { content: "Item Description"; }
    #items-table td:nth-child(5)::before { content: "Estimated Unit Cost"; }
    #items-table td:nth-child(6)::before { content: "Estimated Cost"; }
    #contacts-table td:nth-child(1)::before { content: "Name"; }
    #contacts-table td:nth-child(2)::before { content: "Phone"; }
    #contacts-table td:nth-child(3)::before { content: "Email"; }
    #documents-table td:nth-child(1)::before { content: "Document Type"; }
    #documents-table td:nth-child(2)::before { content: "File"; }
    #documents-table td:nth-child(3)::before { content: "Expiration Date (optional)"; }

    .container-login100 { padding: 12px; }
    .wrap-login100 { width: 100%; }
    .login100-form { padding: 36px 22px !important; }
    .login100-form .flex-sb-m { display: flex; flex-wrap: wrap; gap: 12px; }
    .login100-form-title { overflow-wrap: anywhere; }
}