@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSans-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSans-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSans-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSans-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSansArabic-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSansArabic-Medium.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/octacore/fonts/ibm-plex/IBMPlexSansArabic-Bold.ttf") format("truetype");
}

/* Brand constants — exported for html_block, page, and surface-shell CSS in both themes. */
:root {
	--octa-brand-gold-50: #faf5ea;
	--octa-brand-gold-100: #f0e2bf;
	--octa-brand-gold-200: #e1c98e;
	--octa-brand-gold-400: #c6a15d;
	--octa-brand-gold-600: #a9823c;
	--octa-brand-gold-700: #8f6a28;
	--octa-brand-gold-800: #6d501c;
	--octa-graphite-50: #f5f3f1;
	--octa-graphite-100: #e6e0db;
	--octa-graphite-200: #c9beb4;
	--octa-graphite-400: #a09183;
	--octa-graphite-600: #75685d;
	--octa-graphite-700: #5a4e44;
	--octa-graphite-900: #302922;
	--octa-graphite-950: #1f1a15;
	--octa-ivory: #fcfbf8;
	--octa-mist: #f3efe8;
	--octa-stone: #e6ded2;
	--octa-silver: #c8c2b8;
	--octa-taupe: #8d8274;
	/* Surface family — opaque/soft/page-canvas neutrals for page-scoped shells
	   (ServiceBay Intake, SO360) that need a raw --octa-* token instead of the
	   Frappe semantic mappings below. Values intentionally mirror --card-bg /
	   --subtle-accent / --bg-color so this family never drifts from the rest
	   of Desk chrome. Defined unconditionally (no dark-mode split) — matching
	   every other raw palette token above; see --octa-control-border below for
	   the one light-only exception. Dark-mode parity: the family is reassigned
	   to Frappe dark semantics in the [data-theme="dark"] block below. */
	--octa-surface-card: #ffffff;
	--octa-surface-soft: #faf8f4;
	--octa-surface-page: #f6f4f0;
	--octa-border-soft: #e8e4dc;
	--octa-report-surface: #fbf9f4;
	--octa-report-surface-alt: #f6f4ec;
	--octa-report-border: #ded6c8;
	--octa-report-toolbar-bg: #fbf9f4;
	--octa-report-kpi-accent: #9a5f1a;
	/* Chip/callout background tint — brand-gold family, sits between -50 and
	   -100 (deliberately not renumbered into the 50/100/200… ladder). */
	--octa-brand-gold-tint: #f6edd7;
	--octa-info: #1386c1;
	--octa-danger: #c22749;
	--octa-success: #2f7a52;
	/* Tone palette — single source of truth for status/severity chips and
	   left-border strips across cockpits, workspace blocks, and surface shells.
	   Defined unconditionally so lazy-loaded surfaces inherit it in both themes. */
	--octa-tone-green-accent: var(--octa-success);
	--octa-tone-green-bg: #e3f1e7;
	--octa-tone-green-border: #bfd8c8;
	--octa-tone-green-text: #184a30;
	/* Distinct from brand gold — gold is reserved for the suite "here" marker. */
	--octa-tone-amber-accent: #d97706;
	--octa-tone-amber-bg: #fcf3e1;
	--octa-tone-amber-border: #ead4a9;
	--octa-tone-amber-text: #6d501c;
	--octa-tone-red-accent: var(--octa-danger);
	--octa-tone-red-bg: #f7e6eb;
	--octa-tone-red-border: #e3c0ca;
	--octa-tone-red-text: #6f1631;
	--octa-tone-teal-accent: var(--octa-info);
	--octa-tone-teal-bg: #e4f1f8;
	--octa-tone-teal-border: #bfd8e7;
	--octa-tone-teal-text: #0d628d;
	--octa-tone-charcoal-accent: var(--octa-graphite-900);
	--octa-tone-charcoal-bg: #ebe7e2;
	--octa-tone-charcoal-border: #d1c7bc;
	--octa-tone-charcoal-text: #302922;
	--octa-tone-steel-accent: #445f77;
	--octa-tone-steel-bg: #e8eef2;
	--octa-tone-steel-border: #c9d5df;
	--octa-tone-steel-text: #355264;
	/* Severity strip aliases (risk/priority lists) */
	--octa-severity-high: var(--octa-tone-red-accent);
	--octa-severity-medium: var(--octa-tone-amber-accent);
	--octa-severity-low: var(--octa-tone-green-accent);
	--octa-focus-ring: 0 0 0 2px rgba(198, 161, 93, 0.35);
	--octa-shadow-sm: 0 1px 3px rgba(31, 26, 21, 0.08);
	--octa-shadow-md: 0 4px 12px rgba(31, 26, 21, 0.1);
	--octa-shadow-lg: 0 8px 24px rgba(31, 26, 21, 0.12);
	--octa-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
	--octa-font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", sans-serif;
	/* Type scale — labels → primary metric values. Anchored to the KPI-tile idiom
	   (uppercase ~0.7rem label, clamp'ed ~36px value). Use --text-color for full
	   contrast and --text-muted for captions (both defined in the light mapping). */
	--octa-text-2xs: 0.625rem;  /* ~10px — micro caption */
	--octa-text-xs: 0.7rem;     /* ~11px — KPI / metric label (the app-wide label size) */
	--octa-text-sm: 0.8125rem;  /* ~13px — secondary text */
	--octa-text-base: 0.9375rem; /* ~15px — body */
	--octa-text-lg: 1.125rem;   /* ~18px — subhead */
	--octa-text-xl: 1.35rem;    /* ~22px — secondary metric value (thin pulse pills) */
	--octa-text-2xl: clamp(1.75rem, 2.6vw, 2.25rem); /* primary KPI value (28→36px) */
	/* Weight scale — pair size + weight so value ≠ label (visual-hierarchy rule 1). */
	--octa-weight-regular: 400;
	--octa-weight-medium: 500;
	--octa-weight-semibold: 600;
	--octa-weight-bold: 700;
	/* Spacing scale — whitespace is a signal (visual-hierarchy rule 4). */
	--octa-space-1: 0.25rem;
	--octa-space-2: 0.5rem;
	--octa-space-3: 0.75rem;
	--octa-space-4: 1rem;
	--octa-space-5: 1.5rem;
	--octa-space-6: 2rem;
	--octa-space-7: 2.5rem;
	--octa-space-8: 3rem;
	--octa-space-9: 4rem;
	--octa-radius-sm: 0.75rem;
	--octa-radius-md: 1rem;
	--octa-radius-lg: 1.5rem;
	--octa-radius-xl: 2rem;
	--octa-radius-pill: 999px;
	--octa-shadow-xl: 0 18px 42px rgba(31, 26, 21, 0.18);
	--octa-motion-fast: 160ms;
	--octa-motion-base: 240ms;
	--octa-motion-slow: 420ms;
	--octa-login-shell-max-inline: 68rem;
	--octa-login-panel-inline: clamp(18rem, 28vw, 24rem);
	--octa-login-panel-offset: clamp(var(--octa-space-6), 5vw, var(--octa-space-9));
	--octa-login-surface-inline: 30rem;
	--octa-login-surface-block-padding: clamp(var(--octa-space-6), 5vh, var(--octa-space-8));
	--octa-login-section-min-block: 34rem;
	--octa-login-brand-inline: clamp(18rem, 24vw, 25rem);
	--octa-login-brand-block: min(46rem, calc(100dvh - (var(--octa-space-8) * 2)));
	--octa-login-card-inline: clamp(24rem, 30vw, 31rem);
	--octa-login-column-gap: clamp(var(--octa-space-6), 4vw, var(--octa-space-9));
	--octa-login-brand-radius: 2.4rem;
	--octa-login-brand-band-block: 12rem;
	--octa-login-brand-mark-inline: clamp(7.5rem, 10vw, 9rem);
	--octa-login-brand-wordmark-inline: clamp(13rem, 18vw, 18rem);
	--octa-login-mobile-mark-inline: 5rem;
	--octa-login-mobile-wordmark-inline: 11rem;
	--octa-login-client-logo-inline: clamp(15rem, 18vw, 18rem);
	--octa-login-client-logo-mobile-inline: 9rem;
	--octa-login-client-logo-art-scale: 100%;
	--octa-login-card-padding: clamp(var(--octa-space-5), 2.5vw, var(--octa-space-6));
	--octa-login-form-gap: var(--octa-space-3);
	--octa-login-wordmark-inline: clamp(10rem, 14vw, 12.5rem);
	--octa-login-wordmark-block: clamp(2.25rem, 3vw, 2.8rem);
	--octa-login-title-size: clamp(var(--octa-text-xl), 1.8vw, 1.75rem);
	--octa-login-mark-inline: clamp(8rem, 13vw, 11rem);
	--octa-login-control-block: 3.25rem;
	--octa-login-button-block: 3.25rem;
	--octa-login-title-rule-inline: 3.25rem;
	--octa-login-focus-outline: 0 0 0 3px rgba(198, 161, 93, 0.28);
	--octa-login-head-bg: rgba(255, 255, 255, 0.92);
	--sidebar-width: 244px;
	--octa-sidebar-surface: #f8f6f2;
	--octa-sidebar-hover: #eee9e1;
	--octa-sidebar-active: #efe2c4;
	--octa-sidebar-active-text: #4b3515;
	--octa-sidebar-marker: var(--octa-brand-gold-700);
	--octa-sidebar-group-line: #ddd5c9;
}

/* Light-theme semantic mapping. Scoped so data-theme="dark" keeps stock Frappe dark values. */
:root:not([data-theme="dark"]) {
	--brand-color: var(--octa-brand-gold-700);
	--primary: var(--octa-brand-gold-700);
	--primary-color: var(--octa-brand-gold-700);
	--bg-color: #f6f4f0;
	--fg-color: #ffffff;
	--card-bg: #ffffff;
	--subtle-accent: #faf8f4;
	--subtle-fg: #f1ede6;
	--navbar-bg: var(--octa-graphite-950);
	--fg-hover-color: #f3efe8;
	--disabled-text-color: var(--octa-graphite-600);
	--disabled-control-bg: #f1ede6;
	--input-disabled-bg: #f1ede6;
	--control-bg: #ffffff;
	--control-bg-on-gray: #ffffff;
	--awesomebar-focus-bg: #ffffff;
	--modal-bg: #ffffff;
	--toast-bg: #ffffff;
	--popover-bg: #ffffff;
	--awesomplete-hover-bg: #f6f1e6;
	--btn-primary: var(--octa-graphite-950);
	--btn-default-bg: #ffffff;
	--btn-default-hover-bg: #f3efe8;
	--border-primary: var(--octa-brand-gold-700);
	--sidebar-select-color: rgba(198, 161, 93, 0.16);
	--scrollbar-thumb-color: rgba(141, 130, 116, 0.55);
	--scrollbar-track-color: rgba(230, 222, 210, 0.65);
	--border-color: #e8e4dc;
	--dark-border-color: #cfc8bd;
	--octa-control-border: #cfc8bd;
	--table-border-color: #e8e4dc;
	--highlight-color: #f8f5ee;
	--yellow-highlight-color: #fcf3e1;
	--btn-group-border-color: #d8d2c7;
	--placeholder-color: #8a8174;
	--highlight-shadow: 0 0 0 2px rgba(198, 161, 93, 0.25);
	--code-block-bg: var(--octa-graphite-950);
	--code-block-text: #efe6d8;
	--switch-bg: #d8d2c7;
	--text-color: var(--octa-graphite-950);
	--text-muted: var(--octa-graphite-700);
	--focus-default: var(--octa-focus-ring);
}

/* Dark theme carries over the brand accent and remaps the --octa-surface-* family onto Frappe's dark semantics. */
[data-theme="dark"] {
	--brand-color: var(--octa-brand-gold-400);
	--primary: var(--octa-brand-gold-400);
	--primary-color: var(--octa-brand-gold-400);
	--border-primary: var(--octa-brand-gold-400);
	--sidebar-select-color: rgba(198, 161, 93, 0.24);
	--focus-default: 0 0 0 2px rgba(198, 161, 93, 0.45);
	/* Surface family follows Frappe's dark semantics so ServiceBay panels,
	   tiles, and borders adapt instead of staying light (design audit 2026-07-03). */
	--octa-surface-card: var(--card-bg);
	--octa-surface-soft: var(--subtle-accent);
	--octa-surface-page: var(--bg-color);
	--octa-border-soft: var(--border-color);
	--octa-report-surface: var(--card-bg);
	--octa-report-surface-alt: var(--subtle-accent);
	--octa-report-border: var(--border-color);
	--octa-report-toolbar-bg: var(--card-bg);
	--octa-report-kpi-accent: var(--octa-brand-gold-400);
	--octa-sidebar-surface: #211d19;
	--octa-sidebar-hover: #302a24;
	--octa-sidebar-active: #40351f;
	--octa-sidebar-active-text: #f2dfb4;
	--octa-sidebar-marker: var(--octa-brand-gold-400);
	--octa-sidebar-group-line: #4b4137;
}

/* Desk navigation hierarchy. Frappe still owns rendering and mutations; this
   layer strengthens orientation without creating a parallel sidebar runtime. */
.body-sidebar {
	background: var(--octa-sidebar-surface);
	border-right: 0;
	border-inline-end: 1px solid var(--sidebar-border-color);
}

.body-sidebar .standard-sidebar-item {
	border-radius: 7px;
	min-height: 34px;
	transition:
		background-color var(--octa-motion-fast) ease,
		color var(--octa-motion-fast) ease;
}

.body-sidebar .standard-sidebar-item .item-anchor {
	gap: 4px;
	min-height: 34px;
	padding-inline: 2px 5px;
}

.body-sidebar
	.standard-sidebar-item:not(.active-sidebar):has(.item-anchor:not(.section-break)):hover {
	background: var(--octa-sidebar-hover);
}

.body-sidebar .standard-sidebar-item.active-sidebar {
	background: var(--octa-sidebar-active);
	border-radius: 7px;
	box-shadow: none;
}

.body-sidebar .standard-sidebar-item.active-sidebar::before {
	background: var(--octa-sidebar-marker);
	border-radius: 0 3px 3px 0;
	content: "";
	inset-block: 6px;
	inset-inline-start: -2px;
	position: absolute;
	width: 3px;
}

[dir="rtl"] .body-sidebar .standard-sidebar-item.active-sidebar::before {
	border-radius: 3px 0 0 3px;
}

.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon {
	color: var(--octa-sidebar-active-text);
}

.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label {
	font-weight: var(--octa-weight-semibold);
}

.body-sidebar .item-anchor:focus-visible,
.body-sidebar button:focus-visible,
.body-sidebar .collapse-sidebar-link:focus-visible {
	border-radius: 7px;
	outline: 2px solid var(--octa-sidebar-marker);
	outline-offset: -2px;
}

.body-sidebar .section-item {
	margin-block-start: 8px;
}

.body-sidebar .section-item > .standard-sidebar-item .section-break {
	color: var(--text-muted) !important;
	font-size: var(--octa-text-2xs);
	font-weight: var(--octa-weight-semibold);
	letter-spacing: 0.08em;
	margin-inline-start: 8px;
	text-transform: uppercase;
}

.body-sidebar
	.section-item.octa-has-active-child
	> .standard-sidebar-item
	.section-break {
	color: var(--octa-sidebar-active-text) !important;
}

.body-sidebar-container.expanded
	.body-sidebar
	.section-item
	> .nested-container {
	border-inline-start: 1px solid var(--octa-sidebar-group-line);
	margin-inline-start: 12px;
	padding-inline-start: 5px;
}

.body-sidebar-container:not(.expanded)
	.body-sidebar
	.section-item
	> .nested-container {
	border-inline-start: 0;
	margin-inline-start: 0;
	padding-inline-start: 0;
}

.body-sidebar-container:not(.expanded)
	.body-sidebar
	.standard-sidebar-item.active-sidebar {
	background: var(--octa-sidebar-active);
}

.body-sidebar-container:not(.expanded)
	.body-sidebar
	.standard-sidebar-item.active-sidebar::before {
	inset-block: 8px;
	inset-inline-start: -1px;
}

@media (max-width: 991.98px) {
	.body-sidebar-container .body-sidebar .standard-sidebar-item,
	.body-sidebar-container .body-sidebar .standard-sidebar-item .item-anchor {
		min-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.body-sidebar,
	.body-sidebar .standard-sidebar-item,
	.body-sidebar .standard-sidebar-item .item-anchor {
		transition: none;
	}
}

html,
body,
button,
input,
select,
textarea {
	font-family: var(--octa-font-sans);
}

.frappe-rtl,
.frappe-rtl body,
.frappe-rtl button,
.frappe-rtl input,
.frappe-rtl select,
.frappe-rtl textarea {
	font-family: var(--octa-font-arabic);
}

html {
	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

::selection {
	background: rgba(198, 161, 93, 0.24);
	color: var(--octa-graphite-950);
}

html:not([data-theme="dark"]) a:not(.btn):not(.nav-link):not(.dropdown-item) {
	color: var(--octa-brand-gold-700);
}

html:not([data-theme="dark"]) a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
	color: var(--octa-brand-gold-800);
}

/* Navbar: dark graphite brand bar with gold keyline. */
.navbar {
	background: var(--octa-graphite-950);
	border-bottom: 1px solid rgba(198, 161, 93, 0.4);
}

.navbar .nav-link,
.navbar .dropdown-notifications .notifications-icon,
.navbar .btn-reset,
.navbar .drop-icon,
.navbar .nav-item,
#navbar-breadcrumbs > li > a,
#navbar-breadcrumbs > li > span {
	color: rgba(252, 251, 248, 0.9) !important;
}

.navbar .nav-link:hover,
.navbar .btn-reset:hover,
#navbar-breadcrumbs > li > a:hover {
	color: #ffffff !important;
}

.navbar .vertical-bar {
	border-right-color: rgba(232, 210, 158, 0.24);
}

.navbar-brand img,
.navbar-home img {
	max-height: 38px;
}

#navbar-search,
.navbar-modal-wrapper #navbar-search {
	background: var(--control-bg);
	border: 1px solid var(--border-color);
	color: var(--text-color);
}

#navbar-search:focus,
.navbar-modal-wrapper #navbar-search:focus {
	border-color: var(--octa-brand-gold-400);
	box-shadow: var(--focus-default);
}

/* Page title: keep brand weight without resizing the layout. */
.page-title .title-area .title-text {
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Gold accents on selection controls. */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--primary);
}

/* Primary button: solid graphite in light theme (stock styling retained in dark). */
html:not([data-theme="dark"]) .btn.btn-primary {
	background: var(--octa-graphite-950);
	border-color: var(--octa-graphite-950);
	color: #fffaf1;
}

html:not([data-theme="dark"]) .btn.btn-primary:hover,
html:not([data-theme="dark"]) .btn.btn-primary:focus,
html:not([data-theme="dark"]) .btn.btn-primary:active {
	background: var(--octa-graphite-900);
	border-color: var(--octa-graphite-900);
	color: #fffaf1;
}

/* Form controls — give inputs a clearly visible edge (the pale --border-color
   reads as borderless on near-white surfaces). System-wide, light theme only. */
html:not([data-theme="dark"]) .form-control,
html:not([data-theme="dark"]) .input-with-feedback,
html:not([data-theme="dark"]) select.form-control,
html:not([data-theme="dark"]) textarea.form-control,
html:not([data-theme="dark"]) .input-area {
	border: 1px solid var(--octa-control-border);
}

/* Read-only display fields keep the softer keyline so they stay visually
   distinct from editable controls. */
html:not([data-theme="dark"]) .like-disabled-input {
	border: 1px solid var(--border-color);
}

html:not([data-theme="dark"]) .form-control:focus,
html:not([data-theme="dark"]) .input-with-feedback:focus,
html:not([data-theme="dark"]) select.form-control:focus,
html:not([data-theme="dark"]) textarea.form-control:focus {
	border-color: var(--octa-brand-gold-400);
	box-shadow: var(--focus-default);
}

/* Floating menus — bordered + shadowed so white-on-white popovers have an edge. */
html:not([data-theme="dark"]) .dropdown-menu,
html:not([data-theme="dark"]) .awesomplete > ul,
html:not([data-theme="dark"]) .frappe-control .awesomplete ul,
html:not([data-theme="dark"]) .datepicker,
html:not([data-theme="dark"]) .popover,
html:not([data-theme="dark"]) .ql-toolbar {
	border: 1px solid var(--dark-border-color);
	box-shadow: var(--octa-shadow-md);
}

/* Cards — keep the keyline + soft shadow so white cards separate from the page. */
html:not([data-theme="dark"]) .frappe-card,
html:not([data-theme="dark"]) .form-section.card-section {
	border: 1px solid var(--border-color);
	box-shadow: var(--octa-shadow-sm);
}

/* Reports, lists, and dashboard widgets: replace Frappe's white default table
   surfaces with the OctaCore cream work surface without changing global cards. */
html:not([data-theme="dark"]) #page-query-report .page-form,
html:not([data-theme="dark"]) .report-view .page-form {
	align-items: flex-end;
	background: var(--octa-report-toolbar-bg);
	border: 1px solid var(--octa-report-border);
	border-radius: 14px;
	box-shadow: var(--octa-shadow-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.4rem;
	margin: 0 15px 1rem;
	padding: 0.75rem 0.85rem;
}

html:not([data-theme="dark"]) #page-query-report .page-form .form-group,
html:not([data-theme="dark"]) .report-view .page-form .form-group {
	margin: 0;
	padding: 0 0.45rem 0.2rem 0;
}

html:not([data-theme="dark"]) #page-query-report .page-form .form-control,
html:not([data-theme="dark"]) #page-query-report .page-form .input-with-feedback,
html:not([data-theme="dark"]) .report-view .page-form .form-control,
html:not([data-theme="dark"]) .report-view .page-form .input-with-feedback {
	background: var(--octa-surface-card);
	border-color: var(--octa-report-border);
}

html:not([data-theme="dark"]) .report-wrapper {
	border-radius: 14px;
}

html:not([data-theme="dark"]) .report-wrapper .datatable {
	--dt-cell-bg: var(--octa-report-surface);
	--dt-border-color: var(--octa-report-border);
	--dt-header-cell-bg: var(--octa-report-surface-alt);
	background: var(--octa-report-surface-alt);
	border: 1px solid var(--octa-report-border);
	box-shadow: var(--octa-shadow-sm);
	overflow: hidden;
}

html:not([data-theme="dark"]) .report-wrapper .datatable .dt-cell {
	background: var(--octa-report-surface) !important;
	border-color: var(--octa-report-border) !important;
}

html:not([data-theme="dark"]) .report-wrapper .datatable .dt-scrollable .dt-row:nth-child(even) .dt-cell {
	background: var(--octa-report-surface-alt) !important;
}

html:not([data-theme="dark"]) .report-wrapper .datatable .dt-header .dt-row-header,
html:not([data-theme="dark"]) .report-wrapper .datatable .dt-header .dt-row-header .dt-cell,
html:not([data-theme="dark"]) .report-wrapper .datatable .dt-cell--header .dt-cell__content {
	background: var(--octa-report-surface-alt) !important;
}

html:not([data-theme="dark"]) .report-wrapper .datatable .dt-row-filter .dt-cell,
html:not([data-theme="dark"]) .report-wrapper .datatable .dt-row-filter .dt-cell__content {
	background: var(--octa-report-toolbar-bg) !important;
}

html:not([data-theme="dark"]) .report-wrapper .datatable .dt-row-filter .dt-filter.dt-input {
	background: var(--octa-surface-card);
	border: 1px solid var(--octa-report-border);
	border-radius: 8px;
}

html:not([data-theme="dark"]) .report-summary {
	background: var(--octa-report-surface);
	border: 1px solid var(--octa-report-border);
	box-shadow: var(--octa-shadow-sm);
}

html:not([data-theme="dark"]) .report-summary .summary-value,
html:not([data-theme="dark"]) .report-summary .summary-value.green,
html:not([data-theme="dark"]) .report-summary .summary-value.red,
html:not([data-theme="dark"]) .report-summary .summary-value.blue,
html:not([data-theme="dark"]) .report-summary .summary-value.text-muted {
	color: var(--octa-report-kpi-accent) !important;
	font-weight: var(--octa-weight-bold);
}

html:not([data-theme="dark"]) .list-view .frappe-list,
html:not([data-theme="dark"]) .frappe-list .result {
	background: var(--octa-report-surface);
	border-radius: 14px;
}

html:not([data-theme="dark"]) .frappe-list .list-row-container {
	background: var(--octa-report-surface);
	border-radius: 10px;
}

html:not([data-theme="dark"]) .frappe-list .list-row-container:nth-child(even) {
	background: var(--octa-report-surface-alt);
}

html:not([data-theme="dark"]) .frappe-list .list-row-container:hover,
html:not([data-theme="dark"]) .frappe-list .list-row-container:hover .level-right {
	background: var(--highlight-color);
}

html:not([data-theme="dark"]) .frappe-list .list-row,
html:not([data-theme="dark"]) .frappe-list .list-row .level-right {
	background: transparent;
	border-color: var(--octa-report-border);
}

html:not([data-theme="dark"]) .frappe-list .list-row-head {
	background: var(--octa-report-surface-alt);
	border-color: var(--octa-report-border);
}

html:not([data-theme="dark"]) .widget.number-widget-box {
	background: var(--octa-report-surface);
	border-color: var(--octa-report-border);
	box-shadow: var(--octa-shadow-sm);
}

html:not([data-theme="dark"]) .widget.number-widget-box .widget-content .number {
	color: var(--octa-report-kpi-accent) !important;
	font-weight: var(--octa-weight-bold);
}

/* Apps grid modal: layout fixes (column count, icon sizing, caption clamp). */
.desktop-modal .modal-dialog {
	margin: 1.5rem auto;
	max-width: min(780px, calc(100vw - 2.5rem));
}

.desktop-modal .icons {
	gap: 0.9rem !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.desktop-modal .desktop-icon {
	align-items: center;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg, 12px);
	display: flex;
	flex-direction: column;
	gap: 0.72rem;
	justify-content: flex-start;
	min-height: 154px;
	padding: 0.95rem 0.8rem 1rem;
	text-decoration: none !important;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	width: 100%;
}

.desktop-modal .desktop-icon:hover,
.desktop-modal .desktop-icon:focus-visible {
	border-color: var(--octa-brand-gold-400);
	box-shadow: var(--octa-shadow-sm);
}

.desktop-modal .desktop-icon:focus-visible {
	outline: none;
}

.desktop-modal .desktop-icon .icon-container {
	align-items: center;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-lg, 12px);
	box-shadow: var(--octa-shadow-sm);
	display: flex;
	height: 74px;
	justify-content: center;
	padding: 0;
	width: 74px;
}

/* Contain every glyph to a consistent share of the card so solid-filled module
   icons (ERPNext/HRMS) no longer read as edge-to-edge colored blocks. */
.desktop-modal .desktop-icon .app-icon {
	display: block;
	height: 62%;
	object-fit: contain;
	width: 62%;
}

/* Mute loud module-icon fills (ERPNext blue, HRMS green) so they blend with the
   gold/graphite brand. Scoped to exclude the OctaCore mark (img app-logo.svg),
   which keeps full saturation. */
.desktop-modal .desktop-icon .app-icon:not([src*="app-logo"]) {
	filter: saturate(0.6);
}

.desktop-modal .desktop-icon .icon-caption {
	min-width: 0;
	width: 100%;
}

.desktop-modal .desktop-icon .icon-title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--text-color);
	display: -webkit-box;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 auto;
	max-width: 100%;
	min-height: 2.3rem;
	overflow: hidden;
	text-align: center;
	text-wrap: balance;
}

.desktop-modal .desktop-icon .hide-button {
	display: none !important;
}

@media (max-width: 991.98px) {
	.desktop-modal .modal-dialog {
		margin: 1rem auto;
		max-width: calc(100vw - 1.5rem);
	}

	.desktop-modal .icons {
		gap: 0.78rem !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.desktop-modal .desktop-icon {
		min-height: 146px;
		padding-inline: 0.72rem;
	}

	.desktop-modal .desktop-icon .icon-container {
		height: 68px;
		width: 68px;
	}
}

@media (max-width: 575.98px) {
	.desktop-modal .icons {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.desktop-modal .desktop-icon {
		min-height: 134px;
		padding-block: 0.82rem 0.9rem;
	}

	.desktop-modal .desktop-icon .icon-container {
		height: 64px;
		width: 64px;
	}

	.desktop-modal .desktop-icon .icon-title {
		font-size: 0.86rem;
	}
}

/* Custom pages render complete shells, so do not leave Frappe's reserved 20%
   sidebar space around them. The prefix keeps future ServiceBay pages on the
   same contract without another route-by-route maintenance list. */
.page-container:is(
		[data-page-route="Workspaces"],
		[data-page-route^="servicebay-"],
		[data-page-route="service-order-360"],
		[data-page-route="octacore-desktop"],
		[data-page-route="notification-preferences"]
	)
	.layout-main {
	max-width: none;
	width: 100%;
}

/* Frappe scopes its desktop Workspace cap through body:not(.full-width), which
   outranks the shared rule above. Match that scope so every Workspace can use
   the available Desk canvas without requiring a route-by-route selector. */
body:not(.full-width)
	.page-container[data-page-route="Workspaces"]
	.layout-main {
	max-width: none;
}

.page-container:is(
		[data-page-route="Workspaces"],
		[data-page-route^="servicebay-"],
		[data-page-route="service-order-360"],
		[data-page-route="octacore-desktop"],
		[data-page-route="notification-preferences"]
	)
	.layout-main-section-wrapper {
	flex: 1 1 100%;
	max-width: 100%;
	width: 100%;
}

/* These hosts render their own card hierarchy; keep the Desk wrapper neutral. */
.page-container:is(
		[data-page-route="Workspaces"],
		[data-page-route^="servicebay-"],
		[data-page-route="service-order-360"],
		[data-page-route="octacore-desktop"],
		[data-page-route="notification-preferences"]
	)
	.layout-main-section.frappe-card {
	background: transparent;
	border: 0;
	box-shadow: none;
}

@media (max-width: 767px) {
	.page-title .title-area .title-text {
		font-size: 1.4rem;
	}

	.navbar-brand img,
	.navbar-home img {
		max-height: 34px;
	}
}