Theme: Olive Green (#4a5c3b) + Gold (#c8a04a)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --zf-green:       #4a5c3b;
  --zf-green-dark:  #2c3a28;
  --zf-green-light: #6b8555;
  --zf-gold:        #c8a04a;
  --zf-gold-light:  #e2b96e;
  --zf-bg:          #f5f3ee;
  --zf-surface:     #ffffff;
  --zf-border:      #ddd8cc;
  --zf-border-soft: #ece9e1;
  --zf-text:        #2c3a28;
  --zf-text-muted:  #7a7260;
  --zf-radius:      8px;
  --zf-radius-sm:   5px;
  --zf-shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
  --zf-shadow-md:   0 3px 12px rgba(0,0,0,0.10);

  --primary:        #4a5c3b;
  --primary-color:  #4a5c3b;
}

/* ── BODY background ───────────────────────────────────── */
body {
  background: var(--zf-bg) !important;
}

/* ══════════════════════════════════════════════════════════
   BRANDING — Remove Frappe / Replace with Zaytoon
   ══════════════════════════════════════════════════════════ */

/* Hide ALL Frappe/ERPNext logos by src pattern */
img[src*="frappe-hr-logo"],
img[src*="frappe-framework-logo"],
img[src*="erpnext-logo"],
img[src*="frappe-logo"],
img[src*="/assets/frappe/"],
img[src*="/assets/erpnext/"],
img[src*="/assets/hrms/"],
.navbar-brand img,
.navbar-brand img.app-logo,
.navbar .app-logo,
/* login page app logo */
.for-login .page-card-head img,
.for-login .page-card-head svg,
.sign-up-page .page-card-head img,
.sign-up-page .page-card-head svg,
/* website top header logo */
.website-brand-image,
img.brand-image {
  display: none !important;
}

/* ZFL logo in navbar */
.navbar-brand::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('/assets/zaytoon_hr/images/zfl_logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ZFL logo on login page — keep only first app-logo, hide rest via sibling selector */
.for-login .page-card-head img.app-logo ~ img.app-logo,
.sign-up-page .page-card-head img.app-logo ~ img.app-logo {
  display: none !important;
}
.for-login .page-card-head img.app-logo:first-of-type,
.sign-up-page .page-card-head img.app-logo:first-of-type,
.zfl-login-logo {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  margin: 0 auto 14px !important;
}

/* Hide web-footer (contains "Powered by ERPNext") on all pages */
footer.web-footer,
.web-footer,
.footer-logo-extension {
  display: none !important;
}

/* Hide any "Powered by" link that goes to frappe.io or erpnext */
a[href*="frappe.io"],
a[href*="frappeframework.com"],
a[href*="erpnext.com"],
a[href*="frappecloud.com"],
a[href*="frappe.school"] {
  display: none !important;
}

/* Login page — override background and card */
.for-login, .sign-up-page {
  background: var(--zf-bg) !important;
}
.for-login .page-card,
.sign-up-page .page-card {
  border: 1px solid var(--zf-border) !important;
  box-shadow: var(--zf-shadow-md) !important;
  border-radius: var(--zf-radius) !important;
}
.for-login .btn-primary,
.sign-up-page .btn-primary {
  background: var(--zf-green) !important;
  border-color: var(--zf-green) !important;
}
.for-login .btn-primary:hover,
.sign-up-page .btn-primary:hover {
  background: var(--zf-green-dark) !important;
}
.for-login a, .sign-up-page a {
  color: var(--zf-green) !important;
}

/* Hide Frappe/ERPNext "Powered by" footer links */
footer .powered-by,
.powered-by,
a[href*="frappe.io"],
a[href*="frappeframework.com"],
a[href*="erpnext.com"],
a[href*="frappecloud.com"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════════ */
.navbar,
header.navbar,
.main-bar {
  background: var(--zf-green-dark) !important;
  border-bottom: 2px solid var(--zf-gold) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
}

.navbar-brand,
.navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
}

.navbar-brand .app-name,
.navbar-brand span {
  color: var(--zf-gold) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.3px !important;
}

.navbar .nav-link,
.navbar a.nav-link {
  color: #cdc8bc !important;
}
.navbar .nav-link:hover {
  color: #ffffff !important;
}
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--zf-gold) !important;
}

/* Search bar in navbar */
.navbar .search-bar .form-control,
.navbar-search .form-control {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
.navbar .search-bar .form-control::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

/* Notification bell */
.notifications-icon .notifications-count {
  background: var(--zf-gold) !important;
  color: var(--zf-green-dark) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.layout-side-section,
aside.layout-side-section {
  background: var(--zf-bg) !important;
  border-right: 1px solid var(--zf-border) !important;
}

/* Sidebar section labels */
.standard-sidebar-label,
.sidebar-label {
  color: var(--zf-text-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.9px !important;
  padding: 10px 12px 4px !important;
}

/* Group sidebar items into a box */
.standard-sidebar-section {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius-sm) !important;
  margin: 0 8px 8px !important;
  overflow: hidden !important;
}

.sidebar-item.selected .sidebar-item-label,
.sidebar-item.selected .sidebar-item-icon,
.item-anchor.selected {
  color: var(--zf-green) !important;
  font-weight: 600 !important;
}
.sidebar-item.selected {
  background: rgba(74, 92, 59, 0.08) !important;
  border-left: 3px solid var(--zf-green) !important;
}
.sidebar-item:hover .sidebar-item-label {
  color: var(--zf-green) !important;
}
.sidebar-item:hover {
  background: rgba(74, 92, 59, 0.05) !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════ */
.page-head,
.page-head-content {
  background: var(--zf-surface) !important;
  border-bottom: 1px solid var(--zf-border) !important;
  box-shadow: var(--zf-shadow-sm) !important;
}

.page-title .title-text,
.page-head .title-text {
  color: var(--zf-text) !important;
  font-weight: 700 !important;
}

.breadcrumb-item a,
.breadcrumb-item.active {
  color: var(--zf-green) !important;
}

/* ══════════════════════════════════════════════════════════
   FORM SECTIONS — Boxed cards
   ══════════════════════════════════════════════════════════ */
.form-section {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius) !important;
  box-shadow: var(--zf-shadow-sm) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.form-section .section-body {
  padding: 16px !important;
}

/* Section header — olive stripe */
.section-head,
.form-section .section-head {
  background: linear-gradient(90deg, var(--zf-green-dark) 0%, var(--zf-green) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  margin: 0 !important;
}

/* Collapsed section indicator */
.section-head .collapse-indicator {
  color: rgba(255,255,255,0.75) !important;
}

/* ══════════════════════════════════════════════════════════
   FORM FIELDS
   ══════════════════════════════════════════════════════════ */
.control-label,
.frappe-control .control-label {
  color: var(--zf-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 4px !important;
}

.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius-sm) !important;
  background: #fafaf8 !important;
  color: var(--zf-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-color: var(--zf-green) !important;
  box-shadow: 0 0 0 3px rgba(74, 92, 59, 0.12) !important;
  background: #fff !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn-primary,
button.btn-primary,
.btn.btn-primary {
  background: var(--zf-green) !important;
  border-color: var(--zf-green) !important;
  color: #ffffff !important;
  border-radius: var(--zf-radius-sm) !important;
  font-weight: 500 !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--zf-green-dark) !important;
  border-color: var(--zf-green-dark) !important;
  box-shadow: 0 2px 8px rgba(74,92,59,0.3) !important;
}

.btn-default,
.btn-secondary,
button.btn-default {
  border: 1px solid var(--zf-border) !important;
  color: var(--zf-text) !important;
  border-radius: var(--zf-radius-sm) !important;
  background: var(--zf-surface) !important;
  font-weight: 500 !important;
}
.btn-default:hover {
  border-color: var(--zf-green) !important;
  color: var(--zf-green) !important;
  background: rgba(74, 92, 59, 0.06) !important;
}

/* Save / Submit actions */
.page-actions .btn-primary {
  padding: 6px 18px !important;
}

/* ══════════════════════════════════════════════════════════
   WORKSPACE MODULES — Cards with hover
   ══════════════════════════════════════════════════════════ */

/* Workspace section containers */
.desk-page .desk-section,
.workspace-section .desk-section {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius) !important;
  box-shadow: var(--zf-shadow-sm) !important;
  padding: 16px !important;
  margin-bottom: 18px !important;
  overflow: hidden !important;
}

/* Section heading inside workspace */
.workspace-section .section-title,
.desk-section .section-header {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--zf-text-muted) !important;
  border-bottom: 2px solid var(--zf-gold) !important;
  padding-bottom: 6px !important;
  margin-bottom: 12px !important;
}

/* Shortcut / link cards */
.shortcut-widget-box {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border-soft) !important;
  border-radius: var(--zf-radius) !important;
  box-shadow: var(--zf-shadow-sm) !important;
  transition: all 0.18s ease !important;
}
.shortcut-widget-box:hover {
  border-color: var(--zf-green) !important;
  box-shadow: 0 4px 14px rgba(74, 92, 59, 0.18) !important;
  transform: translateY(-2px) !important;
}
.shortcut-widget-box .widget-label .widget-title {
  color: var(--zf-text) !important;
  font-weight: 600 !important;
}
.shortcut-widget-box .widget-icon {
  color: var(--zf-green) !important;
}

/* Links widget items */
.links-widget-list .link-item {
  border: 1px solid var(--zf-border-soft) !important;
  border-radius: var(--zf-radius-sm) !important;
  background: var(--zf-surface) !important;
  transition: all 0.15s !important;
  margin-bottom: 4px !important;
}
.links-widget-list .link-item:hover {
  border-color: var(--zf-green) !important;
  background: rgba(74, 92, 59, 0.04) !important;
}
.links-widget-list .link-item .link-content {
  color: var(--zf-text) !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD / NUMBER CARDS — Boxed
   ══════════════════════════════════════════════════════════ */
.widget-wrapper,
.widget.frappe-card,
.number-card .number-card-container {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius) !important;
  box-shadow: var(--zf-shadow-sm) !important;
  overflow: hidden !important;
}

.widget .widget-head,
.widget-title {
  background: var(--zf-bg) !important;
  border-bottom: 1px solid var(--zf-border) !important;
  color: var(--zf-text) !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
}

/* Number card accent */
.number-card .number-card-container {
  border-left: 4px solid var(--zf-green) !important;
}
.number-card .count {
  color: var(--zf-green) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   LIST VIEW
   ══════════════════════════════════════════════════════════ */
.list-row-container {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border-soft) !important;
  border-radius: var(--zf-radius-sm) !important;
  margin-bottom: 3px !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.list-row-container:hover {
  border-color: var(--zf-green) !important;
  box-shadow: 0 2px 8px rgba(74, 92, 59, 0.1) !important;
}
.list-row-container.checked {
  border-color: var(--zf-green) !important;
  background: rgba(74, 92, 59, 0.04) !important;
}

/* Filter toolbar */
.list-filters-area,
.filter-area {
  background: var(--zf-surface) !important;
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius) !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--zf-shadow-sm) !important;
}

/* Column headers */
.list-header-subject {
  color: var(--zf-text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ══════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════ */
.form-tabs-list,
.nav-tabs {
  border-bottom: 2px solid var(--zf-border) !important;
}
.form-tabs-list .tab-link.active,
.nav-tabs .nav-link.active {
  color: var(--zf-green) !important;
  border-bottom: 2px solid var(--zf-green) !important;
  font-weight: 600 !important;
}
.form-tabs-list .tab-link,
.nav-tabs .nav-link {
  color: var(--zf-text-muted) !important;
}
.form-tabs-list .tab-link:hover,
.nav-tabs .nav-link:hover {
  color: var(--zf-green) !important;
}

/* ══════════════════════════════════════════════════════════
   INDICATORS / BADGES
   ══════════════════════════════════════════════════════════ */
.indicator.green,
.indicator-pill.green,
.badge-success {
  background: rgba(74, 92, 59, 0.12) !important;
  color: var(--zf-green) !important;
  font-weight: 600 !important;
}
.indicator.blue,
.indicator-pill.blue {
  background: rgba(30, 70, 150, 0.1) !important;
  color: #1e4696 !important;
}

/* ══════════════════════════════════════════════════════════
   AWESOMEBAR / DROPDOWN
   ══════════════════════════════════════════════════════════ */
.awesomplete > ul,
.dropdown-menu {
  border: 1px solid var(--zf-border) !important;
  border-radius: var(--zf-radius) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12) !important;
  overflow: hidden !important;
}
.awesomplete > ul > li[aria-selected="true"],
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(74, 92, 59, 0.08) !important;
  color: var(--zf-green) !important;
}

/* ══════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════ */

/* Hide Frappe logo on login */
.login-logo,
.for-login img.login-logo,
.for-login .navbar-brand img,
.page-card .frappe-logo {
  display: none !important;
}

/* Brand header on login */
.page-card-head {
  position: relative !important;
}
.page-card-head::before {
  content: "Zaytoon HR";
  display: block !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: var(--zf-green-dark) !important;
  text-align: center !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 4px !important;
}
.page-card-head::after {
  content: "Zaytoon Fintech Limited";
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--zf-text-muted) !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.login-content .page-card {
  border-top: 4px solid var(--zf-green) !important;
  border-radius: var(--zf-radius) !important;
  box-shadow: var(--zf-shadow-md) !important;
}

/* ══════════════════════════════════════════════════════════
   DIALOG / MODAL — Boxed
   ══════════════════════════════════════════════════════════ */
.modal-content {
  border-radius: var(--zf-radius) !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}
.modal-header {
  background: var(--zf-green-dark) !important;
  color: #ffffff !important;
  border-bottom: 2px solid var(--zf-gold) !important;
  padding: 12px 18px !important;
}
.modal-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.modal-header .btn-modal-close,
.modal-header .close {
  color: rgba(255,255,255,0.8) !important;
}
.modal-header .btn-modal-close:hover,
.modal-header .close:hover {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKLIST / PROGRESS BARS
   ══════════════════════════════════════════════════════════ */
.progress-bar {
  background-color: var(--zf-green) !important;
}
.checkbox input[type="checkbox"]:checked + label::before {
  background: var(--zf-green) !important;
  border-color: var(--zf-green) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLLBAR (subtle)
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--zf-border-soft); }
::-webkit-scrollbar-thumb {
  background: var(--zf-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #b8b2a6; }

/* ══════════════════════════════════════════════════════════
   BRANDING CLEANUP v3 — hide all remaining Frappe references
   ══════════════════════════════════════════════════════════ */

/* About dialog — hide Frappe logo and version badge */
.about-dialog img,
.modal-dialog .about-frappe img,
[class*="about"] img[src*="frappe"] {
  display: none !important;
}
.modal-dialog .about-frappe .text-muted,
.modal-dialog [class*="about"] small {
  visibility: hidden;
}

/* Help menu — style the User Manual only item */
#toolbar-help .disabled-link,
.dropdown-help .dropdown-item.disabled-link {
  pointer-events: none;
  cursor: default !important;
}

/* Hide any external Frappe/ERPNext links in help or footer */
a[href*="docs.frappe.io"],
a[href*="frappe.school"],
a[href*="frappecloud.com"],
a[href*="frappe.cloud"],
a[href*="github.com/frappe"],
a[href*="discuss.frappe.io"],
a[href*="frappe.io"] {
  display: none !important;
}

/* Hide "Frappe Technologies" text links and spans */
.frappe-brand, 
[class*="frappe-logo"],
.powered-by-frappe,
.built-with-frappe {
  display: none !important;
}

/* Footer inside app — hide Powered by Frappe */
.page-footer .frappe-footer,
footer .text-muted a[href*="frappe"],
.layout-footer a[href*="frappe"],
.app-footer {
  display: none !important;
}

/* Login page — hide any Frappe sub-branding or version text */
.login-content .frappe-version,
.sign-up-page small a[href*="frappe"],
.for-login footer,
.for-login .page-card-body > .text-center:last-child {
  display: none !important;
}

/* Desk home page — hide Frappe module cards/tiles if present */
.modules-section [data-module-name*="frappe"],
.module-link [data-module*="Frappe"] {
  display: none !important;
}