[x-cloak] {
    display: none;
}
:root {
    --charcoal: #264653;    
    --persian-green: #2a9d8f;
    --saffron: #e9c46a;
    --sandy-brown: #f4a261;
    --burnt-sienna: #e76f51;

    --color-primary: 34 197 94;      /* emerald-500 */
    --color-primary-hover: 22 163 74; /* emerald-600 */
    --color-secondary: 107 114 128;   /* gray-500 */
    --color-accent: 139 69 19;       /* yellow-600 */
    --color-background: 255 255 255; /* white */
    --color-surface: 249 250 251;    /* gray-50 */
    --color-text: 17 24 39;          /* gray-900 */
    --color-text-muted: 107 114 128; /* gray-500 */
}
/* Red theme */
[data-theme="red"] {
--color-primary: 239 68 68;      /* red-500 */
--color-primary-hover: 220 38 38; /* red-600 */
--color-secondary: 156 163 175;   /* gray-400 */
--color-accent: 245 158 11;      /* amber-500 */
--color-background: 255 255 255;
--color-surface: 254 242 242;    /* red-50 */
--color-text: 17 24 39;
--color-text-muted: 107 114 128;
}

/* Blue theme */
[data-theme="blue"] {
--color-primary: 59 130 246;     /* blue-500 */
--color-primary-hover: 37 99 235; /* blue-600 */
--color-secondary: 156 163 175;
--color-accent: 16 185 129;      /* emerald-500 */
--color-background: 255 255 255;
--color-surface: 239 246 255;    /* blue-50 */
--color-text: 17 24 39;
--color-text-muted: 107 114 128;
}

/* Pink theme */
[data-theme="pink"] {
--color-primary: 236 72 153;     /* pink-500 */
--color-primary-hover: 219 39 119; /* pink-600 */
--color-secondary: 156 163 175;
--color-accent: 168 85 247;      /* purple-500 */
--color-background: 255 255 255;
--color-surface: 253 242 248;    /* pink-50 */
--color-text: 17 24 39;
--color-text-muted: 107 114 128;
}

/* Dark theme variants */
[data-theme="red-dark"] {
--color-primary: 239 68 68;
--color-primary-hover: 220 38 38;
--color-secondary: 107 114 128;
--color-accent: 245 158 11;
--color-background: 17 24 39;     /* gray-900 */
--color-surface: 31 41 55;       /* gray-800 */
--color-text: 243 244 246;       /* gray-100 */
--color-text-muted: 156 163 175; /* gray-400 */
}
    
.bg-primary {
    background-color: rgb(var(--color-primary));
}
.bg-primary-hover {
    background-color: rgb(var(--color-primary-hover));
}
.hover\:bg-primary-hover:hover {
    background-color: rgb(var(--color-primary-hover));
}
.text-primary {
    color: rgb(var(--color-primary));
}
.border-primary {
    border-color: rgb(var(--color-primary));
}
.bg-surface {
    background-color: rgb(var(--color-surface));
}
.text-text {
    color: rgb(var(--color-text));
}
.text-text-muted {
    color: rgb(var(--color-text-muted));
}
.bg-background {
    background-color: rgb(var(--color-background));
}

.shadows-into-light-two-regular {
    font-family: "Shadows Into Light Two", cursive;
    font-weight: 500;
    font-style: normal;
}
.nav {
    background-color: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.nav-link {
    color: #4a5568;
    font-weight: 500;
    transition: color 0.3s ease-in-out;
}
.nav-link:hover {
    color: var(--persian-green);
}
.nav-link {
    transition: all 0.2s ease-in-out;
}
.nav-active {
    color: #1a202c;
    border-bottom: 2px solid #4a5568;
}
.mobile-menu {
    background-color: white;
    transition: max-height 0.3s ease-in-out;
}
.mobile-menu.hidden {
    max-height: 0;
    overflow: hidden;
}
.mobile-menu.visible {
    max-height: 500px;  
}

.mobile-auth-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
}
.dashboard-link {
    font-weight: 600;
    color: white;  
    background-color: var(--persian-green); 
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem; 
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-right: 0.5rem;  
}
.dashboard-link:hover {
    background-color: var(--charcoal); 
    text-decoration: none;
    color: white;
}
.btn-logout-mobile {  
    background-color: #e53e3e;  
    color: white;
    border: 1px solid transparent;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.btn-logout-mobile:hover {
    background-color: #c53030;  
    color: white;
    text-decoration: none;
}




        /* Only custom styles needed for tooltips */
        .tooltip-arrow-top::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -4px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #1f2937;
        }
        
        .tooltip-arrow-bottom::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -4px;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid #1f2937;
        }
        
        .tooltip-arrow-left::after {
            content: "";
            position: absolute;
            left: 100%;
            top: 50%;
            margin-top: -4px;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-left: 4px solid #1f2937;
        }
        
        .tooltip-arrow-right::after {
            content: "";
            position: absolute;
            right: 100%;
            top: 50%;
            margin-top: -4px;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
            border-right: 4px solid #1f2937;
        }