/*
 * EIEIO ERP — global desk theme (Frappe / ERPNext v16, "Espresso" tokens)
 *
 * Strategy: Frappe v16 builds the whole desk from CSS custom properties
 * (--gray-*, --surface-*, --ink-*, --outline-*, --primary, --btn-primary ...).
 * We re-declare those tokens AFTER Frappe's own bundle, so every component that
 * reads them is themed without touching core files. A small component layer at
 * the bottom handles the few places that hard-code a colour.
 *
 * Brand:   red #FF3131   peach #FFBD59   green #00BF63   ink #1A2538
 *
 * Accessibility notes (WCAG 2.1 AA, measured):
 *   white on #D91F26 = 5.03:1   -> filled primary buttons use the deeper red
 *   #FF3131 on white = 3.66:1   -> only for large text, rules, icons, fills
 *   #1A2538 on #FFBD59 = 9.28:1 -> text on peach is always dark ink
 *   #1A2538 on #00BF63 = 6.32:1 -> text on green is always dark ink
 *   white on #00BF63 = 2.43:1   -> NEVER used
 */

/* ---------------------------------------------------------------- brand --- */
:root {
	--eieio-red: #ff3131;
	--eieio-red-strong: #d91f26; /* AA with white text */
	--eieio-red-deep: #b3161c;
	--eieio-peach: #ffbd59;
	--eieio-green: #00bf63;
	--eieio-ink: #1a2538;
	--eieio-radius-card: 14px;
	--eieio-radius-control: 10px;
	--eieio-shadow-card: 0 1px 2px rgba(26, 37, 56, 0.05), 0 4px 14px rgba(26, 37, 56, 0.05);
	--eieio-shadow-pop: 0 12px 32px rgba(26, 37, 56, 0.14), 0 2px 6px rgba(26, 37, 56, 0.06);
}

/* ---------------------------------------------------------------- light --- */
:root,
[data-theme="light"] {
	/* Navy-tinted neutrals (replaces Frappe's pure grays) */
	--gray-50: #f7f8fb;
	--gray-100: #f1f3f8;
	--gray-200: #e7eaf1;
	--gray-300: #dadee8;
	--gray-400: #bcc3d0;
	--gray-500: #8f99ab;
	--gray-600: #5f6b7d;
	--gray-700: #4b5568;
	--gray-800: #2d3649;
	--gray-900: #1a2538;
	--gray-950: #101827;

	/* Green = success. Brand green at 500, dark enough ink at 700/800 for badge text. */
	--green-50: #eefbf4;
	--green-100: #ddf7e9;
	--green-200: #b6edd0;
	--green-300: #85dfb0;
	--green-400: #3fcf86;
	--green-500: #00bf63;
	--green-600: #00a055;
	--green-700: #00703a;
	--green-800: #005a2e;
	--green-900: #0a3d24;
	--green-950: #052617;

	/* Peach (Frappe calls this amber) = warning / highlight */
	--amber-50: #fff8eb;
	--amber-100: #ffefd1;
	--amber-200: #ffe0a8;
	--amber-300: #ffd07f;
	--amber-400: #ffc46b;
	--amber-500: #ffbd59;
	--amber-600: #d98a0f;
	--amber-700: #8a5600;
	--amber-800: #6b4200;
	--amber-900: #4a2d00;
	--amber-950: #2e1c00;

	/* Brand red ramp is exposed under its own name so "danger" can stay Frappe's red. */
	--eieio-red-50: #fff1f0;
	--eieio-red-100: #ffe0de;
	--eieio-red-200: #ffc2bf;
	--eieio-red-300: #ff9a96;
	--eieio-red-400: #ff6b66;

	/* Primary action */
	--primary: var(--eieio-red-strong);
	--primary-color: var(--eieio-red-strong);
	--brand-color: var(--eieio-red-strong);
	--btn-primary: var(--eieio-red-strong);
	--btn-primary-hover: var(--eieio-red-deep);
	--btn-primary-text: #ffffff;
	--ink-blue-link: var(--eieio-red-strong);
	--border-primary: var(--eieio-red-strong);
	--progress-bar-bg: var(--eieio-red-strong);

	/* Surfaces: soft page background, white cards */
	--bg-color: #f5f6fa;
	--fg-color: #ffffff;
	--card-bg: #ffffff;
	--modal-bg: #ffffff;
	--popover-bg: #ffffff;
	--navbar-bg: #ffffff;
	--surface-sidebar: #ffffff;
	--desk-sidebar-bg: #ffffff;
	--border-color: var(--gray-200);

	/* Selection / hover tints use the brand, not blue */
	--selected-bg: var(--eieio-red-50);
	--selected-ink: var(--eieio-red-strong);

	/* Focus ring: peach halo (visible on white and on red) */
	--focus-default: 0 0 0 3px rgba(255, 189, 89, 0.55);
	--focus-outline-default: 3px solid rgba(255, 189, 89, 0.55);

	/* Rounder, softer */
	--radius: 10px;
	--radius-md: 12px;
	--radius-lg: 14px;
	--card-shadow: var(--eieio-shadow-card);
	--modal-shadow: var(--eieio-shadow-pop);
	--shadow-base: var(--eieio-shadow-card);
}

/* ----------------------------------------------------------------- dark --- */
[data-theme="dark"],
.dark {
	--gray-50: #f4f6fa;
	--gray-100: #d5dae4;
	--gray-200: #aeb6c6;
	--gray-300: #8f99ac;
	--gray-400: #727d92;
	--gray-450: #556075;
	--gray-500: #3f495c;
	--gray-600: #323b4d;
	--gray-700: #283041;
	--gray-800: #1e2636;
	--gray-900: #161d2b;
	--gray-950: #0e1420;

	--green-50: #c8f3de;
	--green-100: #9be6c1;
	--green-200: #6fd7a2;
	--green-300: #2fbf7c;
	--green-400: #00a357;
	--green-500: #008f4c;
	--green-600: #007a41;
	--green-700: #0a5c33;
	--green-800: #0a4529;
	--green-900: #0c3523;
	--green-950: #072718;

	--amber-50: #ffefd1;
	--amber-100: #ffd99a;
	--amber-200: #ffc46b;
	--amber-300: #f2a63a;
	--amber-400: #d98a0f;
	--amber-500: #b9720a;
	--amber-600: #946000;
	--amber-700: #6f4800;
	--amber-800: #553700;
	--amber-900: #3f2a00;
	--amber-950: #2a1c00;

	--eieio-red-link: #ff6b66;

	--primary: var(--eieio-red-strong);
	--primary-color: var(--eieio-red-link);
	--brand-color: var(--eieio-red-link);
	--btn-primary: #e5262b; /* white text: 4.6:1 */
	--btn-primary-hover: #f23a3f;
	--btn-primary-text: #ffffff;
	--ink-blue-link: var(--eieio-red-link);
	--border-primary: var(--eieio-red-link);
	--progress-bar-bg: var(--eieio-red-link);

	--bg-color: #0b111c;
	--fg-color: #131a28;
	--card-bg: #131a28;
	--modal-bg: #161d2b;
	--popover-bg: #161d2b;
	--navbar-bg: #0e1420;
	--surface-sidebar: #0e1420;
	--desk-sidebar-bg: #0e1420;
	--border-color: #232c3d;

	--selected-bg: rgba(255, 49, 49, 0.14);
	--selected-ink: #ff8a86;

	--focus-default: 0 0 0 3px rgba(255, 189, 89, 0.4);
	--focus-outline-default: 3px solid rgba(255, 189, 89, 0.4);

	--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.25);
	--modal-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------ components -- */
/* Page background */
body,
html {
	background-color: var(--bg-color);
}

/* Buttons ------------------------------------------------------------------ */
.btn.btn-primary,
.btn.btn-primary-dark {
	background-color: var(--btn-primary);
	color: var(--btn-primary-text);
	border-radius: var(--eieio-radius-control);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(179, 22, 28, 0.25);
	--icon-fill-bg: var(--btn-primary);
	--icon-stroke: currentColor;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
	background-color: var(--btn-primary-hover);
	color: var(--btn-primary-text);
}
.btn.btn-primary:active,
[data-theme="dark"] .btn.btn-primary:active {
	background-color: var(--eieio-red-deep) !important;
	color: #ffffff !important;
}
.btn.btn-primary:focus-visible,
.btn:focus-visible {
	box-shadow: var(--focus-default) !important;
	outline: none;
}
.btn.btn-default,
.btn.btn-secondary {
	border-radius: var(--eieio-radius-control);
	background-color: var(--btn-default-bg, var(--surface-gray-2));
}
.btn.btn-danger {
	background-color: #b3161c; /* distinct from brand red on purpose */
	color: #ffffff;
}

/* Cards, widgets, dialogs ------------------------------------------------- */
.frappe-card,
.widget,
.form-layout .form-page,
.layout-main-section,
.page-form,
.form-dashboard,
.dashboard-section,
.list-row-container .list-row {
	border-radius: var(--eieio-radius-card);
}
.frappe-card,
.widget {
	background-color: var(--card-bg);
	border: 1px solid var(--border-color);
	box-shadow: var(--card-shadow);
}
.modal-content {
	border-radius: 18px;
	box-shadow: var(--modal-shadow);
	border: 1px solid var(--border-color);
}
.dropdown-menu,
.awesomplete > ul {
	border-radius: 12px;
	box-shadow: var(--eieio-shadow-pop);
	border: 1px solid var(--border-color);
}

/* Inputs ------------------------------------------------------------------- */
.form-control,
.input-with-feedback,
.frappe-control .control-input .form-control {
	border-radius: var(--eieio-radius-control);
}
.form-control:focus,
.frappe-control .form-control:focus,
.awesomplete input:focus {
	border-color: var(--eieio-peach) !important;
	box-shadow: var(--focus-default) !important;
}

/* Left sidebar (v16 workspace sidebar) ------------------------------------- */
.body-sidebar {
	background: var(--desk-sidebar-bg);
	border-right: 1px solid var(--border-color);
}
.body-sidebar .sidebar-item-container .standard-sidebar-item:hover,
.body-sidebar .sidebar-item-container:hover > .standard-sidebar-item {
	background-color: var(--gray-100);
}
.active-sidebar,
.body-sidebar .sidebar-item-container.active-sidebar {
	background: var(--selected-bg) !important;
	color: var(--selected-ink) !important;
	box-shadow: inset 3px 0 0 var(--eieio-red) !important;
	border-radius: var(--eieio-radius-control);
	font-weight: 600;
}
.active-sidebar svg,
.active-sidebar .sidebar-item-icon {
	--icon-stroke: var(--selected-ink);
	color: var(--selected-ink);
}

/* Top navbar / awesomebar -------------------------------------------------- */
.navbar {
	background: var(--navbar-bg);
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 1px 0 rgba(26, 37, 56, 0.02);
}
.search-bar .awesomplete input,
.search-bar input {
	border-radius: 999px;
	background-color: var(--gray-100);
}
.search-bar input:focus {
	background-color: var(--card-bg);
}

/* Page head, tabs ---------------------------------------------------------- */
.page-head {
	background: var(--bg-color);
	border-bottom: 1px solid var(--border-color);
}
.page-head .page-title .title-text {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--heading-color);
}
.form-tabs-list .form-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active {
	color: var(--selected-ink);
	border-bottom: 2px solid var(--eieio-red);
	padding-bottom: 8px;
	font-weight: 600;
}
.form-tabs-list .form-tabs .nav-item .nav-link:hover {
	color: var(--selected-ink);
}

/* Lists, grids, reports ---------------------------------------------------- */
.list-row-head,
.result-list .list-row-head {
	background: var(--gray-50);
	border-radius: var(--eieio-radius-control) var(--eieio-radius-control) 0 0;
}
.list-row:hover,
.list-row-container:hover {
	background-color: var(--gray-50);
}
.list-row-container.selected,
.list-row.list-row--checked,
.grid-row.row-selected,
.dt-row--highlight .dt-cell {
	background-color: var(--selected-bg);
}
.list-sidebar .sidebar-label,
.list-sidebar .list-link.active,
.list-sidebar .list-link a.active {
	color: var(--selected-ink);
}
.list-sidebar .list-link.active,
.group-by-item.selected {
	background: var(--selected-bg);
	border-radius: 8px;
}

/* Checkboxes / switches / progress ---------------------------------------- */
input[type="checkbox"]:checked {
	background-color: var(--eieio-red-strong);
	border-color: var(--eieio-red-strong);
}
.progress .progress-bar {
	background-color: var(--progress-bar-bg);
	border-radius: 999px;
}
.like-active,
.liked svg {
	--icon-fill: var(--eieio-red);
}

/* Status pills: red/orange stay semantic; green + peach follow brand ramps via tokens.
   Text on tinted pills is ink-*-8 (>=4.5:1) so no extra rules are needed here. */
.indicator-pill,
.es-badge {
	font-weight: 600;
}

/* v16 apps screen (desktop icons) ----------------------------------------- */
.desktop-icon .icon-container {
	border-radius: 22px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	box-shadow: var(--eieio-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.desktop-icon:hover .icon-container {
	transform: translateY(-3px);
	box-shadow: var(--eieio-shadow-pop);
}
.desktop-icon .icon-container img.app-icon {
	object-fit: contain;
	padding: 5%;
	background: transparent;
}
.desktop-icon .icon-title {
	font-weight: 600;
	color: var(--heading-color);
}

/* Forms float as a card on the soft page background */
.form-layout {
	padding: 10px 12px 24px;
}
.form-layout .form-page {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--eieio-radius-card);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
.form-layout .form-tabs-list {
	border-radius: var(--eieio-radius-card) var(--eieio-radius-card) 0 0;
}
/* ...but not inside dialogs, which keep Frappe's flat layout */
.modal .form-layout {
	padding: 0;
}
.modal .form-layout .form-page {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* Scrollbars ---------------------------------------------------------------- */
* {
	scrollbar-color: var(--gray-300) transparent;
}

/* Selection ----------------------------------------------------------------- */
::selection {
	background: rgba(255, 189, 89, 0.55);
	color: var(--gray-900);
}

/* Motion preference ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.desktop-icon .icon-container {
		transition: none;
	}
	.desktop-icon:hover .icon-container {
		transform: none;
	}
}

/* ---- App logos: never show ERPNext's / Frappe's logo, not even for the first paint ----------------
   Frappe re-renders the shell-header logo with the opened app's own logo on every workspace switch;
   the JS swap runs a frame later and caused a ~1s flash of the stock logo. `content` replaces the
   image at paint time. App-screen tiles (.desktop-icon) keep their own per-app icon via the JS map. */
img[src*="erpnext-logo"]:not(.desktop-icon *),
img[src*="frappe-framework-logo"]:not(.desktop-icon *),
img[src*="frappe-comp-logo"]:not(.desktop-icon *) {
	content: url("/assets/eieio_erpnext_ui/images/logo/eieio-mark.svg");
}

/* ---- No tutorials / embedded videos (offline install) ---------------------------------------------
   The server already stops serving onboarding (System Settings > enable_onboarding = 0); these rules
   are the safety net if it is re-enabled or a custom block/link still carries a video. */
.onboarding-widget-box,
.onboarding-video,
.help-video-link,
iframe[src*="youtube"],
iframe[src*="youtu.be"] {
	display: none !important;
}

/* ---- Dark mode: placeholder and select text -------------------------------------------------------
   Frappe colours `.form-control::placeholder` with --gray-500. In the dark scale that gray is DARKER than the
   control background (#3f495c on #283041 = 1.46:1), so filter/field placeholders were unreadable, and
   select text used --gray-400 (4.2:1). Lift both to #a0a9bb (5.6:1 on #283041, 6.4:1 on the page bg). */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
	color: #a0a9bb;
	opacity: 1;
}
/* ---- Dark mode: grays used as SURFACES --------------------------------------------------------------
   The dark scale is inverted (gray-50 is the lightest), so rules that used a gray as a background in the
   light theme painted LIGHT strips in dark: the list header row (with near-invisible text), row hover,
   sidebar-item hover and the awesomebar input. Use the dark surface grays instead. */
[data-theme="dark"] .list-row-head,
[data-theme="dark"] .result-list .list-row-head,
[data-theme="dark"] .list-row:hover,
[data-theme="dark"] .list-row-container:hover {
	background: var(--gray-800);
}
[data-theme="dark"] .body-sidebar .sidebar-item-container .standard-sidebar-item:hover,
[data-theme="dark"] .body-sidebar .sidebar-item-container:hover > .standard-sidebar-item {
	background-color: var(--gray-700);
}
[data-theme="dark"] .search-bar .awesomplete input,
[data-theme="dark"] .search-bar input {
	background-color: var(--gray-800);
}
/* Secondary text tokens resolved to gray-400 (#727d92): 3.2-4.4:1 on dark surfaces. Shift the ladder 4..7 up
   together so the order (disabled < secondary < muted < body-secondary) is preserved. */
[data-theme="dark"] {
	--ink-gray-4: #8f99ac;
	--ink-gray-5: #a0a9bb;
	--ink-gray-6: #aeb6c6;
	--ink-gray-7: #c3cad8;
}

/* ---- Avatars: initials on a coloured disc ----------------------------------------------------------
   Frappe's per-colour avatar pairs (--<colour>-avatar-bg / -color) measured 1.7-4.4:1 in light and 2.9-4.4:1 in dark
   (yellow initials on pale yellow = 1.73:1). Pastel disc + deep ink in light, deep disc + light tint in dark;
   every pair is >= 4.5:1 (checked in tests/test_v4.py). green/gray (light) and red/purple/gray (dark) already passed and keep
   Frappe's own values: the light block is scoped with :not([data-theme="dark"]) so it cannot leak into dark. */
:root:not([data-theme="dark"]),
[data-theme="light"] {
	--orange-avatar-bg: #ffeedd;  --orange-avatar-color: #8a4600;
	--pink-avatar-bg:   #ffe4ee;  --pink-avatar-color:   #a3194f;
	--blue-avatar-bg:   #e3efff;  --blue-avatar-color:   #0b4aa8;
	--red-avatar-bg:    #ffe4e2;  --red-avatar-color:    #b3161c;
	--yellow-avatar-bg: #fff3cf;  --yellow-avatar-color: #7a5200;
	--purple-avatar-bg: #efe6ff;  --purple-avatar-color: #5b2cb0;
}
[data-theme="dark"],
.dark {
	--orange-avatar-bg: #4a2c12;  --orange-avatar-color: #ffcf9e;
	--pink-avatar-bg:   #4a1a30;  --pink-avatar-color:   #ffb3d1;
	--blue-avatar-bg:   #14315a;  --blue-avatar-color:   #a9ccff;
	--green-avatar-bg:  #123f2a;  --green-avatar-color:  #a6f0c8;
	--yellow-avatar-bg: #4a3a10;  --yellow-avatar-color: #ffe3a3;
}

/* Light mode: placeholders measured 2.59:1 (Frappe's --gray-500 on the control background). Scoped with
   :not([data-theme="dark"]) so it can never outrank the dark rule above (same specificity, later in the file). */
:root:not([data-theme="dark"]) .form-control::placeholder,
:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder {
	color: #5f6b7d;
	opacity: 1;
}
/* Light mode: blue/cyan badge label (e.g. "Enabled") was 4.18:1 on its tint. */
:root:not([data-theme="dark"]) .es-badge[data-theme="blue"],
:root:not([data-theme="dark"]) .es-badge[data-theme="cyan"],
:root:not([data-theme="dark"]) .es-badge[data-theme="light-blue"] {
	--c-fg: #0a56a6;
}

/* ---- Skip link ("Navigate to main content"): visible only when a keyboard user focuses it. It is a Frappe
   `button.btn.btn-primary-light`, and measured 3.88:1 (light) and 1.26:1 (dark: red on the grey #556075).
   Explicit surface + ink in both themes, with enough specificity to beat the button's own :focus/:hover rules. */
.btn.btn-primary-light.sr-only-focusable:focus,
.btn.btn-primary-light.sr-only-focusable:active,
.sr-only-focusable:focus,
.sr-only-focusable:active {
	background: #ffffff;
	color: #b3161c;
	box-shadow: 0 0 0 3px #b3161c;
}
[data-theme="dark"] .btn.btn-primary-light.sr-only-focusable:focus,
[data-theme="dark"] .btn.btn-primary-light.sr-only-focusable:active,
[data-theme="dark"] .sr-only-focusable:focus,
[data-theme="dark"] .sr-only-focusable:active {
	background: #161d2b;
	color: #e6eaf2;
	box-shadow: 0 0 0 3px #ff9a94;
}