/* Shared responsive primitives. Page-specific layouts live in Razor isolated CSS. */

@media (max-width: 820px) {
    html,
    body,
    #app {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    /* Blazor focuses the page heading after navigation for screen readers.
       Safari iOS otherwise paints a selection-like blue ring around it. */
    h1:focus {
        outline: none;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    dd,
    td,
    strong,
    span {
        overflow-wrap: anywhere;
    }

    button,
    .btn,
    [role="button"] {
        min-height: 44px;
    }

    .btn {
        justify-content: center;
        text-align: center;
    }

    .btn-small,
    .btn.btn-small {
        min-height: 40px;
        padding: .55rem .75rem;
    }

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

    textarea {
        min-height: 110px;
    }

    input[type="file"] {
        min-width: 0;
        max-width: 100%;
    }

    .form-grid,
    .form-grid.two-columns,
    .form-grid.three-columns,
    .form-grid.four-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .form-grid > .span-2,
    .form-grid > .span-3,
    .span-2,
    .span-3 {
        grid-column: auto !important;
    }

    .form-field,
    .field,
    .form-control {
        min-width: 0;
        max-width: 100%;
    }

    .section-action-row,
    .form-actions,
    .page-actions,
    .header-actions,
    .dialog-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        width: 100%;
    }

    .section-action-row .btn,
    .form-actions .btn,
    .page-actions .btn,
    .header-actions .btn,
    .dialog-actions .btn {
        width: 100%;
    }

    .section-card,
    .section-card-body,
    .industrial-panel,
    .panel,
    .card,
    .compact-panel {
        min-width: 0;
        max-width: 100%;
    }

    .section-card-head,
    .section-header,
    .industrial-page-head,
    .page-heading {
        min-width: 0;
    }

    .table-scroll,
    .industrial-table-wrap,
    .candidaturas-table-scroll,
    .admin-table-wrap,
    .insight-table-wrap,
    .identity-source-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table tbody {
        padding: .65rem;
    }

    .mobile-card-table tbody tr {
        margin-bottom: .75rem;
        padding: .2rem .8rem;
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 9px;
        background: rgba(255, 255, 255, .025);
    }

    .mobile-card-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .mobile-card-table tbody td {
        display: grid;
        grid-template-columns: minmax(7rem, .42fr) minmax(0, 1fr);
        gap: .7rem;
        align-items: start;
        width: 100%;
        min-width: 0;
        padding: .7rem 0;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        text-align: right;
        white-space: normal;
    }

    .mobile-card-table tbody td::before {
        content: attr(data-label);
        color: var(--muted, #9da4a3);
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .055em;
        line-height: 1.4;
        text-align: left;
        text-transform: uppercase;
    }

    .mobile-card-table tbody td:last-child {
        border-bottom: 0;
    }

    .mobile-card-table tbody td.table-actions,
    .mobile-card-table tbody td[data-label="Acción"] {
        display: block;
        text-align: left;
    }

    .mobile-card-table tbody td.table-actions::before,
    .mobile-card-table tbody td[data-label="Acción"]::before {
        display: none;
    }

    .mobile-card-table .table-actions .btn,
    .mobile-card-table td[data-label="Acción"] .btn {
        width: 100%;
    }

    .admin-table-wrap,
    .insight-table-wrap,
    .identity-source-table-wrap {
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 8px;
    }

    .admin-table-wrap .table,
    .insight-table,
    .identity-source-table,
    .recency-table,
    .admin-pricing-table,
    .promo-code-table {
        min-width: 680px;
    }

    .dialog-backdrop,
    .modal-backdrop,
    .modal-overlay,
    .privacy-delete-backdrop,
    .grouped-upload-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .dialog,
    .modal,
    .modal-dialog,
    .confirm-dialog,
    .privacy-delete-modal,
    .grouped-upload-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 92dvh;
        margin: 0;
        border-radius: 14px 14px 0 0;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .dialog-actions,
    .grouped-upload-actions,
    .privacy-delete-modal__actions {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .6rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .dialog-actions .btn,
    .grouped-upload-actions .btn,
    .privacy-delete-modal__actions .btn {
        width: 100%;
    }

    .grouped-upload-header,
    .grouped-upload-toolbar,
    .grouped-upload-file,
    .grouped-upload-file-actions,
    .grouped-upload-summary,
    .grouped-upload-help-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
        min-width: 0;
    }

    .grouped-upload-file-actions .btn {
        width: 100%;
    }

    .compact-number-stepper,
    .compact-decimal-stepper,
    .compact-number-stepper__controls,
    .compact-decimal-stepper__controls {
        width: 100%;
        max-width: 100%;
    }

    details > summary {
        min-height: 44px;
    }

    .login-monolith-wrap,
    .password-recovery-wrap {
        width: min(100%, 34rem);
        max-width: 100%;
        margin-inline: auto;
    }

    .login-monolith,
    .password-recovery-panel {
        min-width: 0;
        max-width: 100%;
    }

    /* SUPERADMIN shares one dense visual language across its pages. */
    .admin-page,
    .admin-kpi-sections,
    .admin-kpi-section,
    .admin-dashboard-grid,
    .admin-pricing-page {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .admin-page-header,
    .admin-kpi-section-head,
    .admin-attention-subhead {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
        align-items: start;
        padding: 1rem;
    }

    .admin-page-header h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: .98;
    }

    .admin-header-actions,
    .admin-page-header > .btn,
    .admin-page-header > a {
        width: 100%;
    }

    .admin-header-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    .admin-header-actions .btn,
    .admin-page-header > .btn,
    .admin-page-header > a.btn {
        width: 100%;
    }

    .admin-metric-grid,
    .admin-metric-grid-agencies,
    .admin-metric-grid-activity,
    .admin-metric-grid-usage,
    .admin-dashboard-grid,
    .admin-pricing-form-grid,
    .admin-adjustment-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .7rem;
    }

    .admin-dashboard-grid,
    .admin-pricing-form-grid,
    .admin-adjustment-form {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .admin-metric-item,
    .admin-operation-item,
    .admin-attention-list,
    .admin-pricing-form-grid > *,
    .admin-adjustment-form > * {
        min-width: 0;
    }

    .admin-toolbar,
    .admin-pagination,
    .admin-operation-item,
    .admin-attention-subhead {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
        width: 100%;
        min-width: 0;
    }

    .admin-toolbar .btn,
    .admin-pagination .btn,
    .admin-adjustment-form .btn,
    .admin-pricing-form-actions .btn {
        width: 100%;
    }

    .admin-request-id,
    .admin-cell-subtitle,
    .admin-pricing-notes,
    .admin-pricing-validity {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-pricing-toggle {
        min-height: 44px;
    }

    .promo-code-create-grid,
    .promo-code-list-head,
    .promo-code-actions,
    .promo-code-create-actions,
    .promo-code-redeem-form,
    .promo-code-generated {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .65rem;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .promo-code-create-grid > *,
    .promo-code-value,
    .promo-code-preview,
    .promo-code-generated {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .promo-code-actions .btn,
    .promo-code-create-actions .btn,
    .promo-code-redeem-form .btn {
        width: 100%;
    }

    .password-recovery-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    .password-recovery-actions .btn,
    .login-submit {
        width: 100%;
    }

}

@media (max-width: 380px) {
    .mobile-card-table tbody td {
        display: block;
        text-align: left;
    }

    .mobile-card-table tbody td::before {
        display: block;
        margin-bottom: .3rem;
    }

    .admin-metric-grid,
    .admin-metric-grid-agencies,
    .admin-metric-grid-activity,
    .admin-metric-grid-usage {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 820px) and (max-height: 600px) and (orientation: landscape) {
    .dialog,
    .modal,
    .modal-dialog,
    .confirm-dialog,
    .privacy-delete-modal,
    .grouped-upload-dialog {
        max-height: 100dvh;
        border-radius: 0;
    }
}