/*
 * Dark theme for the supplier/customer portal (/orders, /rfq,
 * /supplier-quotations, /purchase-orders, /me, ...).
 *
 * SCOPING - read before adding a rule here.
 *
 * This file is listed in web_include_css, so the browser downloads it on every
 * website page: login, the public site, blog, web forms, the shop. It is only
 * harmless there because EVERY rule below is scoped to html[data-theme="dark"],
 * and that attribute is set by public/js/supplier_portal_theme.js, which
 * templates/includes/navbar/navbar.html loads on portal pages only (the page is
 * flagged server-side in nextend/portal_theme.py).
 *
 * So: a rule that is not under html[data-theme="dark"] restyles the whole
 * website, in light mode, for everyone. That is what this file used to do -
 * `body`, `a`, `.card`, `.form-control`, `.text-muted !important` and
 * `.website-image !important` were unscoped and clobbered the Website Theme,
 * login.css and every web form. Keep the prefix on all of them.
 *
 * The only exception is the .nx-theme-* toggle button below: those classes are
 * ours and exist on portal pages only, so they are safe to style in both modes.
 *
 * The OS preference (prefers-color-scheme) is resolved in JS rather than with a
 * @media block, so there is a single gate to keep scoped instead of two.
 * Palette values mirror frappe/public/scss/desk/dark.scss so the portal matches
 * the rest of the product without patching frappe/erpnext.
 */

html[data-theme="dark"] {
	color-scheme: dark;

	--text-color: var(--gray-50);
	--text-light: var(--gray-300);
	--heading-color: var(--gray-50);
	--link-color: var(--ink-blue-3);
	--link-hover-color: var(--ink-blue-2);

	--bg-color: var(--gray-900);
	--fg-color: var(--gray-900);
	--card-bg: var(--gray-900);
	--subtle-accent: var(--gray-800);
	--subtle-fg: var(--gray-700);
	--fg-hover-color: var(--gray-800);
	--control-bg: var(--gray-800);
	--control-bg-on-gray: var(--gray-800);
	--disabled-text-color: var(--gray-400);
	--disabled-control-bg: var(--gray-800);
	--modal-bg: var(--gray-900);
	--popover-bg: var(--gray-900);

	--border-color: var(--gray-800);
	--dark-border-color: var(--gray-600);
	--table-border-color: var(--gray-800);
	--border-primary: var(--gray-200);

	--btn-default-bg: var(--gray-800);
	--btn-default-hover-bg: var(--gray-700);
	--btn-ghost-hover-bg: var(--gray-800);
	--btn-primary: var(--gray-300);

	--placeholder-color: var(--gray-700);
	--highlight-color: var(--gray-700);
	--scrollbar-thumb-color: var(--gray-600);
	--scrollbar-track-color: var(--gray-700);
	--sidebar-select-color: var(--gray-800);
}

/*
 * Components. Most of frappe's website styles already read the variables above,
 * so only the bits compiled from Sass variables rather than CSS custom
 * properties (bootstrap's .text-muted, .dropdown-menu, .form-control, hr,
 * links) need an explicit override. Scrollbars are left to `color-scheme`.
 */

html[data-theme="dark"] body {
	background: var(--bg-color);
	color: var(--text-color);
}

html[data-theme="dark"] a {
	color: var(--link-color);
}
html[data-theme="dark"] a:hover {
	color: var(--link-hover-color);
}

html[data-theme="dark"] hr {
	border-color: var(--border-color);
}

html[data-theme="dark"] .text-muted {
	color: var(--text-light) !important;
}

html[data-theme="dark"] .navbar-light {
	background: var(--fg-color);
	border-bottom-color: var(--border-color);
}
html[data-theme="dark"] .navbar-light .navbar-brand,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link {
	color: var(--text-color);
}
html[data-theme="dark"] .navbar-toggler .icon {
	stroke: var(--text-color);
}

html[data-theme="dark"] .web-footer {
	background: var(--fg-color);
	border-top: 1px solid var(--border-color);
	color: var(--text-light);
}
html[data-theme="dark"] .web-footer a {
	color: var(--text-light);
}

html[data-theme="dark"] .web-sidebar {
	color: var(--text-color);
}
html[data-theme="dark"] .sidebar-item a {
	color: var(--text-light);
}
html[data-theme="dark"] .sidebar-item a.active,
html[data-theme="dark"] .sidebar-item a:hover {
	color: var(--text-color);
}

html[data-theme="dark"] .breadcrumb-item a {
	color: var(--text-light);
}
html[data-theme="dark"] .breadcrumb-item.active {
	color: var(--text-color);
}

html[data-theme="dark"] .dropdown-menu {
	background: var(--card-bg);
	color: var(--text-color);
	border-color: var(--border-color);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .dropdown-item {
	color: var(--text-color);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
	background: var(--fg-hover-color);
	color: var(--text-color);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"] {
	background: var(--control-bg);
	color: var(--text-color);
	border-color: var(--border-color);
}
html[data-theme="dark"] .form-control::placeholder {
	color: var(--placeholder-color);
}
html[data-theme="dark"] .form-control:focus {
	background: var(--control-bg);
	color: var(--text-color);
}

html[data-theme="dark"] .btn-secondary {
	background: var(--btn-default-bg);
	border-color: var(--border-color);
	color: var(--text-color);
}
html[data-theme="dark"] .btn-secondary:hover {
	background: var(--btn-default-hover-bg);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .web-list-item,
html[data-theme="dark"] .transaction-list-item {
	background: var(--card-bg);
	border-color: var(--border-color);
}

html[data-theme="dark"] .order-item-header {
	border-color: var(--border-color);
	color: var(--text-light);
}
html[data-theme="dark"] .order-items,
html[data-theme="dark"] .terms-and-condition {
	border-color: var(--border-color);
}

html[data-theme="dark"] .no-image-cart-item,
html[data-theme="dark"] .website-image {
	background-color: var(--subtle-fg);
	color: var(--text-color);
}

/* Navbar toggle button - portal-only markup, styled in both modes. */

.nx-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	margin-right: 8px;
	padding: 0;
	border: none;
	border-radius: var(--border-radius, 8px);
	background: transparent;
	color: var(--text-color, inherit);
	cursor: pointer;
}
.nx-theme-toggle:hover {
	background: var(--fg-hover-color, var(--gray-100));
}

/* Light: show the sun, clicking switches to dark. Dark: show the moon. */
.nx-theme-icon-sun {
	display: block;
}
.nx-theme-icon-moon {
	display: none;
}
html[data-theme="dark"] .nx-theme-icon-sun {
	display: none;
}
html[data-theme="dark"] .nx-theme-icon-moon {
	display: block;
}