/* =====================================================================
   sd-responsive.css - one shared "make it behave on phones" layer for the
   Revenue, Notary and Land Registry portals (linked from includes/styles.php).
   Only layout / readability rules. No colours or branding are changed.
   Rules are prefixed with "body" so they win over the older page CSS.
   ===================================================================== */

/* ---- everywhere: readable focus, no sideways page scroll ------------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
body :focus-visible { outline: 2px solid #1c2b4a; outline-offset: 2px; }
body .btn:focus-visible, body .form-control:focus-visible, body .form-select:focus-visible { outline-offset: 0; }
img, svg, video, canvas, iframe { max-width: 100%; }
body .page-content img:not([height]):not(.rounded-circle):not(.avatar-xs):not(.avatar-sm) { height: auto; }
body .card, body .card-body { min-width: 0; }
body .card-body, body .modal-body { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- tablets and phones ------------------------------------------------ */
@media (max-width: 991.98px) {
    body .main-content { margin-left: 0 !important; }
    body .page-content { padding-left: 10px; padding-right: 10px; }
    body .container-fluid { padding-left: 6px; padding-right: 6px; }
    body .page-title-box { flex-direction: column; align-items: flex-start !important; gap: 4px; padding-bottom: 6px; }
    body .page-title-box .page-title-right { width: 100%; }
    body .breadcrumb { flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
    /* base text must stay readable and inputs must not trigger the iOS zoom */
    body { font-size: 14px; line-height: 1.5; }
    body .form-control, body .form-select, body input[type=text], body input[type=number], body input[type=email],
    body input[type=tel], body input[type=password], body input[type=date], body textarea, body select {
        font-size: 16px; min-height: 44px;
    }
    body textarea.form-control { min-height: 88px; }
    body .form-label, body label { font-size: 13px; margin-bottom: 4px; }
    body .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
    body .btn-sm { min-height: 36px; }
    body .btn-group, body .d-flex.gap-2:not(.flex-nowrap) { flex-wrap: wrap; }
    body .card { margin-bottom: 14px; }
    body .card-header { flex-wrap: wrap; gap: 6px; }
    body .card-header .card-title { font-size: 15px; }
    body .page-content { padding-top: calc(70px + 10px); padding-bottom: 70px; }
    body h1, body .h1 { font-size: 20px; }
    body h4, body .h4 { font-size: 17px; }

    /* tables: scroll sideways inside the card instead of breaking the page */
    body .card-body table.table, body .page-content > .container-fluid > table, body .modal-body table.table {
        display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    body .table-responsive > table, body .table-responsive > .table,
    body .dataTables_wrapper table, body .sdu-table, body .sdp-matrix { display: table; }
    body .table-responsive { -webkit-overflow-scrolling: touch; }
    body .table th { white-space: nowrap; }
    body .table td { white-space: normal; min-width: 96px; overflow-wrap: normal; word-break: normal; }
    body .table td .btn { white-space: nowrap; }
    body .table > :not(caption) > * > * { padding: 8px 8px; }

    /* DataTables controls */
    body .dataTables_wrapper .row { margin: 0; }
    body .dataTables_wrapper .row > div { width: 100%; padding: 0; text-align: left; margin-bottom: 8px; }
    body .dataTables_wrapper .dataTables_filter label, body .dataTables_wrapper .dataTables_length label { width: 100%; display: flex; align-items: center; gap: 8px; }
    body .dataTables_wrapper .dataTables_filter input { flex: 1; margin-left: 0; }
    body .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
    body .dataTables_wrapper .dataTables_paginate { float: none; }
    body .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start; }

    /* modals, dropdowns, tabs */
    body .modal-dialog:not(.modal-fullscreen) { margin: 8px; max-width: calc(100% - 16px); }
    body .modal-footer { flex-wrap: wrap; gap: 6px; }
    body .modal-footer .btn { flex: 1 1 auto; }
    body .dropdown-menu { max-width: 92vw; }
    body .nav-tabs, body .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    body .nav-tabs .nav-link, body .nav-pills .nav-link { padding: 10px 12px; }

    /* pagination, footer, alerts */
    body .pagination { flex-wrap: wrap; }
    body .footer { position: relative !important; left: 0 !important; text-align: center; padding: 12px 8px; }
    body .footer .text-sm-end { text-align: center !important; }
    body .alert { padding: 10px 12px; }

    /* wizard / step bars used by the notary forms */
    body .twitter-bs-wizard-nav, body .wizard-nav { overflow-x: auto; flex-wrap: nowrap; }
    body .btn-toolbar { gap: 6px; }

    /* anything that was given a fixed pixel width inline must not push the page */
    body input[style*="width"], body select[style*="width"], body textarea[style*="width"] { max-width: 100%; }
    body pre { white-space: pre-wrap; word-break: break-word; }
}

/* ---- very small phones ------------------------------------------------- */
@media (max-width: 400px) {
    body .page-content { padding-left: 6px; padding-right: 6px; }
    body .card-body { padding: 12px; }
    body .btn { padding-left: 12px; padding-right: 12px; }
}

/* ---- printing: leave documents exactly as they were -------------------- */
@media print {
    body { overflow: visible; }
}