@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --theme-color: #FE6B01;
    --bg-light: #f9fafb;
    --bg-dark: #18181b;
    --card-light: #fff;
    --card-dark: #23232a;
    --text-light: #18181b;
    --text-dark: #f3f4f6;
}
html, body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
}
body {
    background: var(--bg-light);
    color: var(--text-light);
}
.bg-theme { background-color: var(--theme-color); }
.text-theme { color: var(--theme-color); }
.border-theme { border-color: var(--theme-color); }
.font-extrabold { font-weight: 800; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-light { font-weight: 300; }
/* Navbar Dropdowns: Make dropdowns appear outside parent, not clipped */
.navbar-dropdown-menu,
#org-dropdown-menu,
#settings-dropdown-menu {
    position: fixed !important;
    min-width: 12rem;
    z-index: 9999 !important;
    margin-top: 0 !important;
}

/* Optional: Ensure parent wrappers do not have overflow:hidden or overflow:auto */
#org-dropdown-wrapper, #settings-dropdown-wrapper {
    overflow: visible !important;
}

/* Optional: Style for dropdown arrow if needed */
/* .navbar-dropdown-menu::before { ... } */

/* Hide dropdown when .hidden is present */
#org-dropdown-menu.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#org-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Dark mode (manual or system) */
[data-theme="dark"] body,
body[data-theme="dark"] {
    background: var(--bg-dark) !important;
    color: var(--text-dark) !important;
}
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-gray-50,
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-white\/90,
body[data-theme="dark"] .bg-gray-50 {
    background: var(--card-dark) !important;
}
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400,
body[data-theme="dark"] .text-gray-800,
body[data-theme="dark"] .text-gray-700,
body[data-theme="dark"] .text-gray-600,
body[data-theme="dark"] .text-gray-500,
body[data-theme="dark"] .text-gray-400 {
    color: var(--text-dark) !important;
}
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-100,
body[data-theme="dark"] .border-gray-200,
body[data-theme="dark"] .border-gray-100 {
    border-color: #333641 !important;
}
[data-theme="dark"] .shadow-2xl,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
body[data-theme="dark"] .shadow-2xl,
body[data-theme="dark"] .shadow-lg,
body[data-theme="dark"] .shadow,
body[data-theme="dark"] .shadow-sm {
    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.45) !important;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fadeIn { animation: fadeIn 1s ease; }
@keyframes slideIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-slideIn { animation: slideIn 0.7s cubic-bezier(.4,2,.6,1) 0.1s both; }
@keyframes pop { 0% { transform: scale(0.7); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
.animate-pop { animation: pop 0.5s cubic-bezier(.4,2,.6,1) 0.2s both; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.animate-shake { animation: shake 0.4s; }