.btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
}

/* ---- moved out of inline <style> blocks for CSP (style-src-elem has no 'unsafe-inline') ---- */
[x-cloak] {
    display: none !important;
}

/* base.html (dashboard layout) */
.dashboard-layout .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.dashboard-layout .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dashboard-layout .sidebar-transition {
    transition: all 0.3s ease;
}

/* project_base.html (project layout) */
.project-layout .sidebar-transition {
    transition: transform 0.3s ease-in-out;
}

.project-layout #main-sidebar {
    z-index: 50;
}

.project-layout #project-sidebar {
    z-index: 45;
}

/* cotton/button.html: subtle gray overlay on top of disabled buttons */
.c-btn.has-disabled-overlay:disabled::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(191, 191, 191, 0.28);
    border-radius: inherit;
    pointer-events: none;
}

/* cotton/theme_toggle.html */
.theme-toggle-icon i {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-toggle-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
    pointer-events: none;
}

html.light .theme-toggle-sun {
    opacity: 1;
    transform: none;
}

html.light .theme-toggle-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
    pointer-events: none;
}

/* htmx: includeIndicatorStyles is off (CSP), so these come from here instead */
.htmx-indicator {
    opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Froala's "powered by" logo ships its colour in an inline SVG <style>, which the CSP blocks */
.fr-logo {
    fill: #b1b2b7;
}