/* =====================================================================
   JMDL Admin - Shared Component Foundation
   Keep shared reusable components here. Screen-specific refinements belong
   in public/assets/css/pages/*.css.
   ===================================================================== */

:root {
    --jmdl-radius-xs: 6px;
    --jmdl-radius-sm: 8px;
    --jmdl-radius-md: 10px;
    --jmdl-border: #E4E0FA;
    --jmdl-border-strong: #C9C3F2;
    --jmdl-text: #17142A;
    --jmdl-muted: #8A86A8;
    --jmdl-danger: #dc2626;
    --jmdl-success: #16a34a;
    --jmdl-warning: #d97706;
    --jmdl-info: #8174D8;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muted {
    color: var(--jmdl-muted);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 12px);
}

.cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cluster-gap, 10px);
}

.surface {
    background: #fff;
    border: 1px solid var(--jmdl-border);
    border-radius: var(--jmdl-radius-md);
}

.required-mark {
    color: var(--jmdl-danger);
    font-weight: 700;
}

.btn:focus-visible,
.form-control:focus-visible,
.switch input:focus-visible + .switch__track,
.pagination a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(148, 137, 226, .18);
}

.btn--icon .icon {
    pointer-events: none;
}

.pill--booked {
    background: #F1EFFF;
    color: #5F54C7;
}

.pill--assigned {
    background: #F1EFFF;
    color: #5F54C7;
}

.pill--picked-up {
    background: #fef3c7;
    color: #92400e;
}

.pill--in-transit {
    background: #F1EFFF;
    color: #6F63D9;
}

.pill--delivered {
    background: #dcfce7;
    color: #166534;
}

.pill--returned {
    background: #ffedd5;
    color: #9a3412;
}

.pill--cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.list-loading {
    opacity: .55;
    pointer-events: none;
}

.show-mobile {
    display: none !important;
}

@media (max-width: 640px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: initial !important;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .modal {
        padding: 16px 10px;
    }

    .modal__dialog {
        max-width: none;
    }
}

/* =====================================================================
   Phase 2 shared UI brand polish
   ===================================================================== */

:root {
    --jmdl-primary: #9489E2;
    --jmdl-primary-600: #8174D8;
    --jmdl-primary-700: #5F54C7;
    --jmdl-primary-50: #F8F7FF;
    --jmdl-primary-100: #F1EFFF;
    --jmdl-deep: #2F2A5F;
    --jmdl-soft-text: #403B5F;
    --jmdl-shadow-soft: 0 10px 28px rgba(47, 42, 95, .08);
    --jmdl-shadow-pop: 0 18px 42px rgba(47, 42, 95, .16);
    --jmdl-focus: 0 0 0 3px rgba(148, 137, 226, .18);
}

.btn {
    min-height: 38px;
    border-radius: 6px;
    font-weight: 750;
    letter-spacing: 0;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--jmdl-primary);
    border-color: var(--jmdl-primary);
    color: #fff;
    box-shadow: 0 12px 24px rgba(148, 137, 226, .24);
}

.btn--primary:hover {
    background: var(--jmdl-primary-600);
    border-color: var(--jmdl-primary-600);
    box-shadow: 0 14px 28px rgba(129, 116, 216, .28);
}

.btn--ghost {
    background: #fff;
    border-color: var(--jmdl-border-strong);
    color: var(--jmdl-text);
}

.btn--ghost:hover {
    background: var(--jmdl-primary-100);
    border-color: var(--jmdl-border-strong);
    color: var(--jmdl-primary-700);
}

.btn--icon {
    border-radius: 6px;
}

.form-control {
    min-height: 40px;
    border-color: var(--jmdl-border-strong);
    border-radius: 6px;
    color: var(--jmdl-text);
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.form-control:hover {
    border-color: var(--jmdl-muted);
}

.form-control:focus,
.form-control:focus-visible {
    border-color: var(--jmdl-primary);
    box-shadow: var(--jmdl-focus);
}

.form-control::placeholder {
    color: var(--jmdl-muted);
}

.form-label,
.bk-field__label {
    color: var(--jmdl-muted);
    font-weight: 800;
    letter-spacing: .04em;
}

.select2-container--default .select2-selection--single {
    min-height: 40px;
    border-color: var(--jmdl-border-strong);
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--jmdl-text);
    line-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--jmdl-muted);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--jmdl-primary) !important;
    box-shadow: var(--jmdl-focus);
}

.select2-dropdown {
    overflow: hidden;
    border-color: var(--jmdl-border-strong);
    border-radius: 8px;
    box-shadow: var(--jmdl-shadow-pop);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--jmdl-border-strong);
    border-radius: 6px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--jmdl-primary) !important;
    box-shadow: var(--jmdl-focus);
    outline: 0;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--jmdl-primary);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background: var(--jmdl-primary-100);
    color: var(--jmdl-primary-700);
}

.flatpickr-calendar {
    border: 1px solid var(--jmdl-border);
    border-radius: 8px;
    box-shadow: var(--jmdl-shadow-pop);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--jmdl-primary);
    border-color: var(--jmdl-primary);
}

.flatpickr-day.today {
    border-color: var(--jmdl-primary);
}

.table-wrap,
.card,
.surface,
.modal__dialog {
    border-color: var(--jmdl-border);
    border-radius: 8px;
    box-shadow: var(--jmdl-shadow-soft);
}

.table thead th {
    background: #FAFAFF;
    color: var(--jmdl-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.table tbody tr {
    border-top-color: var(--jmdl-border);
}

.table tbody tr:hover {
    background: var(--jmdl-primary-50);
}

.badge,
.pill,
.status-pill {
    border-radius: 999px;
    font-weight: 800;
}

.pagination a,
.pagination span.cur {
    min-width: 34px;
    height: 34px;
    border-radius: 6px;
}

.pagination a:hover {
    background: var(--jmdl-primary-100);
    color: var(--jmdl-primary-700);
}

.pagination span.cur {
    background: var(--jmdl-primary);
    border-color: var(--jmdl-primary);
}

.alert {
    border-radius: 8px;
}

.alert--info {
    background: var(--jmdl-primary-100);
    border-color: var(--jmdl-border-strong);
    color: var(--jmdl-primary-700);
}

.empty {
    border-radius: 8px;
}

.empty .icon {
    stroke: var(--jmdl-border-strong);
}

.modal {
    background: rgba(23, 20, 42, .48);
    backdrop-filter: blur(3px);
}

.modal__head {
    background: #fff;
    border-bottom-color: var(--jmdl-border);
}

.modal__head h3 {
    color: var(--jmdl-text);
    font-family: "Space Grotesk", Inter, sans-serif;
    font-weight: 700;
}

.modal__close {
    border-radius: 6px;
}

.modal__close:hover {
    background: var(--jmdl-primary-100);
    color: var(--jmdl-primary-700);
}

#toast-container > .toast {
    border-radius: 8px;
    box-shadow: var(--jmdl-shadow-pop);
}

.swal2-popup {
    border: 1px solid var(--jmdl-border);
    border-radius: 8px !important;
    box-shadow: var(--jmdl-shadow-pop) !important;
}

.swal2-title {
    color: var(--jmdl-text) !important;
    font-family: "Space Grotesk", Inter, sans-serif !important;
}

.swal2-confirm {
    background: var(--jmdl-primary) !important;
    border-radius: 6px !important;
}

.swal2-confirm:focus {
    box-shadow: var(--jmdl-focus) !important;
}

/* =====================================================================
   Phase 6 responsive QA guardrails
   ===================================================================== */

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

.content,
.page-head,
.card,
.surface,
.table-wrap,
.modal__dialog,
.select2-container,
.select2-dropdown {
    min-width: 0;
}

.table-wrap {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.modal {
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(12px, 4vw, 28px);
}

.modal__dialog {
    width: min(100%, var(--modal-width, 760px));
    max-height: calc(100dvh - 24px);
    overflow: hidden;
}

.modal__body {
    max-height: calc(100dvh - 156px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.select2-container--open {
    z-index: 10010;
}

.select2-results__option {
    overflow-wrap: anywhere;
}

.btn,
.pill,
.badge,
.status-pill {
    max-width: 100%;
}

.btn {
    min-width: 0;
}

@media (max-width: 760px) {
    .content {
        overflow-x: hidden;
    }

    .page-head,
    .card,
    .surface {
        border-radius: 8px;
    }

    .table-wrap {
        padding: 0;
        border-radius: 8px;
    }

    .modal__dialog {
        max-height: calc(100dvh - 18px);
    }

    .modal__head,
    .modal__body,
    .modal__foot,
    .modal__footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 520px) {
    .cluster {
        align-items: stretch;
    }

    .cluster > .btn {
        justify-content: center;
    }

    .pagination {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .pagination__pages {
        flex-wrap: wrap;
    }
}