sgse-app/apps/web/src/app.css

@import 'tailwindcss';
@plugin 'daisyui';

/* FullCalendar CSS - v6 não exporta CSS separado, estilos são aplicados via JavaScript */

/* Estilo padrão dos botões - mesmo estilo do sidebar */
.btn-standard {
	@apply border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content flex items-center justify-center gap-2 rounded-xl border p-3 text-center font-medium transition-colors hover:text-white active:text-white;
}

/* Sobrescrever estilos DaisyUI para seguir o padrão */
.btn-primary {
	@apply border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-center font-medium transition-colors hover:text-white active:text-white;
}

.btn-ghost {
	@apply border-base-300 bg-base-100 hover:bg-base-200 active:bg-base-300 text-base-content flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-center font-medium transition-colors;
}

.btn-error {
	@apply border-error bg-base-100 hover:bg-error/60 active:bg-error text-error flex items-center justify-center gap-2 rounded-xl border px-4 py-2 text-center font-medium transition-colors hover:text-white active:text-white;
}

/* Tema Aqua (padrão roxo/azul) - customizado para garantir funcionamento */
html[data-theme='aqua'],
html[data-theme='aqua'] body,
[data-theme='aqua'] {
	color-scheme: light;
	--p: 217 91% 60%;
	--pf: 217 91% 50%;
	--pc: 0 0% 100%;
	--s: 217 91% 60%;
	--sf: 217 91% 50%;
	--sc: 0 0% 100%;
	--a: 217 91% 60%;
	--af: 217 91% 50%;
	--ac: 0 0% 100%;
	--n: 217 20% 17%;
	--nf: 217 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 217 20% 95%;
	--b3: 217 20% 90%;
	--bc: 217 20% 17%;
	--in: 217 91% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

/* Temas customizados para SGSE - Azul */
html[data-theme='sgse-blue'],
html[data-theme='sgse-blue'] body,
[data-theme='sgse-blue'] {
	color-scheme: light;
	--p: 217 91% 60%;
	--pf: 217 91% 50%;
	--pc: 0 0% 100%;
	--s: 217 91% 60%;
	--sf: 217 91% 50%;
	--sc: 0 0% 100%;
	--a: 217 91% 60%;
	--af: 217 91% 50%;
	--ac: 0 0% 100%;
	--n: 217 20% 17%;
	--nf: 217 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 217 20% 95%;
	--b3: 217 20% 90%;
	--bc: 217 20% 17%;
	--in: 217 91% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

/* Garantir que todas as variáveis CSS sejam aplicadas em todos os elementos */
html[data-theme] {
	color-scheme: var(--color-scheme, light);
}

html[data-theme] * {
	color-scheme: inherit;
}

html[data-theme='sgse-green'],
html[data-theme='sgse-green'] body,
[data-theme='sgse-green'] {
	color-scheme: light;
	--p: 142 76% 36%;
	--pf: 142 76% 26%;
	--pc: 0 0% 100%;
	--s: 142 76% 36%;
	--sf: 142 76% 26%;
	--sc: 0 0% 100%;
	--a: 142 76% 36%;
	--af: 142 76% 26%;
	--ac: 0 0% 100%;
	--n: 142 20% 17%;
	--nf: 142 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 142 20% 95%;
	--b3: 142 20% 90%;
	--bc: 142 20% 17%;
	--in: 142 76% 36%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

html[data-theme='sgse-orange'],
html[data-theme='sgse-orange'] body,
[data-theme='sgse-orange'] {
	color-scheme: light;
	--p: 25 95% 53%;
	--pf: 25 95% 43%;
	--pc: 0 0% 100%;
	--s: 25 95% 53%;
	--sf: 25 95% 43%;
	--sc: 0 0% 100%;
	--a: 25 95% 53%;
	--af: 25 95% 43%;
	--ac: 0 0% 100%;
	--n: 25 20% 17%;
	--nf: 25 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 25 20% 95%;
	--b3: 25 20% 90%;
	--bc: 25 20% 17%;
	--in: 25 95% 53%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

html[data-theme='sgse-red'],
html[data-theme='sgse-red'] body,
[data-theme='sgse-red'] {
	color-scheme: light;
	--p: 0 84% 60%;
	--pf: 0 84% 50%;
	--pc: 0 0% 100%;
	--s: 0 84% 60%;
	--sf: 0 84% 50%;
	--sc: 0 0% 100%;
	--a: 0 84% 60%;
	--af: 0 84% 50%;
	--ac: 0 0% 100%;
	--n: 0 20% 17%;
	--nf: 0 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 0 20% 95%;
	--b3: 0 20% 90%;
	--bc: 0 20% 17%;
	--in: 0 84% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

html[data-theme='sgse-pink'],
html[data-theme='sgse-pink'] body,
[data-theme='sgse-pink'] {
	color-scheme: light;
	--p: 330 81% 60%;
	--pf: 330 81% 50%;
	--pc: 0 0% 100%;
	--s: 330 81% 60%;
	--sf: 330 81% 50%;
	--sc: 0 0% 100%;
	--a: 330 81% 60%;
	--af: 330 81% 50%;
	--ac: 0 0% 100%;
	--n: 330 20% 17%;
	--nf: 330 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 330 20% 95%;
	--b3: 330 20% 90%;
	--bc: 330 20% 17%;
	--in: 330 81% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

html[data-theme='sgse-teal'],
html[data-theme='sgse-teal'] body,
[data-theme='sgse-teal'] {
	color-scheme: light;
	--p: 173 80% 40%;
	--pf: 173 80% 30%;
	--pc: 0 0% 100%;
	--s: 173 80% 40%;
	--sf: 173 80% 30%;
	--sc: 0 0% 100%;
	--a: 173 80% 40%;
	--af: 173 80% 30%;
	--ac: 0 0% 100%;
	--n: 173 20% 17%;
	--nf: 173 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 173 20% 95%;
	--b3: 173 20% 90%;
	--bc: 173 20% 17%;
	--in: 173 80% 40%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

html[data-theme='sgse-corporate'],
html[data-theme='sgse-corporate'] body,
[data-theme='sgse-corporate'] {
	color-scheme: dark;
	--p: 217 91% 60%;
	--pf: 217 91% 50%;
	--pc: 0 0% 100%;
	--s: 217 91% 60%;
	--sf: 217 91% 50%;
	--sc: 0 0% 100%;
	--a: 217 91% 60%;
	--af: 217 91% 50%;
	--ac: 0 0% 100%;
	--n: 217 30% 15%;
	--nf: 217 30% 8%;
	--nc: 0 0% 100%;
	--b1: 217 30% 10%;
	--b2: 217 30% 15%;
	--b3: 217 30% 20%;
	--bc: 217 10% 90%;
	--in: 217 91% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

/* Tema Light customizado para garantir funcionamento completo */
html[data-theme='light'],
html[data-theme='light'] body,
[data-theme='light'] {
	color-scheme: light;
	--p: 217 91% 60%;
	--pf: 217 91% 50%;
	--pc: 0 0% 100%;
	--s: 217 91% 60%;
	--sf: 217 91% 50%;
	--sc: 0 0% 100%;
	--a: 217 91% 60%;
	--af: 217 91% 50%;
	--ac: 0 0% 100%;
	--n: 217 20% 17%;
	--nf: 217 20% 10%;
	--nc: 0 0% 100%;
	--b1: 0 0% 100%;
	--b2: 217 20% 95%;
	--b3: 217 20% 90%;
	--bc: 217 20% 17%;
	--in: 217 91% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}

/* Tema Dark customizado para garantir funcionamento completo */
html[data-theme='dark'],
html[data-theme='dark'] body,
[data-theme='dark'] {
	color-scheme: dark;
	--p: 217 91% 60%;
	--pf: 217 91% 50%;
	--pc: 0 0% 100%;
	--s: 217 91% 60%;
	--sf: 217 91% 50%;
	--sc: 0 0% 100%;
	--a: 217 91% 60%;
	--af: 217 91% 50%;
	--ac: 0 0% 100%;
	--n: 217 30% 15%;
	--nf: 217 30% 8%;
	--nc: 0 0% 100%;
	--b1: 217 30% 10%;
	--b2: 217 30% 15%;
	--b3: 217 30% 20%;
	--bc: 217 10% 90%;
	--in: 217 91% 60%;
	--inc: 0 0% 100%;
	--su: 142 76% 36%;
	--suc: 0 0% 100%;
	--wa: 38 92% 50%;
	--wac: 0 0% 100%;
	--er: 0 84% 60%;
	--erc: 0 0% 100%;
	--rounded-box: 1rem;
	--rounded-btn: 0.5rem;
	--rounded-badge: 1.9rem;
	--animation-btn: 0.25s;
	--animation-input: 0.2s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
	--tab-border: 1px;
	--tab-radius: 0.5rem;
}