/* ============================================================
   Arabica Operations — Desk (internal app) theme
   ------------------------------------------------------------
   Edit the values under :root to rebrand the whole system.
   Frappe uses CSS variables everywhere, so overriding these
   recolors buttons, links, sidebar highlights, etc. cleanly.
   ============================================================ */

/* --- 1. FONT --------------------------------------------------
   Cairo supports both Latin and Arabic. Swap for any Google font.
   If your server blocks external requests, self-host the font
   files in public/fonts/ and use @font-face instead of @import. */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap");

/* --- 2. BRAND COLORS -----------------------------------------
   Change these hex values to your brand. Coffee-brown defaults. */
:root {
  --arabica-brand:        #4F46E5;  /* main brand color (deeper, more visible indigo-blue) */
  --arabica-brand-rgb:    79, 70, 229;  /* SAME color as above, in R,G,B — used for shadows */
  --arabica-brand-dark:   #3730A3;  /* darker shade for hovers    */
  --arabica-brand-alt:    #7C3AED;  /* purple accent              */
  --arabica-gradient:     linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #3B5BFF 100%);
  --arabica-accent:       #e8e8fd;  /* light lavender tint (navbar/sidebar highlight) */
  --arabica-font: "Cairo", "Inter", -apple-system, sans-serif;

  /* Map our brand onto Frappe's own variables (this is what
     actually recolors the UI — do not rename these keys).
     !important is REQUIRED here: Frappe injects this file via
     app_include_css/web_include_css BEFORE its own page bundles, so
     login.bundle.css / website.bundle.css re-declare --primary-color
     (as var(--gray-900)) and --primary (#171717) later in the cascade
     and silently win. Verified on /login 2026-08-04: the stylesheet
     order is website.bundle -> erpnext-web.bundle -> arabica_ops ->
     login.bundle. Custom properties honour !important, so this pins
     the brand regardless of include order. Do not drop it.          */
  --primary:            var(--arabica-brand) !important;
  --primary-color:      var(--arabica-brand) !important;
  --btn-primary:        var(--arabica-brand) !important;
  --text-on-primary:    #ffffff !important;
  --font-stack:         var(--arabica-font) !important;
}

/* --- 3. APPLY THE FONT everywhere ---------------------------- */
body,
.navbar,
.page-title,
.ellipsis,
input, select, textarea, button {
  font-family: var(--arabica-font) !important;
}

/* --- 4. PRIMARY BUTTONS -------------------------------------- */
.btn-primary {
  background: var(--arabica-gradient) !important;
  border: none !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(0.93);
  background: var(--arabica-gradient) !important;
}

/* --- 5. NAVBAR (top bar) ------------------------------------- */
.navbar {
  background-color: var(--arabica-accent) !important;
}
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand,
.navbar-expand .navbar-nav .nav-link {
  color: #000000 !important;   /* dark text — navbar bg is now light */
}

/* --- 6. LINKS & active sidebar items ------------------------- */
a,
.sidebar-item-label {
  color: var(--arabica-brand);
}
.standard-sidebar-item.selected {
  background-color: var(--arabica-accent) !important;
}

/* --- 7. SIDEBAR SPACING -------------------------------------
   More breathing room between the menu items in the left sidebar.
   Increase --sidebar-gap / padding values to space them out more. */
:root {
  --sidebar-gap:3px;   /* vertical gap between items */
}
.standard-sidebar-item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-bottom: var(--sidebar-gap) !important;
}
/* space around each item container too */
.sidebar-item-container {
  margin-bottom: var(--sidebar-gap) !important;
}
/* a little extra room above section groups */
.standard-sidebar-section {
  margin-bottom: 12px !important;
}

/* --- 9. MAIN PAGE CONTAINER (the big box around everything) ---
   Frappe gives .layout-main-section a gray border; make it brand
   colored with a soft shadow.
   NOTE: no `overflow: hidden` here on purpose -- form pages put a
   `position: sticky` tab bar (.form-tabs-list) inside this element, and
   `overflow: hidden` on ANY ancestor of a sticky element breaks sticky
   positioning entirely (it can only "stick" within a visible-overflow
   ancestor chain up to the scroll container). That cost every DocType
   form's sticky tabs (تفاصيل / جرد / المحاسبة / ...) -- they scrolled away
   with the page instead of staying pinned. Rounded corners are worth
   losing a few pixels of square-corner bleed from child content; sticky
   tab navigation is not. */
  
.layout-main-section {
  border: 1px solid var(--arabica-brand) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 14px rgba(var(--arabica-brand-rgb), 0.15) !important;
}

/* --- 10. WORKSPACE SHORTCUT BOXES -----------------------------
   Every workspace page (الإدارة التنفيذية، المالية والمحاسبة، ...) lists
   its shortcuts (فاتورة مبيعات، دفتر الأستاذ العام، ...) using Frappe's
   shared .shortcut-widget-box widget -- one rule here restyles every
   shortcut on every workspace at once, no per-page changes needed. */
.widget.shortcut-widget-box {
  background: var(--card-bg, var(--fg-color)) !important;
  border: 1px solid var(--border-color) !important;
  border-inline-start: 4px solid var(--arabica-brand) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.widget.shortcut-widget-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--arabica-brand-rgb), 0.18);
  border-color: var(--arabica-brand) !important;
}
.widget.shortcut-widget-box .widget-title .ellipsis {
  font-weight: 600;
}
/* the little count pill (e.g. "13") -- brand gradient instead of plain grey */
.widget.shortcut-widget-box .indicator-pill {
  background: var(--arabica-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* --- 11. WORKSPACE "QUICK NUMBERS" STAT CARDS -----------------
   Every workspace's "أرقام سريعة" section (مبيعات اليوم، الذمم المدينة، ...)
   uses Frappe's shared .number-widget-box widget -- same one-rule-fixes-
   every-page approach as the shortcuts above. Only border/shadow/hover is
   touched here; the number's own color is left alone since several cards
   set it deliberately (green for revenue, red for payables, ...). */
.widget.number-widget-box {
  background: var(--card-bg, var(--fg-color)) !important;
  border: 1px solid var(--border-color) !important;
  border-inline-start: 4px solid var(--arabica-brand) !important;
  border-radius: 10px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.widget.number-widget-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--arabica-brand-rgb), 0.18);
  border-color: var(--arabica-brand) !important;
}
.widget.number-widget-box .widget-content .number {
  font-weight: 700;
}

/* --- 12. LOGIN / AUTH PAGES ------------------------------------
   Login, forgot-password and reset-password are website pages (not desk)
   that all render Frappe's shared .page-card inside .for-login. Scoped to
   body:has(.page-card) so this never touches other website pages. */
body:has(.page-card) {
  background: linear-gradient(160deg, var(--arabica-accent) 0%, #ffffff 45%, var(--arabica-accent) 100%);
  min-height: 100vh;
}
.for-login {
  max-width: 420px;
  margin: 10vh auto 4vh;
  padding: 0 20px;
}
.page-card-head .app-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(var(--arabica-brand-rgb), 0.25);
}
.page-card-head h4 {
  font-weight: 700;
  color: var(--arabica-brand-dark);
  margin-top: 14px;
}
.page-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 12px 40px rgba(var(--arabica-brand-rgb), 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 32px 28px;
}
.page-card .form-control {
  border-radius: 10px;
  border: 1px solid var(--border-color, #d1d1d1);
  padding: 11px 14px;
  height: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-card .form-control:focus {
  border-color: var(--arabica-brand);
  box-shadow: 0 0 0 3px rgba(var(--arabica-brand-rgb), 0.15);
}
.page-card .btn-login {
  border-radius: 10px !important;
  padding: 11px 0;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.page-card .btn-login-option {
  border-radius: 10px;
  border-color: var(--arabica-brand);
  color: var(--arabica-brand);
  background: transparent;
}
.page-card .btn-login-option:hover {
  background: var(--arabica-accent);
}
.page-card .forgot-password-message a,
.page-card .login-with-email-link a {
  color: var(--arabica-brand);
}
.page-card .login-divider {
  color: var(--text-muted, #888);
}
.email-field:focus-within .field-icon,
.password-field:focus-within .field-icon {
  color: var(--arabica-brand);
}
/* Frappe positions the icon with a fixed top:5px via a more deeply-nested
   selector than this one, so without !important only our transform wins the
   cascade while top:5px still applies underneath -- pushing the icon toward
   the top instead of centering it. !important forces top:50% to actually win. */
.email-field .field-icon,
.password-field .field-icon {
  top: 50% !important;
  transform: translateY(-50%);
}
.password-field .toggle-password {
  top: 50% !important;
  transform: translateY(-50%);
}