:root {
    /* Single point of theme control */
    --primary-color: #022C58;
    --primary-color-600: #022C58;
    --primary-color-800: #022C58;
    --primary-color-rgb: 2, 44, 88;
    --primary-50: rgba(var(--primary-color-rgb), 0.12);
    --primary-100: rgba(var(--primary-color-rgb), 0.22);

    --secondary-color: #F89212;
    --secondary-color-600: #F89212;
    --secondary-color-800: #F89212;
    --secondary-color-rgb: 248, 146, 18;
    --secondary-50: rgba(var(--secondary-color-rgb), 0.12);
    --secondary-100: rgba(var(--secondary-color-rgb), 0.22);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    background: #f9fafb;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Thin Scrollbar Utility */
.thin-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.thin-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.thin-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 10px;
}
.thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* Shared Select2 theme */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background-color: #fff !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #374151 !important;
    line-height: 40px !important;
    padding-left: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 10px !important;
}

.select2-dropdown {
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

/* Select2 inside premium popup modal (overlay z-[60]) */
[data-modal-overlay] .select2-container {
    z-index: 70 !important;
}

[data-modal-overlay] .select2-container--open {
    z-index: 71 !important;
}

[data-modal-overlay] .select2-dropdown {
    z-index: 72 !important;
}

/* Modal open/API loading overlay — above Select2 (70–72) inside the same overlay */
[data-modal-overlay] [data-modal-loading] {
    z-index: 100 !important;
}

/* Map hardcoded amber utility classes to global primary color */
.text-primary-500 {
    color: var(--primary-color) !important;
}

.text-primary-600 {
    color: var(--primary-color-600) !important;
}

.text-primary-800 {
    color: var(--primary-color-800) !important;
}

.bg-primary-50 {
    background-color: var(--primary-50) !important;
}

.bg-primary-50\/50 {
    background-color: rgba(var(--primary-color-rgb), 0.12) !important;
}

.bg-primary-100 {
    background-color: var(--primary-100) !important;
}

.bg-primary-500 {
    background-color: var(--primary-color) !important;
}

.bg-primary-600 {
    background-color: var(--primary-color-600) !important;
}

.border-primary-100 {
    border-color: var(--primary-100) !important;
}

.border-primary-100\/50 {
    border-color: rgba(var(--primary-color-rgb), 0.22) !important;
}

.border-primary-500 {
    border-color: var(--primary-color) !important;
}

.hover\:text-primary-500:hover {
    color: var(--primary-color) !important;
}

.hover\:text-primary-600:hover {
    color: var(--primary-color-600) !important;
}

.hover\:text-white:hover {
    color: #ffffff !important;
}

.group:hover .group-hover\:text-primary-500 {
    color: var(--primary-color) !important;
}

.hover\:bg-primary-500:hover {
    background-color: var(--primary-color) !important;
}

.hover\:bg-primary-600:hover {
    background-color: var(--primary-color-600) !important;
}

.hover\:bg-primary-50:hover {
    background-color: var(--primary-50) !important;
}

.hover\:border-primary-500\/50:hover {
    border-color: rgba(var(--primary-color-rgb), 0.5) !important;
}

.focus\:border-primary-500\/50:focus {
    border-color: rgba(var(--primary-color-rgb), 0.5) !important;
}

.focus\:ring-primary-500\/5:focus {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.05) !important;
}

.hover\:ring-primary-500\/10:hover {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

.hover\:ring-primary-500\/20:hover {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.2) !important;
}

.peer:focus~.peer-focus\:ring-primary-500\/10 {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

.hover\:shadow-primary-500\/20:hover {
    --tw-shadow-color: rgba(var(--primary-color-rgb), 0.2) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

.group:focus-within .group-focus-within\:text-primary-500 {
    color: var(--primary-color) !important;
}

.group:focus-within .group-focus-within\:text-primary-600 {
    color: var(--primary-color-600) !important;
}

.accent-primary-500 {
    accent-color: var(--primary-color) !important;
}

.peer:checked~.peer-checked\:bg-primary-500 {
    background-color: var(--primary-color) !important;
}

/* Map secondary color utility classes */
.text-secondary-500 {
    color: var(--secondary-color) !important;
}

.text-secondary-600 {
    color: var(--secondary-color-600) !important;
}

.text-secondary-800 {
    color: var(--secondary-color-800) !important;
}

.bg-secondary-50 {
    background-color: var(--secondary-50) !important;
}

.bg-secondary-50\/50 {
    background-color: rgba(var(--secondary-color-rgb), 0.12) !important;
}

.bg-secondary-100 {
    background-color: var(--secondary-100) !important;
}

.bg-secondary-500 {
    background-color: var(--secondary-color) !important;
}

.bg-secondary-600 {
    background-color: var(--secondary-color-600) !important;
}

.border-secondary-100 {
    border-color: var(--secondary-100) !important;
}

.border-secondary-100\/50 {
    border-color: rgba(var(--secondary-color-rgb), 0.22) !important;
}

.border-secondary-500 {
    border-color: var(--secondary-color) !important;
}

/* Backward compatibility for existing amber classes */
.text-amber-500 {
    color: var(--primary-color) !important;
}

.text-amber-600 {
    color: var(--primary-color-600) !important;
}

.text-amber-800 {
    color: var(--primary-color-800) !important;
}

.bg-amber-50 {
    background-color: var(--primary-50) !important;
}

.bg-amber-50\/50 {
    background-color: rgba(var(--primary-color-rgb), 0.12) !important;
}

.bg-amber-100 {
    background-color: var(--primary-100) !important;
}

.bg-amber-500 {
    background-color: var(--primary-color) !important;
}

.bg-amber-600 {
    background-color: var(--primary-color-600) !important;
}

.border-amber-100 {
    border-color: var(--primary-100) !important;
}

.border-amber-100\/50 {
    border-color: rgba(var(--primary-color-rgb), 0.22) !important;
}

.border-amber-500 {
    border-color: var(--primary-color) !important;
}

.hover\:text-amber-500:hover {
    color: var(--primary-color) !important;
}

.hover\:text-amber-600:hover {
    color: var(--primary-color-600) !important;
}

.group:hover .group-hover\:text-amber-500 {
    color: var(--primary-color) !important;
}

.hover\:bg-amber-500:hover {
    background-color: var(--primary-color) !important;
}

.hover\:bg-amber-600:hover {
    background-color: var(--primary-color-600) !important;
}

.hover\:bg-amber-50:hover {
    background-color: var(--primary-50) !important;
}

.hover\:border-amber-500\/50:hover {
    border-color: rgba(var(--primary-color-rgb), 0.5) !important;
}

.focus\:border-amber-500\/50:focus {
    border-color: rgba(var(--primary-color-rgb), 0.5) !important;
}

.focus\:ring-amber-500\/5:focus {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.05) !important;
}

.hover\:ring-amber-500\/10:hover {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

.hover\:ring-amber-500\/20:hover {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.2) !important;
}

.peer:focus~.peer-focus\:ring-amber-500\/10 {
    --tw-ring-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

.hover\:shadow-amber-500\/20:hover {
    --tw-shadow-color: rgba(var(--primary-color-rgb), 0.2) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}

.group:focus-within .group-focus-within\:text-amber-500 {
    color: var(--primary-color) !important;
}

.group:focus-within .group-focus-within\:text-amber-600 {
    color: var(--primary-color-600) !important;
}

.accent-amber-500 {
    accent-color: var(--primary-color) !important;
}

.peer:checked~.peer-checked\:bg-amber-500 {
    background-color: var(--primary-color) !important;
}

/* NewDesign/Task/NewTask.html — task + resent modals: full-width on small screens (moved from page inline style). */
@media (max-width: 639px) {
    #task-modal [data-modal-overlay],
    #resent-task-modal [data-modal-overlay] {
        padding: 1rem 0.75rem !important;
    }

    #task-modal [data-modal-box],
    #resent-task-modal [data-modal-box] {
        width: 100% !important;
        max-width: 100% !important;
    }
}