/* Optimized & Modernized Styles */
:root {
    --primary: #4f46e5;
}

body {
    font-family: 'Inter', sans-serif;
}

/* Modern Glassmorphism Inputs & Selects */
.form-control,
.form-select {
    @apply w-full pl-6 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-[22px] transition-all duration-300 outline-none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.form-control:focus,
.form-select:focus {
    @apply border-[#ff3e9e]/30 ring-4 ring-[#ff3e9e]/5;
    transform: translateY(-9px);
    box-shadow: 0 4px 6px -9px rgba(0, 0, 0, 0.05);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
    padding-right: 2.5rem;
}


.form-label {
    @apply block text-[10px] font-bold text-slate-400 uppercase tracking-[0.12em] mb-1.5 ml-1;
}

.section-title {
    @apply text-[#FF3E1D] font-bold text-[22px] uppercase tracking-widest border-b border-slate-200 pb-11 mb-9;
}

/* Tight Row Spacing Logic */
#shipment-table td {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    height: 45px;
    vertical-align: middle;
    font-size: 22px;
}

/* Checkbox Style */
input[type="checkbox"] {
    @apply w-4 h-4 text-[#FF3E1D] border-slate-300 rounded-md focus:ring-indigo-500/20 cursor-pointer;
}

/* Table Scrollbar */
.overflow-x-auto::-webkit-scrollbar {
    height: 5px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    @apply bg-slate-200 rounded-full;
}

.inp-f-w {
    width: 100% !important;
}

@media (max-width: 1024px) {
    .sticky {
        position: static !important;
    }
}

/* Target the address textarea specifically */
textarea[name="address"] {
    width: calc(100%) !important;

    resize: none;
    /* Prevents user from breaking your layout */
    position: relative;
    z-index: 10;
}

/* Ensure dropdown appears above the table */
#datePickerContainer {
    position: relative;
    z-index: 50;
}

#datePickerDropdown {
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Entry Animation */
@keyframes pickerFade {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-fade-in {
    animation: pickerFade 0.2s ease-out forwards;
}

/* Custom Scrollbar for mobile preset list */
#datePickerDropdown div::-webkit-scrollbar {
    width: 4px;
}

#datePickerDropdown div::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}