/* ============================================================
   MMG ERP — full Desk re-skin on the design-handoff tokens.
   Single point of brand definition together with
   mmg_ui/api/branding.py DEFAULTS (accent #5f46c7).
   Every Desk screen (workspaces, list, form, report, modals)
   inherits these tokens; screen-specific rules stay minimal.
   ============================================================ */

:root,
[data-theme="light"] {
	/* -- MMG palette (mirrors mmg_ui tokens.css) -- */
	--mmg-bg: #f8f8f8;
	--mmg-surface: #ffffff;
	--mmg-surface-2: #f3f3f3;
	--mmg-surface-3: #ededed;
	--mmg-border: #ededed;
	--mmg-border-strong: #e2e2e2;
	--mmg-ink-1: #171717;
	--mmg-ink-2: #525252;
	--mmg-ink-3: #7c7c7c;
	--mmg-ink-4: #999999;
	--mmg-accent: #5f46c7;
	--mmg-accent-soft: #f0ebff;
	--mmg-accent-ink: #4f3da1;
	--mmg-shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.14), 0px 0px 1px 0px rgba(0, 0, 0, 0.14);
	--mmg-shadow-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.12), 0px 0px 6px 2px rgba(0, 0, 0, 0.03),
		0px 0px 1.5px 0px rgba(0, 0, 0, 0.15);
	--mmg-shadow-lg: 0px 24px 30px -8px rgba(0, 0, 0, 0.1), 0px 0px 10px 2px rgba(0, 0, 0, 0.04),
		0px 0px 1px 0px rgba(0, 0, 0, 0.2);

	/* -- Frappe structural tokens -- */
	--bg-color: var(--mmg-bg);
	--fg-color: var(--mmg-surface);
	--card-bg: var(--mmg-surface);
	--surface-cards: var(--mmg-surface);
	--surface-white: var(--mmg-surface);
	--surface-modal: var(--mmg-surface);
	--surface-menu-bar: var(--mmg-surface);
	--modal-bg: var(--mmg-surface);
	--popover-bg: var(--mmg-surface);
	--navbar-bg: var(--mmg-surface);
	--toast-bg: var(--mmg-surface);
	--kanban-column-bg: var(--mmg-surface-2);
	--kanban-card-bg: var(--mmg-surface);
	--fg-hover-color: var(--mmg-surface-2);
	--subtle-fg: var(--mmg-surface-2);
	--subtle-accent: var(--mmg-accent-soft);
	--surface-selected: var(--mmg-accent-soft);
	--skeleton-bg: var(--mmg-surface-3);

	--text-color: var(--mmg-ink-1);
	--heading-color: var(--mmg-ink-1);
	--text-dark: var(--mmg-ink-1);
	--text-muted: var(--mmg-ink-3);
	--text-light: var(--mmg-ink-4);
	--placeholder-color: var(--mmg-ink-4);
	--disabled-text-color: var(--mmg-ink-4);

	--border-color: var(--mmg-border);
	--dark-border-color: var(--mmg-border-strong);
	--border-primary: var(--mmg-border-strong);
	--divider-color: var(--mmg-border);
	--table-border-color: var(--mmg-border);
	--dt-border-color: var(--mmg-border);
	--btn-group-border-color: var(--mmg-border-strong);

	--control-bg: var(--mmg-surface-2);
	--control-bg-on-gray: var(--mmg-surface-3);
	--input-disabled-bg: var(--mmg-surface-3);
	--disabled-control-bg: var(--mmg-surface-3);

	/* -- Brand -- */
	--primary: var(--mmg-accent);
	--primary-color: var(--mmg-accent);
	--brand-color: var(--mmg-accent);
	--btn-primary: var(--mmg-accent);
	--checkbox-color: var(--mmg-accent);
	--checkbox-focus-shadow: 0 0 0 2px var(--mmg-accent-soft);
	--highlight-color: var(--mmg-accent-soft);
	--sidebar-select-color: var(--mmg-accent-soft);
	--sidebar-hover-color: var(--mmg-surface-2);
	--sidebar-border-color: var(--mmg-border);
	--awesomebar-focus-bg: var(--mmg-surface);
	--dt-primary-color: var(--mmg-accent);
	--dt-selection-highlight-color: var(--mmg-accent-soft);
	--date-active-bg: var(--mmg-accent);
	--date-active-text: #ffffff;

	/* -- Geometry & depth -- */
	--border-radius-sm: 7px;
	--border-radius: 8px;
	--border-radius-md: 10px;
	--border-radius-lg: 12px;
	--border-radius-xl: 16px;
	--card-shadow: var(--mmg-shadow-sm);
	--shadow-base: var(--mmg-shadow-sm);
	--shadow-sm: var(--mmg-shadow-sm);
	--shadow-md: var(--mmg-shadow-md);
	--shadow-lg: var(--mmg-shadow-lg);
	--modal-shadow: var(--mmg-shadow-lg);
	--drop-shadow: var(--mmg-shadow-md);
	--awesomebar-shadow: var(--mmg-shadow-lg);
	--btn-shadow: none;

	--scrollbar-thumb-color: var(--mmg-border-strong);
	--scrollbar-track-color: transparent;
}

[data-theme="dark"] {
	--mmg-bg: #0f0f0f;
	--mmg-surface: #1c1c1c;
	--mmg-surface-2: #232323;
	--mmg-surface-3: #2b2b2b;
	--mmg-border: #2b2b2b;
	--mmg-border-strong: #343434;
	--mmg-ink-1: #f8f8f8;
	--mmg-ink-2: #d9d9d9;
	--mmg-ink-3: #afafaf;
	--mmg-ink-4: #808080;
	--mmg-accent: #8363f1;
	--mmg-accent-soft: #1d1643;
	--mmg-accent-ink: #bca9fc;
	--mmg-shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.7), 0px 0px 14px 0px rgba(0, 0, 0, 0.18);
	--mmg-shadow-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.6), 0px 0px 16px 2px rgba(0, 0, 0, 0.2);
	--mmg-shadow-lg: 0px 24px 30px -8px rgba(0, 0, 0, 0.42), 0px 0px 14px 2px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Navbar — flat surface bar with a hairline divider
   ============================================================ */
.navbar {
	background: var(--navbar-bg) !important;
	border-bottom: 1px solid var(--border-color);
	box-shadow: none;
}

.navbar-brand img,
.app-logo {
	max-height: 26px;
	width: auto;
}

/* Awesomebar pill */
#navbar-search,
.search-bar .awesomplete input {
	background: var(--control-bg);
	border-radius: var(--border-radius);
	border: 1px solid transparent;
}

.search-bar .awesomplete input:focus {
	background: var(--fg-color);
	border-color: var(--mmg-accent);
	box-shadow: 0 0 0 2px var(--mmg-accent-soft);
}

.awesomplete > ul {
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--border-color);
	box-shadow: var(--mmg-shadow-lg);
}

/* ============================================================
   Desk sidebar & workspace navigation
   ============================================================ */
.desk-sidebar .desk-sidebar-item,
.sidebar-item-container .item-anchor,
.standard-sidebar-item {
	border-radius: var(--border-radius);
}

.desk-sidebar .desk-sidebar-item.selected,
.desk-sidebar .desk-sidebar-item.selected:hover,
.sidebar-item-container .item-anchor.selected,
.standard-sidebar-item.selected {
	background-color: var(--mmg-accent-soft) !important;
	color: var(--mmg-accent-ink) !important;
}

.standard-sidebar-item.selected .sidebar-item-icon svg,
.desk-sidebar .desk-sidebar-item.selected svg {
	color: var(--mmg-accent-ink);
	stroke: var(--mmg-accent-ink);
}

/* ============================================================
   Buttons — accent primary, quiet defaults, consistent radius
   ============================================================ */
.btn {
	border-radius: var(--border-radius);
	box-shadow: none;
}

.btn-primary,
.btn.btn-primary,
.primary-action {
	background-color: var(--mmg-accent) !important;
	border-color: var(--mmg-accent) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--mmg-accent-ink) !important;
	border-color: var(--mmg-accent-ink) !important;
}

.btn-default,
.btn.btn-default,
.btn-secondary {
	background-color: var(--control-bg);
	color: var(--text-color);
	border-color: transparent;
}

.btn-default:hover,
.btn.btn-default:hover,
.btn-secondary:hover {
	background-color: var(--control-bg-on-gray);
}

/* ============================================================
   Inputs — soft filled controls with an accent focus ring
   ============================================================ */
.form-control {
	border-radius: var(--border-radius);
	border-color: transparent;
	background: var(--control-bg);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
	border-color: var(--mmg-accent);
	box-shadow: 0 0 0 2px var(--mmg-accent-soft);
	background: var(--fg-color);
}

select.form-control,
.form-control.select {
	border-radius: var(--border-radius);
}

/* ============================================================
   Cards, workspace widgets, dashboards
   ============================================================ */
.widget,
.frappe-card,
.page-card,
.dashboard-widget-box,
.number-widget-box,
.widget.shortcut-widget-box,
.widget.links-widget-box {
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--border-color);
	box-shadow: none;
	transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.widget.shortcut-widget-box:hover,
.frappe-card:hover,
.dashboard-widget-box:hover {
	box-shadow: var(--mmg-shadow-md);
	border-color: var(--dark-border-color);
}

.widget .widget-head .widget-title {
	color: var(--heading-color);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ============================================================
   List view — airy rows, quiet chrome
   ============================================================ */
.list-row-container {
	border-bottom: 1px solid var(--border-color);
}

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

.list-row-head {
	background: transparent;
	border-bottom: 1px solid var(--dark-border-color);
}

.list-subject a,
.list-row .level-left a {
	color: var(--text-color);
	font-weight: 500;
}

.list-subject a:hover {
	color: var(--mmg-accent);
}

.like-icon.liked use,
.like-action.liked svg {
	fill: var(--mmg-accent);
}

.filter-selector .btn,
.sort-selector .btn,
.list-liked-by-me .btn {
	border-radius: var(--border-radius);
}

/* Indicator pills: calmer, tabular */
.indicator-pill {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ============================================================
   Form view — sections as soft cards, clear hierarchy
   ============================================================ */
.form-page .form-section,
.form-page .form-dashboard-section {
	border-radius: var(--border-radius-lg);
}

.form-section .section-head,
.form-dashboard-section .section-head {
	color: var(--heading-color);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.control-label {
	color: var(--mmg-ink-3);
	font-size: 12px;
}

.form-grid {
	border-radius: var(--border-radius-md);
	border: 1px solid var(--border-color);
	overflow: hidden;
}

.form-grid .grid-heading-row {
	background: var(--control-bg);
	border-bottom: 1px solid var(--border-color);
}

.grid-row:hover {
	background: var(--fg-hover-color);
}

.comment-box .comment-input-container .ql-editor {
	border-radius: var(--border-radius-md);
	background: var(--control-bg);
}

.timeline-badge {
	border-radius: 999px;
}

/* Form sidebar */
.form-sidebar .sidebar-menu a:hover {
	color: var(--mmg-accent);
}

/* ============================================================
   Page head & breadcrumbs
   ============================================================ */
.page-head {
	background: var(--bg-color);
	border-bottom: 1px solid var(--border-color);
}

.page-title .title-text {
	font-weight: 650;
	letter-spacing: -0.015em;
}

#navbar-breadcrumbs a {
	color: var(--text-muted);
}

#navbar-breadcrumbs a:hover {
	color: var(--mmg-accent);
}

/* ============================================================
   Modals & dropdowns
   ============================================================ */
.modal-content {
	border-radius: var(--border-radius-xl);
	border: 1px solid var(--border-color);
	box-shadow: var(--mmg-shadow-lg);
}

.modal-header {
	border-bottom: 1px solid var(--border-color);
}

.dropdown-menu {
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--border-color);
	box-shadow: var(--mmg-shadow-md);
	padding: 4px;
}

.dropdown-menu .dropdown-item {
	border-radius: var(--border-radius-sm);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background: var(--fg-hover-color);
	color: var(--text-color);
}

/* ============================================================
   Report / datatable
   ============================================================ */
.datatable .dt-header .dt-cell {
	background: var(--control-bg);
	color: var(--mmg-ink-2);
	font-weight: 600;
}

.datatable {
	border-radius: var(--border-radius-md);
}

/* ============================================================
   Links & misc accents
   ============================================================ */
.text-primary,
a.text-primary {
	color: var(--mmg-accent) !important;
}

a:not(.btn):hover {
	color: var(--mmg-accent);
}

.sidebar-toggle-btn:hover,
.btn-reset:hover {
	background: var(--fg-hover-color);
}

:focus-visible {
	outline: 2px solid var(--mmg-accent);
	outline-offset: 1px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--mmg-border-strong) transparent;
}

*::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

*::-webkit-scrollbar-thumb {
	background: var(--mmg-border-strong);
	border-radius: 9px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

/* ============================================================
   Login & splash
   ============================================================ */
.for-login .page-card,
.login-content.page-card {
	border-top: 3px solid var(--mmg-accent);
	border-radius: var(--border-radius-lg);
	box-shadow: var(--mmg-shadow-md);
}

.for-login .btn-login,
.login-content .btn-primary {
	background-color: var(--mmg-accent) !important;
	border-color: var(--mmg-accent) !important;
}

#splash {
	background-color: var(--mmg-surface, #ffffff);
}