/* =========================================================
   ERPNext / Frappe theme.css (FULL FILE - NO LINES REMOVED)
   ========================================================= */

/* Only keep imports that are actually used by the variables below */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;600;700;800&display=swap');

:root {
  /* Fonts */
  --banking-font-body: "Trebuchet MS", Trebuchet,
                       "Noto Sans Arabic",
                       Tahoma, Arial, sans-serif;

  --banking-font-arabic: "Noto Sans Arabic", "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;

  /* Brand colors */
  --banking-primary: #0A7F3F;
  --banking-primary-light: #11A857;
  --banking-primary-dark: #065A2B;

  /* Status */
  --banking-success: #0A7F3F;
  --banking-danger: #DC2626;
  --banking-warning: #D97706;
  --banking-info: #0284C7;

  /* Neutrals */
  --ui-bg-page: #F7F8FA;
  --ui-bg-card: #ffffff;
  --ui-bg-hover: #E6F4EB;

  --ui-border: #E5E7EB;
  --ui-border-2: #D1D5DB;

  --ui-text: #0F172A;
  --ui-text-2: #334155;
  --ui-text-muted: #94a3b8;

  /* Section header (light) */
  --ui-section-bg: #E8F5E9;
  --ui-section-border: #C8E6C9;
  --ui-section-text: #1B5E20;

  /* Table header */
  --ui-table-head: #F1F5F9;

  /* Editable input background (distinct from disabled/read-only) */
  --ui-input-bg-editable: #F7FBFF;
  --ui-input-bg-hover: #EFF7FF;

  /* Unified control sizing */
  --ui-control-height: 36px;
  --ui-control-padding-y: 6px;
  --ui-control-padding-x: 10px;
  --ui-control-line-height: 22px; /* 36 - (6*2) - (1px border*2) = 22 */


}

/* When Arabic UI is active, make body font resolve to Arabic font 
html[dir="rtl"] {
  --banking-font-body: var(--banking-font-arabic);
}*/

/* =========================
   1) Base typography + density
   ========================= */
html { font-size: 15px !important; }

body {
  font-family: var(--banking-font-body) !important;
  color: var(--ui-text) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* Force font on common UI elements */
body,
body input, body select, body textarea, body button,
body .control-label, body .control-value, body .form-control,
body .datatable, body .grid-body {
  font-family: var(--banking-font-body) !important;
}

/* =========================
   2) Layout background / cards / density
   ========================= */
.page-container,
.layout-main-section,
#page-Workspaces {
  background: var(--ui-bg-page) !important;
}

.form-layout,
.form-section,
.widget,
.dashboard-card,
.indicator-widget,
.page-card-container,
.page-card {
  background: var(--ui-bg-card) !important;
}

.form-layout .form-page {
  background: var(--ui-bg-card) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
}

.form-layout .form-page { padding-top: 6px !important; }
.form-layout .form-column { padding-left: 8px !important; padding-right: 8px !important; }
.form-layout .form-section { margin-bottom: 8px !important; }
.form-layout .section-body { padding: 8px 10px !important; }
.control-group, .form-group { margin-bottom: 6px !important; }

/* =========================
   3) Section headers
   ========================= */
.form-section .section-head,
.form-column .section-head {
  background: var(--ui-section-bg) !important;
  border: 1px solid var(--ui-section-border) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: var(--ui-section-text) !important;
}

.form-section.collapsible .section-head:hover {
  background: #DFF3E5 !important;
  border-color: #B7E1C2 !important;
}

/* =========================
   4) Labels
   ========================= */
.control-label,
.form-group .control-label,
.frappe-control label {
  color: var(--ui-text-2) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}


/* =========================
   5) Inputs (tight + readable) — unified sizing
   ========================= */
input.form-control:not([type="checkbox"]):not([type="radio"]),
select.form-control,
textarea.form-control,
input.input-with-feedback:not([type="checkbox"]):not([type="radio"]),
.frappe-control input[type="text"],
.frappe-control input[type="email"],
.frappe-control input[type="password"],
.frappe-control input[type="number"],
.frappe-control input[type="date"],
.frappe-control textarea,
.frappe-control select {
  background: #fff !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border-2) !important;
  border-radius: 8px !important;

  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  box-sizing: border-box !important;

  padding: var(--ui-control-padding-y) var(--ui-control-padding-x) !important;
  font-size: 15px !important;
  line-height: var(--ui-control-line-height) !important;
}




/* Native SELECT closed-state: prevent glyph clipping */
select.form-control,
select.input-with-feedback.form-control,
.frappe-control select {
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  box-sizing: border-box !important;
  padding-top: var(--ui-control-padding-y) !important;
  padding-bottom: var(--ui-control-padding-y) !important;
  line-height: var(--ui-control-line-height) !important;
}





/* Reserve space for the dropdown arrow area */
html[dir="rtl"] select.form-control,
html[dir="rtl"] select.input-with-feedback.form-control,
html[dir="rtl"] .frappe-control select {
  padding-left: 34px !important;   /* arrow is usually on the left in RTL */
  padding-right: 10px !important;
}

html[dir="ltr"] select.form-control,
html[dir="ltr"] select.input-with-feedback.form-control,
html[dir="ltr"] .frappe-control select {
  padding-right: 34px !important;  /* arrow is usually on the right in LTR */
  padding-left: 10px !important;
}





/* Editable fields background (NOT disabled/read-only) */
.form-control:not([readonly]):not(:disabled),
input.input-with-feedback:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled),
.frappe-control input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled),
.frappe-control select:not([readonly]):not(:disabled),
.frappe-control textarea:not([readonly]):not(:disabled) {
  background: var(--ui-input-bg-editable) !important;
}

.form-control:not([readonly]):not(:disabled):hover,
.frappe-control input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not(:disabled):hover,
.frappe-control select:not([readonly]):not(:disabled):hover,
.frappe-control textarea:not([readonly]):not(:disabled):hover {
  background: var(--ui-input-bg-hover) !important;
}


/* Wrapper */
.frappe-control .control-input {
  background: transparent !important;
  border: 0 !important;
}

.form-control:focus,
input.input-with-feedback:not([type="checkbox"]):not([type="radio"]):focus,
.frappe-control input:not([type="checkbox"]):not([type="radio"]):focus,
.frappe-control textarea:focus,
.frappe-control select:focus {
  border-color: var(--banking-primary) !important;
  outline: 2px solid rgba(10, 127, 63, 0.15) !important;
  outline-offset: 0 !important;
}

.form-control::placeholder,
.frappe-control input::placeholder,
.frappe-control textarea::placeholder {
  color: var(--ui-text-muted) !important;
}

/* Disabled/read-only (kept clearly different) */
.form-control[readonly],
.form-control:disabled,
.frappe-control input:not([type="checkbox"]):not([type="radio"])[readonly],
.frappe-control textarea[readonly],
.frappe-control input:not([type="checkbox"]):not([type="radio"])[disabled],
.frappe-control textarea[disabled],
.control-value.like-disabled-input,
.frappe-control .control-value.like-disabled-input {
  background: #E0E0E0 !important;
  color: var(--ui-text-2) !important;
  cursor: not-allowed;

  /* Match input width WITHOUT forcing hidden elements to show */
  border: 1px solid var(--ui-border-2) !important;
  border-radius: 8px !important;
}



/* Make disabled/read-only DISPLAY value match input height (fixes "short" disabled fields) */
.frappe-control.hide-control .control-input-wrapper > .control-value.like-disabled-input {
  box-sizing: border-box !important;

  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;

  padding: var(--ui-control-padding-y) var(--ui-control-padding-x) !important;
  line-height: var(--ui-control-line-height) !important;

  display: flex !important;
  align-items: center !important;

  background: #E0E0E0 !important;
  color: var(--ui-text-2) !important;
  border: 1px solid var(--ui-border-2) !important;
  border-radius: 8px !important;
  cursor: not-allowed !important;
  width: 100% !important;
}

/* Prevent duplicate rendering: when Frappe switches to display-value mode, hide the actual input */
.frappe-control.hide-control .control-input-wrapper > .control-input {
  display: none !important;
}





/* =========================
   6) Buttons (global consistency)
   ========================= */
.btn-primary,
button.btn-primary,
a.btn.btn-primary {
  background: var(--banking-primary) !important;
  border-color: var(--banking-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Force children (icons/spans) to white */
.btn-primary *,
button.btn-primary *,
a.btn.btn-primary * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
  font-weight: 700 !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn.btn-primary:hover {
  background: var(--banking-primary-dark) !important;
  border-color: var(--banking-primary-dark) !important;
  color: #fff !important;
}

.btn-success {
  background: var(--banking-success) !important;
  border-color: var(--banking-success) !important;
  color: #fff !important;
}
.btn-success * { color: #fff !important; fill: #fff !important; stroke: #fff !important; }

.btn-danger {
  background: var(--banking-danger) !important;
  border-color: var(--banking-danger) !important;
  color: #fff !important;
}
.btn-danger * { color: #fff !important; fill: #fff !important; stroke: #fff !important; }

/* Neutral buttons */
.btn-default,
.btn-secondary {
  background: #fff !important;
  border: 1px solid var(--ui-border-2) !important;
  color: var(--ui-text) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--ui-bg-hover) !important;
  border-color: var(--banking-primary) !important;
  color: var(--banking-primary) !important;
}


/* =========================
   7) Page header (clean + strong)
   ========================= */
.page-head {
  background: #fff !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

/* Bigger page title with green underline */
.page-head .page-title,
.page-head .page-title h3,
.page-head .page-title .title-text {
  background: transparent !important;
  color: var(--ui-text) !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
}

.page-head .page-title .title-text {
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 8px !important;
}

.page-head .page-title .title-text::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--banking-primary) !important;
  border-radius: 2px !important;
}

/* Force all buttons in the header to Banking Green */
.page-head .btn,
.page-head .btn-group .btn,
.page-head .actions-btn-group .btn,
.page-head .standard-actions .btn,
.page-head .custom-actions .btn {
  background: var(--banking-primary) !important;
  border-color: var(--banking-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* THE "TRUST RESTORER" ICON FIX:
   1. We force the stroke and fill to white.
   2. We use 'filter' to turn anything black into white as a fail-safe.
*/
.page-head .btn svg, 
.page-head .btn svg path, 
.page-head .btn svg use,
.page-head .btn i {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  /* This filter forces the icon to turn white regardless of its base color */
  filter: brightness(0) invert(1) !important; 
}

/* Fix hover state so it stays green/darker */
.page-head .btn:hover {
  background: var(--banking-primary-dark) !important;
  border-color: var(--banking-primary-dark) !important;
}


/* =========================
   8) Form tabs: highlight active tab
   ========================= */
.form-tabs,
.form-tabs .nav {
  gap: 6px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.form-tabs .nav li a,
.form-tabs .nav-tabs > li > a,
.form-tabs .nav-link {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  color: var(--ui-text-2) !important;
  font-weight: 700 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.form-tabs .nav li.active a,
.form-tabs .nav-tabs > li.active > a,
.form-tabs .nav-link.active {
  background: #E6F4EB !important;
  border-color: var(--banking-primary) !important;
  color: var(--banking-primary) !important;
  font-weight: 800 !important;
}

.form-tabs .nav li a:hover,
.form-tabs .nav-tabs > li > a:hover,
.form-tabs .nav-link:hover {
  background: #F3FAF6 !important;
  border-color: #B7E1C2 !important;
}

/* =========================
   9) Tables / Datatable / Grid
   ========================= */
.table,
.datatable,
.grid-body {
  border: 1px solid var(--ui-border) !important;
}

/* Header bg */
.table thead,
.datatable .dt-header,
.grid-heading-row {
  background: var(--ui-table-head) !important;
}

.table thead th,
.datatable .dt-header .dt-cell__content,
.datatable .dt-header .dt-cell--header .dt-cell__content,
.grid-heading-row .grid-row > div,
.grid-heading-row .grid-static-col,
.grid-heading-row .grid-row .static-area {
  color: var(--ui-text) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Table data */
.datatable .dt-row .dt-cell__content,
.table tbody td,
.grid-body .rows .data-row .col,
.grid-body .grid-row .data-col {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--ui-text) !important;
}


/*====================================*/

/* Inputs inside grid/datatable — EXCEPT checkbox/radio */
.grid-row input:not([type="checkbox"]):not([type="radio"]),
.grid-row select,
.grid-row textarea,
.datatable input:not([type="checkbox"]):not([type="radio"]),
.datatable select,
.datatable textarea {
  font-size: 14px !important;
  min-height: 30px !important;
  padding: 4px 8px !important;
}


/*====================================*/


/* Hover */
.table tbody tr:hover,
.datatable .dt-row:hover,
.grid-body .rows .data-row:hover {
  background: var(--ui-bg-hover) !important;
}

/* =========================
   12) Sidebar
   ========================= */
.layout-side-section,
.desk-sidebar {
  background: #fff !important;
  border-right: 1px solid var(--ui-border) !important;
}

.sidebar-menu .selected,
.desk-sidebar .selected {
  background: var(--banking-primary) !important;
  color: #fff !important;
}

.desk-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item.selected a,
.desk-sidebar .standard-sidebar-item.selected .item-anchor,
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-label,
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-icon,
.sidebar-menu .selected,
.sidebar-menu .selected .sidebar-label {
  color: #fff !important;
}

.desk-sidebar .standard-sidebar-item.selected svg,
.desk-sidebar .standard-sidebar-item.selected svg * {
  fill: #fff !important;
  stroke: #fff !important;
}

/* RTL sidebar border flip */
[dir="rtl"] .layout-side-section,
html[dir="rtl"] .desk-sidebar {
  border-right: none !important;
  border-left: 1px solid var(--ui-border) !important;
}

/* =========================
   13) Alerts
   ========================= */
.alert-info { border-left: 4px solid var(--banking-info) !important; }
.alert-success { border-left: 4px solid var(--banking-success) !important; }
.alert-warning { border-left: 4px solid var(--banking-warning) !important; }
.alert-danger { border-left: 4px solid var(--banking-danger) !important; }

/* RTL alert borders flip */
[dir="rtl"] .alert-info,
[dir="rtl"] .alert-success,
[dir="rtl"] .alert-warning,
[dir="rtl"] .alert-danger {
  border-left: none !important;
}
[dir="rtl"] .alert-info { border-right: 4px solid var(--banking-info) !important; }
[dir="rtl"] .alert-success { border-right: 4px solid var(--banking-success) !important; }
[dir="rtl"] .alert-warning { border-right: 4px solid var(--banking-warning) !important; }
[dir="rtl"] .alert-danger { border-right: 4px solid var(--banking-danger) !important; }

/* =========================
   14) Print
   ========================= */
@media print {
  body { background: #fff !important; font-size: 13px !important; }
  .page-head { background: #fff !important; border-bottom: 1px solid #000 !important; }
}


/* =========================
   Fix: inputs that have a left prefix icon
   ========================= */

/* Login page (email/password) - add left padding so text clears the icon */
.page-card .form-group:has(.field-icon) .form-control,
.page-card .form-group:has(.field-icon) input.input-with-feedback {
  padding-left: 34px !important; /* adjust 30–36px if needed */
}

/* Top bar global search - add left padding so text clears the search icon */
.navbar .search-bar:has(.search-icon) .form-control,
.navbar .search-bar:has(.search-icon) input {
  padding-left: 34px !important;
}

/* RTL: icon will be on the other side, so swap padding */
[dir="rtl"] .page-card .form-group:has(.field-icon) .form-control,
[dir="rtl"] .page-card .form-group:has(.field-icon) input.input-with-feedback,
[dir="rtl"] .navbar .search-bar:has(.search-icon) .form-control,
[dir="rtl"] .navbar .search-bar:has(.search-icon) input {
  padding-left: 10px !important;
  padding-right: 34px !important;
}


/* last update: 12-Jan-26 @ 17:04pm */