/* =========================================
   JR TIME RANGE PICKER
========================================= */

.trp-wrapper {
    position: relative;
    width: 100%;
}

.trp-input {
    cursor: pointer;
    background: #fff !important;
}

    .trp-input:focus {
        box-shadow: none;
    }

/* =========================================
   DROPDOWN
========================================= */

.trp-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 320px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 14px;
    padding: 15px;
    z-index: 9999;
    display: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* =========================================
   GRID
========================================= */

.trp-grid {
    display: grid;
    gap: 10px;
}

/* =========================================
   ITEM
========================================= */

.trp-item {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: all .2s ease;
    font-size: .92rem;
    background: #fff;
}

    .trp-item:hover {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

    .trp-item.active {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    .trp-item.disabled {
        background: #e9ecef;
        border-color: #dee2e6;
        color: #adb5bd;
        cursor: not-allowed;
        pointer-events: none;
    }

/* =========================================
   FOOTER
========================================= */

.trp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    gap: 10px;
}

.trp-range {
    font-size: .85rem;
    color: #6c757d;
    font-weight: 500;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 576px) {

    .trp-dropdown {
        min-width: 100%;
    }

    .trp-item {
        padding: 8px;
        font-size: .85rem;
    }
}

/* =========================================
   DARK MODE
========================================= */

.trp-theme-dark .trp-dropdown {
    background: #1f2937;
    border-color: #374151;
}

.trp-theme-dark .trp-item {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

    .trp-theme-dark .trp-item:hover {
        background: #1f2937;
    }

    .trp-theme-dark .trp-item.active {
        background: #2563eb;
        border-color: #2563eb;
    }

.trp-theme-dark .trp-input {
    background: #111827 !important;
    color: #fff;
    border-color: #374151;
}

.trp-theme-dark .trp-range {
    color: #d1d5db;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:576px) {

    .trp-dropdown {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        z-index: 99999;
    }

    .trp-grid {
        gap: 8px;
    }

    .trp-item {
        padding: 12px 6px;
        font-size: .82rem;
    }
}