/* =====================================================================
   Al Qadi ERP — Brand Theme  v3.0
   Master_Decisions_Register Batch 1 — Royal Blue + navy sidebar
   الهوية البصرية لمجموعة القاضي

   Primary: #2B6CB0 · Primary dark: #1A4F8A · Sidebar: #1A2D42 (Register / CLAUDE.md)
   Legacy CSS variable names (--alqadi-gold*) retain “gold” labels but map to blue
   tokens so existing selectors stay stable.

   v2.1 → v3: Register-aligned palette (navbar Royal Blue; desk sidebar #1A2D42).
   ===================================================================== */

/* ═══════════════════════════════════════════════════════
   0.  CSS CUSTOM PROPERTIES
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Register Batch 1 brand (semantic “gold” names = primary blue) ── */
  --alqadi-gold:          #2B6CB0;
  --alqadi-gold-dark:     #1A4F8A;
  --alqadi-gold-light:    #B8D4F0;
  --alqadi-gold-glow:     rgba(43, 108, 176, 0.15);
  --alqadi-black:         #1A1A1A;
  --alqadi-charcoal:      #2D2D2D;
  --alqadi-dark-navy:     #1A2D42;
  --alqadi-sidebar-bg:    #1A2D42;
  --alqadi-sidebar-hover: #243652;
  --alqadi-navbar-bg:     #2B6CB0;
  --alqadi-warm-white:    #FAF8F2;
  --alqadi-off-white:     #F5F3EE;
  --alqadi-text-muted:    #6B7280;
  --alqadi-success:       #38A169;
  --alqadi-danger:        #E53E3E;
  --alqadi-warning:       #D69E2E;
  --alqadi-info:          #3B82F6;

  /* ── Override Frappe CSS variables (Register) ── */
  --primary:              #2B6CB0;
  --primary-color:        #2B6CB0;
  --text-on-primary:      #ffffff;
  --btn-primary-bg:       #2B6CB0;
  --btn-primary-hover:    #1A4F8A;

  /* ── Surface tokens ── */
  --alqadi-content-surface:  #ffffff;
  --alqadi-page-bg:          #F0F4FA;
  --alqadi-table-head-bg:    rgba(43, 108, 176, 0.10);
  --alqadi-table-head-color: #1A1A1A;
  --alqadi-table-row-hover:  rgba(43, 108, 176, 0.07);
  --alqadi-table-border:     rgba(43, 108, 176, 0.22);
  /* Strong enough to read field edges on white cards (avoid “invisible” inputs) */
  --alqadi-input-border:     #5B7FA8;
  --alqadi-label-color:      #374151;
  --alqadi-body-text:        #1F2937;
}

/* Frappe theme switcher sets html[data-theme] from data-theme-mode (light / dark / automatic).
   Without these overrides, brand CSS keeps light surfaces while core applies dark variables → split UI. */
html[data-theme="dark"] {
  --alqadi-black:            #e8eaed;
  --alqadi-charcoal:         #c9cdd4;
  --alqadi-text-muted:       #9aa0a8;
  --alqadi-label-color:      #aeb4bd;
  --alqadi-body-text:        #e4e6eb;
  --alqadi-content-surface:  #1e2128;
  --alqadi-page-bg:          #14161a;
  --alqadi-warm-white:       #e8eaed;
  --alqadi-off-white:        #2a2f38;
  --alqadi-gold-light:       #8eb8e8;
  --alqadi-table-head-bg:    rgba(43, 108, 176, 0.28);
  --alqadi-table-head-color: #e8eaed;
  --alqadi-table-row-hover:  rgba(43, 108, 176, 0.18);
  --alqadi-table-border:     rgba(43, 108, 176, 0.38);
  --alqadi-input-border:     #4a5568;
  --alqadi-gold-glow:        rgba(43, 108, 176, 0.28);
}


/* ═══════════════════════════════════════════════════════
   1.  NAVBAR — Royal Blue (Register primary)
   ═══════════════════════════════════════════════════════ */

/* Desk corner: app logo (replaces default Frappe/ERPNext mark) */
.navbar .navbar-brand img,
.navbar .navbar-brand .alqadi-navbar-logo {
  max-height: 1.75rem;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Loading / splash screens: keep the brand mark aligned with the Al Qadi logo.
   Frappe/ERPNext can re-render this markup during boot, so the JS hook also
   swaps the source when the loader is inserted late. */
.page-loader img,
.page-loading img,
.loading-screen img,
.loading-page img,
.app-loading img,
.splash-screen img,
.loading-icon img,
.setup-wizard-slide .erpnext-logo {
  max-height: 4.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.navbar {
  background-color: var(--alqadi-navbar-bg) !important;
  border-bottom: 2px solid var(--alqadi-gold-dark) !important;
  box-shadow: 0 2px 12px rgba(26, 79, 138, 0.35);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-nav .nav-item,
.navbar .dropdown-toggle,
.navbar .navbar-brand img + span {
  color: var(--alqadi-warm-white) !important;
}

/* Hover must stay light — primary blue on blue navbar was invisible */
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
  color: var(--alqadi-gold-light) !important;
}

/* Navbar search */
.navbar .search-bar .search-icon,
.navbar .search-bar input {
  color: var(--alqadi-warm-white) !important;
}
.navbar .search-bar input::placeholder {
  color: rgba(250, 248, 242, 0.55) !important;
}

/* Navbar SVG icons — white on dark navbar */
.navbar svg,
.navbar svg use,
.navbar .es-icon use,
.navbar .navbar-toggler svg {
  fill: var(--alqadi-warm-white) !important;
  stroke: var(--alqadi-warm-white) !important;
}
/* Bell on royal blue: use light fill, not same blue as navbar */
.navbar .notifications-icon svg {
  fill: var(--alqadi-warm-white) !important;
  stroke: var(--alqadi-warm-white) !important;
}

/* Breadcrumbs */
#navbar-breadcrumbs li a,
#navbar-breadcrumbs li.disabled a {
  color: var(--alqadi-warm-white) !important;
}
#navbar-breadcrumbs li a:hover {
  color: var(--alqadi-gold-light) !important;
}
#navbar-breadcrumbs li + li::before {
  color: rgba(250, 248, 242, 0.4) !important;
}


/* ═══════════════════════════════════════════════════════
   2.  DESK SIDEBAR (Workspace nav) — Register navy #1A2D42, blue accents
       IMPORTANT: Only .desk-sidebar & #page-Workspaces get
       the dark treatment. The form's .layout-side-section
       is left at its default (white) so icons stay visible.
   ═══════════════════════════════════════════════════════ */

.desk-sidebar {
  background-color: var(--alqadi-sidebar-bg) !important;
  border-right: 1px solid rgba(43, 108, 176, 0.12);
  padding: 8px 6px;
}

html[dir="rtl"] .desk-sidebar {
  border-right: none;
  border-left: 1px solid rgba(43, 108, 176, 0.12);
}

.desk-sidebar .sidebar-item,
.desk-sidebar .sidebar-item a,
.desk-sidebar .standard-sidebar-item,
.desk-sidebar .standard-sidebar-item a,
.desk-sidebar .sidebar-item-label {
  color: var(--alqadi-warm-white) !important;
  transition: background 0.18s, border 0.18s, color 0.18s;
}

.desk-sidebar .sidebar-item.selected,
.desk-sidebar .sidebar-item:hover,
.desk-sidebar .standard-sidebar-item.selected,
.desk-sidebar .standard-sidebar-item:hover {
  background-color: var(--alqadi-sidebar-hover) !important;
  border-left: 3px solid var(--alqadi-gold) !important;
  border-radius: 10px;
}

/* RTL flip */
html[dir="rtl"] .desk-sidebar .sidebar-item.selected,
html[dir="rtl"] .desk-sidebar .sidebar-item:hover,
html[dir="rtl"] .desk-sidebar .standard-sidebar-item.selected,
html[dir="rtl"] .desk-sidebar .standard-sidebar-item:hover {
  border-left: none !important;
  border-right: 3px solid var(--alqadi-gold) !important;
}

.desk-sidebar .sidebar-item.selected a,
.desk-sidebar .standard-sidebar-item.selected a {
  /* Keep selected readable on navy background (blue text was low-contrast). */
  color: var(--alqadi-warm-white) !important;
  font-weight: 700;
}

.desk-sidebar .sidebar-section-head,
.desk-sidebar .sidebar-label {
  color: var(--alqadi-gold-light) !important;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

/* Icons inside desk sidebar */
.desk-sidebar .sidebar-item-icon svg,
.desk-sidebar .standard-sidebar-item svg {
  fill: var(--alqadi-gold-light) !important;
  stroke: none !important;
  opacity: 0.85;
}
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-icon svg {
  fill: var(--alqadi-gold-light) !important;
  opacity: 1;
}

/* body-sidebar: Frappe v16 variant of desk sidebar (workspace context only) */
#page-Workspaces .body-sidebar {
  background-color: var(--alqadi-sidebar-bg) !important;
  border-right: 1px solid rgba(43, 108, 176, 0.12);
  color: var(--alqadi-warm-white) !important;
  padding: 8px 6px;
}

html[dir="rtl"] #page-Workspaces .body-sidebar {
  border-right: none;
  border-left: 1px solid rgba(43, 108, 176, 0.12);
}

#page-Workspaces .body-sidebar .standard-sidebar-item,
#page-Workspaces .body-sidebar .standard-sidebar-item a,
#page-Workspaces .body-sidebar .sidebar-item-label {
  color: var(--alqadi-warm-white) !important;
}

#page-Workspaces .body-sidebar .standard-sidebar-item.selected,
#page-Workspaces .body-sidebar .standard-sidebar-item:hover {
  background-color: var(--alqadi-sidebar-hover) !important;
  border-left: 3px solid var(--alqadi-gold) !important;
  border-radius: 10px;
}

html[dir="rtl"] #page-Workspaces .body-sidebar .standard-sidebar-item.selected,
html[dir="rtl"] #page-Workspaces .body-sidebar .standard-sidebar-item:hover {
  border-left: none !important;
  border-right: 3px solid var(--alqadi-gold) !important;
}

#page-Workspaces .body-sidebar .standard-sidebar-item.selected a {
  color: var(--alqadi-warm-white) !important;
  font-weight: 700;
}

#page-Workspaces .body-sidebar .sidebar-item-icon svg {
  fill: var(--alqadi-gold-light) !important;
  stroke: none !important;
}


/* ═══════════════════════════════════════════════════════
   3.  FORM SIDEBAR (.layout-side-section)
       Left panel in form view — stays white/light so icons
       and metadata (Created By, Tags, Attachments) are readable.
   ═══════════════════════════════════════════════════════ */

.layout-side-section {
  background-color: var(--alqadi-content-surface);
  border-right: 1px solid var(--alqadi-table-border);
}

html[dir="rtl"] .layout-side-section {
  border-right: none;
  border-left: 1px solid var(--alqadi-table-border);
}

/* Sidebar action links (Attachments, Tags, Sharing) */
.layout-side-section .sidebar-label,
.layout-side-section .attachment-label,
.layout-side-section .form-sidebar-stats {
  color: var(--alqadi-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.layout-side-section .add-attachment,
.layout-side-section .sidebar-action {
  color: var(--alqadi-gold-dark);
}
.layout-side-section .add-attachment:hover,
.layout-side-section .sidebar-action:hover {
  color: var(--alqadi-gold);
}

/* Icons in form sidebar — dark so they're visible on white */
.layout-side-section svg {
  fill: var(--alqadi-charcoal);
  stroke: none;
}
.layout-side-section .icon-sm svg,
.layout-side-section .sidebar-item svg {
  fill: var(--alqadi-charcoal) !important;
  stroke: none !important;
}

/* "Created By / Modified By" metadata text */
.layout-side-section .document-seen-by,
.layout-side-section .form-assignments,
.layout-side-section .sidebar-stats-row {
  color: var(--alqadi-body-text);
}


/* ═══════════════════════════════════════════════════════
   4.  PRIMARY BUTTONS — Gold with dark text
   ═══════════════════════════════════════════════════════ */

.btn-primary,
.btn-primary-dark,
.btn.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-color: rgba(255, 255, 255, 0.65);
  background-color: var(--alqadi-gold) !important;
  border-color: var(--alqadi-gold) !important;
  color: #ffffff !important;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--alqadi-gold-dark) !important;
  border-color: var(--alqadi-gold-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(43, 108, 176, 0.35) !important;
}

/* Primary button icons (often stroke-based SVG) */
.btn-primary svg,
.btn.btn-primary svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: inherit !important;
}

/* Secondary / outline button */
.btn-default,
.btn-secondary {
  border-color: var(--alqadi-input-border) !important;
  color: var(--alqadi-charcoal) !important;
  background-color: #fff !important;
}
.btn-default:hover,
.btn-secondary:hover {
  border-color: var(--alqadi-gold) !important;
  color: var(--alqadi-gold-dark) !important;
  background-color: var(--alqadi-gold-glow) !important;
}

/* Danger button */
.btn-danger {
  background-color: var(--alqadi-danger) !important;
  border-color: var(--alqadi-danger) !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════
   5.  PAGE & LAYOUT — Warm background, white cards
   ═══════════════════════════════════════════════════════ */

body,
.main-section,
.page-container {
  background-color: var(--alqadi-page-bg) !important;
  color: var(--alqadi-body-text);
}

.frappe-control .ql-editor,
.ql-snow .ql-editor {
  background-color: #ffffff !important;
  color: var(--alqadi-body-text) !important;
}

/* Form / main content cards */
.layout-main-section,
.form-layout,
.layout-main,
.form-page {
  background-color: var(--alqadi-content-surface) !important;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

/* Form section head */
.form-section .section-head,
.form-dashboard-section .section-head {
  color: var(--alqadi-charcoal);
  border-bottom: 1px solid var(--alqadi-table-border);
  font-weight: 600;
}

/* Page head area */
.page-head {
  background-color: var(--alqadi-content-surface);
  border-bottom: 1px solid var(--alqadi-table-border);
}

.page-head .page-title .title-text {
  color: var(--alqadi-black);
  font-weight: 700;
}

/* Remove default Frappe page-head gray */
.page-head .page-actions .btn-group,
.page-head .page-actions {
  gap: 6px;
}


/* ═══════════════════════════════════════════════════════
   6.  FORM TABS — Gold underline on active
   ═══════════════════════════════════════════════════════ */

.nav.form-tabs .nav-item .nav-link {
  color: var(--alqadi-text-muted);
  border-bottom: 2px solid transparent;
  padding-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 0.18s, border-color 0.18s;
}

.nav.form-tabs .nav-item .nav-link:hover {
  color: var(--alqadi-gold-dark);
  border-bottom-color: var(--alqadi-gold-light);
}

.nav.form-tabs .nav-item .nav-link.active {
  color: var(--alqadi-gold-dark) !important;
  border-bottom: 2px solid var(--alqadi-gold) !important;
  background: transparent;
  font-weight: 700;
}

/* Frappe v16 pill-tabs variant */
.form-tabs-list .nav-link.active,
.frappe-tab-link.active {
  background-color: var(--alqadi-gold-glow) !important;
  color: var(--alqadi-gold-dark) !important;
  border-color: var(--alqadi-gold) !important;
}


/* ═══════════════════════════════════════════════════════
   7.  FORM INPUTS — Clearly visible borders, gold focus
   ═══════════════════════════════════════════════════════ */

label.control-label,
.frappe-control .control-label {
  color: var(--alqadi-label-color) !important;
  font-size: 0.78rem;
  font-weight: 600;
}

.frappe-control input:not([type="checkbox"]):not([type="radio"]),
.frappe-control textarea,
.frappe-control select,
.form-control,
.input-with-feedback {
  border: 1px solid var(--alqadi-input-border) !important;
  background-color: var(--alqadi-content-surface) !important;
  color: var(--alqadi-body-text) !important;
  border-radius: 6px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.frappe-control input:not([type="checkbox"]):not([type="radio"]):hover,
.frappe-control textarea:hover,
.frappe-control select:hover,
.form-control:hover {
  border-color: var(--alqadi-gold-light) !important;
}

.frappe-control input:not([type="checkbox"]):not([type="radio"]):focus,
.frappe-control textarea:focus,
.frappe-control select:focus,
.form-control:focus {
  border-color: var(--alqadi-gold) !important;
  box-shadow: 0 0 0 3px var(--alqadi-gold-glow) !important;
  outline: none;
}

/* Read-only / disabled inputs */
.frappe-control input[readonly],
.frappe-control textarea[readonly],
.form-control[readonly] {
  background-color: #FAF8F0 !important;
  border-color: #E5DFC8 !important;
  color: #6B6559 !important;
}

/* Placeholder text */
.frappe-control input::placeholder,
.frappe-control textarea::placeholder {
  color: #64748b !important;
}

/* Select arrow (link fields) */
.frappe-control .link-btn {
  color: var(--alqadi-gold-dark);
}
.frappe-control .link-btn:hover {
  color: var(--alqadi-gold);
}

/* v16: inputs in grids, filters, modals, or Awesomplete may sit outside .frappe-control */
.layout-main-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
.layout-main-section textarea,
.layout-main-section select,
.form-layout input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
.form-layout textarea,
.form-layout select,
.modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.modal-body textarea,
.modal-body select,
.grid-body input:not([type="checkbox"]):not([type="radio"]),
.grid-body textarea,
.grid-body select,
.list-filter input.form-control,
.filter-input,
.awesomplete > input {
  color: var(--alqadi-body-text) !important;
  background-color: #ffffff !important;
  border-color: var(--alqadi-input-border) !important;
}

/* Navbar search must stay light-on-blue (do not inherit main form text color) */
.navbar input.form-control,
.navbar .search-bar input,
.navbar .search-bar .form-control {
  color: var(--alqadi-warm-white) !important;
  background-color: rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Field row icons (link picker, calendar, attach) — readable on white, not navbar white */
.main-section .control-input-wrapper .es-icon,
.form-layout .control-input-wrapper .es-icon,
.layout-main-section .frappe-control .es-icon {
  color: var(--alqadi-charcoal) !important;
}
.main-section .control-input-wrapper .es-icon svg,
.form-layout .control-input-wrapper .es-icon svg,
.layout-main-section .frappe-control .es-icon svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* Page head / toolbar: keep action icons dark on white bar */
.page-head .es-icon svg,
.page-actions .es-icon svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: var(--alqadi-charcoal) !important;
}


/* ═══════════════════════════════════════════════════════
   8.  CHECKBOXES & RADIOS — Gold accent
   ═══════════════════════════════════════════════════════ */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--alqadi-gold) !important;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Frappe's custom checkbox widget */
.checkbox-options-grid input[type="checkbox"],
.frappe-control input[type="checkbox"] {
  accent-color: var(--alqadi-gold) !important;
}

.frappe-control .toggle-switch input:checked + .slider {
  background-color: var(--alqadi-gold) !important;
}


/* ═══════════════════════════════════════════════════════
   9.  WORKSPACE — Cards, shortcuts, number widgets
   ═══════════════════════════════════════════════════════ */

.workspace-title {
  color: var(--alqadi-black) !important;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.number-card .number-card-value,
.number-card h4,
.widget.number-widget-box .widget-value {
  color: var(--alqadi-gold-dark) !important;
  font-weight: 700;
}

.shortcut-widget-box {
  border: 1px solid rgba(43, 108, 176, 0.20) !important;
  border-radius: 8px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  background: var(--alqadi-content-surface);
}
.shortcut-widget-box:hover {
  border-color: var(--alqadi-gold) !important;
  box-shadow: 0 4px 18px var(--alqadi-gold-glow);
  transform: translateY(-2px);
}

.widget.links-widget-box,
.widget.onboarding-widget-box {
  background: var(--alqadi-content-surface);
  border: 1px solid rgba(43, 108, 176, 0.15);
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.widget.number-widget-box,
.widget.dashboard-widget-box {
  background-color: var(--alqadi-content-surface);
  border: 1px solid var(--alqadi-table-border);
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}

.widget .widget-head .widget-title {
  color: var(--alqadi-black);
  font-weight: 600;
}

/* Links widget item hover */
.links-widget-box .link-item:hover {
  background-color: var(--alqadi-gold-glow);
  color: var(--alqadi-gold-dark);
  border-radius: 6px;
}

/* ── Desk: workspace page density + keyboard focus (pairs with alqadi_desk.js) ── */
#page-Workspaces .layout-main-section,
.workspace-container .layout-main-section {
  padding-bottom: 2rem;
}

.shortcut-widget-box:focus-visible {
  outline: 2px solid var(--alqadi-gold);
  outline-offset: 2px;
}

.links-widget-box .link-item:focus-visible {
  outline: 2px solid var(--alqadi-gold);
  outline-offset: 1px;
}

/* Raheq company: subtle accent on workspace shortcut strip (boot → body[data-alqadi-company]) */
body.alqadi-desk-company-raheq #page-Workspaces .shortcut-widget-box {
  border-color: rgba(56, 161, 105, 0.28) !important;
}

body.alqadi-desk-company-raheq #page-Workspaces .shortcut-widget-box:hover {
  border-color: var(--alqadi-success) !important;
  box-shadow: 0 4px 18px rgba(56, 161, 105, 0.18);
}


/* ═══════════════════════════════════════════════════════
   10. LIST VIEW — Branded headers and row highlights
   ═══════════════════════════════════════════════════════ */

.list-row-head,
.level.list-row-head {
  background-color: var(--alqadi-table-head-bg) !important;
  border-bottom: 2px solid var(--alqadi-table-border);
}

.list-row-head .list-header-subject,
.list-row-head .level-item,
.list-row-head .list-row-col,
.level.list-row-head .level-left,
.level.list-row-head .level-right {
  color: var(--alqadi-table-head-color) !important;
  font-weight: 600;
}

.list-row:hover {
  background-color: var(--alqadi-table-row-hover) !important;
}

.list-row .list-subject .level-item a,
.list-row .doctype-list .list-id a {
  color: var(--alqadi-gold-dark);
  font-weight: 500;
}
.list-row .list-subject .level-item a:hover {
  color: var(--alqadi-gold);
}

/* Checkbox in list row */
.list-row-checkbox input[type="checkbox"] {
  accent-color: var(--alqadi-gold) !important;
}

/* List toolbar buttons */
.list-filters-wrap .filter-button,
.list-group-by-fields .btn {
  border-color: var(--alqadi-input-border) !important;
}


/* ═══════════════════════════════════════════════════════
   11. INDICATOR PILLS — Status colors with proper contrast
   ═══════════════════════════════════════════════════════ */

.indicator-pill {
  font-weight: 500;
  font-size: 0.75rem;
  border-radius: 12px;
  padding: 2px 10px;
}

.indicator-pill.green,
.indicator-pill[data-label="Submitted"],
.indicator-pill[data-label="Active"] {
  background: rgba(56, 161, 105, 0.15) !important;
  color: #276749 !important;
  border: 1px solid rgba(56, 161, 105, 0.3);
}
.indicator-pill.red,
.indicator-pill[data-label="Cancelled"] {
  background: rgba(229, 62, 62, 0.12) !important;
  color: #9B2C2C !important;
  border: 1px solid rgba(229, 62, 62, 0.25);
}
.indicator-pill.yellow,
.indicator-pill[data-label="Draft"] {
  background: rgba(214, 158, 46, 0.15) !important;
  color: #744210 !important;
  border: 1px solid rgba(214, 158, 46, 0.3);
}
.indicator-pill.blue {
  background: rgba(59, 130, 246, 0.12) !important;
  color: #1E40AF !important;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.indicator-pill.orange {
  background: rgba(237, 137, 54, 0.15) !important;
  color: #7B341E !important;
  border: 1px solid rgba(237, 137, 54, 0.3);
}
.indicator-pill.gray,
.indicator-pill.grey {
  background: rgba(107, 114, 128, 0.12) !important;
  color: #374151 !important;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Dot indicators (used in sidebar, timeline) */
.indicator.green { background: var(--alqadi-success) !important; }
.indicator.red    { background: var(--alqadi-danger) !important; }
.indicator.yellow { background: var(--alqadi-warning) !important; }
.indicator.blue   { background: var(--alqadi-info) !important; }


/* ═══════════════════════════════════════════════════════
   12. DATA TABLE — Grid lines & branded header
   ═══════════════════════════════════════════════════════ */

.datatable .dt-header .dt-cell--header {
  background-color: var(--alqadi-table-head-bg) !important;
  color: var(--alqadi-table-head-color) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--alqadi-table-border) !important;
}

.datatable .dt-row:hover .dt-cell {
  background-color: var(--alqadi-table-row-hover) !important;
}

.datatable .dt-cell {
  border-right: 1px solid rgba(43, 108, 176, 0.10) !important;
  color: var(--alqadi-body-text);
}

/* Child table (inline editable) */
.grid-row.grid-row-check,
.grid-heading-row {
  background-color: var(--alqadi-table-head-bg) !important;
}
.grid-heading-row .col.grid-static-col {
  color: var(--alqadi-table-head-color) !important;
  font-weight: 600;
}

.grid-row:hover .data-row {
  background-color: var(--alqadi-table-row-hover) !important;
}

.add-btn.btn,
.grid-add-row {
  color: var(--alqadi-gold-dark);
  border-color: var(--alqadi-gold-light) !important;
}
.add-btn.btn:hover,
.grid-add-row:hover {
  color: var(--alqadi-gold);
  background-color: var(--alqadi-gold-glow) !important;
}


/* ═══════════════════════════════════════════════════════
   13. TIMELINE & COMMUNICATION — Right panel
   ═══════════════════════════════════════════════════════ */

/* Override "Frappe Framework" label in form right panel */
.form-sidebar .form-sidebar-items .sidebar-label,
.form-sidebar .list-unstyled.sidebar-menu > li > span.sidebar-label {
  color: var(--alqadi-gold-dark) !important;
  font-weight: 600;
}

.form-sidebar .sidebar-menu li a,
.form-sidebar .list-item a {
  color: var(--alqadi-body-text);
  transition: color 0.15s;
}
.form-sidebar .sidebar-menu li a:hover,
.form-sidebar .list-item a:hover {
  color: var(--alqadi-gold-dark);
}

/* Timeline dot */
.timeline-item .timeline-dot {
  background-color: var(--alqadi-gold) !important;
  border-color: var(--alqadi-gold) !important;
}

/* Comment box */
.comment-box .comment-input-wrapper {
  border: 1px solid var(--alqadi-input-border);
  border-radius: 8px;
}

/* "Send Email" button in timeline */
.timeline-actions .btn-xs {
  border-color: var(--alqadi-input-border);
  color: var(--alqadi-charcoal);
}
.timeline-actions .btn-xs:hover {
  border-color: var(--alqadi-gold);
  color: var(--alqadi-gold-dark);
}


/* ═══════════════════════════════════════════════════════
   14. MODALS & DIALOGS
   ═══════════════════════════════════════════════════════ */

.modal-content {
  border-radius: 12px;
  border: 1px solid rgba(43, 108, 176, 0.18);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.modal-header {
  border-bottom: 1px solid var(--alqadi-gold-light);
  background: linear-gradient(135deg, #FFFDF5 0%, #FFF8E7 100%);
  border-radius: 12px 12px 0 0;
}

.modal-title {
  color: var(--alqadi-black);
  font-weight: 700;
}

.modal-footer {
  border-top: 1px solid var(--alqadi-table-border);
  border-radius: 0 0 12px 12px;
}


/* ═══════════════════════════════════════════════════════
   15. DROPDOWNS
   ═══════════════════════════════════════════════════════ */

.dropdown-menu {
  border: 1px solid rgba(43, 108, 176, 0.18);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 4px;
}

.dropdown-item {
  border-radius: 5px;
  color: var(--alqadi-body-text);
  transition: background 0.15s;
}

.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:focus {
  background-color: var(--alqadi-gold-glow) !important;
  color: var(--alqadi-gold-dark) !important;
}

.dropdown-divider {
  border-color: var(--alqadi-table-border);
}


/* ═══════════════════════════════════════════════════════
   16. AWESOMEBAR (Command Palette) — Dark themed
   ═══════════════════════════════════════════════════════ */

.awesomebar-modal .modal-content,
.command-palette .modal-content {
  background: var(--alqadi-charcoal) !important;
  border: 1px solid var(--alqadi-gold) !important;
}

.awesomebar-modal .modal-header,
.command-palette .modal-header {
  background: var(--alqadi-black) !important;
  border-bottom-color: rgba(43, 108, 176, 0.3);
}

.awesomebar-modal input,
.command-palette input {
  background: var(--alqadi-black) !important;
  color: var(--alqadi-warm-white) !important;
  border: 1px solid rgba(43, 108, 176, 0.35) !important;
}

.awesomebar-modal .awesomebar-result,
.command-palette .result-item {
  color: var(--alqadi-warm-white);
}
.awesomebar-modal .awesomebar-result:hover,
.command-palette .result-item:hover {
  background: var(--alqadi-sidebar-hover) !important;
}

.awesomebar-modal .result-category {
  color: var(--alqadi-gold-light);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════
   17. LOGIN PAGE
   ═══════════════════════════════════════════════════════ */

#page-login,
.login-content {
  background-color: var(--alqadi-page-bg) !important;
}

.login-content input[type="text"],
.login-content input[type="password"],
.login-content input[type="email"],
.login-content .form-control {
  color: var(--alqadi-body-text) !important;
  background-color: #ffffff !important;
  border-color: var(--alqadi-input-border) !important;
}

.login-content .for-login .page-card {
  border: 1px solid rgba(43, 108, 176, 0.22);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
  background: #fff;
}

.login-content .for-login .page-card-head h4 {
  color: var(--alqadi-gold-dark) !important;
  font-weight: 700;
}

.login-content .sign-up-message {
  display: none !important;
}

.login-content .btn-login,
.login-content .btn-primary-dark {
  background-color: var(--alqadi-gold) !important;
  border-color: var(--alqadi-gold) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 1rem;
}
.login-content .btn-login:hover {
  background-color: var(--alqadi-gold-dark) !important;
  box-shadow: 0 4px 18px rgba(43, 108, 176, 0.4);
}


/* ═══════════════════════════════════════════════════════
   18. HIDE FRAPPE / ERPNEXT BRANDING
   ═══════════════════════════════════════════════════════ */

.footer-powered-by,
[data-label="Powered by Frappe"],
.frappe-footer,
.website-footer .footer-powered {
  display: none !important;
}

.help-links .frappe-cloud-link,
.help-links .frappe-docs-link,
a[href*="frappe.io/docs"],
a[href*="discuss.frappe.io"],
a[href*="frappecloud.com"],
a[href*="github.com/frappe"],
a[href*="frappeframework.com"] {
  display: none !important;
}

.setup-wizard-slide .erpnext-logo,
.desk-page .onboarding-widget .erpnext-text {
  display: none !important;
}

.navbar-brand .app-name::after { content: none !important; }

.update-notification-pill {
  display: none !important;
}

.dropdown-menu a[href*="docs.erpnext.com"],
.dropdown-menu a[href*="erpnext.com/pricing"],
.dropdown-menu a[href*="frappe.school"] {
  display: none !important;
}

/* "Frappe Framework" / ERPNext app label in form right sidebar header */
.form-sidebar .frappe-framework-label,
.form-sidebar .sidebar-app-name,
[data-app-name="frappe"] .sidebar-app-header,
[data-app-name="erpnext"] .sidebar-app-header {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════
   19. SCROLLBAR — Subtle branded scrollbar
   ═══════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--alqadi-page-bg); }
::-webkit-scrollbar-thumb {
  background: #D4C89A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--alqadi-gold); }


/* ═══════════════════════════════════════════════════════
   20. BADGES & TAGS
   ═══════════════════════════════════════════════════════ */

.badge.badge-primary,
.tag-pills .badge {
  background-color: var(--alqadi-gold-glow) !important;
  color: var(--alqadi-gold-dark) !important;
  border: 1px solid rgba(43, 108, 176, 0.3);
  font-weight: 500;
}

.tag-editor .tag-input-area {
  border-color: var(--alqadi-input-border) !important;
}


/* ═══════════════════════════════════════════════════════
   21. ALERTS / TOASTS
   ═══════════════════════════════════════════════════════ */

.alert-success,
.alert.green { border-left: 4px solid var(--alqadi-success); }
.alert-danger,
.alert.red   { border-left: 4px solid var(--alqadi-danger); }
.alert-warning,
.alert.yellow { border-left: 4px solid var(--alqadi-warning); }
.alert-info,
.alert.blue  { border-left: 4px solid var(--alqadi-info); }

.frappe-toast {
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
}


/* ═══════════════════════════════════════════════════════
   21b. MANUFACTURING — Work Order RM availability (work_order.js)
   ═══════════════════════════════════════════════════════ */

.alqadi-dash-rm-line {
  color: var(--alqadi-body-text);
}

.alqadi-dash-rm-ok {
  color: var(--alqadi-success);
  font-weight: 600;
}

.alqadi-dash-rm-na {
  color: var(--alqadi-danger);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   21c. MANUFACTURING — Raheq floor UX (headlines + coarse pointers)
   ═══════════════════════════════════════════════════════ */

.raheq-floor-wo-headline,
.raheq-floor-se-headline,
.raheq-floor-jc-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-size: 1rem;
  line-height: 1.35;
}

.raheq-floor-wo-headline .raheq-floor-wo-headline-sep {
  color: var(--alqadi-text-muted);
  font-weight: 400;
}

.raheq-floor-wo-headline .raheq-floor-wo-headline-qty {
  color: var(--alqadi-body-text);
}

.raheq-floor-se-wo {
  color: var(--alqadi-body-text);
}

/* ═══════════════════════════════════════════════════════
   21b. BATCH GENEALOGY — slide rail (Q3 solidify)
   ═══════════════════════════════════════════════════════ */

.raheq-genealogy-slide-wrap {
  max-height: min(70vh, 640px);
  overflow: auto;
}

.raheq-genealogy-rail {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.raheq-genealogy-slide {
  flex: 1 1 280px;
  min-width: 240px;
  border: 1px solid var(--alqadi-table-border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: var(--alqadi-content-surface);
  box-shadow: 0 1px 3px rgba(26, 45, 66, 0.08);
}

.raheq-genealogy-slide-title {
  font-weight: 600;
  color: var(--alqadi-gold-dark);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--alqadi-table-border);
}

.raheq-genealogy-tbl {
  font-size: 0.85rem;
  margin-bottom: 0;
}

.raheq-genealogy-tbl th {
  background: var(--alqadi-table-head-bg);
  color: var(--alqadi-table-head-color);
}

.raheq-genealogy-tbl td,
.raheq-genealogy-tbl th {
  padding: 0.35rem 0.45rem;
  vertical-align: top;
}

.raheq-genealogy-summary {
  line-height: 1.5;
}

/* Larger tap targets for Raheq custom actions (tablets / gloves) */
@media (pointer: coarse) {
  .page-actions .dropdown-menu .dropdown-item {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}


/* ═══════════════════════════════════════════════════════
   22. PRINT STYLES — Clean white for invoices/reports
   ═══════════════════════════════════════════════════════ */

@media print {
  .navbar,
  .desk-sidebar,
  .body-sidebar,
  .layout-side-section,
  .page-head .page-actions,
  .footer-powered-by,
  .frappe-footer {
    display: none !important;
  }
  body, .layout-main-section { background: white !important; }
}


/* ═══════════════════════════════════════════════════════
   23. RESPONSIVE (Mobile)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1366px) {
  .page-head .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 1180px) {
}

@media (max-width: 768px) {
  .layout-main-section,
  .form-layout {
    border-radius: 6px;
  }

  .login-content .for-login .page-card {
    width: auto !important;
    max-width: 100%;
    margin-left: 12px;
    margin-right: 12px;
  }

  .shortcut-widget-box:hover {
    transform: none;
  }

}


/* ═══════════════════════════════════════════════════════
   24. DARK MODE — hardcoded light surfaces & accent contrast
       (tokens above fix most var() usages; these need explicit rules)
   ═══════════════════════════════════════════════════════ */

html[data-theme="dark"] .frappe-control .ql-editor,
html[data-theme="dark"] .ql-snow .ql-editor {
  background-color: var(--alqadi-content-surface) !important;
  color: var(--alqadi-body-text) !important;
}

html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-secondary {
  background-color: var(--alqadi-off-white) !important;
  color: var(--alqadi-body-text) !important;
  border-color: var(--alqadi-input-border) !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--alqadi-table-row-hover) !important;
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .modal-header {
  background: linear-gradient(135deg, #2a2f38 0%, #1e2128 100%);
  border-bottom-color: var(--alqadi-table-border);
}

html[data-theme="dark"] .modal-content {
  background-color: var(--alqadi-content-surface);
  border-color: var(--alqadi-table-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:focus {
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .nav.form-tabs .nav-item .nav-link.active,
html[data-theme="dark"] .form-tabs-list .nav-link.active,
html[data-theme="dark"] .frappe-tab-link.active {
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .form-sidebar .form-sidebar-items .sidebar-label,
html[data-theme="dark"] .form-sidebar .list-unstyled.sidebar-menu > li > span.sidebar-label {
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .form-sidebar .sidebar-menu li a:hover,
html[data-theme="dark"] .form-sidebar .list-item a:hover {
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .timeline-actions .btn-xs {
  color: var(--alqadi-body-text);
}

html[data-theme="dark"] .timeline-actions .btn-xs:hover {
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .comment-box .comment-input-wrapper,
html[data-theme="dark"] .comment-input,
html[data-theme="dark"] .new-timeline-section {
  background-color: var(--alqadi-page-bg) !important;
  color: var(--alqadi-body-text);
}

html[data-theme="dark"] .login-content input[type="text"],
html[data-theme="dark"] .login-content input[type="password"],
html[data-theme="dark"] .login-content input[type="email"],
html[data-theme="dark"] .login-content .form-control {
  background-color: var(--alqadi-content-surface) !important;
}

html[data-theme="dark"] .login-content .for-login .page-card {
  background: var(--alqadi-content-surface) !important;
}

/* Awesomebar: --alqadi-black becomes light text in dark mode; keep inputs explicitly dark */
html[data-theme="dark"] .awesomebar-modal .modal-header,
html[data-theme="dark"] .command-palette .modal-header {
  background: #0d0f12 !important;
  border-bottom-color: rgba(43, 108, 176, 0.35) !important;
}

html[data-theme="dark"] .awesomebar-modal input,
html[data-theme="dark"] .command-palette input {
  background: #0d0f12 !important;
  color: #e8eaed !important;
}

html[data-theme="dark"] .awesomebar-modal .modal-content,
html[data-theme="dark"] .command-palette .modal-content {
  background: #14161a !important;
}

html[data-theme="dark"] .list-row .list-subject .level-item a,
html[data-theme="dark"] .list-row .doctype-list .list-id a {
  color: var(--alqadi-gold-light) !important;
}

html[data-theme="dark"] .add-btn.btn,
html[data-theme="dark"] .grid-add-row {
  color: var(--alqadi-gold-light) !important;
}