@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Single point of theme control */
    --primary-color: #ED5A15;
    --primary-color-600: #ED5A15;
    --primary-color-800: #ED5A15;
    --primary-color-rgb: 252, 25, 39;
    --primary-50: rgba(var(--primary-color-rgb), 0.12);
    --primary-100: rgba(var(--primary-color-rgb), 0.22);

    --secondary-color: #1254A2;
    --secondary-color-rgb: 18, 84, 162;
    --secondary-50: rgba(var(--secondary-color-rgb), 0.12);
    --secondary-100: rgba(var(--secondary-color-rgb), 0.22);
}

/* ───────────────────────────────────────────────────────────────── */
/* THEME SYSTEM CLASS OVERRIDES */
/* ───────────────────────────────────────────────────────────────── */
.bg-primary-500 {
    background-color: var(--primary-color) !important;
}

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

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

/* Add button primary background styling */
premium-button[button-id*="add" i] button,
premium-button[label*="Add" i] button {
    background-color: var(--primary-color, #F5500B) !important;
    color: #ffffff !important;
    border-color: var(--primary-color, #F5500B) !important;
}

premium-button[button-id*="add" i] button:hover,
premium-button[label*="Add" i] button:hover {
    background-color: var(--primary-color-600, #F5500B) !important;
    color: #ffffff !important;
    border-color: var(--primary-color-600, #F5500B) !important;
    opacity: 0.92;
}

premium-button[button-id*="add" i] button span,
premium-button[label*="Add" i] button span {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

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

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

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

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

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

.bg-primary-50 {
    background-color: var(--primary-50) !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;
}

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

/* override local card loader overlay styles dynamically */
.premium-card-loading-spinner {
    border-color: var(--secondary-100, rgba(18, 84, 162, 0.2)) !important;
    border-top-color: var(--secondary-color, #1254A2) !important;
}

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

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

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

/* 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 {
    background-color: var(--primary-color) !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;
}

/* 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;
    }
}

/* Custom slim scrollbar for containers */
.slim-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.slim-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.slim-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    /* gray-400 with opacity */
    border-radius: 10px;
}

.slim-scrollbar::-webkit-scrollbar-button {
    display: none;
    /* Hide arrows */
}

/* ───────────────────────────────────────────────────────────────── */
/* MOBILE VIEWPORT & SAFE AREA HELPERS */
/* ───────────────────────────────────────────────────────────────── */

/* Fallback custom property definition */
:root {
    --vh: 1vh;
}

/* Overrides to ensure Tailwind screen height classes use dvh and fallback variable */
.h-screen {
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    height: 100dvh !important;
}

.min-h-screen {
    min-height: 100vh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    min-height: 100dvh !important;
}

/* Full-height container for scrollable/scrolling content (e.g. login/auth) */
.full-height-container {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    /* padding-bottom: max(16px, env(safe-area-inset-bottom)); */
}

@supports not (height: 100dvh) {
    .full-height-container {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

/* Adjust mobile layout header elements for safe-area-inset-top */
header {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

/* Prevent SweetAlert2 from collapsing body/html height and breaking flex layouts */
html.swal2-height-auto,
body.swal2-height-auto {
    height: 100% !important;
}

/* Global Thin & Barely Visible Scrollbar Theme */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3) !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5) !important;
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent !important;
}