.navbar-nav .icon {
  --icon-stroke: #ffffff !important;
}

.dropdown-help {
  display: none !important;
}

/* NAVBAR */
.navbar {
  height: 70px;
  background: #013641;
  box-shadow: var(--shadow-sm);
  padding: 0;
  color: #fff !important;
}
/* Brand lattice texture — a faint geometric whisper behind the logo on the
   left, layered ON TOP of the teal fill above (never replacing it) and faded
   to nothing before the centre search box. Rendered as a ::before so the teal
   background, logo, search, notifications and avatar all stay crisp and above
   it (pseudo-element sits at z-index:-1: over the navbar fill, under all
   in-flow content). The fade lives here in the mask, not baked into the PNG. */
/* Give the desk navbar its own stacking context (without changing the teal
   fill above or its outer z-index) so the z-index:-1 lattice layer below paints
   ABOVE the #013641 background instead of dropping behind the navbar box. */
.navbar {
  isolation: isolate;
}
.navbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;                   /* full navbar height: top edge to bottom edge */
  bottom: 0;
  z-index: -1;              /* above teal fill (own background), below logo/search/icons */
  pointer-events: none;     /* never intercept clicks on navbar controls */
  background-image: url('/assets/mojaerp/images/moja_lattice_light.png');
  background-repeat: repeat-x;   /* tile horizontally as needed */
  background-position: left center;
  background-size: auto 100%;     /* height drives the scale; width stays proportional so diamonds don't distort */
  opacity: 0.14;            /* a whisper of texture, not a graphic */
  /* Fade out before the centre search box: opaque on the left ~30%,
     fully transparent by ~65%. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 65%);
          mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 65%);
}
@media (max-width: 767.98px) {
  /* Hide the texture below 768px (md breakpoint). */
  .navbar::before {
    display: none;
  }
}

/* MODERN GLASS NAVBAR SEARCH BAR
   A fully transparent / frosted pill that lets the teal + lattice show through,
   with a light outline and white text in every state — never a solid box.
   !important defeats the global .form-control rule and any stale overrides. */
.navbar .search-bar {
  max-width: 380px;
  transition: max-width 160ms ease;
}
.navbar .search-bar:focus-within {
  max-width: 460px;                 /* gently expand while typing */
}
.navbar #navbar-search {
  height: 38px !important;
  border-radius: 19px;              /* pill */
  background-color: rgba(255, 255, 255, 0.07) !important;   /* see-through */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);       /* frosted glass */
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  padding-left: 40px;               /* clear the search icon */
  box-shadow: none !important;
  transition: background-color 160ms ease, border-color 160ms ease,
              box-shadow 160ms ease, max-width 160ms ease;
}
.navbar #navbar-search::placeholder {
  color: rgba(255, 255, 255, 0.70) !important;
}
.navbar .search-bar .search-icon svg {
  stroke: rgba(255, 255, 255, 0.85);
  transition: stroke 160ms ease;
}
.navbar #navbar-search:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.navbar #navbar-search:focus {
  background-color: rgba(255, 255, 255, 0.14) !important;   /* stays glassy */
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
  outline: none !important;
}

/* NAVBAR USER AVATAR — bigger, amber fill, soft translucent white ring */
.navbar .dropdown-navbar-user .avatar {
  width: 38px !important;
  height: 38px !important;
}
.navbar .dropdown-navbar-user .avatar .avatar-frame {
  width: 38px !important;
  height: 38px !important;
  background-color: #FFA200 !important;          /* amber fill */
  color: #fff;
  border: 2px solid #22515a;                     /* teal ring */
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(126, 200, 194, 0.25);
  background-size: cover;                         /* photo avatars still fill */
  background-position: center;
  font-weight: 600;
}
.btn-primary {
  color: #fff;
  background-color: #013641 !important;
  border-color: #013641 !important;
}
.table-primary {
  color: #fff;
  background-color: #013641 !important;
  border-color: #013641 !important;
}
.text-loader {
  color: #c0c6cb !important;
}
.page-card-actions button {
  padding: 0.55rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.sidebar-item-container > .selected {
  color: #fff !important;
}
/* NAVBAR LINKS */
#navbar-breadcrumbs a {
  font-size: var(--text-md);
  margin-right: 10px;
  color: #fff;
}
.navbar .navbar-nav .nav-link {
  padding: 0;
  color: white !important;
}
.widget-head:hover {
  color: orange !important;
}

/* ICONS */
use.like-icon {
  cursor: pointer;
  stroke: #013641 !important;
}

.standard-sidebar .standard-sidebar-item.selected,
.search-dialog .search-results .search-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.selected {
  background-color: #013641 !important;
  color: #fff !important;
}
.standard-sidebar .standard-sidebar-item.selected,
.search-dialog .search-results .search-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.selected a span {
  color: #fff !important;
}
.standard-sidebar-item.selected .icon {
  --icon-stroke: #ffffff !important;
}

#navbar-breadcrumbs li.disabled a {
  color: #ffffffc2 !important;
  pointer-events: none;
}
.navbar-brand img {
  display: inline-block;
  max-width: 150px !important;
  max-height: 65px !important;
}
.main-section .navbar-brand img {
  width: 150px !important;
}

.for-login .page-card-head img,
.for-forgot .page-card-head img,
.for-login-with-email-link .page-card-head img,
.for-signup .page-card-head img,
.for-email-login .page-card-head img {
  max-height: 100px;
  margin-bottom: var(--margin-lg, 30px);
}

.custom-alert {
  position: relative;
  padding: 3.75px 1.25rem;
  margin-top: -1rem;
  border: 1px solid transparent;
  border-radius: 3px;
}

.custom-alert .custom-alert-danger {
  color: #c53030;
  background-color: #ec6660;
  border: none;
}


.footer-logo-extension{
  display: none !important;
}

.web-footer {
    padding: 1rem 0 !important;
    min-height: 90px !important;
    background-color: var(--fg-color);
    border-top: 1px solid #e2e6e9;
}

.btn:not(.btn-md):not(.btn-lg) {
  padding: px 15px !important;
}

.sidebar-section .btn:not(.btn-md):not(.btn-lg) {
  padding: 8px 15px !important;
}

.workspace-footer .btn:not(.btn-md):not(.btn-lg) {
  padding: 4px 15px !important;
}

.filter-section .btn:not(.btn-md):not(.btn-lg) {
  padding: 7px 15px !important;
}

.page-actions .btn:not(.btn-md):not(.btn-lg) {
  padding: 18px 15px !important;
}

.no-result .btn:not(.btn-md):not(.btn-lg) {
  padding: 8px 15px !important;
  background: #013641 !important;
  border-color: #013641 !important;
  color: #fff !important;
}



.for-login .page-card .page-card-body .field-icon, .for-forgot .page-card .page-card-body .field-icon, .for-login-with-email-link .page-card .page-card-body .field-icon, .for-signup .page-card .page-card-body .field-icon, .for-email-login .page-card .page-card-body .field-icon {
  left: 9px !important;
  top: 12px !important;
  position: absolute;
  z-index: 2;
}

.for-login .page-card .page-card-body .email-field input, .for-login .page-card .page-card-body .password-field input, .for-forgot .page-card .page-card-body .email-field input, .for-forgot .page-card .page-card-body .password-field input, .for-login-with-email-link .page-card .page-card-body .email-field input, .for-login-with-email-link .page-card .page-card-body .password-field input, .for-signup .page-card .page-card-body .email-field input, .for-signup .page-card .page-card-body .password-field input, .for-email-login .page-card .page-card-body .email-field input, .for-email-login .page-card .page-card-body .password-field input {
  padding: 19px 19px 19px 35px !important;
}


.for-login .page-card .page-card-body .email-field .toggle-password, .for-login .page-card .page-card-body .password-field .toggle-password, .for-forgot .page-card .page-card-body .email-field .toggle-password, .for-forgot .page-card .page-card-body .password-field .toggle-password, .for-login-with-email-link .page-card .page-card-body .email-field .toggle-password, .for-login-with-email-link .page-card .page-card-body .password-field .toggle-password, .for-signup .page-card .page-card-body .email-field .toggle-password, .for-signup .page-card .page-card-body .password-field .toggle-password, .for-email-login .page-card .page-card-body .email-field .toggle-password, .for-email-login .page-card .page-card-body .password-field .toggle-password {
  right: 14px !important;
  top: 10px !important;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  font-size: 12px;
}

.form-control {
  border: none;
  height: 35px !important;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: .02em;
  border-radius: var(--border-radius-sm);
  padding: var(--input-padding);
  position: relative;
}

[data-page-route="Workspaces"] .standard-sidebar-item {
  justify-content: space-between;
  padding: 7px !important;
}


.frappe-control[data-fieldtype="Select"] .control-input .select-icon, .frappe-control[data-fieldtype="Select"].form-group .select-icon {
  padding-left: inherit;
  padding-right: inherit;
  position: absolute;
  pointer-events: none;
  top: 7px !important;
  right: 12px;
}

#navbar-breadcrumbs a::before {
  content: var(--right-arrow-svg);
  display: inline-block;
  margin-right: 10px;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%) !important;
}

.navbar-nav .icon {
  --icon-stroke: #ffffff !important;
}

.navbar-nav .es-icon {
  --icon-stroke: #ffffff !important;
}

.frappe-control[data-fieldtype=Password] .control-input-wrapper .toggle-password {
    position: absolute;
    top: 4px !important;
    right: 12px;
    padding: 3px;
    z-index: 3;
    cursor: pointer;
}

.for-login .page-card, .for-forgot .page-card, .for-login-with-email-link .page-card, .for-signup .page-card, .for-email-login .page-card {
  padding: 10px 10px 45px 10px !important;
  background-color: #fff;
  max-width: 400px;
  margin: 45px auto !important;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
}

.page-card-head {
  padding: 14px 0 30px 0px !important;
  margin: 0 auto;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 600;
}
.page-card-head h4 {
  margin-top: 1rem;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  color: var(--text-color);
}

.widget.shortcut-widget-box {
    cursor: pointer;
    padding: 12px 16px !important;
    align-items: flex-start;
    border: 1px solid #ededed !important;
}

.point-of-sale-app > .payment-container .submit-order-btn {
  background-color: #013641 !important;
  color: #fff;
}

.point-of-sale-app > .customer-cart-container > .cart-container > .abs-cart-container > .cart-totals-section > .checkout-btn {
  background-color:  #013641 !important;
  color: #fff;
}

.point-of-sale-app > .past-order-summary > .invoice-summary-wrapper > .abs-container > .summary-btns > .new-btn {
  background-color: #013641 !important;
  color: #fff;
  font-weight: 500;
}

.point-of-sale-app > .customer-cart-container > .cart-container > .abs-cart-container > .numpad-section > .checkout-btn {
  margin: 0;
  margin-bottom: 0px;
  margin-bottom: var(--margin-sm);
  background-color: #013641 !important;
  color: #fff;
}

.point-of-sale-app > .customer-cart-container > .cart-container > .abs-cart-container > .numpad-section > .numpad-container > .numpad-btn {
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-md);
  box-shadow: var(--shadow-sm);
  background: #f3f3f3 !important;
  color: #013641 !important;
}

.point-of-sale-app > .customer-cart-container > .cart-container > .abs-cart-container > .numpad-section > .numpad-container > .remove-btn {
  font-weight: 700;
  color: #ff9309 !important;
}

/* ============================================================
   MojaERP centered background watermark (desk only)
   ------------------------------------------------------------
   Renders a faint, fixed, centred logo behind desk content on
   workspace / list / form pages. OFF by default — it only paints
   when System Settings > Desk Watermark is enabled, which adds
   `body.moja-watermark-on` (see boot.py + watermark.js). The image
   and opacity come from CSS variables set there from the settings,
   falling back to the bundled default logo at 6%.
   Excluded everywhere it must not appear:
     - /login & web pages   -> have no .layout-main-section
     - Print/PDF + emails   -> rendered without this container
     - Setup wizard         -> data-route ^= "setup-wizard"
     - On-screen print view -> data-route ^= "print"
   PER-CLIENT SWAP: upload the client logo in System Settings >
   Desk Watermark > Watermark Image. No code change needed.
   ============================================================ */
body.moja-watermark-on:not([data-route^="setup-wizard"]):not([data-route^="print"]) .layout-main-section::before {
  content: "";
  position: fixed;            /* stays centred on the viewport while content scrolls */
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background-image: var(--moja-watermark-image, url("/files/Hybrid-Icon.png"));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;   /* ~400x400, scaled to fit */
  opacity: var(--moja-watermark-opacity, 0.06);  /* very faint - content stays perfectly readable */
  pointer-events: none;      /* never intercepts clicks */
  z-index: 1;                /* above opaque content cards, far below navbar/dialogs/dropdowns (z-index >= 1020) */
}

/* ------------------------------------------------------------
   Workspace cards: let the watermark show through
   ------------------------------------------------------------
   On Workspace pages the widget cards have an opaque --card-bg
   that paints over the centred watermark. Making the card
   surface transparent reveals it. Scoped to the Workspaces
   page only (data-page-route="Workspaces") so list/form/report
   cards keep their solid, readable backgrounds.
   Text, numbers, icons and charts sit above this and stay
   fully readable (watermark is only 6% opacity).
   ------------------------------------------------------------ */
body.moja-watermark-on .page-container[data-page-route="Workspaces"] .widget {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   MojaERP navbar logo (next to the desk search bar)
   ------------------------------------------------------------
   Injected by navbar_logo.js when System Settings > Navbar Logo
   is enabled. Height comes from the settings (inline style); the
   rest is layout polish only. OFF by default.
   ============================================================ */
.navbar .moja-navbar-logo {
  width: auto;
  max-height: 45px;            /* cap logo height */
  margin-right: 12px;          /* gap before the search bar */
  align-self: center;
  object-fit: contain;
  flex: 0 0 auto;              /* don't let the search form squeeze it */
}
.for-login .page-card .page-card-body .field-icon, .for-forgot .page-card .page-card-body .field-icon, .for-login-with-email-link .page-card .page-card-body .field-icon, .for-signup .page-card .page-card-body .field-icon, .for-email-login .page-card .page-card-body .field-icon {
  left: 9px !important;
  top: 16px !important !important;
  color: #5A6B6E;
}


.for-login .page-card .page-card-body .email-field .toggle-password, .for-login .page-card .page-card-body .password-field .toggle-password, .for-forgot .page-card .page-card-body .email-field .toggle-password, .for-forgot .page-card .page-card-body .password-field .toggle-password, .for-login-with-email-link .page-card .page-card-body .email-field .toggle-password, .for-login-with-email-link .page-card .page-card-body .password-field .toggle-password, .for-signup .page-card .page-card-body .email-field .toggle-password, .for-signup .page-card .page-card-body .password-field .toggle-password, .for-email-login .page-card .page-card-body .email-field .toggle-password, .for-email-login .page-card .page-card-body .password-field .toggle-password {
  right: 14px !important;
  top: 25px !important;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  font-size: 12px;
}