/* Final phone overrides for the server-rendered panel. */

html,
body {
    max-width: 100%;
}

body {
    min-width: 0;
}

.container-fluid,
.login-shell,
.ops-panel-shell {
    min-height: 100dvh;
}

.admin-content,
.admin-content fieldset,
.admin-content .row > *,
.admin-content .d-flex > *,
.admin-content .input-group > * {
    min-width: 0;
}

.admin-content img,
.admin-content video,
.admin-content canvas {
    max-width: 100%;
}

.admin-content :is(h1, h2, h3, h4, h5, h6, p, a, code, pre, dd, td) {
    overflow-wrap: anywhere;
}

.table-responsive,
#payment-requests-container {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > table,
#payment-requests-container table {
    margin-bottom: 0;
}

.admin-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}

.global-alerts-widget .dropdown-menu {
    width: min(320px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
    max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

.global-alerts-widget .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

.help-drawer {
    height: 100dvh;
    max-width: 100%;
}

.quotation-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}

/* The payment fragments predate Bootstrap in this app. Give their native
   controls a stable presentation without loading a second CSS framework. */
.payment-balance-summary,
.payment-empty-state,
#payment-form-container > div,
#payment-request-form-container > form {
    padding: 1rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
}

.payment-balance-summary {
    background: var(--pt-surface-muted);
}

.payment-empty-state {
    border-style: dashed !important;
    background: var(--pt-surface-muted);
}

#payment-form-container .payment-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

#payment-request-form-container > form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
}

#payment-request-form-container > form > div {
    flex: 1 1 14rem;
    min-width: 0;
}

#payment-form-container label,
#payment-request-form-container label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--pt-ink-3);
    font-weight: 700;
}

#payment-form-container :is(input:not([type="hidden"]), select, textarea),
#payment-request-form-container :is(input:not([type="hidden"]), select, textarea) {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--pt-ink);
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
}

#payment-form-container .payment-form-actions,
#payment-request-form-container .payment-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

#payment-form-container button,
#payment-request-form-container button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-weight: 700;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
}

#payment-form-container button[type="submit"],
#payment-request-form-container button[type="submit"] {
    color: #fff;
    background: var(--pt-obsidian);
    border-color: var(--pt-obsidian);
}

#payment-requests-container table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pt-surface);
}

#payment-requests-container :is(th, td) {
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--pt-border);
}

@media (max-width: 991.98px) {
    body {
        /* Recovery channel for any legacy wide fragment: scroll it; never clip it. */
        overflow-x: auto;
    }

    .container-fluid,
    .ops-panel-shell {
        overflow-x: visible;
    }

    .admin-content,
    .ops-panel-shell > main {
        width: 100%;
        max-width: 100%;
        padding-right: calc(16px + env(safe-area-inset-right));
        padding-left: calc(16px + env(safe-area-inset-left));
    }

    .login-shell {
        padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    }

    .mobile-sidebar-toggle,
    .sidebar-close-button,
    .sidebar .nav-link,
    .global-alerts-widget > button,
    .help-fab,
    .help-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .admin-content > .container-fluid {
        min-height: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .mobile-panel-bar {
        --mobile-panel-controls-width: 116px;
        justify-content: flex-start;
        min-height: calc(62px + env(safe-area-inset-top));
        padding: calc(10px + env(safe-area-inset-top)) 0 10px calc(12px + env(safe-area-inset-left));
        padding-right: calc(var(--mobile-panel-controls-width) + env(safe-area-inset-right));
    }

    .mobile-panel-brand {
        width: 100%;
    }

    .mobile-sidebar-toggle {
        position: absolute;
        right: calc(12px + env(safe-area-inset-right));
    }

    .sidebar {
        min-height: 0;
        height: 100dvh;
        padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    }

    .global-alerts-widget {
        top: calc(12px + env(safe-area-inset-top));
        right: calc(60px + env(safe-area-inset-right));
        z-index: 1041;
    }

    .help-fab {
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
    }

    #toast-container {
        right: env(safe-area-inset-right) !important;
        bottom: env(safe-area-inset-bottom) !important;
        left: env(safe-area-inset-left) !important;
        width: auto;
    }

    .help-drawer__header {
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-right: calc(20px + env(safe-area-inset-right));
        padding-left: calc(20px + env(safe-area-inset-left));
    }

    .help-tabs {
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
    }

    .help-tab-panel {
        padding-right: calc(16px + env(safe-area-inset-right));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        padding-left: calc(16px + env(safe-area-inset-left));
    }

    .inventory-wizard-actions {
        padding-right: calc(12px + env(safe-area-inset-right));
        padding-left: calc(12px + env(safe-area-inset-left));
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 0.9375rem;
    }

    .admin-content,
    .ops-panel-shell > main {
        padding-right: calc(12px + env(safe-area-inset-right)) !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        padding-left: calc(12px + env(safe-area-inset-left)) !important;
    }

    .admin-title,
    .admin-content h1 {
        font-size: clamp(1.2rem, 6vw, 1.45rem);
        line-height: 1.2;
    }

    .admin-content > header.d-flex,
    .admin-content > .container-fluid > .d-flex:first-child,
    .admin-content .card-header.d-flex,
    .admin-content .alert.d-flex {
        flex-wrap: wrap;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .admin-content .alert.d-flex > .btn {
        width: 100%;
        margin-left: 0 !important;
    }

    .quotation-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 0.5rem !important;
    }

    .quotation-actions > :is(.btn, .badge) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        white-space: normal;
    }

    .admin-content .nav-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .admin-content .nav-tabs .nav-link {
        white-space: nowrap;
    }

    :is(
        .btn,
        button,
        [role="button"],
        .nav-link,
        .page-link,
        .dropdown-item,
        .category-pill,
        .category-add-button,
        .category-action-button,
        summary
    ) {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
        max-width: 100%;
        font-size: 16px;
    }

    :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) {
        min-height: 44px;
    }

    .form-control-sm,
    .form-select-sm,
    .input-group-sm > .form-control,
    .input-group-sm > .form-select,
    .input-group-sm > .input-group-text,
    .input-group-sm > .btn {
        min-height: 44px;
        font-size: 16px;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    .modal-dialog {
        max-width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right));
        margin: calc(0.5rem + env(safe-area-inset-top)) calc(0.5rem + env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) calc(0.5rem + env(safe-area-inset-left));
    }

    .modal-content {
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .modal-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-footer {
        gap: 0.5rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }

    .modal-footer > * {
        margin: 0;
    }

    .modal-footer > .btn {
        flex: 1 1 100%;
    }

    .help-tab {
        min-width: 44px;
        padding-right: 6px;
        padding-left: 6px;
        font-size: 0.8125rem;
    }
}

@media (max-width: 575.98px) {
    #payment-form-container .payment-form-grid {
        grid-template-columns: 1fr;
    }

    #payment-form-container .payment-form-actions > button,
    #payment-request-form-container .payment-request-actions > button {
        flex: 1 1 100%;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
    .help-fab {
        display: none;
    }

    .admin-content :is(
        .btn,
        button,
        [role="button"],
        .nav-link,
        .page-link,
        .dropdown-item,
        summary
    ) {
        min-height: 44px !important;
    }

    .admin-content :is(
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select,
        textarea,
        .form-control-sm,
        .form-select-sm
    ) {
        min-height: 44px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-backdrop,
    .metric-card,
    .inventory-choice-card {
        transition: none !important;
    }
}

/* Repaso movil del 2026-08-24.
   1. Colchon inferior extendido a TABLET (hasta 991px). La regla equivalente de
      mas arriba solo llega a 767px, asi que entre 768 y 991 el final del
      formulario quedaba debajo del boton flotante de ayuda. Ojo: esto solo
      protege el FINAL del documento; un boton fijo siempre flotara sobre el
      contenido de en medio, y eso es por diseno.
   2. Casillas y radios quedaban fuera de la regla de 44px porque estan
      excluidos a proposito: la caja debe seguir pequena, pero el area tocable
      no. Se agranda la fila, no el cuadrito. */
@media (max-width: 991.98px) {
    .admin-content,
    .ops-panel-shell > main {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .form-check:not(.form-switch) {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        min-height: 44px;
        padding-left: 0;
        margin-bottom: 0.25rem;
    }

    .form-check:not(.form-switch).form-check-inline {
        display: inline-flex;
        margin-right: 1.1rem;
    }

    .form-check:not(.form-switch) > .form-check-input {
        flex: 0 0 auto;
        float: none;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.6rem 0 0;
    }

    .form-check:not(.form-switch) > .form-check-label {
        display: block;
        padding: 0.55rem 0;
        margin: 0;
    }
}