/* ============================================================
   apps/pinectrl_branding/pinectrl_branding/public/css/pinectrl_branding.css
   PineCTRL™ — permanent branding overrides for ERPNext v15
   No core edits; loaded via web_include_css / app_include_css.
   ============================================================ */

:root {
  /* Tesla-inspired dark metallic green (PMSG-like):
     reads emerald in bright light, blue-gray in low light. */
  --pc-green-950: #061711;
  --pc-green-900: #0a2f24;
  --pc-green-850: #0f3a2d;
  --pc-green-800: #134338;
  --pc-green-700: #1d5a49;

  /* Pearl white surface tones */
  --pc-pearl-white: #f8f8f4;
  --pc-pearl-white-soft: #efeee8;
  --pc-ivory-base: #f4f1e8;
  --pc-ivory-panel: #fbf9f3;
  --pc-ivory-panel-soft: #f3efe4;
  --pc-ivory-border: #dfd8c7;
  --pc-text-light: #edf2ee;
}

/* ── DESK (logged-in) ivory background theme ───────────── */
/* Keep this scoped to Desk route markers so login visuals stay unchanged. */
body[data-route],
body:has(> .main-section > #body) {
  --bg-color: var(--pc-ivory-base);
  --fg-color: var(--pc-ivory-panel);
  --card-bg: var(--pc-ivory-panel);
  --control-bg: #f1ebdd;
  --subtle-fg: #efe7d7;
  --sidebar-select-color: #e6ddca;
  --border-color: var(--pc-ivory-border);
  background-color: var(--pc-ivory-base) !important;
}

body[data-route] #body,
body[data-route] .layout-main,
body[data-route] .layout-main-section,
body[data-route] .layout-main-section-wrapper,
body[data-route] .page-content-wrapper,
body:has(> .main-section > #body) #body,
body:has(> .main-section > #body) .layout-main,
body:has(> .main-section > #body) .layout-main-section,
body:has(> .main-section > #body) .layout-main-section-wrapper,
body:has(> .main-section > #body) .page-content-wrapper {
  background: transparent !important;
}

body[data-route] .desk-sidebar,
body[data-route] .desk-sidebar .standard-sidebar-section,
body[data-route] .layout-side-section,
body:has(> .main-section > #body) .desk-sidebar,
body:has(> .main-section > #body) .desk-sidebar .standard-sidebar-section,
body:has(> .main-section > #body) .layout-side-section {
  background-color: var(--pc-ivory-base) !important;
  border-color: var(--pc-ivory-border) !important;
}

body[data-route] .page-head,
body[data-route] .navbar,
body:has(> .main-section > #body) .page-head,
body:has(> .main-section > #body) .navbar {
  background-color: var(--pc-ivory-panel) !important;
  border-color: var(--pc-ivory-border) !important;
}

body[data-route] .page-head,
body[data-route] .page-head .page-head-content,
body[data-route] .page-form,
body:has(> .main-section > #body) .page-head,
body:has(> .main-section > #body) .page-head .page-head-content,
body:has(> .main-section > #body) .page-form {
  background-color: var(--pc-ivory-base) !important;
}

body[data-route] .widget,
body[data-route] .card,
body[data-route] .page-card,
body[data-route] .dashboard-section,
body[data-route] .list-row,
body[data-route] .report-wrapper,
body:has(> .main-section > #body) .widget,
body:has(> .main-section > #body) .card,
body:has(> .main-section > #body) .page-card,
body:has(> .main-section > #body) .dashboard-section,
body:has(> .main-section > #body) .list-row,
body:has(> .main-section > #body) .report-wrapper {
  background-color: var(--pc-ivory-panel) !important;
  border-color: var(--pc-ivory-border) !important;
}

body[data-route] .shortcut-widget-box,
body[data-route] .links-widget-box,
body[data-route] .links-widget-box .link-item,
body[data-route] .shortcut-widget-box .widget-head,
body[data-route] .shortcut-widget-box .widget-body,
body[data-route] .links-widget-box .widget-head,
body[data-route] .links-widget-box .widget-body,
body[data-route] .workspace .widget-group,
body:has(> .main-section > #body) .shortcut-widget-box,
body:has(> .main-section > #body) .links-widget-box,
body:has(> .main-section > #body) .links-widget-box .link-item,
body:has(> .main-section > #body) .shortcut-widget-box .widget-head,
body:has(> .main-section > #body) .shortcut-widget-box .widget-body,
body:has(> .main-section > #body) .links-widget-box .widget-head,
body:has(> .main-section > #body) .links-widget-box .widget-body,
body:has(> .main-section > #body) .workspace .widget-group {
  background-color: var(--pc-ivory-panel) !important;
}

body[data-route] .links-widget-box .link-item:hover,
body:has(> .main-section > #body) .links-widget-box .link-item:hover {
  background-color: #efe7d7 !important;
}

body[data-route] .indicator-pill,
body:has(> .main-section > #body) .indicator-pill {
  background-color: #e8decb !important;
}

body[data-route] .desk-sidebar .indicator-pill:empty,
body:has(> .main-section > #body) .desk-sidebar .indicator-pill:empty {
  display: none !important;
}

/* ── DESK COMPANY label (injected by JS) ──────────────── */
.pc-desk-company-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 0 0;
  min-width: 0;
  max-width: 210px;
}

.pc-desk-company-divider {
  width: 1px;
  height: 28px;
  background: #cfc5b1;
  display: inline-block;
}

.pc-desk-company-name {
  color: #163c2f;
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(22vw, 220px);
}

.pc-desk-company-link {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
  transition: color 120ms ease;
}

.pc-desk-company-link:hover {
  text-decoration: underline;
}

.pc-desk-company-link:focus-visible {
  outline: 2px solid #58887a;
  outline-offset: 2px;
  text-decoration: none;
}

.pc-desk-company-link--app {
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid #1a4b3a;
  background: linear-gradient(145deg, #1d5a49 0%, #134338 100%);
  box-shadow: 0 2px 7px rgba(6, 23, 17, 0.18);
  text-decoration: none;
}

.pc-desk-company-link--app:hover {
  text-decoration: none;
  filter: brightness(1.03);
}

.pc-desk-company-link--app .pc-desk-company-name {
  color: #f4f1e8;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  font-weight: 800;
  max-width: none;
}

/* ── USER LIST Company column ─────────────────────────── */
.pc-user-company-col-header,
.pc-user-company-col {
  min-width: 180px;
  max-width: 240px;
}

.pc-user-company-col {
  color: #4d5a53;
}

@media (max-width: 900px) {
  .pc-desk-company-badge-wrap {
    max-width: 170px;
  }

  .pc-desk-company-name {
    max-width: min(18vw, 150px);
    font-size: 0.86rem;
  }
}

@media (max-width: 640px) {
  .pc-desk-company-badge-wrap {
    margin-left: 6px;
    gap: 8px;
    max-width: 110px;
  }

  .pc-desk-company-divider {
    height: 22px;
  }

  .pc-desk-company-name {
    max-width: 92px;
    font-size: 0.8rem;
  }

  .pc-desk-company-link {
    min-height: 0;
    padding: 0;
  }
}

/* ── LOGIN PAGE background ─────────────────────────────── */
/* Frappe v15: body gets data-path="login"; full-page section is section.for-login.
   Use hardcoded hex (not CSS vars) so Frappe's own variable overrides cannot win.
   Target html + body so there is no white ancestor showing through. */
html:has(body[data-path="login"]),
body[data-path="login"] {
  background-color: var(--pc-green-950) !important;
  min-height: 100vh;
}

body[data-path="login"] > .container,
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container {
  background-color: transparent !important;
}

/* Remove website top chrome on login (thin white bar + small app icon) */
body[data-path="login"] .navbar,
body[data-path="login"] .page-header,
body[data-path="login"] .page-header-wrapper {
  display: none !important;
}

/* Reclaim any top spacing reserved for hidden header/nav */
body[data-path="login"] .page_content,
body[data-path="login"] .page-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* The section that wraps the login card */
body[data-path="login"] section.for-login {
  background:
    radial-gradient(circle at 18% 14%, rgba(88, 136, 122, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 84% 84%, rgba(48, 94, 121, 0.22) 0%, transparent 42%),
    linear-gradient(145deg, var(--pc-green-950) 0%, var(--pc-green-900) 38%, var(--pc-green-850) 68%, var(--pc-green-700) 100%) !important;
  min-height: 100vh;
  padding: 3rem 1rem;
}

/* Option 1: Dusk mode (near-black, cooler and moodier) */
body[data-path="login"][data-pc-theme="dusk"] {
  background-color: #050c0a !important;
}

body[data-path="login"][data-pc-theme="dusk"] section.for-login {
  background:
    radial-gradient(circle at 16% 12%, rgba(74, 108, 101, 0.13) 0%, transparent 36%),
    radial-gradient(circle at 86% 84%, rgba(38, 66, 82, 0.20) 0%, transparent 44%),
    linear-gradient(148deg, #050c0a 0%, #081813 36%, #0b221c 70%, #14382f 100%) !important;
}

/* Option 2: Sunlit mode (more emerald pop while staying premium) */
body[data-path="login"][data-pc-theme="sunlit"] {
  background-color: #0b2019 !important;
}

body[data-path="login"][data-pc-theme="sunlit"] section.for-login {
  background:
    radial-gradient(circle at 22% 14%, rgba(129, 181, 158, 0.20) 0%, transparent 34%),
    radial-gradient(circle at 82% 84%, rgba(71, 126, 152, 0.18) 0%, transparent 42%),
    linear-gradient(145deg, #0b2019 0%, #10372b 36%, #165241 66%, #236f59 100%) !important;
}

/* Option 3: Black camo (dark military-inspired texture) */
body[data-path="login"][data-pc-theme="camo"] {
  background-color: #0b0f09 !important;
}

body[data-path="login"][data-pc-theme="camo"] section.for-login {
  background:
    /* Soft vignette — large transparent core (50%) so the texture stays visible far
       into the edges; gentle fade to olive-black rather than a hard-painted slab */
    radial-gradient(ellipse 88% 82% at 50% 50%, transparent 50%, rgba(8, 13, 7, 0.60) 100%),
    /* Tesla-green multiply tint — pulls warm/tan camo pixels toward emerald-olive */
    linear-gradient(158deg, rgba(10, 38, 18, 0.50) 0%, rgba(20, 55, 26, 0.38) 50%, rgba(13, 44, 22, 0.46) 100%),
    url('/assets/pinectrl_branding/images/camo_real_third.jpeg') !important;
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center top;
  background-blend-mode: normal, multiply, normal;
  /* Inset box-shadow: acts like an edge-blur tool — feathers the body background
     colour inward over the image from all four sides; no hard boundary */
  box-shadow: inset 0 0 110px 55px rgba(8, 13, 7, 0.92);
}

/* ── LOGIN CARD ────────────────────────────────────────── */
body[data-path="login"] .login-content.page-card,
body[data-path="login"] .page-card {
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40) !important;
  background: linear-gradient(178deg, var(--pc-pearl-white) 0%, var(--pc-pearl-white-soft) 100%) !important;
  max-width: 420px;
  width: 100%;
}

body[data-path="login"][data-pc-theme="dusk"] .login-content.page-card,
body[data-path="login"][data-pc-theme="dusk"] .page-card {
  background: linear-gradient(178deg, #f6f6f1 0%, #ecebe4 100%) !important;
}

body[data-path="login"][data-pc-theme="sunlit"] .login-content.page-card,
body[data-path="login"][data-pc-theme="sunlit"] .page-card {
  background: linear-gradient(178deg, #faf9f5 0%, #f0efe8 100%) !important;
}

body[data-path="login"][data-pc-theme="camo"] .login-content.page-card,
body[data-path="login"][data-pc-theme="camo"] .page-card {
  background: linear-gradient(178deg, #f7f6f2 0%, #eceae4 100%) !important;
}

/* ── COMPANY BRAND block (injected by JS) ──────────────── */
.pc-company-brand-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.pc-company-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pc-company-logo {
  max-height: 108px;
  max-width: min(360px, 86vw);
  width: auto;
  object-fit: contain;
  transform: translateX(9px);
}

.pc-company-name {
  color: #153b2e;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-align: center;
}

/* ── HEADING injected by JS ────────────────────────────── */
.pc-login-title {
  text-align: center;
  color: #f4f1e8 !important;
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

/* ── TOP LOGIN HEADER (default Frappe block) ───────────── */
body[data-path="login"] .page-card-head .pc-top-logo {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

body[data-path="login"] .page-card-head .pc-top-login-text {
  color: #f4f1e8 !important;
  font-weight: 700;
}

/* CSS-only replacement for the top login header in the green area */
body[data-path="login"] section.for-login > .page-card-head {
  text-align: center;
}

body[data-path="login"] section.for-login > .page-card-head .app-logo {
  display: none !important;
}

body[data-path="login"] section.for-login > .page-card-head::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  background: url('/assets/pinectrl_branding/images/logo_mark.svg?v=20260321-4') center / contain no-repeat;
  transform: translateX(-6px);
}

body[data-path="login"] section.for-login > .page-card-head h4 {
  font-size: 0 !important;
  color: transparent !important;
  margin: 0;
}

body[data-path="login"] section.for-login > .page-card-head h4::after {
  content: "Login to PineCTRL\2122";
  font-size: 1.25rem;
  line-height: 1.2;
  color: #f4f1e8 !important;
  font-weight: 600;
  letter-spacing: normal;
}

/* ── DESK NAVBAR brand block ───────────────────────────── */
.pinectrl-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.pinectrl-brand img {
  height: 22px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Highlight Home in the left menu tree */
a[href="/app/home"] .sidebar-item-label,
a[href="#workspace/Home"] .sidebar-item-label,
.workspace-item[href="/app/home"] .item-anchor,
.workspace-item[href="#workspace/Home"] .item-anchor {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}