/*
 * HMS brand theme
 * ----------------
 * Re-skins the Frappe Desk and website chrome to match the reference
 * dashboard at https://staffu.mantrakshdevs.com/task (indigo/blue accent,
 * Nunito typeface, slightly larger corner radii).
 *
 * Loaded via hooks.py -> app_include_css (Desk) and web_include_css (website
 * pages, incl. the guest portal), so it applies after Frappe's own bundles
 * and only needs to override the handful of tokens/rules below.
 */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap");

/* Theme-agnostic brand tokens - safe in both light and dark since these are
   accents (buttons, checkboxes, links, radii), never full-surface colors */
:root {
	--primary: #4666e1;
	--primary-color: #4666e1;
	--brand-color: #4666e1;
	--danger: #e25867;

	/* HMS-specific tokens, used below and available to app JS/CSS */
	--hms-primary: #4666e1;
	--hms-primary-hover: #3a58d0;
	--hms-primary-active: #2f47b8;
	--hms-primary-light: #eef1fd;
	--hms-danger: #e25867;
	--hms-danger-hover: #dc3547;

	--font-stack: "Nunito", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
		sans-serif;

	/* Primary-button fill. Frappe's actual button component is
	   `.btn.btn-primary { background-color: var(--btn-primary) }` (two
	   classes) - this is the variable that drives it, not --primary */
	--btn-primary: var(--hms-primary);

	/* Slightly larger, softer corners to match the reference dashboard */
	--border-radius-sm: 6px;
	--border-radius: 6px;
	--border-radius-md: 8px;
	--border-radius-lg: 10px;
	--border-radius-xl: 14px;

	--navbar-height: 56px;
}

/* Surface colors (page canvas, topbar, selected-item fill) are scoped per
   theme so dark mode keeps its own dark surfaces instead of inheriting
   these light values */
[data-theme="light"] {
	/* Page canvas gets a faint indigo tint; cards (--card-bg / --fg-color)
	   stay white so widgets, forms and modals pop off it, same layering as
	   the reference dashboard's off-white canvas + white cards */
	--bg-color: #eef2fa;
	--navbar-bg: var(--hms-primary);
	--sidebar-select-color: var(--hms-primary-light);
	--card-shadow: 0 0.25rem 0.5rem rgba(13, 32, 66, 0.06);
}

[data-theme="dark"] {
	--navbar-bg: var(--hms-primary);
	--sidebar-select-color: rgba(70, 102, 225, 0.18);
	--card-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

body,
.navbar,
.modal,
.popover,
.tooltip {
	font-family: var(--font-stack);
}

/* ---------------------------------------------------------------------- *
 * Navbar / topbar
 * ---------------------------------------------------------------------- */

.navbar {
	height: var(--navbar-height);
	box-shadow: 0 2px 10px rgba(13, 32, 66, 0.18);
	border-bottom: none;
}

.navbar .navbar-home .app-logo {
	max-height: 26px;
}

/* Everything in the bar (breadcrumb, search, icon buttons, help, avatar
   dropdown) defaults to white text/icons since the bar itself is now a
   solid brand-color fill, not the light canvas color */
#navbar-breadcrumbs,
#navbar-breadcrumbs a {
	color: rgba(255, 255, 255, 0.92) !important;
}

.navbar .nav-link {
	--icon-fill: rgba(255, 255, 255, 0.92);
	--icon-stroke: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: var(--border-radius-md);
	color: rgba(255, 255, 255, 0.92) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
	background-color: rgba(255, 255, 255, 0.16);
}

.navbar .vertical-bar {
	border-color: rgba(255, 255, 255, 0.25);
}

/* Search: recolor the native awesomebar field/icon to sit on the blue bar.
   (Frappe's own `.search-bar { flex: 1 }` and `.awesomplete input { width:
   100% !important }` rules make a collapse-to-icon layout unreliable, so
   this keeps Frappe's own box model and only touches colors) */
.navbar .search-bar {
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: var(--border-radius-md);
}

.navbar .search-bar svg {
	stroke: rgba(255, 255, 255, 0.85);
}

.navbar .search-bar .awesomplete input,
.navbar .search-bar #navbar-search {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #fff;
}

.navbar .search-bar .awesomplete input::placeholder,
.navbar .search-bar #navbar-search::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

/* Sidebar hamburger toggle next to the logo */
.hms-sidebar-toggle {
	--icon-fill: rgba(255, 255, 255, 0.92);
	--icon-stroke: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 10px;
	border-radius: var(--border-radius-md);
	color: rgba(255, 255, 255, 0.92);
}

.hms-sidebar-toggle:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

body.hms-sidebar-hidden .layout-side-section {
	display: none;
}

/* Injected icon buttons: theme toggle, fullscreen, settings */
.navbar .hms-navbar-actions {
	align-items: center;
	gap: 2px;
	margin-right: 4px;
}

.navbar .hms-navbar-icon-btn-wrapper {
	display: flex;
	align-items: center;
}

/* Avatar + name/role block, right-most in the bar */
.navbar .dropdown-navbar-user > .nav-link {
	min-width: auto;
	height: 100%;
	justify-content: flex-start;
	gap: 10px;
	padding: 0 8px 0 10px;
}

.navbar .dropdown-navbar-user .avatar-frame {
	border: 2px solid rgba(255, 255, 255, 0.4);
}

.navbar .hms-user-meta {
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.25;
	text-align: left;
}

.navbar .hms-user-name {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.navbar .hms-user-role {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
}

.navbar .hms-user-role:empty {
	display: none;
}

/* ---------------------------------------------------------------------- *
 * Left menu / workspace sidebar
 * ---------------------------------------------------------------------- */

.standard-sidebar-label {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.standard-sidebar-item {
	border-radius: var(--border-radius-md);
	margin: 1px 4px;
}

.standard-sidebar-item.selected {
	background-color: var(--hms-primary-light);
	box-shadow: inset 3px 0 0 var(--hms-primary);
}

.standard-sidebar-item.selected > a,
.standard-sidebar-item.selected .sidebar-item-label {
	color: var(--hms-primary);
	font-weight: var(--weight-semibold, 600);
}

.standard-sidebar-item.selected .sidebar-item-icon svg {
	stroke: var(--hms-primary);
}

/* Nested pages (e.g. Projects > Tasks List) read as a smaller, indented
   sub-list under their parent, same layering as the reference sidebar */
.sidebar-child-item .standard-sidebar-item {
	margin-left: 14px;
}

.sidebar-child-item .sidebar-item-label {
	font-size: 13px;
}

/* ---------------------------------------------------------------------- *
 * Dashboard / workspace widgets (number cards, charts, shortcuts, links)
 * ---------------------------------------------------------------------- */

.widget {
	box-shadow: var(--card-shadow);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg);
}

.widget.shortcut-widget-box:hover,
.widget-shadow:hover {
	box-shadow: 0 0.5rem 1rem rgba(13, 32, 66, 0.1);
	transform: translateY(-1px);
	transition: all 0.15s ease-in-out;
}

.widget .widget-head .widget-title {
	font-weight: var(--weight-semibold, 600);
}

.widget-content .number {
	color: var(--hms-primary);
	font-weight: 700;
}

/* ---------------------------------------------------------------------- *
 * Kanban boards (e.g. Task) - colored column accent + white rounded cards,
 * matching the reference dashboard's task board
 * ---------------------------------------------------------------------- */

.kanban .kanban-column {
	border-top: 3px solid var(--hms-primary);
	border-radius: var(--border-radius-md);
}

.kanban .kanban-column[data-column-value="Working"] {
	border-top-color: #22b8cf;
}

.kanban .kanban-column[data-column-value="Pending Review"] {
	border-top-color: #f0883e;
}

.kanban .kanban-column[data-column-value="Completed"] {
	border-top-color: #12b886;
}

.kanban .kanban-column-header {
	font-size: 13px;
	font-weight: 700;
}

.kanban .kanban-card {
	border-radius: var(--border-radius-lg);
}

/* The --btn-primary token above covers Frappe's own `.btn.btn-primary`
   component (default fill). Its hover/active states, and the legacy
   Bootstrap `.btn-primary` rules still present on website/login pages,
   compile literal hex colors that need a direct, matching-specificity
   override to win the cascade */
.btn-primary,
.btn.btn-primary,
.btn-primary:disabled {
	background-color: var(--hms-primary);
	border-color: var(--hms-primary);
}

.btn-primary:hover,
.btn.btn-primary:hover {
	background-color: var(--hms-primary-hover);
	border-color: var(--hms-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--hms-primary-active) !important;
	border-color: var(--hms-primary-active) !important;
	box-shadow: 0 0 0 2px rgba(70, 102, 225, 0.35) !important;
}

.indicator-pill.blue,
.indicator.blue {
	background-color: var(--hms-primary-light);
	color: var(--hms-primary);
}

/* Website navbar / links pick up the brand color */
.website-navbar .navbar-brand,
#navbar-search:focus {
	color: var(--hms-primary);
}