/*
 * UIXP Theme
 * Brand colors extracted from the UIXP logo:
 *   Lime green  — #8DC63F  (pixel-dot accent on the X)
 *   Near-black  — #111111  (letterform colour)
 *   White       — #FFFFFF  (background)
 */

/* ─── Brand tokens ───────────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
	--uixp-green:        #8DC63F;
	--uixp-green-dark:   #6FA830;
	--uixp-green-light:  #EAF6D0;
	--uixp-green-subtle: #F4FAE8;
	--uixp-black:        #111111;

	/* ── Override Frappe's runtime primary token ── */
	--primary:           var(--uixp-green);

	/* ── Navbar: white bar ── */
	--navbar-bg:         #ffffff;
	--icon-stroke:       var(--gray-800);

	/* ── Sidebar: lime-tinted selection highlight ── */
	--sidebar-select-color: var(--uixp-green-light);

	/* ── Progress bar ── */
	--progress-bar-bg:   var(--uixp-green);

	/* ── Focus ring ── */
	--highlight-shadow:  1px 1px 10px var(--uixp-green-light), 0px 0px 4px var(--uixp-green);

	/* ── Checkbox fill gradient ── */
	--checkbox-gradient: linear-gradient(180deg, var(--uixp-green) -124.51%, var(--uixp-green) 100%);
}

/* Dark-mode variants */
[data-theme="dark"] {
	--uixp-green:        #8DC63F;
	--uixp-green-dark:   #6FA830;
	--uixp-green-light:  #2A3D12;
	--uixp-green-subtle: #1E2E0D;

	--primary:           var(--uixp-green);
	--sidebar-select-color: var(--uixp-green-light);
	--progress-bar-bg:   var(--uixp-green);
	--highlight-shadow:  1px 1px 10px var(--uixp-green-light), 0px 0px 4px var(--uixp-green);
	--checkbox-gradient: linear-gradient(180deg, var(--uixp-green) -124.51%, var(--uixp-green) 100%);
}

/* ─── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
	background-color: #ffffff !important;
	border-bottom-color: var(--border-color) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
	color: var(--uixp-green) !important;
}

/* Active indicator dot on navbar icons */
.navbar .notifications-icon .indicator-pill,
.navbar .badge {
	background-color: var(--uixp-green) !important;
	color: var(--uixp-black) !important;
}

/* ─── Primary buttons ────────────────────────────────────────────────────── */
.btn-primary {
	background-color: var(--uixp-green) !important;
	border-color: var(--uixp-green) !important;
	color: var(--uixp-black) !important;
	font-weight: 600;
}

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

.btn-primary:focus,
.btn-primary:focus-visible {
	box-shadow: 0 0 0 3px rgba(141, 198, 63, 0.35) !important;
}

/* ─── Login page button ──────────────────────────────────────────────────── */
.for-login .btn-login,
.for-signup .btn-signup,
.login-content .btn-primary,
.btn-login {
	background-color: var(--uixp-green) !important;
	border-color: var(--uixp-green) !important;
	color: var(--uixp-black) !important;
	font-weight: 600;
}

.for-login .btn-login:hover,
.for-signup .btn-signup:hover,
.login-content .btn-primary:hover,
.btn-login:hover,
.btn-login:focus,
.btn-login:active {
	background-color: var(--uixp-green-dark) !important;
	border-color: var(--uixp-green-dark) !important;
	color: var(--uixp-black) !important;
}

/* ─── Icons inside buttons ───────────────────────────────────────────────── */
/* Default / secondary buttons: green icon stroke */
.btn svg,
.btn .icon svg,
.btn .btn-icon svg {
	stroke: var(--uixp-green) !important;
}

/* Primary buttons already have a green background — use black for contrast */
.btn-primary svg,
.btn-primary .icon svg,
.btn-primary .btn-icon svg {
	stroke: var(--uixp-black) !important;
}

/* ─── Outline / ghost primary buttons ───────────────────────────────────── */
.btn-outline-primary {
	border-color: var(--uixp-green) !important;
	color: var(--uixp-green) !important;
}

.btn-outline-primary:hover {
	background-color: var(--uixp-green-subtle) !important;
}

/* ─── Links & text accents ───────────────────────────────────────────────── */
a.badge-primary,
.badge-primary {
	background-color: var(--uixp-green) !important;
	color: var(--uixp-black) !important;
}

/* Active tab / pill indicator underline */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	border-bottom-color: var(--uixp-green) !important;
	color: var(--uixp-black) !important;
}

/* ─── Sidebar item icons ─────────────────────────────────────────────────── */
.body-sidebar .standard-sidebar-item .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item .sidebar-item-icon .es-icon {
	stroke: var(--uixp-green) !important;
}

/* ─── Sidebar active / selected state ───────────────────────────────────── */
.sidebar-item.selected,
.list-sidebar-button.active,
.sidebar-menu-item.selected > .sidebar-menu-header,
.desk-sidebar .sidebar-item.selected {
	background-color: var(--uixp-green-light) !important;
	border-left: 3px solid var(--uixp-green) !important;
}

.sidebar-item.selected .sidebar-item-label,
.sidebar-menu-item.selected .sidebar-menu-header .item-label {
	color: var(--uixp-black) !important;
	font-weight: 600;
}

/* Sidebar hover */
.sidebar-item:hover,
.sidebar-menu-item:hover > .sidebar-menu-header {
	background-color: var(--uixp-green-subtle) !important;
}

/* ─── Form / control focus ring ─────────────────────────────────────────── */
.frappe-control input:focus,
.frappe-control textarea:focus,
.frappe-control select:focus,
.form-control:focus {
	border-color: var(--uixp-green) !important;
	box-shadow: 0 0 0 2px rgba(141, 198, 63, 0.25) !important;
}

/* ─── Checkboxes & radio ─────────────────────────────────────────────────── */
input[type="checkbox"]:checked {
	border-color: var(--uixp-green) !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #8DC63F -124.51%, #8DC63F 100%) !important;
}

/* Toggle switch */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--uixp-green) !important;
	border-color: var(--uixp-green) !important;
}

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.progress-bar {
	background-color: var(--uixp-green) !important;
}

/* ─── Indicator / status dots ────────────────────────────────────────────── */
.indicator.green,
.indicator-pill.green {
	--indicator-dot-green: var(--uixp-green);
}

/* ─── Tags & pills ───────────────────────────────────────────────────────── */
.tag-filters-area .btn-tag:hover,
.tag-filters-area .btn-tag.active {
	background-color: var(--uixp-green-light) !important;
	border-color: var(--uixp-green) !important;
}

/* ─── Desk / app homepage card hover ────────────────────────────────────── */
.desk-sidebar .standard-sidebar-item:hover,
.layout-main .frappe-card:focus-within {
	box-shadow: 0 0 0 2px var(--uixp-green) !important;
}

/* ─── Module card accent stripe ─────────────────────────────────────────── */
.modules-page-content .module-box:hover {
	border-top: 3px solid var(--uixp-green) !important;
}

/* ─── Desktop / module icon tiles ───────────────────────────────────────── */
/*
 * frappe.utils.desktop_icon() sets backgroundColor via jQuery inline styles
 * (a direct hex value). !important in a stylesheet overrides inline styles.
 */
.desktop-icon .icon-container,
.sidebar-item-icon .icon-container {
	background-color: var(--uixp-green) !important;
}

/* Keep the letter/SVG inside readable against the green tile */
.desktop-icon .icon-container svg,
.desktop-icon .icon-container .desktop-alphabet,
.sidebar-item-icon .icon-container svg {
	color: var(--uixp-black) !important;
	stroke: var(--uixp-black) !important;
}

/* ─── Scroll bar thumb ───────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
	background-color: rgba(141, 198, 63, 0.4) !important;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--uixp-green) !important;
}