/* ============================================================
   BarkBoard — phone polish layer ("Calm Light" family)
   ------------------------------------------------------------
   App-wide mobile ergonomics on top of modern-theme.css (loads
   after it). Pure presentation: no layout geometry, no JS hooks.
   Token-driven (--bb-*), RTL-safe, dark-mode aware.
   ============================================================ */

/* ------------------------------------------------------------
   1. Touch ergonomics — comfortable controls on coarse pointers
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
    .form-control,
    .form-select {
        min-height: 44px;
    }

    /* checkboxes/radios stay their size; enlarge the tap area via label */
    .form-check {
        min-height: 32px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .form-check .form-check-input {
        margin-top: 0;
    }

    textarea.form-control {
        min-height: 88px; /* taller than a control row — it's a text area */
    }

    .input-group > .btn {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------
   2. Phone page rhythm + safe areas (notched devices / PWA)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .page-content {
        padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* page headings breathe a little, cards stack with an even beat */
    .page-content > .row + .row {
        margin-top: 2px;
    }

    .card + .card,
    .row > [class*="col"] > .card {
        margin-bottom: 14px;
    }

    h4, .h4 { font-size: 1.2rem; }
    h5, .h5 { font-size: 1.05rem; }
}

/* ------------------------------------------------------------
   3. Bottom-sheet modals on phones
   ------------------------------------------------------------
   Dialogs slide up from the bottom edge with rounded top corners
   and scroll internally — the modern mobile idiom, and tall forms
   (reservation/client forms) stop pushing the footer off-screen.
   Fullscreen modals are excluded; add .bb-sheet-off to a
   .modal-dialog to opt a specific dialog out. */
@media (max-width: 575.98px) {
    .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        top: auto;
        margin: 0;
        width: 100%;
        max-width: none;
        display: flex;
        align-items: flex-end;
        /* replace Bootstrap's drop-from-top with a slide-from-bottom */
        transform: translateY(24px);
        transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    }

    .modal.show .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) {
        transform: none;
    }

    .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) .modal-content {
        width: 100%;
        border: none;
        border-radius: var(--bb-radius-xl) var(--bb-radius-xl) 0 0;
        max-height: calc(94dvh - env(safe-area-inset-top, 0px));
        box-shadow: var(--bb-shadow-xl);
    }

    /* grab handle affordance */
    .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) .modal-content::before {
        content: '';
        position: absolute;
        top: 8px;
        inset-inline: 0;
        margin-inline: auto;
        width: 40px;
        height: 4px;
        border-radius: var(--bb-radius-pill);
        background: var(--bb-border-strong);
    }

    .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) .modal-header {
        padding-top: 20px; /* room for the grab handle */
    }

    .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .modal .modal-dialog:not(.modal-fullscreen):not([class*="modal-fullscreen-"]):not(.bb-sheet-off) .modal-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* thumb-friendly footer actions: equal-width row of big buttons */
    .modal-footer {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .modal-footer > .btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        /* long Hebrew labels wrap instead of clipping */
        white-space: normal;
    }

    @media (prefers-reduced-motion: reduce) {
        .modal .modal-dialog {
            transition: none !important;
            transform: none !important;
        }
    }
}

/* ------------------------------------------------------------
   4. SweetAlert dialogs sized for phones
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .swal2-popup {
        width: min(92vw, 400px) !important;
        font-size: .95rem;
    }

    .swal2-actions {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .swal2-actions .swal2-confirm,
    .swal2-actions .swal2-cancel,
    .swal2-actions .swal2-deny {
        flex: 1 1 0;
        min-height: 44px;
    }
}