/* ==========================================================================
   EpiQ brand override (M01·I6)

   Focused override layer on top of stock Frappe v15 / ERPNext styling.
   This is NOT a full theme — it only re-points Frappe's brand/primary
   tokens at the EpiQ palette and restyles the login page + navbar.

   Brand source of truth: epiq_landing_page/app/globals.css
   EpiQ Blue (primary): #3B70DA (500).

   Served by Frappe at: /assets/erpnext/epiq/css/epiq-brand.css
   Wired through erpnext/hooks.py (app_include_css + web_include_css).

   NOTE: Frappe framework variable names below are the well-known v15
   tokens (--primary, --blue-*, --btn-primary, --text-on-primary, etc.).
   Some are vendored in the framework (not the erpnext repo), so a few are
   marked «проверить визуально» — confirm after image rebuild + deploy.
   ========================================================================== */

/* ==========================================================================
   1. EpiQ palette as CSS custom properties
   Mirror of globals.css so the override blocks below stay readable.
   ========================================================================== */
:root {
	/* EpiQ Blue scale (primary) */
	--epiq-blue-50: #EEF3FC;
	--epiq-blue-100: #D8E4F8;
	--epiq-blue-200: #B5CAF1;
	--epiq-blue-300: #8AAAE7;
	--epiq-blue-400: #5A87DD;
	--epiq-blue-500: #3B70DA; /* primary */
	--epiq-blue-600: #2A5BBF;
	--epiq-blue-700: #1F49A5;
	--epiq-blue-800: #1248A6;
	--epiq-blue-900: #0F3A85;
	--epiq-blue-950: #0A2557;

	/* Semantic (light) — mirror of globals.css */
	--epiq-background: #F8F8F8;
	--epiq-foreground: #171717;
	--epiq-card: #FFFFFF;
	--epiq-border: #E5E5E5;
	--epiq-muted: #F5F5F5;
	--epiq-muted-foreground: #737373;
	--epiq-primary-foreground: #FFFFFF;
	--epiq-radius: 0.625rem;

	/* Status / accent */
	--epiq-success: #22C55E;
	--epiq-warning: #F59E0B;
	--epiq-destructive: #EF4444;
	--epiq-info: #3B82F6;
	--epiq-teal: #14B8A6;
}

/* ==========================================================================
   1.5 Clean-minimal design-system tokens (Desk Modernization · #122)
   Spacing scale, neutral grays, lighter dividers, font weights, focus ring
   and transition speeds — the shared foundation reused by the surface reskin
   (#124), the view-switcher (#125) and the custom pages (#126). Values only
   here; consumers reference via var(). --epiq-tint / --epiq-r* / --epiq-shadow*
   / --epiq-ease are defined in epiq-ui-reskin.css and resolve at use-time.
   ========================================================================== */
:root {
	/* Spacing scale (4/8/12/16/24/32) — Linear/Notion generous whitespace */
	--epiq-space-xs: 4px;
	--epiq-space-sm: 8px;
	--epiq-space-md: 12px;
	--epiq-space-lg: 16px;
	--epiq-space-xl: 24px;
	--epiq-space-2xl: 32px;

	/* Neutral gray scale — richer than the 3 base neutrals */
	--epiq-gray-50: #FAFAFA;
	--epiq-gray-100: #F5F5F5;
	--epiq-gray-200: #ECECEC; /* lighter border for clean-minimal surfaces */
	--epiq-gray-300: #E0E0E0;
	--epiq-gray-400: #C4C4C4;
	--epiq-gray-500: #A0A0A0;

	/* Subtle inner divider + softer muted text */
	--epiq-border-subtle: rgba(0, 0, 0, 0.05);
	--epiq-muted-soft: #A0A0A0;

	/* Font weights (Inter) */
	--epiq-fw-regular: 400;
	--epiq-fw-medium: 550;
	--epiq-fw-semi: 600;
	--epiq-fw-bold: 700;

	/* Focus ring + transition speeds */
	--epiq-focus-ring: 0 0 0 3px var(--epiq-tint);
	--epiq-transition-fast: 0.12s;
	--epiq-transition: 0.15s;
	--epiq-transition-slow: 0.25s;
}

/* ==========================================================================
   2. Override Frappe's primary / blue tokens with EpiQ Blue
   These are the framework-level tokens Frappe uses for the primary action
   colour, links and the blue scale. Overriding them recolours buttons,
   active states, links, checkboxes, focus rings, etc. across Desk + web.
   ========================================================================== */
:root {
	/* Frappe primary action colour */
	--primary: var(--epiq-blue-500);
	--primary-color: var(--epiq-blue-500); /* проверить визуально: legacy alias */

	/* Frappe blue scale (used by buttons, badges, links, highlights) */
	--blue-50: var(--epiq-blue-50);
	--blue-100: var(--epiq-blue-100);
	--blue-200: var(--epiq-blue-200);
	--blue-300: var(--epiq-blue-300);
	--blue-400: var(--epiq-blue-400);
	--blue-500: var(--epiq-blue-500);
	--blue-600: var(--epiq-blue-600);
	--blue-700: var(--epiq-blue-700);
	--blue-800: var(--epiq-blue-800);
	--blue-900: var(--epiq-blue-900);

	/* Primary button bg + text-on-primary (Frappe v15 tokens) */
	--btn-primary: var(--epiq-blue-500);            /* проверить визуально */
	--text-on-primary: var(--epiq-primary-foreground);
	--primary-foreground: var(--epiq-primary-foreground);

	/* Link colour */
	--link-color: var(--epiq-blue-600);
}

/* ==========================================================================
   3. Semantic surface tokens (light) — soft off-white background, white
   cards, neutral borders. Mirrors the EpiQ design system surfaces.
   Frappe v15 desk tokens: --bg-color, --fg-color, --card-bg,
   --border-color, --control-bg, --text-color, --text-muted.
   ========================================================================== */
/* Surfaces are LIGHT-only: scoping to [data-theme="light"] keeps Frappe's
   dark.scss values intact when the user switches to dark (equal specificity,
   but this block no longer matches in dark mode). Status colours are brand,
   so they stay theme-agnostic in the :root block below. */
[data-theme="light"] {
	--bg-color: var(--epiq-background);
	--fg-color: var(--epiq-card);                /* foreground surface = white card */
	--card-bg: var(--epiq-card);
	--control-bg: var(--epiq-muted);
	--border-color: var(--epiq-border);
	--text-color: var(--epiq-foreground);
	--text-muted: var(--epiq-muted-foreground);
	--text-light: var(--epiq-muted-foreground);
}

:root {
	/* Status colours (brand-level, theme-agnostic) */
	--green-500: var(--epiq-success);
	--orange-500: var(--epiq-warning);
	--red-500: var(--epiq-destructive);
	--dark-green-500: var(--epiq-success);
}

/* Dark mode: keep Frappe's dark surfaces (dark.scss) but lift the EpiQ-blue
   primary/link to a lighter shade so it stays legible on dark backgrounds. */
[data-theme="dark"] {
	--primary: var(--epiq-blue-400);
	--primary-color: var(--epiq-blue-400);
	--btn-primary: var(--epiq-blue-500);
	--link-color: var(--epiq-blue-300);
}

/* ==========================================================================
   4. Typography — Inter as the body font for Desk + web
   tabular-nums for numeric columns (reports, grids, amounts).
   Inter is loaded from Google Fonts; falls back to the system stack.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");

:root {
	--font-stack: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body,
.navbar,
.page-container,
.web-page-content,
.from-section,
.login-content {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Numbers align in grids / reports / amounts */
.dt-cell--col-amount,
.text-monospace,
.indicator-pill,
[data-fieldtype="Currency"],
[data-fieldtype="Float"],
[data-fieldtype="Int"] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   5. Primary buttons — recolour to EpiQ Blue with a darker hover.
   Covers Frappe's .btn-primary across Desk and web/portal.
   ========================================================================== */
.btn-primary,
.btn.btn-primary,
.page-actions .btn-primary {
	background-color: var(--epiq-blue-500);
	border-color: var(--epiq-blue-500);
	color: var(--epiq-primary-foreground);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover {
	background-color: var(--epiq-blue-600);
	border-color: var(--epiq-blue-600);
	color: var(--epiq-primary-foreground);
}

/* Links */
a,
.text-primary {
	color: var(--epiq-blue-600);
}
a:hover {
	color: var(--epiq-blue-700);
}

/* ==========================================================================
   6. Navbar — keep the EpiQ logo legible; white navbar, EpiQ-blue accents.
   Frappe desk navbar: .navbar / .navbar-brand.
   ========================================================================== */
.navbar {
	/* follow the active theme (was hard-pinned to white → stayed white in dark) */
	background-color: var(--navbar-bg, var(--card-bg));
	border-bottom: 1px solid var(--border-color);
}
.navbar .navbar-brand img,
.app-logo {
	max-height: 24px; /* keep the wordmark/icon proportionate in the bar */
	width: auto;
}

/* ==========================================================================
   7. Login page (/login web page)
   Frappe renders login under .for-login / .page-card on a plain page.
   Soft off-white background, white rounded card, EpiQ-blue primary button.
   ========================================================================== */
.for-login,
.for-signup,
.for-forgot,
body.login-page {
	background-color: var(--epiq-background);
}

.for-login .page-card,
.page-card {
	background-color: var(--epiq-card);
	border: 1px solid var(--epiq-border);
	border-radius: var(--epiq-radius);
	box-shadow: 0 1px 3px rgba(23, 23, 23, 0.06), 0 1px 2px rgba(23, 23, 23, 0.04);
}

.page-card .page-card-head .indicator,
.page-card .page-card-head {
	color: var(--epiq-foreground);
}

/* Login submit button → EpiQ Blue */
.for-login .btn-login,
.btn-login,
.page-card .btn-primary {
	background-color: var(--epiq-blue-500);
	border-color: var(--epiq-blue-500);
	color: var(--epiq-primary-foreground);
}
.for-login .btn-login:hover,
.btn-login:hover,
.page-card .btn-primary:hover {
	background-color: var(--epiq-blue-600);
	border-color: var(--epiq-blue-600);
}

/* Login form inputs */
.for-login .form-control,
.page-card .form-control {
	border-color: var(--epiq-border);
	border-radius: calc(var(--epiq-radius) - 4px);
}
.for-login .form-control:focus,
.page-card .form-control:focus {
	border-color: var(--epiq-blue-400);
	box-shadow: 0 0 0 2px rgba(59, 112, 218, 0.2); /* EpiQ Blue focus ring */
}

/* EpiQ (M03): center + size the /apps launcher icons (the role-app SVG glyphs) */
.app-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}
.app-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}