/* ==========================================================================
   Bean2Cup Limited — brand theme
   Loaded on both the Desk (app_include_css) and the website/login
   (web_include_css). Colors/logo pulled from the live bean2cup.co.ke site
   (2026-09-01): brand red #df3435 (from the round coffee-cup logo mark),
   darker maroon #a73030 and gold #c97f2a (the site's own button/hover
   gradient), coffee brown #563517 (the site's own nav/button color), cream
   background #fcf6f1. "Poppins" body font (used on the site's own CTAs).
   Keep selectors broad + !important-light so this survives minor
   Frappe/ERPNext version differences without a fork.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Playfair+Display:wght@700&display=swap");

:root {
  --bean2cup-red: #df3435;
  --bean2cup-red-dark: #a73030;
  --bean2cup-red-light: #f7d6d6;
  --bean2cup-brown: #563517;
  --bean2cup-gold: #c97f2a;
  --bean2cup-ink: #3a2415;
  --bean2cup-bg: #fcf6f1;
  --bean2cup-card-radius: 10px;
  --bean2cup-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bean2cup-heading-font: "Playfair Display", Georgia, serif;
}

/* --------------------------------------------------------------------
   Global — red reserved for accents/actions, not everywhere
   -------------------------------------------------------------------- */
body {
  background-color: var(--bean2cup-bg);
  font-family: var(--bean2cup-font);
}

a,
.text-primary,
.h4:hover,
.awesomplete > ul > li mark {
  color: var(--bean2cup-red);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bean2cup-red) !important;
  border-color: var(--bean2cup-red) !important;
}

.btn-primary:hover {
  background-color: var(--bean2cup-red-dark) !important;
  border-color: var(--bean2cup-red-dark) !important;
}

.indicator-pill.yellow,
.indicator.yellow {
  background: #fdf0dc;
  color: #8a5c00;
}

.indicator-pill.pink,
.indicator.pink,
.indicator-pill.red,
.indicator.red {
  background: var(--bean2cup-red-light);
  color: var(--bean2cup-red-dark);
}

.progress-bar {
  background-color: var(--bean2cup-red);
}

::selection {
  background: var(--bean2cup-red-light);
}

/* --------------------------------------------------------------------
   Desk navbar
   -------------------------------------------------------------------- */
.navbar,
#navbar-breadcrumbs ~ .navbar,
.desk-navbar,
.navbar.navbar-default {
  background-color: #ffffff !important;
  border-bottom: 2px solid var(--bean2cup-red);
}

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

.standard-sidebar-item.selected,
.sidebar-item-container.selected > .standard-sidebar-item,
.sidebar-item-container.selected > .desk-sidebar-item {
  background-color: var(--bean2cup-red-light) !important;
}

.standard-sidebar-item.selected .sidebar-item-icon,
.standard-sidebar-item.selected .sidebar-item-label {
  color: var(--bean2cup-red-dark) !important;
}

.widget.shortcut-widget-box:hover {
  border-color: var(--bean2cup-red);
  box-shadow: 0 2px 8px rgba(223, 52, 53, 0.12);
}

/* ======================================================================
   Login / website pages
   ====================================================================== */

/* Frappe wraps the whole login page in <main class="container"> (Bootstrap,
   max-width + centered) — override it on this route so the branded
   backdrop runs edge-to-edge on larger screens instead of sitting in a
   narrow centered column with side gutters. */
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container,
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page_content {
  max-width: 100% !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fixed full-bleed backdrop (brand red-to-brown diagonal gradient top /
   cream bottom), injected once as the very first element in <body> by
   bean2cup_erp.js — z-index -1 keeps it behind everything regardless of
   DOM order, and `position: fixed; inset: 0` makes it fill the viewport
   at any screen size rather than scaling with the (narrow) content column. */
.bean2cup-login-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bean2cup-bg);
}

.bean2cup-login-bg-top {
  height: 46vh;
  background: linear-gradient(135deg, var(--bean2cup-gold) 0%, var(--bean2cup-red-dark) 55%, var(--bean2cup-brown) 100%);
}

.web-footer {
  background-color: var(--bean2cup-bg);
}

body.login-page,
.page-card-container,
section.for-login {
  min-height: 100vh;
}

.page-card-container,
section.for-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
  width: 100%;
}

/* BEAN2CUP wordmark, shown large above the card instead of the small
   default app-logo + "Login to X" heading. */
.page-card-head {
  text-align: center;
  margin-bottom: 28px;
}

.page-card-head img.app-logo {
  height: 96px;
  width: auto;
  max-height: none;
  border-radius: 50%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

.page-card {
  box-shadow: 0px 20px 90px rgba(58, 36, 21, 0.18), 0px 8px 24px rgba(58, 36, 21, 0.1);
  border-radius: var(--bean2cup-card-radius);
  border: none;
  background: #ffffff;
  width: 100%;
  max-width: 420px;
  padding: 32px 32px 24px;
  box-sizing: border-box;
}

.page-card .btn-primary {
  width: 100%;
}

.bean2cup-form-heading {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1e4da;
}

.bean2cup-form-heading h2 {
  margin: 0 0 4px 0;
  font-family: var(--bean2cup-heading-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--bean2cup-ink);
}

.bean2cup-form-heading .bean2cup-form-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: rgba(58, 36, 21, 0.6);
}

.bean2cup-login-page-footer {
  margin-top: 24px;
  font-size: 12px;
  color: var(--bean2cup-ink);
  opacity: 0.6;
  text-align: center;
}

.bean2cup-login-page-footer .bean2cup-powered-by {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bean2cup-red);
  text-decoration: none;
}

.bean2cup-login-page-footer .bean2cup-powered-by:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------
   Remove upstream branding marks we don't control via hooks
   -------------------------------------------------------------------- */
.page-card-container .text-muted a[href*="frappe.io"],
section.for-login .text-muted a[href*="frappe.io"],
.web-footer a[href*="frappe.io"],
#footer-powered-by {
  display: none !important;
}

/* ======================================================================
   pos_next Login.vue (/pos/account/login) — a separate Vite/Vue SPA, not
   a Frappe website route, so it never sees web_include_css/js. Only
   loaded here at all because bean2cup_erp.js is explicitly injected into
   pos_next's shared pos.html template, guarded to this site only (see
   that template's `{% if frappe.local.site == ... %}` guard) — these
   selectors target Login.vue's own hardcoded Tailwind classes directly
   (it has no custom class hooks of its own), so they're written as
   attribute/class overrides at the same specificity Tailwind uses,
   +!important where Tailwind's own utility would otherwise win.
   ====================================================================== */

.bean2cup-pos-branded.min-h-screen {
  background-color: transparent !important;
}

.bean2cup-pos-branded .bg-white.shadow.rounded-lg {
  box-shadow: 0px 20px 90px rgba(58, 36, 21, 0.18), 0px 8px 24px rgba(58, 36, 21, 0.1) !important;
  border-radius: var(--bean2cup-card-radius) !important;
}

.bean2cup-pos-branded h2.text-3xl {
  font-family: var(--bean2cup-heading-font);
  color: var(--bean2cup-ink) !important;
}

.bean2cup-pos-branded .bg-blue-600 {
  background-color: var(--bean2cup-red) !important;
  border-color: var(--bean2cup-red) !important;
}

.bean2cup-pos-branded .bg-blue-600:hover,
.bean2cup-pos-branded .hover\:bg-blue-700:hover {
  background-color: var(--bean2cup-red-dark) !important;
}

.bean2cup-pos-branded .focus\:ring-blue-500:focus {
  --tw-ring-color: var(--bean2cup-red-light) !important;
}

.bean2cup-pos-logo {
  display: block;
  margin: 0 auto 16px;
  height: 72px;
  width: 72px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}