/*
 * WeAreOne theme for Frappe / ERPNext Desk (v16).
 *
 * Mirrors the look of inventory.weareone.work: a dark navy shell (dock + sidebar),
 * a light gray canvas, white 16px-radius cards, a navy-blue primary and soft
 * bordered status pills. Desk is built on Espresso tokens, so most of the work is
 * re-pointing tokens; selectors are only used where a token can't reach.
 */

/* ---------- Palette ---------- */
:root {
	--wo-primary: #154d8c;
	--wo-primary-hover: #123f73;
	--wo-primary-soft: rgba(21, 77, 140, 0.06);
	--wo-primary-ring: rgba(21, 77, 140, 0.3);
	--wo-logo: oklch(0.55 0.18 255);

	--wo-shell-bg: oklch(0.12 0.02 255);
	--wo-shell-fg: oklch(0.92 0.01 240);
	--wo-shell-fg-strong: rgb(230, 239, 252);
	--wo-shell-muted: oklch(0.55 0.02 255);
	--wo-shell-hover: oklch(0.2 0.04 255);
	--wo-shell-active: oklch(0.22 0.05 255);
	--wo-shell-border: oklch(0.22 0.03 255);

	--wo-canvas: #f9fafb;
	--wo-card: #ffffff;
	--wo-text: #080c0f;
	--wo-muted: #6d7277;
	--wo-border: #dbdee1;
	--wo-input-border: #e2e5e8;
	--wo-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
	--wo-card-radius: 16px;

	--wo-success: oklch(0.6 0.145 163);
	--wo-warning: oklch(0.77 0.188 70);
}

/* ---------- Global tokens ---------- */
:root,
[data-theme="light"] {
	--font-stack: "InterVariable", "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
	--primary: var(--wo-primary);
	--brand-color: var(--wo-primary);
	--btn-primary: var(--wo-primary);
	--primary-color: var(--wo-primary);
	--progress-bar-bg: var(--wo-primary);
	--checkbox-color: var(--wo-primary);
	--date-active-bg: var(--wo-primary);

	--text-color: var(--wo-text);
	--heading-color: var(--wo-text);
	--text-muted: var(--wo-muted);
	--border-color: var(--wo-border);
	--table-border-color: var(--wo-border);
	--dark-border-color: var(--wo-input-border);

	--control-bg: var(--wo-card);
	--control-bg-on-gray: var(--wo-card);

	--desk-sidebar-bg: var(--wo-shell-bg);
	--surface-sidebar: var(--wo-shell-bg);
}

body,
input,
button,
select,
textarea {
	font-family: var(--font-stack);
}

/* ---------- Dark shell: dock + sidebar ----------
 * Re-point the gray token scale inside the shell so every row, glyph and hover
 * Frappe draws from tokens comes out light-on-navy without per-element rules. */
.dock,
.body-sidebar {
	--ink-gray-9: #ffffff;
	--ink-gray-8: var(--wo-shell-fg-strong);
	--ink-gray-7: var(--wo-shell-fg);
	--ink-gray-6: var(--wo-shell-fg);
	--ink-gray-5: var(--wo-shell-muted);
	--ink-gray-4: var(--wo-shell-muted);
	--ink-gray-3: oklch(0.42 0.02 255);
	--surface-gray-1: var(--wo-shell-hover);
	--surface-gray-2: var(--wo-shell-hover);
	--surface-gray-3: var(--wo-shell-active);
	--outline-gray-1: var(--wo-shell-border);
	--outline-gray-2: var(--wo-shell-border);
	--outline-gray-3: var(--wo-shell-border);
	--icon-stroke: currentColor;
	--text-color: var(--wo-shell-fg);
	--heading-color: #ffffff;

	--dock-ink: oklch(0.72 0.02 255);
	--dock-ink-strong: #ffffff;
	--dock-tile-hover: rgba(255, 255, 255, 0.07);
	--dock-tile-active: rgba(255, 255, 255, 0.12);
	--dock-rule: var(--wo-shell-border);

	background: var(--wo-shell-bg) !important;
	color: var(--wo-shell-fg);
	border-right-color: var(--wo-shell-border) !important;
}

/* Popovers opened from the shell keep the light page palette. */
.body-sidebar .dropdown-menu {
	--ink-gray-9: initial;
	--ink-gray-8: initial;
	--ink-gray-7: initial;
	--ink-gray-6: initial;
	--ink-gray-5: initial;
	--ink-gray-4: initial;
	--surface-gray-1: initial;
	--surface-gray-2: initial;
	--surface-gray-3: initial;
	--outline-gray-1: initial;
	--outline-gray-2: initial;
	--text-color: var(--wo-text);
	color: var(--wo-text);
}

.body-sidebar .standard-sidebar-item .item-anchor {
	height: 34px;
	border-radius: 10px;
}

.body-sidebar .standard-sidebar-item .sidebar-item-label {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
}

.body-sidebar .standard-sidebar-item.active-sidebar {
	background: var(--wo-shell-active) !important;
	border-radius: 10px;
	box-shadow: none;
}

.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
	color: var(--wo-shell-fg-strong);
}

.body-sidebar .sidebar-item-container + .sidebar-item-container {
	margin-top: 2px;
}

.body-sidebar .sidebar-header .header-title,
.body-sidebar .sidebar-header .sidebar-item-label {
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
}

/* App mark: a blue rounded tile like the reference logo. */
.dock .dock-logo .header-logo,
.dock .dock-logo .header-logo img {
	border-radius: 10px;
}

.dock-item.active {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Dock with labels: each module shows its name beside the icon instead of
 * only in a hover tooltip. */
:root {
	--dock-width: 112px;
}

.dock .dock-logo {
	display: flex;
	justify-content: flex-start;
	padding-left: 4px;
}

.dock .dock-items {
	gap: 2px;
}

.dock .dock-item:not(.dock-user-button) {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	justify-content: flex-start;
	gap: 8px;
	border-radius: 10px;
}

.dock .dock-item:not(.dock-user-button):hover {
	background: var(--dock-tile-hover);
}

.dock .dock-item .dock-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.dock .dock-item .dock-item-icon svg {
	width: 20px;
	height: 20px;
}

.dock .dock-item .dock-item-label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: 0;
}

.dock .dock-item.active .dock-item-label {
	font-weight: 600;
}

.dock .dock-user {
	justify-content: flex-start;
	padding-left: 4px;
}

/* ---------- Canvas & page header ---------- */
.main-section,
.page-container,
.page-container .page-body,
.desktop-page {
	background-color: var(--wo-canvas) !important;
}

.page-head {
	background: var(--wo-card) !important;
	border-bottom: 1px solid var(--wo-border);
}

.page-head .page-title .title-text,
.page-head .es-breadcrumbs {
	font-weight: 700;
	color: var(--wo-text);
}

/* ---------- Cards ---------- */
.main-section .page-body {
	padding: 20px 24px 24px;
}

.frappe-card,
.widget,
.layout-main-section.layout-main-list,
.form-page,
.report-wrapper,
.number-widget-box,
.dashboard-widget-box,
.list-sidebar .sidebar-section {
	background: var(--wo-card) !important;
	border: 1px solid var(--wo-border) !important;
	border-radius: var(--wo-card-radius) !important;
	box-shadow: var(--wo-card-shadow) !important;
}

.layout-main-section.layout-main-list,
.form-page {
	overflow: hidden;
}

.layout-main-section.layout-main-list .page-form {
	background: transparent;
	border-bottom: 1px solid var(--wo-border);
	padding: 12px 16px;
}

.form-page .form-tabs-list {
	background: transparent;
	padding: 0 8px;
}

.widget:hover,
.frappe-card.card-hover:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* List rows */
.frappe-list .list-row-head {
	background: var(--wo-canvas);
	border-bottom: 1px solid var(--wo-border);
	color: var(--wo-muted);
	font-weight: 500;
}

.frappe-list .list-row-container .list-row:hover,
.frappe-list .list-row-container:hover {
	background: var(--wo-primary-soft);
}

.frappe-list .list-row-col a.ellipsis,
.frappe-list .list-subject a {
	font-weight: 500;
}

/* ---------- Buttons ----------
 * v16 Desk buttons are Espresso `.es-button`s; they read --bt-* vars, so
 * re-point those (the component sits in @layer, so no !important needed). */
.es-button[data-variant="solid"]:not([data-theme="red"]),
.es-button.primary-action:not([data-theme="red"]) {
	--bt-solid-bg: var(--wo-primary);
	--bt-solid-bg-hover: var(--wo-primary-hover);
	--bt-solid-bg-active: var(--wo-primary-hover);
	--bt-solid-fg: #f8f8f8;
	font-weight: 500;
}

.page-head .es-button:not([data-variant]):not(.primary-action),
.page-head .es-button[data-variant="subtle"],
.page-form .es-button:not([data-variant]),
.page-form .es-button[data-variant="subtle"] {
	--bt-fill-bg: var(--wo-card);
	--bt-fill-bg-hover: #f3f5f7;
	--bt-fill-bg-active: #eceff2;
	border-color: var(--wo-border);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.es-button {
	border-radius: 8px;
}

.btn {
	border-radius: 8px;
	font-weight: 500;
}

.btn-primary,
.btn.btn-primary {
	background-color: var(--wo-primary) !important;
	border-color: var(--wo-primary) !important;
	color: #f8f8f8 !important;
}

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

.btn-default,
.btn-secondary {
	background-color: var(--wo-card);
	border: 1px solid var(--wo-border);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	color: var(--wo-text);
}

.btn-default:hover,
.btn-secondary:hover {
	background-color: #f3f5f7;
}

/* ---------- Inputs ---------- */
.form-control,
.frappe-control input,
.frappe-control select,
.frappe-control textarea,
.awesomplete > input,
.filter-section .form-control {
	background-color: var(--wo-card) !important;
	border: 1px solid var(--wo-input-border) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.form-control:focus,
.frappe-control input:focus,
.frappe-control textarea:focus,
.awesomplete > input:focus {
	border-color: var(--wo-primary) !important;
	box-shadow: 0 0 0 3px rgba(21, 77, 140, 0.15) !important;
}

input[type="checkbox"]:checked {
	background-color: var(--wo-primary);
	border-color: var(--wo-primary);
}

/* ---------- Status pills ---------- */
.indicator-pill,
.badge {
	border-radius: 999px;
	font-weight: 500;
	border: 1px solid transparent;
}

.indicator-pill.green {
	background: rgb(230, 248, 230);
	color: oklch(0.4 0.15 145);
	border-color: oklch(0.85 0.08 145);
}

.indicator-pill.red {
	background: oklch(0.97 0.03 25);
	color: oklch(0.45 0.2 25);
	border-color: oklch(0.88 0.08 25);
}

.indicator-pill.orange,
.indicator-pill.yellow {
	background: oklch(0.97 0.04 85);
	color: oklch(0.5 0.14 60);
	border-color: oklch(0.88 0.1 85);
}

.indicator-pill.blue,
.indicator-pill.light-blue {
	background: rgba(21, 77, 140, 0.06);
	color: var(--wo-primary);
	border-color: rgba(21, 77, 140, 0.25);
}

.indicator-pill.gray,
.indicator-pill.grey {
	background: #f3f4f6;
	color: var(--wo-muted);
	border-color: var(--wo-border);
}

/* ---------- Number cards: reference stat tiles ---------- */
.number-widget-box .widget-head .widget-title {
	font-size: 12px;
	font-weight: 500;
	color: var(--wo-muted);
	letter-spacing: 0.05em;
}

.number-widget-box .number {
	font-size: 24px;
	font-weight: 700;
	color: var(--wo-text);
	font-variant-numeric: tabular-nums;
}

/* ---------- Apps screen (/desk) ---------- */
.desktop-page .desktop-icon .icon-container,
.desktop-page .app-icon {
	border-radius: 16px;
	box-shadow: var(--wo-card-shadow);
}

/* ---------- Login page ---------- */
body[data-path="login"],
body[data-path="login"] .page-content-wrapper {
	background: var(--wo-canvas);
}

body[data-path="login"] .login-content.page-card,
body[data-path="login"] .page-card {
	border: 1px solid var(--wo-border);
	border-radius: var(--wo-card-radius);
	box-shadow: var(--wo-card-shadow);
}