/*
 * DPS ERP — Desk theme
 * Brand palette sampled from the DPS Kasur crest (District Public School
 * & Bulleh Shah Degree College, Kasur). Overrides Frappe v16 "Espresso"
 * design tokens so the desk/dashboard picks up the school's blues.
 *
 * Loaded via `app_include_css` (desk) and `web_include_css` (portal/login)
 * in dps_erp/hooks.py.
 *
 * DESIGN RULES
 *  1. Brand chrome only: navbar + left sidebar are DPS navy. The content
 *     canvas stays white/neutral so body text keeps maximum contrast.
 *  2. Never restyle `a` globally — workspace tiles (.desktop-icon) and
 *     workspace card links are anchors, and colouring them hurts scanning.
 *  3. Anything on a navy surface gets an explicit light foreground, and any
 *     popover/dropdown rendered *inside* navy chrome is reverted to dark
 *     text on white (see "readability guards" at the end of each block).
 */

:root,
[data-theme="light"] {
	/* ---- DPS brand palette ---- */
	--dps-navy: #1b1466;
	/* deep indigo — shield core */
	--dps-indigo: #201060;
	/* shield fill */
	--dps-blue: #24429e;
	/* royal blue — primary actions */
	--dps-blue-dark: #1b3488;
	/* pressed / hover */
	--dps-azure: #0e82c4;
	/* bright azure — border/wave accent */
	--dps-sky: #9fd3f5;
	/* light highlight */
	--dps-sky-tint: #eef5fd;
	/* subtle fill */
	--dps-tecifo-orange: #f15a24;
	/* Tecifo vendor brand mark (footer credit only) */

	/* Foregrounds used on navy chrome */
	--dps-on-navy: rgba(255, 255, 255, 0.88);
	--dps-on-navy-muted: rgba(255, 255, 255, 0.64);
	--dps-on-navy-strong: #ffffff;

	/* ---- Frappe primary tokens ---- */
	--primary: var(--dps-blue);
	--primary-color: var(--dps-blue);
	--brand-color: var(--dps-navy);
	--btn-primary: var(--dps-blue);
	--text-on-primary: #ffffff;

	/* ---- Retint the blue ramp so links / info / focus rings read as DPS blue ---- */
	--blue-50: #f5f9fe;
	--blue-100: #eaf3fb;
	--blue-200: #d6e6f6;
	--blue-300: #a9c8ec;
	--blue-400: #5b86cf;
	--blue-500: #24429e;
	--blue-600: #1e3a8c;
	--blue-700: #1b3488;
	--blue-800: #172a6e;
	--blue-900: #12205a;

	/* ---- Semantic (frappe-ui / espresso) blue tokens used across the desk ---- */
	--ink-blue-1: #f2f7ff;
	--ink-blue-2: var(--dps-blue);
	--ink-blue-3: var(--dps-blue-dark);
	--ink-blue-link: var(--dps-blue);
	--surface-blue-1: var(--dps-sky-tint);
	--surface-blue-2: #e0ecfa;
	--surface-blue-3: var(--dps-blue);
	--outline-blue-1: #a9c8ec;
	--bg-blue: var(--dps-sky-tint);
	/* Frappe's blue status pill (.indicator-pill.blue, e.g. "Enabled") reads
	   this against the pale --bg-blue tint above, not a solid button fill —
	   #ffffff here made those badges white-on-near-white. Keep it dark, same
	   as upstream's --blue-700 default. */
	--text-on-blue: var(--dps-blue-dark);

	/* ---- Navbar ---- */
	--navbar-bg: var(--dps-navy);
	/* Taller than the 48px core default so the crest chip (44px logo +
	   padding) has breathing room instead of nearly touching the top/bottom
	   edges. This is a CSS custom property that other core stylesheets read
	   via calc() (sidebar height, scroll-margins, page offsets) — overriding
	   it here keeps those in sync with the taller bar below. */
	--navbar-height: 64px !important;
}

/* =========================================================
   1. TOP NAVBAR — DPS navy, light foreground
   ========================================================= */
.navbar {
	height: var(--navbar-height) !important;
	background: var(--dps-navy) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 1px 3px rgba(11, 8, 45, 0.18);
}

/* foreground text directly in the navbar (not dropdown menus) */
.navbar>.container>.navbar-brand,
.navbar .navbar-breadcrumbs a,
.navbar .navbar-breadcrumbs li,
.navbar .navbar-breadcrumbs .breadcrumb-item,
.navbar .navbar-breadcrumbs .breadcrumb-item::before,
.navbar .navbar-nav>.nav-item>.nav-link,
.navbar .navbar-nav>.nav-item>a,
.navbar #navbar-breadcrumbs a {
	color: var(--dps-on-navy-strong) !important;
}

.navbar .navbar-nav>.nav-item>.nav-link:hover {
	color: var(--dps-sky) !important;
}

/* navbar icons */
.navbar .navbar-nav>.nav-item svg.icon,
.navbar .navbar-nav>.nav-item .es-icon,
.navbar>.container>button svg.icon,
.navbar .search-bar svg {
	stroke: var(--dps-on-navy-strong) !important;
	color: var(--dps-on-navy-strong) !important;
}

/* The crest is navy-on-white, so it disappears on a navy bar.
   Seat it in a white chip to keep it legible and deliberate.
   Sized up from the 26px default — the crest has fine detail
   (shield, wave lines, motto ribbon) that reads as a blur below
   ~34px. Sized again alongside the taller --navbar-height above so
   the chip has clear margin above/below instead of nearly touching
   the bar's edges. */
.navbar .navbar-brand img,
.navbar .app-logo img,
.navbar-home img {
	height: 44px !important;
	width: auto !important;
	background: #ffffff;
	border-radius: 8px;
	padding: 4px 6px;
	box-shadow: 0 1px 2px rgba(11, 8, 45, 0.25);
}

.navbar .navbar-brand,
.navbar .app-logo,
.navbar-home {
	height: 52px !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* navbar search field */
.navbar .search-bar .awesomplete input,
.navbar .search-bar input.form-control {
	background: rgba(255, 255, 255, 0.13) !important;
	color: var(--dps-on-navy-strong) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}

.navbar .search-bar input::placeholder {
	color: rgba(255, 255, 255, 0.72) !important;
}

.navbar .search-bar .awesomplete input:focus {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: var(--dps-sky) !important;
	box-shadow: none !important;
}

/* --- readability guard: dropdowns opened from the navbar stay dark-on-white --- */
.navbar .dropdown-menu {
	background-color: var(--surface-modal, #ffffff) !important;
}

.navbar .dropdown-menu a,
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item span,
.navbar .dropdown-menu .dropdown-item small {
	color: var(--ink-gray-8, #383838) !important;
}

.navbar .dropdown-menu svg.icon,
.navbar .dropdown-menu .es-icon {
	stroke: var(--ink-gray-7, #525252) !important;
	color: var(--ink-gray-7, #525252) !important;
}

.navbar .dropdown-menu .dropdown-item:hover {
	background-color: var(--dps-sky-tint) !important;
	color: var(--ink-gray-9, #171717) !important;
}

/* ---------------------------------------------------------
   Notification bell (and other "standard items")
   These live in `.standard-items-sections`, which Frappe renders in the top
   bar on the home/apps screen and in the rail on workspace pages — both navy.
   The icon carries `.current-color` (stroke: currentColor), so it inherits
   `color` from `.item-anchor` (--ink-gray-6 = dark) and ignores --icon-stroke.
   Setting `color` is therefore the actual fix.
   --------------------------------------------------------- */
.sidebar-notification .item-anchor,
.sidebar-notification .standard-sidebar-item .item-anchor,
.sidebar-notification .sidebar-item-icon,
.sidebar-notification .sidebar-item-label {
	color: #ffffff !important;
	--icon-stroke: #ffffff;
}

.sidebar-notification .item-anchor svg,
.sidebar-notification .sidebar-item-icon svg,
.sidebar-notification svg.icon {
	stroke: #ffffff !important;
}

.sidebar-notification svg.es-icon {
	fill: #ffffff !important;
}

.sidebar-notification:hover .item-anchor,
.sidebar-notification:hover .sidebar-item-icon {
	color: var(--dps-sky) !important;
	--icon-stroke: var(--dps-sky);
}

.sidebar-notification:hover svg.icon {
	stroke: var(--dps-sky) !important;
}

/* ---------------------------------------------------------
   Search trigger ("Search  Ctrl+K") — same `.standard-sidebar-item`
   family as the bell above, so it also renders in navy chrome. The
   magnifier icon is rendered with a hardcoded `.text-ink-gray-7`
   class (dark gray) baked in by frappe.utils.icon(), independent of
   the --icon-stroke token, which is why it went unreadable against
   navy while the "Search" label text next to it looked fine — both
   need to be pinned to the same light foreground here.
   --------------------------------------------------------- */
.navbar-search-bar .item-anchor,
.navbar-search-bar .sidebar-item-icon,
.navbar-search-bar .sidebar-item-label {
	color: var(--dps-on-navy-strong) !important;
	--icon-stroke: var(--dps-on-navy-strong);
}

.navbar-search-bar .item-anchor svg,
.navbar-search-bar .sidebar-item-icon svg {
	stroke: var(--dps-on-navy-strong) !important;
	color: var(--dps-on-navy-strong) !important;
}

.navbar-search-bar .keyboard-shortcut {
	color: var(--dps-on-navy-muted) !important;
}

.navbar-search-bar:hover .item-anchor,
.navbar-search-bar:hover .sidebar-item-icon,
.navbar-search-bar:hover .sidebar-item-label {
	color: var(--dps-sky) !important;
}

.navbar-search-bar:hover .item-anchor svg {
	stroke: var(--dps-sky) !important;
}

/* readability guard: the notifications panel is a sibling of the bell and sits
   on white — force its tokens back to dark so it never inherits navy-chrome
   foregrounds from an ancestor. */
.dropdown-notifications .notifications-list {
	--icon-stroke: var(--gray-800, #383838);
	color: var(--ink-gray-8, #383838);
	background-color: var(--surface-modal, #ffffff);
}

.dropdown-notifications .notifications-list .notification-list-header,
.dropdown-notifications .notifications-list .recent-item,
.dropdown-notifications .notifications-list .notification-item,
.dropdown-notifications .notifications-list .subject-title,
.dropdown-notifications .notifications-list b {
	color: var(--ink-gray-8, #383838);
}

.dropdown-notifications .notifications-list svg.icon {
	stroke: var(--gray-800, #383838);
}

/* =========================================================
   2. LEFT SIDEBAR — DPS navy on every page
   `.body-sidebar` is the persistent desk nav rail (collapsed 50px /
   expanded 220px), so theming it covers all desk pages.
   ========================================================= */
.body-sidebar {
	/* re-point the sidebar's own tokens to on-navy equivalents */
	--surface-menu-bar: var(--dps-navy);
	--sidebar-hover-color: rgba(255, 255, 255, 0.1);
	--sidebar-active-color: rgba(255, 255, 255, 0.16);
	--sidebar-border-color: rgba(255, 255, 255, 0.14);
	--divider-color: rgba(255, 255, 255, 0.14);
	--icon-stroke: rgba(255, 255, 255, 0.85);

	background: linear-gradient(180deg, var(--dps-navy) 0%, var(--dps-indigo) 100%) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
	/* keep the bottom avatar/collapse controls clear of the fixed
	   footer bar (28px, z-index 1024 — see section 7) painted over
	   this rail's bottom edge */
	padding-bottom: 38px !important;
}

/* nav item labels + icons */
.body-sidebar .item-anchor,
.body-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item a,
.body-sidebar .collapse-sidebar-link,
.body-sidebar .onboarding-sidebar,
.body-sidebar .promotional-banner,
.body-sidebar .nav-item>a {
	color: var(--dps-on-navy) !important;
}

.body-sidebar .item-anchor svg,
.body-sidebar .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item svg.icon,
.body-sidebar .standard-sidebar-item .es-icon,
.body-sidebar .collapse-sidebar-link svg,
.body-sidebar .drop-icon svg {
	stroke: rgba(255, 255, 255, 0.82) !important;
	color: rgba(255, 255, 255, 0.82) !important;
}

/* hover */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .sidebar-item-label {
	color: var(--dps-on-navy-strong) !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px;
}

/* active item — translucent white plate + azure accent bar */
.body-sidebar .active-sidebar,
.body-sidebar .standard-sidebar-item.selected {
	background: rgba(255, 255, 255, 0.16) !important;
	box-shadow: none !important;
	border-radius: 8px;
	position: relative;
}

.body-sidebar .active-sidebar::before,
.body-sidebar .standard-sidebar-item.selected::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 60%;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--dps-sky);
}

.body-sidebar .active-sidebar .item-anchor,
.body-sidebar .active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.selected .item-anchor,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-label {
	color: var(--dps-on-navy-strong) !important;
	font-weight: 600 !important;
}

.body-sidebar .active-sidebar svg,
.body-sidebar .standard-sidebar-item.selected svg {
	stroke: var(--dps-on-navy-strong) !important;
}

/* sidebar header (app name + logo) */
.body-sidebar .sidebar-header .header-title {
	color: var(--dps-on-navy-strong) !important;
}

.body-sidebar .sidebar-header .header-subtitle {
	color: var(--dps-on-navy-muted) !important;
}

.body-sidebar .sidebar-header svg,
.body-sidebar .sidebar-header .es-icon {
	stroke: rgba(255, 255, 255, 0.8) !important;
}

/* white chip behind the app/crest logo so it stays visible on navy */
.body-sidebar .header-logo-container,
.body-sidebar .header-logo-container:has(img) {
	background-color: #ffffff !important;
	padding: 2px;
	box-shadow: 0 1px 2px rgba(11, 8, 45, 0.25);
}

/* divider + resize/collapse affordances */
.body-sidebar .divider {
	border-top-color: rgba(255, 255, 255, 0.14) !important;
}

.body-sidebar .sidebar-toggle-btn {
	background: var(--dps-blue) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

.body-sidebar .sidebar-toggle-btn svg {
	stroke: #ffffff !important;
}

.body-sidebar .sidebar-toggle-btn:hover {
	background: var(--dps-azure) !important;
}

/* bottom user block */
.body-sidebar .dropdown-navbar-user .sidebar-user-button,
.body-sidebar .dropdown-navbar-user .sidebar-user-button span,
.body-sidebar .body-sidebar-bottom .sidebar-item-label {
	color: var(--dps-on-navy) !important;
}

.body-sidebar .dropdown-navbar-user:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	border-radius: 8px;
}

/* subtle scrollbar on navy */
.body-sidebar .body-sidebar-top::-webkit-scrollbar {
	width: 6px;
}

.body-sidebar .body-sidebar-top::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 3px;
}

.body-sidebar .body-sidebar-top::-webkit-scrollbar-track {
	background: transparent;
}

/* --- readability guard: any popover/dropdown inside the navy rail --- */
.body-sidebar .dropdown-menu {
	background-color: var(--surface-modal, #ffffff) !important;
}

.body-sidebar .dropdown-menu a,
.body-sidebar .dropdown-menu .dropdown-item,
.body-sidebar .dropdown-menu .dropdown-item span,
.body-sidebar .dropdown-menu .dropdown-item small,
.body-sidebar .dropdown-menu .sidebar-item-label {
	color: var(--ink-gray-8, #383838) !important;
	font-weight: 400 !important;
}

.body-sidebar .dropdown-menu svg,
.body-sidebar .dropdown-menu .es-icon {
	stroke: var(--ink-gray-7, #525252) !important;
	color: var(--ink-gray-7, #525252) !important;
}

.body-sidebar .dropdown-menu .dropdown-item:hover {
	background-color: var(--dps-sky-tint) !important;
	color: var(--ink-gray-9, #171717) !important;
}

.body-sidebar .dropdown-menu .notification-item,
.body-sidebar .dropdown-menu .notification-item * {
	color: var(--ink-gray-8, #383838) !important;
}

/* =========================================================
   3. CONTENT AREA — keep neutral for readability
   Explicitly protect the elements that a brand-wide link colour
   would otherwise wash out.
   ========================================================= */

/* workspace / app tiles on the home & app screens */
.desktop-icon,
.desktop-icon .icon-title,
.desktop-icon .icon-caption,
.desktop-icon .icon-subtitle {
	color: var(--ink-gray-8, #383838) !important;
	font-weight: 500;
}

.desktop-icon:hover .icon-title {
	color: var(--ink-gray-9, #171717) !important;
}

/* Workspace card links ("Reports & Masters" etc.) must stay near-black text —
   they're high-density lists and blue-on-white at this volume is much harder
   to scan. Pinned to --ink-gray-9 (not --text-color/gray-800) since the ask
   is explicitly black, not dark grey. Deliberately NOT scoped to
   .links-widget-box so it holds for every widget type that renders
   .link-item. The trailing ↗ is an .es-icon (fill driven by --icon-stroke,
   not `color`), so that token is reset here too. */
.link-item,
.link-item .link-content,
.link-item .link-text,
.link-item a,
.widget .link-item,
.widget .link-item .link-content,
.widget .link-item .link-text,
.widget-head .widget-title,
.widget-head .widget-label .widget-title,
.shortcut-widget-box .widget-title {
	color: var(--ink-gray-9, #171717) !important;
	--icon-stroke: var(--ink-gray-9, #171717);
}

.link-item .es-icon,
.link-item svg.es-icon {
	fill: var(--ink-gray-9, #171717) !important;
}

.link-item svg.icon:not(.es-icon) {
	stroke: var(--ink-gray-9, #171717) !important;
}

/* stock hover behaviour: goes darker, not blue */
.link-item:hover,
.link-item:hover .link-content,
.link-item:hover .link-text,
.widget .link-item:hover .link-content {
	color: var(--invert-neutral, #000000) !important;
}

/* muted states stay muted */
.link-item .disabled-link,
.widget .link-item .disabled-link {
	color: var(--text-muted) !important;
}

/* =========================================================
   4. ACTIONS, LINKS & FOCUS
   ========================================================= */
.btn-primary,
.btn.btn-primary,
.page-head .btn-primary,
.datatable .btn-primary {
	background-color: var(--dps-blue) !important;
	border-color: var(--dps-blue) !important;
	color: #ffffff !important;
}

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

/* inline text links inside content only (not tiles, not chrome) */
.form-message a,
.comment-content a,
.ql-editor a,
.md a,
.page-content .text-muted a {
	color: var(--ink-gray-9, #171717);
}

/* on-brand focus ring */
.form-control:focus,
.input-with-feedback:focus,
.awesomplete>input:focus {
	border-color: var(--dps-azure) !important;
	box-shadow: 0 0 0 2px rgba(14, 130, 196, 0.18) !important;
}

/* form tabs / active indicators */
.form-tabs .nav-link.active {
	color: var(--ink-gray-9, #171717) !important;
	border-bottom-color: var(--dps-blue) !important;
}

/* list view: keep the inner list/form sidebars light for contrast,
   but brand their active + link states */
.list-sidebar .list-link>a:hover,
.list-sidebar .list-link.active>a,
.form-sidebar .sidebar-label:hover {
	color: var(--ink-gray-9, #171717) !important;
}

/* =========================================================
   5. LOGIN / PORTAL
   ========================================================= */
.for-login .page-card .btn-primary,
.web-form-container .btn-primary {
	background-color: var(--dps-blue) !important;
	border-color: var(--dps-blue) !important;
}

.for-login .page-card-head img {
	max-height: 64px;
}

#icon-bell {
	stroke: white !important;
}

/* =========================================================
   6. WATERMARK — faint DPS crest over every desk screen
   A behind-content layer (z-index:-1) only shows through gaps
   real content doesn't opaquely cover — fine on the near-empty
   login page, invisible on full-bleed list/form/workspace
   screens where `.page-container`/`.layout-main-section` paint
   solid backgrounds edge to edge. So this sits *above* content
   instead: fixed, very low opacity, pointer-events:none so it
   never blocks clicks or reads as anything but a faint tint.
   z-index is low on purpose — high enough to clear plain static
   content, but well under navbar/dropdown/modal stacking so it
   never covers anything interactive.
   ========================================================= */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2;
	background-image: url("/assets/dps_erp/images/dps-logo.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(30vw, 380px);
	opacity: 0.05;
	pointer-events: none;
}

/* =========================================================
   7. FOOTER — persistent "Powered by Tecifo" bar
   `<footer>` is a static sibling of #body inside .main-section
   (frappe/www/desk.html) that survives every SPA route change;
   dps_footer.js fills it in, this pins it to the viewport so it
   reads on every desk page without covering the last row of
   content underneath.
   Always full-bleed (left:0/right:0) — it never shifts to dodge
   the workspace module rail (`.body-sidebar`), because that rail
   is only present on some routes and its width isn't constant
   (collapsed/expanded/hidden), which made any offset either gap
   or clip depending on the page. Instead: outrank the rail's
   z-index (1020, frappe core) so the footer paints over its
   bottom edge — same navy family, so it reads as one bar — and
   reserve that 28px at the rail's own bottom via padding (see
   `.body-sidebar` override below) so its avatar/collapse controls
   never sit underneath it.
   ========================================================= */
.main-section {
	padding-bottom: 28px;
}

.main-section>footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1024;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 28px;
	padding: 0 14px;
	background: var(--dps-navy);
	color: var(--dps-on-navy);
	font-size: 11px;
	line-height: 1;
	box-shadow: 0 -1px 4px rgba(11, 8, 45, 0.18);
}

.main-section>footer .dps-footer-path {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.75;
}

.main-section>footer .dps-footer-brand {
	flex-shrink: 0;
}

.main-section>footer .dps-footer-brand a {
	color: var(--dps-tecifo-orange) !important;
	font-weight: 600;
	text-decoration: none;
}

.main-section>footer .dps-footer-brand a:hover {
	text-decoration: underline;
}

#icon-search {
	stroke: var(--text-light);
}