/* ============================================================
   FIABCI 2026 — GLOBAL RESPONSIVE AUDIT
   Menstabilkan seluruh halaman pada desktop, laptop, tablet,
   browser zoom, dan handphone. Dimuat paling akhir.
   ============================================================ */

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

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

main,
section,
article,
aside,
div,
form,
header,
footer,
nav {
    min-width: 0;
}

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

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

.table-wrap,
.admin-clean-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Hindari background fixed patah atau melompat pada mobile/iOS. */
@media (max-width: 1024px) {
    .public-page,
    .form-page,
    .auth-page,
    .dashboard-page,
    .admin-page,
    .card-page,
    .status-page {
        background-attachment: scroll !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-color: #080705 !important;
    }

    .public-page::before,
    .form-page::before,
    .auth-page::before,
    .dashboard-page::before,
    .admin-page::before,
    .card-page::before,
    .status-page::before {
        position: absolute !important;
    }

    .dashboard-grid,
    .admin-detail-grid,
    .qr-card-layout,
    .auth-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .dashboard-side,
    .admin-detail-side,
    .card-side {
        width: 100%;
    }

    .summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-toolbar,
    .admin-container,
    .dashboard-container,
    .status-shell,
    .card-shell,
    .auth-wrap,
    .form-container {
        width: min(960px, calc(100% - 22px)) !important;
    }
}

/* ============================================================
   TABLET & MOBILE — SEMUA HALAMAN PUBLIK/PESERTA
   ============================================================ */
@media (max-width: 760px) {
    .public-page,
    .form-page,
    .auth-page,
    .dashboard-page,
    .admin-page,
    .card-page,
    .status-page {
        min-height: 100dvh;
        padding: 8px 0 84px !important;
    }

    .container,
    .admin-toolbar,
    .admin-container,
    .dashboard-container,
    .status-shell,
    .card-shell,
    .auth-wrap,
    .form-container {
        width: calc(100% - 14px) !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    /* Flash tidak menutup judul halaman. */
    .global-flash {
        top: 10px;
        width: calc(100% - 20px);
        padding: 12px 13px;
        border-radius: 13px;
        font-size: 10px;
    }

    /* ---------- FORM PENDAFTARAN ---------- */
    .form-hero,
    .wizard-card {
        width: 100%;
        border-radius: 18px !important;
    }

    .form-hero-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 20px 15px !important;
        text-align: center;
    }

    .form-hero-logos {
        justify-content: center;
        gap: 10px;
    }

    .form-hero-logos .logo-rei {
        width: 60px !important;
        height: 60px !important;
        flex: 0 0 60px;
    }

    .form-hero-logos .logo-award {
        width: min(182px, 58vw) !important;
        height: 60px !important;
    }

    .form-hero-copy small {
        justify-content: center;
        max-width: 100%;
        font-size: 8px;
        line-height: 1.45;
        text-align: center;
        white-space: normal;
    }

    .form-hero-copy h1 {
        margin: 7px auto 8px !important;
        font-size: clamp(22px, 7vw, 29px) !important;
        line-height: 1.16 !important;
        letter-spacing: -.7px !important;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .form-hero-copy p {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
        font-size: 10.5px !important;
        line-height: 1.65 !important;
        text-align: center;
    }

    .wizard-head {
        padding: 13px 10px 0 !important;
    }

    .wizard-steps {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .wizard-step,
    .wizard-step:not(.active):not(.done) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 70px !important;
        gap: 6px !important;
        padding: 8px 5px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .wizard-number {
        width: 29px !important;
        height: 29px !important;
        flex: 0 0 29px;
        border-radius: 9px !important;
    }

    .wizard-step b {
        font-size: 8px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
    }

    .wizard-step span {
        display: none !important;
    }

    .wizard-progress {
        margin-top: 11px !important;
    }

    .form-section {
        padding: 21px 13px 26px !important;
    }

    .section-heading {
        display: grid !important;
        grid-template-columns: 43px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 11px !important;
        margin-bottom: 18px !important;
    }

    .section-icon {
        width: 43px !important;
        height: 43px !important;
        flex: 0 0 43px !important;
        border-radius: 13px !important;
    }

    .section-heading h2 {
        margin-top: 1px !important;
        font-size: 19px !important;
        line-height: 1.25 !important;
        letter-spacing: -.35px;
        overflow-wrap: anywhere;
    }

    .section-heading p {
        font-size: 9px !important;
        line-height: 1.5 !important;
    }

    .form-grid,
    .dashboard-form .form-grid,
    .choice-grid.two,
    .choice-grid.three,
    .mbr-document-grid,
    .category-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .field.full {
        grid-column: auto !important;
    }

    .field label {
        align-items: flex-start;
        font-size: 9px !important;
        line-height: 1.4;
    }

    .field input,
    .field select {
        width: 100% !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 11px 13px !important;
        font-size: 11px !important;
    }

    .field textarea {
        width: 100% !important;
        min-height: 105px !important;
        padding: 12px 13px !important;
        font-size: 11px !important;
    }

    .registration-type-banner,
    .mbr-form-title,
    .mbr-document-intro {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 12px !important;
    }

    .registration-type-banner strong,
    .mbr-form-title b,
    .mbr-document-intro b {
        overflow-wrap: anywhere;
    }

    .choice-card,
    .choice-card.compact {
        width: 100% !important;
        min-height: 66px !important;
        padding: 13px !important;
        gap: 11px !important;
    }

    .choice-card b {
        font-size: 11px !important;
    }

    .choice-card small {
        font-size: 8px !important;
    }

    .category-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .category-toolbar .small-btn {
        width: 100%;
        min-height: 40px;
    }

    .mbr-document-card {
        width: 100%;
    }

    .mbr-document-check {
        min-height: 0 !important;
        padding: 14px 13px 12px !important;
    }

    .mbr-doc-footer {
        gap: 9px !important;
        padding: 11px 12px !important;
    }

    .wizard-actions {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .wizard-actions .btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    .security-note {
        justify-content: center;
        text-align: center;
    }

    /* Modal upload tetap di tengah viewport dan tidak keluar layar. */
    .mbr-upload-modal {
        align-items: center !important;
        padding: 8px !important;
    }

    .mbr-modal-dialog {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 19px 14px 14px !important;
        border-radius: 18px !important;
    }

    .mbr-modal-head {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 11px !important;
        padding-right: 35px !important;
    }

    .mbr-modal-icon {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
    }

    .mbr-modal-head h3 {
        font-size: 18px !important;
        overflow-wrap: anywhere;
    }

    .mbr-modal-drop {
        min-height: 125px !important;
        padding: 15px 10px !important;
    }

    .mbr-modal-file-row {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        gap: 8px !important;
        padding: 9px !important;
    }

    .mbr-modal-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mbr-modal-actions .btn {
        width: 100% !important;
    }

    .company-results {
        position: fixed !important;
        z-index: 10020 !important;
        top: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        left: 8px !important;
        max-height: min(62dvh, 430px) !important;
        border-radius: 18px !important;
    }

    /* ---------- DASHBOARD PESERTA ---------- */
    .dashboard-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 21px 15px !important;
        border-radius: 18px !important;
    }

    .dashboard-hero h1 {
        font-size: clamp(22px, 7vw, 28px) !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere;
    }

    .dashboard-hero p {
        font-size: 10px !important;
        line-height: 1.55;
    }

    .dashboard-hero .registration-number {
        align-items: flex-start !important;
        width: 100%;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.14);
    }

    .dashboard-hero .registration-number strong {
        max-width: 100%;
        font-size: 15px !important;
        overflow-wrap: anywhere;
    }

    .dashboard-grid,
    .dashboard-main,
    .dashboard-side {
        width: 100%;
        gap: 13px !important;
        margin-top: 13px !important;
    }

    .dashboard-main,
    .dashboard-side {
        margin-top: 0 !important;
    }

    .panel {
        width: 100%;
        border-radius: 17px !important;
    }

    .panel-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 11px !important;
        padding: 15px 14px !important;
    }

    .panel-head > .btn,
    .panel-head > a.btn {
        width: 100%;
    }

    .panel-head h2,
    .panel-head h3 {
        font-size: 16px !important;
        line-height: 1.3;
    }

    .panel-head p {
        font-size: 8.5px !important;
        line-height: 1.5;
    }

    .panel-body {
        padding: 14px !important;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .summary-card {
        min-height: 124px;
        padding: 13px !important;
        border-radius: 14px !important;
    }

    .summary-card span {
        font-size: 7px !important;
    }

    .summary-card strong {
        font-size: 12px !important;
        overflow-wrap: anywhere;
    }

    .info-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .upload-inline {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .upload-inline .btn {
        width: 100% !important;
        min-height: 48px !important;
    }

    .upload-inline input[type="file"] {
        width: 100% !important;
        min-height: 52px !important;
    }

    .document-row {
        grid-template-columns: 34px minmax(0, 1fr) 34px !important;
        gap: 9px !important;
        padding: 10px !important;
    }

    .document-row > div {
        min-width: 0;
    }

    .document-row strong,
    .document-row small {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* ---------- LOGIN PESERTA ---------- */
    .auth-wrap {
        overflow: hidden;
        border-radius: 19px !important;
    }

    .auth-visual,
    .auth-panel {
        padding: 24px 17px !important;
    }

    .auth-visual {
        text-align: center;
    }

    .auth-visual .logo-row {
        justify-content: center;
        margin-bottom: 18px !important;
    }

    .auth-visual h1 {
        font-size: 30px !important;
    }

    .auth-visual p,
    .auth-panel > p {
        font-size: 10px !important;
        line-height: 1.6 !important;
    }

    .auth-panel h2 {
        font-size: 25px !important;
    }

    .auth-actions {
        flex-direction: column;
        align-items: stretch !important;
    }

    .auth-actions .btn {
        width: 100%;
    }

    /* ---------- STATUS ---------- */
    .status-card {
        padding: 18px 14px !important;
        border-radius: 18px !important;
    }

    .status-card + .status-card {
        margin-top: 13px;
    }

    .status-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .status-head h1 {
        font-size: 23px !important;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .status-pill {
        width: fit-content;
        max-width: 100%;
        white-space: normal !important;
        line-height: 1.35;
    }

    .status-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-top: 17px !important;
    }

    .stat-box {
        min-width: 0;
        padding: 12px !important;
    }

    .stat-box strong {
        font-size: 11px !important;
        overflow-wrap: anywhere;
    }

    .status-card .manual-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .status-card .manual-row .btn {
        width: 100%;
    }

    /* ---------- KARTU QR ---------- */
    .qr-card-layout {
        gap: 13px !important;
    }

    .qr-card {
        min-height: 0 !important;
        padding: 20px 14px 18px !important;
        border-radius: 18px !important;
    }

    .qr-card-header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        text-align: center;
    }

    .qr-card-header .logo-row {
        justify-content: center;
        gap: 9px;
    }

    .qr-card-header .logo-rei {
        width: 58px !important;
        height: 58px !important;
    }

    .qr-card-header .logo-award {
        width: min(170px, 56vw) !important;
        height: 58px !important;
    }

    .qr-card-badge {
        font-size: 8px !important;
        line-height: 1.4;
        text-align: center;
    }

    .qr-card-title {
        margin: 21px 0 6px !important;
        font-size: 25px !important;
        line-height: 1.15 !important;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .qr-card-subtitle {
        text-align: center;
    }

    .qr-card-body {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
        margin-top: 21px !important;
    }

    .qr-meta-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .qr-meta-row strong {
        overflow-wrap: anywhere;
    }

    .qr-box {
        width: min(280px, 100%);
        margin: 0 auto;
    }

    #qrcode img,
    #qrcode canvas {
        width: min(220px, 100%) !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
    }

    .qr-card-footer {
        position: static !important;
        flex-direction: column !important;
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,.12);
        text-align: center;
    }

    .side-panel {
        padding: 17px 15px !important;
        border-radius: 17px !important;
    }

    .access-code {
        max-width: 100%;
        font-size: clamp(17px, 6vw, 22px) !important;
        letter-spacing: 2px !important;
        overflow-wrap: anywhere;
    }

    /* ---------- ADMIN UMUM: peserta.php dan detail_peserta.php ---------- */
    .admin-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 13px !important;
        padding: 18px 14px !important;
        border-radius: 17px !important;
    }

    .admin-toolbar h1 {
        font-size: 22px !important;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .admin-toolbar p {
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .admin-toolbar-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .admin-toolbar-actions .btn {
        width: 100%;
    }

    .admin-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    .admin-detail-main,
    .admin-detail-side {
        gap: 13px !important;
    }

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

    .score-row input {
        width: 100%;
    }

    .filters {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    .filters .btn {
        grid-column: auto !important;
        width: 100%;
    }

    .table-wrap {
        margin: 0;
        border-radius: 0 0 16px 16px;
    }

    .data-table {
        min-width: 850px;
    }

    .table-actions {
        white-space: nowrap;
    }

    /* Tombol WhatsApp tidak menutupi formulir. */
    .wa-float {
        right: 11px !important;
        bottom: 11px !important;
        width: 48px;
        height: 48px;
        padding: 0 !important;
        justify-content: center;
        border-radius: 50% !important;
    }

    .wa-float span {
        display: none !important;
    }

    .wa-float > i {
        font-size: 24px !important;
    }
}

@media (max-width: 430px) {
    .container,
    .admin-toolbar,
    .admin-container,
    .dashboard-container,
    .status-shell,
    .card-shell,
    .auth-wrap,
    .form-container {
        width: calc(100% - 8px) !important;
    }

    .wizard-step {
        min-height: 67px !important;
        padding-right: 3px !important;
        padding-left: 3px !important;
    }

    .wizard-number {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px;
    }

    .wizard-step b {
        font-size: 7.5px !important;
    }

    .form-section,
    .panel-body,
    .panel-head {
        padding-right: 11px !important;
        padding-left: 11px !important;
    }

    .summary-grid,
    .status-overview {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .summary-card {
        min-height: 0;
    }

    .mbr-doc-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mbr-doc-manage {
        width: 100%;
        min-height: 40px;
    }

    .document-row {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    }

    .score-total,
    .judge-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Landscape HP: jangan memaksa card setinggi layar. */
@media (max-height: 520px) and (orientation: landscape) {
    .public-page,
    .form-page,
    .auth-page,
    .dashboard-page,
    .admin-page,
    .card-page,
    .status-page {
        padding-top: 6px !important;
    }

    .mbr-modal-dialog {
        max-height: calc(100dvh - 12px) !important;
    }
}