/*
 * SkyEngPro tenant theme for ERPNext / Frappe v15
 *
 * Strategy: redefine Frappe's CSS variables at :root so the existing cascade
 * propagates the brand to buttons, indicators, focus rings, etc. — without
 * scattering !important across the file.
 *
 * The brand_loader.js client script writes per-tenant CSS variables here
 * (see frappe.boot.brand). These then feed Frappe's variables below. Result:
 * one CSS file serves all 5 tenants; tenant-specific values come from the
 * server-side boot_session hook + per-tenant colors.yaml.
 *
 * Default values below match the SkyEngPro palette so this file works even
 * if the boot hook hasn't run yet (login page, guest pages).
 */

:root {
  /* ── Tenant tokens (defaults; overridden per-tenant by brand_loader.js) ── */
  --skyengpro-primary:        #CC7A1A;
  --skyengpro-primary-hover:  #B56A12;   /* WCAG AA on white (4.96:1) — used as default link color */
  --skyengpro-primary-light:  #F5E6D0;
  --skyengpro-navbar-bg:      #2C2C2C;
  --skyengpro-navbar-fg:      #FFFFFF;

  /* ── Map onto Frappe's variables (no !important needed) ── */
  --primary:           var(--skyengpro-primary);
  --primary-color:     var(--skyengpro-primary);
  --btn-primary-bg:    var(--skyengpro-primary);
  --btn-primary-color: #FFFFFF;
  --navbar-bg:         var(--skyengpro-navbar-bg);
  --navbar-color:      var(--skyengpro-navbar-fg);
}

/* Dark theme: tenant tokens stay; Frappe-side neutrals shift. */
[data-theme="dark"] {
  --skyengpro-navbar-bg: #1A1A1A;
}

/* ──────────────────────────────────────────────────────────────────
 *  Navbar
 * ────────────────────────────────────────────────────────────────── */

/* Frappe v15 markup: <header class="navbar navbar-expand"> */
header.navbar {
  background-color: var(--skyengpro-navbar-bg);
  /* No 2px brand stripe — collides with the page-head divider below it. */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Logo: let it render at its natural size (the boot loader picks the right asset).
 * The old `max-height: 16px` was the root cause of "logo not showing well". */
header.navbar .navbar-brand img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

/* Navbar text + icons */
header.navbar .nav-link,
header.navbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

header.navbar .nav-link:hover,
header.navbar .navbar-nav .nav-link:hover {
  color: var(--skyengpro-primary);
}

header.navbar .navbar-nav .nav-link svg,
header.navbar .navbar-nav .nav-link .es-icon {
  color: rgba(255, 255, 255, 0.85);
  fill: rgba(255, 255, 255, 0.85);
}

/* Search input in navbar */
header.navbar .search-bar .search-input,
header.navbar .search-bar input {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}

header.navbar .search-bar .search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* ──────────────────────────────────────────────────────────────────
 *  Buttons — only the primary CTA, no blanket override
 * ────────────────────────────────────────────────────────────────── */

.btn-primary {
  background-color: var(--skyengpro-primary);
  border-color: var(--skyengpro-primary);
  color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--skyengpro-primary-hover);
  border-color: var(--skyengpro-primary-hover);
  color: #FFFFFF;
}

.btn-primary:active,
.btn-primary.active {
  background-color: var(--skyengpro-primary-hover);
}

/* Leave .btn-success/.btn-warning/.btn-danger alone — those carry semantic meaning. */

/* ──────────────────────────────────────────────────────────────────
 *  Links
 *  Use the darker hover shade as default — passes WCAG AA (4.96:1 on white).
 *  The lighter primary still appears on hover for visual feedback.
 * ────────────────────────────────────────────────────────────────── */

a,
.like-disabled-input a {
  color: var(--skyengpro-primary-hover);
}

a:hover {
  color: var(--skyengpro-primary);
}

/* ──────────────────────────────────────────────────────────────────
 *  Sidebar active state
 * ────────────────────────────────────────────────────────────────── */

.standard-sidebar-item.selected,
.layout-side-section .standard-sidebar-item.selected,
.desk-sidebar .sidebar-menu .sidebar-item.active,
.desk-sidebar .sidebar-menu a.active {
  color: var(--skyengpro-primary-hover);
  border-left-color: var(--skyengpro-primary);
}

/* ──────────────────────────────────────────────────────────────────
 *  Form indicators / progress
 * ────────────────────────────────────────────────────────────────── */

.progress-bar {
  background-color: var(--skyengpro-primary);
}

.frappe-control[data-fieldtype="Check"] .check-icon {
  color: var(--skyengpro-primary);
}

/* ──────────────────────────────────────────────────────────────────
 *  Awesomplete (search dropdown highlight)
 * ────────────────────────────────────────────────────────────────── */

.awesomplete mark,
.search-results .result.selected {
  background-color: var(--skyengpro-primary-light);
  color: inherit;
}

/* ──────────────────────────────────────────────────────────────────
 *  Login page
 * ────────────────────────────────────────────────────────────────── */

.page-card .page-card-head {
  background-color: var(--skyengpro-navbar-bg);
}

.page-card .page-card-head .page-card-title {
  color: #FFFFFF;
}

.login-content .btn-primary {
  background-color: var(--skyengpro-primary);
  border-color: var(--skyengpro-primary);
}