/* ==========================================================================
   BrokerBook — Transport Console
   Custom Component & Animation Styles
   ========================================================================== */

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

        body {
            -webkit-tap-highlight-color: transparent
        }

        button,
        a,
        input,
        select,
        textarea {
            touch-action: manipulation
        }

        :focus-visible {
            outline: 2px solid #15803d;
            outline-offset: 2px;
            border-radius: 8px
        }

        .otp {
            -webkit-text-security: disc
        }

        /* ---- modern field states: 1px color shift + soft halo (Atlassian-style) ---- */
        .f-input {
            transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease
        }

        .f-input:hover {
            border-color: #a3a3a3
        }

        .f-input:focus {
            border-color: #15803d;
            box-shadow: 0 0 0 3px rgba(21, 128, 61, .10);
            outline: none
        }

        .f-input.border-red-400 {
            border-color: #f87171
        }

        .f-input.border-red-400:focus {
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .10)
        }

        /* OTP boxes: same treatment (escaped !important error class covered) */
        .otp {
            transition: border-color .15s ease, box-shadow .15s ease
        }

        .otp:hover {
            border-color: #a3a3a3
        }

        .otp:focus {
            border-color: #15803d;
            box-shadow: 0 0 0 3px rgba(21, 128, 61, .10);
            outline: none
        }

        .otp.\!border-red-400 {
            border-color: #f87171 !important
        }

        .otp.\!border-red-400:focus {
            border-color: #ef4444;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .10)
        }

        /* tactile press on buttons */
        .press:active {
            transform: translateY(1px)
        }

        @keyframes shake {
            20% {
                transform: translateX(-6px)
            }

            40% {
                transform: translateX(6px)
            }

            60% {
                transform: translateX(-4px)
            }

            80% {
                transform: translateX(4px)
            }
        }

        .shake {
            animation: shake .45s
        }

        @keyframes pop {
            0% {
                transform: scale(.4)
            }

            70% {
                transform: scale(1.12)
            }

            100% {
                transform: scale(1)
            }
        }

        .pop {
            animation: pop .35s ease-out
        }

        .scr {
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch
        }

        .scr::-webkit-scrollbar {
            height: 6px;
            width: 6px
        }

        .scr::-webkit-scrollbar-thumb {
            background: #d4d4d4;
            border-radius: 6px
        }

        @keyframes shimmer {
            0% {
                background-position: -400px 0
            }

            100% {
                background-position: 400px 0
            }
        }

        .skel {
            background: linear-gradient(90deg, #f5f5f5 25%, #ececec 37%, #f5f5f5 63%);
            background-size: 400px 100%;
            animation: shimmer 1.3s linear infinite;
            border-radius: 6px
        }

        .tip {
            position: relative;
            display: inline-flex
        }

        .tip .tipbox {
            position: absolute;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: #171717;
            color: #fff;
            font-size: 11px;
            font-weight: 500;
            padding: 5px 9px;
            border-radius: 6px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s;
            z-index: 50
        }

        .tip:hover .tipbox,
        .tip:focus-within .tipbox {
            opacity: 1
        }

        kbd {
            font-family: Inter, ui-sans-serif, sans-serif;
            font-size: 11px;
            font-weight: 500;
            padding: 2px 7px;
            border: 1px solid #e5e5e5;
            border-bottom-width: 2px;
            border-radius: 6px;
            background: #fafafa;
            color: #525252;
            line-height: 1.4
        }

        details.kit>summary {
            list-style: none;
            cursor: pointer
        }

        details.kit>summary::-webkit-details-marker {
            display: none
        }

        details.kit>summary .chev {
            transition: transform .15s
        }

        details.kit[open]>summary .chev {
            transform: rotate(90deg)
        }

        /* custom dropdown */
        @keyframes pIn {
            from {
                opacity: 0;
                transform: translateY(-4px) scale(.98)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .csel-panel {
            animation: pIn .12s ease-out
        }

        .csel.open .csel-chev {
            transform: rotate(180deg)
        }

        .csel.err .csel-btn {
            border-color: #f87171;
            background: #fef2f2
        }

        .csel.err .csel-btn:focus {
            box-shadow: 0 0 0 3px rgba(239, 68, 68, .10)
        }

        .csel-opt.kbd-on {
            background: #f5f5f5
        }

        /* custom checkbox / radio */
        .cbx input:checked+.cbx-box {
            background: #15803d;
            border-color: #15803d
        }

        .cbx input:checked+.cbx-box .cbx-ic {
            opacity: 1;
            transform: scale(1)
        }

        .cbx input:focus-visible+.cbx-box {
            border-color: #15803d;
            box-shadow: 0 0 0 4px rgba(21, 128, 61, .15)
        }

        .cbx:hover .cbx-box {
            border-color: #a3a3a3
        }

        .rdo input:checked+.rdo-box {
            border-color: #15803d
        }

        .rdo input:checked+.rdo-box::after {
            content: '';
            position: absolute;
            inset: 3.5px;
            border-radius: 9999px;
            background: #15803d
        }

        .rdo input:focus-visible+.rdo-box {
            border-color: #15803d;
            box-shadow: 0 0 0 4px rgba(21, 128, 61, .15)
        }

        .rdo:hover .rdo-box {
            border-color: #a3a3a3
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            display: none
        }

        input[type=number]::-webkit-outer-spin-button,
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        input[type=number] {
            -moz-appearance: textfield
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 9999px;
            background: #e5e5e5;
            outline: none
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #15803d;
            border: 3px solid #fff;
            box-shadow: 0 0 0 1px #d4d4d4, 0 1px 3px rgba(0, 0, 0, .18);
            cursor: pointer
        }

        input[type=range]::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #15803d;
            border: 3px solid #fff;
            box-shadow: 0 0 0 1px #d4d4d4;
            cursor: pointer
        }

        /* overlays */
        @keyframes bIn {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .back-in {
            animation: bIn .15s ease-out
        }

        @keyframes mIn {
            from {
                opacity: 0;
                transform: translateY(14px) scale(.97)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .modal-in {
            animation: mIn .18s ease-out
        }

        @keyframes dIn {
            from {
                opacity: 0;
                transform: scale(.97) translateY(-4px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .dd {
            animation: dIn .12s ease-out;
            transform-origin: top
        }

        @keyframes tprog {
            from {
                width: 100%
            }

            to {
                width: 0
            }
        }

        #sidebar .nav-active {
            box-shadow: inset 3px 0 0 #16a34a
        }

        #printArea {
            display: none
        }

        @media print {
            body>*:not(#printArea) {
                display: none !important
            }

            #printArea {
                display: block !important
            }
        }

        .pt-tbl {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
            font-size: 12px;
            font-family: Inter, sans-serif
        }

        .pt-tbl th {
            border: 1px solid #a3a3a3;
            background: #f5f5f5;
            padding: 6px 8px;
            text-align: left;
            font-weight: 600;
            color: #171717
        }

        .pt-tbl td {
            border: 1px solid #d4d4d4;
            padding: 6px 8px;
            color: #262626
        }

        .pt-r {
            text-align: right;
            font-variant-numeric: tabular-nums
        }