@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* INDEV: tokens do design system mapeados para as variáveis do Frappe. Fonte: INDEV Design System. */
:root,
[data-theme="light"] {
	/* Neutros com o viés quente da marca */
	--gray-50: #f8f5ec;
	--gray-100: #f0ede4;
	--gray-200: #e6e1d6;
	--gray-300: #d9d4c9;
	--gray-400: #b5b0a5;
	--gray-500: #8a867c;
	--gray-600: #616161;
	--gray-700: #4a4a4a;
	--gray-800: #2e2e2e;
	--gray-900: #141414;
	--gray-950: #0d0d0d;

	--indev-page: #f8f5ec;
	--indev-surface: #ffffff;
	--indev-surface-2: #f0ede4;
	--indev-gold: #9b7231;
	--indev-gold-strong: #856023;
	--indev-on-gold: #ffffff;
	--indev-border: #d9d4c9;
	--indev-ink: #141414;
	--indev-muted: #616161;
	--indev-success: #356e4c;

	--surface-sidebar: var(--indev-surface);
	--navbar-bg: var(--indev-surface);
	--btn-primary: var(--indev-gold-strong);
	--primary: var(--indev-gold-strong);
	--primary-color: var(--indev-gold-strong);
	--border-primary: var(--indev-gold-strong);
	--focus-default: 0 0 0 2px var(--indev-gold);
	--focus-outline-default: 2px solid var(--indev-gold);
	--checkbox-focus-shadow: 0 0 0 2px var(--indev-gold);
}

[data-theme="dark"],
.dark {
	--surface-base: #111111;
	--surface-sidebar: #070707;
	--navbar-bg: #070707;

	--indev-page: #070707;
	--indev-surface: #111111;
	--indev-surface-2: #0f0f0f;
	--indev-gold: #c3a779;
	--indev-gold-strong: #d5bb90;
	--indev-on-gold: #070707;
	--indev-border: #1f1f1f;
	--indev-ink: #e5e4e1;
	--indev-muted: #878787;
	--indev-success: #64b484;

	--btn-primary: var(--indev-gold-strong);
	--primary: var(--indev-gold-strong);
	--primary-color: var(--indev-gold-strong);
	--border-primary: var(--indev-gold-strong);
	--focus-default: 0 0 0 2px var(--indev-gold);
	--focus-outline-default: 2px solid var(--indev-gold);
	--checkbox-focus-shadow: 0 0 0 2px var(--indev-gold);
}

/* Forma: tudo reto. --radius-9 e --radius-full ficam para pontos de status e avatares. */
:root {
	--radius-1: 0px;
	--radius-2: 0px;
	--radius-3: 0px;
	--radius-4: 0px;
	--radius-5: 0px;
	--radius-6: 0px;
	--radius-7: 0px;
	--radius-8: 0px;
	--radius-sm: 0px;
	--radius: 0px;
	--radius-md: 0px;
	--radius-lg: 0px;
	--radius-xl: 0px;
	--radius-2xl: 0px;
	--border-radius-sm: 0px;
	--border-radius: 0px;
	--border-radius-md: 0px;
	--border-radius-lg: 0px;
	--border-radius-xl: 0px;
	--border-radius-2xl: 0px;
	--indev-font-display: Montserrat, var(--font-stack);
	--indev-font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Área de trabalho */
body,
.main-section,
#body,
.content.page-container,
.page-body,
.layout-main-section-wrapper {
	background-color: var(--indev-page);
}

.layout-main-section {
	background-color: transparent;
}

.frappe-card,
.form-page,
.widget,
.frappe-list .result,
.report-wrapper,
.page-form {
	background-color: var(--indev-surface);
}

.frappe-list .result {
	border: 1px solid var(--indev-border);
}

.page-form {
	background-color: transparent;
}

/* Tipografia */
h1, h2, h3, h4,
.page-title .title-text,
.title-text,
.header-title,
.modal-title,
.page-card-head h4 {
	font-family: var(--indev-font-display);
	font-weight: 700;
	letter-spacing: 0;
}

.list-row-head,
.list-row-head .list-subject,
.list-row-head .list-row-col,
.grid-heading-row,
.form-section .section-head,
.sidebar-label {
	font-family: var(--indev-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 11px;
}

/* Botões */
.btn.btn-primary,
.btn-primary {
	background-color: var(--indev-gold-strong) !important;
	border-color: var(--indev-gold-strong) !important;
	color: var(--indev-on-gold) !important;
	font-family: var(--indev-font-display);
	font-weight: 700;
}

.es-button[data-variant="solid"]:not([data-theme="red"]) {
	background-color: var(--indev-gold-strong);
	color: var(--indev-on-gold);
	font-family: var(--indev-font-display);
	font-weight: 700;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.es-button[data-variant="solid"]:not([data-theme="red"]):hover {
	background-color: var(--indev-gold-strong);
	filter: brightness(1.08);
}

/* Campos: caixa reta e branca, como o Field do design system */
.form-control,
.awesomplete .input-with-feedback,
.frappe-control input,
.frappe-control select,
.frappe-control textarea {
	background-color: var(--indev-surface);
	border: 1px solid var(--indev-border);
}

.form-control:focus,
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
	border-color: var(--indev-gold);
	box-shadow: 0 0 0 1px var(--indev-gold);
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--indev-gold);
	outline-offset: 1px;
	box-shadow: none;
}

/* Navegação lateral */
.body-sidebar,
.body-sidebar-container {
	background-color: var(--indev-surface);
	border-color: var(--indev-border);
}

.standard-sidebar-item {
	border-left: 3px solid transparent;
}

.standard-sidebar-item.active-sidebar {
	background-color: var(--indev-surface-2);
	border-left-color: var(--indev-gold);
	font-weight: 600;
	box-shadow: none;
}

/* Listas e tabelas */
.list-row-head {
	background-color: var(--indev-surface-2);
	color: var(--indev-muted);
}

.list-row:hover,
.list-row-container:hover {
	background-color: var(--indev-surface-2);
}

.list-subject .bold a,
.list-row .level-item.bold a {
	color: var(--indev-gold-strong);
}

/* Desktop: o símbolo é mais largo que alto e não pode ser esticado */
#brand-logo {
	content: url("/assets/indev_theme/images/indev-mark.png");
	width: 44px;
	height: 32px;
	object-fit: contain;
	border-radius: 0;
}

.desktop-icon,
.desktop-icon .icon-container,
.desktop-icon .app-icon {
	border-radius: 0;
}

.desktop-icon .app-icon {
	object-fit: contain;
}

.desktop-navbar {
	background-color: var(--indev-surface);
	border-bottom: 1px solid var(--indev-border);
}

/* Login */
.for-login,
.for-forgot,
.for-signup {
	background-color: var(--indev-page);
}

html,
body {
	background-color: var(--indev-page) !important;
}

.page-card {
	border: 1px solid var(--indev-border);
	background-color: var(--indev-surface);
	box-shadow: none;
}

.page-card,
.page-card *,
.page-card *::before,
.page-card *::after {
	border-radius: 0 !important;
}

.app-logo {
	width: auto;
	height: 40px;
	border-radius: 0;
}

.splash img {
	max-width: 120px !important;
}