/*
 * Saraia Desk Skin — final CSS-only visual layer
 * ---------------------------------------------------------------------------
 * Saraia's own Desk visual identity, visually approved and promoted to
 * Production (nalyio.com). Developed and iterated on the disposable
 * `saraya_v16_wideforms` clone (clone.nalyio.com) through several rounds
 * (readability, section/toolbar/Workspace unification, hover-color
 * strength, and a final color-harmony pass); that clone remains a
 * temporary testing stack, not a source of truth -- this tracked file is.
 *
 * Scope: CSS ONLY. Zero JavaScript, zero MutationObserver, zero timers,
 * zero keyboard handlers, zero Grid/GridRow patches, zero Core edits, zero
 * behavioral change of any kind. Every rule below targets Frappe/ERPNext's
 * own existing markup and classes — nothing is invented, nothing is
 * restructured. Solvronix Desk (previously trialled on this same clone,
 * now fully rolled back via DB restore — zero Solvronix files/assets/
 * DocTypes remain installed) was consulted only as a visual reference for
 * color/spacing direction; no Solvronix source file, rule, or asset is
 * reused here. RTL uses CSS logical properties throughout (margin-inline,
 * border-inline, inset-inline) instead of left/right, so it holds up
 * unmodified in Saraia's native Arabic RTL layout rather than reading as
 * a mechanically-mirrored LTR theme.
 * ---------------------------------------------------------------------------
 */

:root {
  --sk-navy: #0F2747;
  --sk-navy-soft: #16335c;
  --sk-blue: #0289F7;
  --sk-blue-dark: #026fc7;
  --sk-blue-soft: #EEF7FF;
  --sk-blue-soft-2: #E3F1FE;
  --sk-orange: #FF8A00;
  /* Color-harmony pass: pulled toward muted terracotta, away from
     yellow/orange -- this is now the one and only warm accent (sidebar
     hover, section-heading marker, Workspace card-header line, and the
     dark end of row hover), so it reads as a single deliberate accent
     rather than "orange" competing with "peach" as two different warm
     hues. */
  --sk-orange-dark: #9F5A43;

  /* Design-system pass: page-header/toolbar strip + secondary toolbar
     button surfaces, and a muted navy for those buttons' default
     icon/text color (replaces Core's flat #383838) -- gives secondary
     chrome a branded identity without making it loud.
     Color-harmony pass: the warm beige/yellow cast on these two large
     surfaces read as visually random rather than intentional, so both are
     now cool neutrals matching the rest of the "surface" family (close to
     --sk-bg/--sk-border-soft) -- warmth is reserved for the one small
     accent (--sk-peach-hover / --sk-orange-dark), not spread across large
     backgrounds. --sk-peach-hover (row hover) is muted terracotta-peach,
     not yellow-beige, and stays clearly distinct from --sk-blue-soft-2
     (selected/active), which is unchanged. */
  --sk-warm-bg: #F7F9FC;
  --sk-surface-warm: #EEF2F6;
  --sk-icon-muted: #4C5C74;
  --sk-peach-hover: #E6C2B3;

  --sk-bg: #F7F9FC;
  --sk-surface: #FFFFFF;
  --sk-border: #D8E1EB;
  --sk-border-soft: #E6ECF3;

  --sk-text: #263348;
  --sk-text-soft: #64748B;
  --sk-text-muted: #8A96A6;

  --sk-danger: #DC3545;
  --sk-success: #16A34A;

  --sk-radius-sm: 6px;
  --sk-radius-md: 10px;
  --sk-radius-lg: 14px;
  --sk-shadow-sm: 0 1px 2px rgba(15, 39, 71, 0.06);
  --sk-shadow-md: 0 4px 16px rgba(15, 39, 71, 0.10);

  /* Locally-available system stack only — no external/Google fonts. Segoe
     UI / Tahoma give solid Arabic coverage on Windows; the rest are the
     standard cross-platform fallbacks. */
  --sk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma",
    "Helvetica Neue", Arial, sans-serif;
}

/* ── Typography base ─────────────────────────────────────────────────── */
body,
.form-control,
.btn,
.navbar,
.modal-content {
  font-family: var(--sk-font);
  color: var(--sk-text);
}
body {
  -webkit-font-smoothing: antialiased;
}

/* ── Page / form background ─────────────────────────────────────────── */
.page-container,
.container.page-body {
  background: var(--sk-bg);
}
.form-page,
.form-layout,
.layout-main {
  background: transparent;
}

/* ── Navbar / top bar — dark navy, branded ──────────────────────────────
   Two different Frappe v16 chrome shapes are targeted here on purpose:
   (a) a classic horizontal `header.desktop-navbar` (narrower viewports),
   (b) this build's actual desktop rendering at 1280px+, where search/
       notifications/avatar live inside the vertical icon-rail
       `.body-sidebar` instead of a separate top strip. Styling both
       means the "dark branded nav chrome" requirement holds regardless
       of which one a given viewport renders -- no JS, pure CSS. */
header.desktop-navbar,
.navbar.navbar-container,
.body-sidebar {
  background: var(--sk-navy) !important;
  border-block-end: 1px solid var(--sk-navy-soft);
  box-shadow: var(--sk-shadow-sm);
}
.body-sidebar-top,
.body-sidebar-bottom,
.sidebar-resize-handle {
  border-color: var(--sk-navy-soft) !important;
}
header.desktop-navbar .navbar-nav .nav-link,
header.desktop-navbar a,
header.desktop-navbar .dropdown-toggle,
header.desktop-navbar input,
.body-sidebar a,
.body-sidebar button,
.body-sidebar svg {
  color: #E7EEF7;
}
header.desktop-navbar .navbar-nav .nav-link:hover,
header.desktop-navbar .dropdown-toggle:hover,
.body-sidebar a:hover,
.body-sidebar button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-radius: var(--sk-radius-sm);
}
header.desktop-navbar input.form-control,
.body-sidebar input.form-control,
.navbar-search-bar input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
}
header.desktop-navbar input.form-control::placeholder,
.body-sidebar input.form-control::placeholder {
  color: #AFC0D6;
}
header.desktop-navbar input.form-control:focus,
.body-sidebar input.form-control:focus {
  border-color: var(--sk-blue);
  box-shadow: 0 0 0 3px rgba(2, 137, 247, 0.25);
}
header.desktop-navbar svg,
header.desktop-navbar .icon {
  color: #C9D6E8;
}
/* Company/app switcher header at the very top of the rail */
.body-sidebar .sidebar-header {
  color: #FFFFFF;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}

/* Page header / breadcrumb strip (below navbar, still light) -- warm-white
   instead of plain white so this strip reads as an intentional Saraia
   surface rather than default ERPNext chrome. */
.page-head {
  background: var(--sk-warm-bg);
  border-block-end: 1px solid var(--sk-border-soft);
}
.page-head .title-text,
.page-title .title-text {
  color: var(--sk-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-head .breadcrumb,
.menu-btn-group-label,
.breadcrumb-container {
  color: var(--sk-text-muted);
  font-size: 12.5px;
}
.page-head .breadcrumb a,
.breadcrumb-container a {
  color: var(--sk-text-soft);
}
.page-head .breadcrumb a:hover {
  color: var(--sk-blue-dark);
}
/* Secondary toolbar controls (the "..." menu, refresh, sort, saved-filter,
   filter-count badge -- all render as Core's `.btn.btn-default`) and the
   dropdown menu items opened from them (`.grey-link`, e.g. "عرض التقرير").
   Default: warm-neutral surface + muted navy (identity, still clearly
   "secondary" vs the blue primary button). Hover/open: blue, matching the
   "primary action = blue" rule -- so blue still reads as one consistent
   interactive signal, not decoration. Matches Core's own `.btn.btn-default`
   (2 classes) so this wins without !important. */
.btn.btn-default,
.grey-link {
  background-color: var(--sk-surface-warm);
  color: var(--sk-icon-muted);
  border-color: var(--sk-border);
}
.btn.btn-default:hover,
.btn.btn-default:active,
.show > .btn.btn-default,
.grey-link:hover {
  background-color: var(--sk-blue-soft);
  color: var(--sk-blue-dark);
  border-color: var(--sk-blue-soft);
}

/* Status pills (Unsaved / Draft / etc.) */
.indicator-pill {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.01em;
}
.indicator-pill.orange {
  background: #FFF3E0;
  color: var(--sk-orange);
}
.indicator-pill.green {
  background: #EAF7EE;
  color: var(--sk-success);
}
.indicator-pill.red {
  background: #FCEAEC;
  color: var(--sk-danger);
}
.indicator-pill.blue {
  background: var(--sk-blue-soft);
  color: var(--sk-blue-dark);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  letter-spacing: 0;
}
/* Native v16 buttons are styled via `.btn.btn-primary` (2-class chain,
   sometimes with a CSS-variable background) which beats a flat single-class
   rule on specificity regardless of source order -- match the chain and
   add !important on color only, scoped to this one button family. */
.btn.btn-primary,
.btn-primary {
  background: var(--sk-blue) !important;
  border-color: var(--sk-blue) !important;
  border-radius: var(--sk-radius-sm);
  box-shadow: none;
  color: #FFFFFF !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--sk-blue-dark) !important;
  border-color: var(--sk-blue-dark) !important;
}
.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(2, 137, 247, 0.22);
}
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary.disabled {
  background: #B9DCFA !important;
  border-color: #B9DCFA !important;
}
.btn-default,
.btn-secondary {
  background: var(--sk-surface);
  border-color: var(--sk-border);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text);
}
.btn-default:hover,
.btn-secondary:hover {
  border-color: var(--sk-blue);
  color: var(--sk-blue-dark);
}
/* Sparing accent-orange use: page-level "Create/important secondary" CTAs */
.btn-warning,
.standard-actions .btn-primary.btn-warning {
  background: var(--sk-orange);
  border-color: var(--sk-orange);
  color: #FFFFFF;
}

/* ── Form tabs ───────────────────────────────────────────────────────── */
.form-tabs-list,
.form-tabs {
  border-block-end: 1px solid var(--sk-border-soft);
}
/* Native tab links carry their own text-color rule at equal-or-higher
   specificity (a CSS variable set closer in the cascade) -- !important
   scoped to just this tab-strip's text/border colors. */
.form-tabs .nav-link {
  color: var(--sk-text) !important;
  font-weight: 500;
  font-size: 13.5px;
  border: none !important;
  border-block-end: 2px solid transparent !important;
}
.form-tabs .nav-link:hover {
  color: var(--sk-blue-dark) !important;
}
.form-tabs .nav-link.active {
  color: var(--sk-blue) !important;
  font-weight: 600;
  border-block-end: 2px solid var(--sk-blue) !important;
  background: transparent !important;
}

/* ── Inputs / Link / Select controls ────────────────────────────────── */
.frappe-control .control-label {
  color: var(--sk-text);
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  margin-block-end: 4px;
}
.frappe-control input.form-control,
.frappe-control textarea.form-control,
.frappe-control select.form-control,
.frappe-control .link-field input {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text);
  font-size: 13.5px;
}
.frappe-control input.form-control::placeholder {
  color: var(--sk-text-muted);
}
.frappe-control input.form-control:focus,
.frappe-control textarea.form-control:focus,
.frappe-control select.form-control:focus {
  border-color: var(--sk-blue);
  box-shadow: 0 0 0 3px rgba(2, 137, 247, 0.14);
}
.frappe-control input.form-control:disabled,
.frappe-control input.form-control[readonly],
.frappe-control .like-disabled-input {
  background: #F1F4F8;
  border-color: var(--sk-border-soft);
  color: var(--sk-text-soft);
}
.frappe-control .help-box,
.frappe-control small.text-muted {
  color: var(--sk-text-muted);
  font-size: 11.5px;
}
.frappe-control.has-error input.form-control,
.frappe-control.has-error textarea.form-control {
  border-color: var(--sk-danger);
}

/* ── Section headings ────────────────────────────────────────────────── */
/* Scoped to `.form-section` only, not bare `.section-head`. Core's
   `Section` class (frappe/form/section.js) reuses the exact same
   `.section-head` markup for the Form Dashboard's own sections too
   (`.form-dashboard-section .section-head`, e.g. the "النشاط"/Activity
   heading) -- a bare `div.section-head` fallback previously leaked both
   the dark text and, more visibly, the orange accent border into that
   unrelated region. Core's own color rule for `.section-head` is itself
   scoped `.form-section .section-head, .form-dashboard-section
   .section-head { color: var(--text-color) }` (2 classes) -- matching only
   `.form-section .section-head` here keeps our color winning for normal
   Form sections (equal specificity, later in the cascade) while leaving
   the Dashboard variant on Core's own (unrelated, untouched) styling. */
.form-section .section-head {
  color: var(--sk-text);
  font-weight: 600;
  font-size: 13.5px;
  padding-block: 10px;
  border-inline-start: 3px solid var(--sk-orange-dark);
  padding-inline-start: 10px;
  margin-block-end: 6px;
}
/* Native collapsed-section links already render as blue text with a
   chevron — strengthen weight/contrast, keep native click-to-expand.
   Scoped to `.form-section` (not bare `.section-head`): the Form
   Dashboard's own sections (`.form-dashboard-section .section-head`, e.g.
   "النشاط") structurally contain the same `.collapse-indicator` markup, so
   an unscoped rule would reach that unrelated region too. Live-checked:
   currently inert either way (Core's own more specific dashboard rule
   already wins there), but scoped to match intent regardless. */
.form-section .section-head a,
.form-section .section-head .collapse-indicator {
  color: var(--sk-blue-dark);
  font-weight: 600;
}
.form-section .section-head a:hover {
  color: var(--sk-blue);
}
.form-column {
  padding-inline-end: 20px;
}

/* ── Child tables / grids — style only, zero structural change ────────── */
.grid-heading-row {
  background: var(--sk-blue-soft-2);
  border-radius: var(--sk-radius-sm) var(--sk-radius-sm) 0 0;
}
.grid-heading-row .grid-static-col .static-area,
.grid-heading-row .row {
  color: var(--sk-navy);
  font-weight: 600;
  font-size: 11.5px;
}
.grid-body .data-row {
  border-block-end: 1px solid var(--sk-border-soft);
}
.grid-body .grid-row:hover {
  background: var(--sk-peach-hover);
}
.grid-body .data-row.row-selected,
.grid-body .data-row.selected {
  background: var(--sk-blue-soft-2);
}
.grid-empty,
.grid-body .grid-row-empty {
  color: var(--sk-text-muted);
}
.grid-footer .btn-open-row,
.grid-footer .grid-add-row a {
  color: var(--sk-blue-dark);
  font-weight: 500;
}
.grid-footer .grid-add-row a:hover {
  color: var(--sk-blue);
}
/* Native inline row editor (.form-in-grid) — cosmetic only */
.form-in-grid,
.grid-row-open .form-in-grid {
  background: var(--sk-surface);
  border-block-start: 2px solid var(--sk-blue);
}
.grid-form-heading {
  background: var(--sk-blue-soft-2);
  color: var(--sk-navy);
  font-weight: 600;
}

/* ── List view ───────────────────────────────────────────────────────── */
.list-row-container:hover,
.list-row:hover {
  background: var(--sk-peach-hover);
}
.list-row-container.active-list-row {
  background: var(--sk-blue-soft-2);
}
.list-sidebar .list-link.active a,
.list-sidebar .sidebar-item.selected {
  color: var(--sk-blue-dark);
  font-weight: 600;
}
.list-sidebar .list-link.active {
  border-inline-start: 2px solid var(--sk-blue);
  background: var(--sk-blue-soft);
  border-radius: 0 var(--sk-radius-sm) var(--sk-radius-sm) 0;
}
.list-row .level-item.bold,
.list-row-col.ellipsis strong {
  color: var(--sk-text);
}
/* The primary row title is an <a> inside `.list-subject`; Core sets
   `.list-row-col a { color: var(--text-muted) }` globally (any link in any
   list column), so the title link's own inherited color gets overridden
   back to muted gray unless re-declared here. Scoped to `.list-subject`
   only -- secondary links in other list columns keep Core's muted style. */
.list-row-col.list-subject a {
  color: var(--sk-text);
}

/* Report / datatable views */
.report-wrapper .dt-scrollable,
.datatable .dt-header,
.dt-header .dt-cell--header {
  background: var(--sk-blue-soft-2);
}
.datatable .dt-cell--header .dt-cell__content {
  color: var(--sk-navy);
  font-weight: 600;
  font-size: 11.5px;
}
.datatable .dt-row:hover {
  background: var(--sk-peach-hover);
}
.datatable .dt-row--highlight,
.datatable .dt-cell--highlight {
  background: var(--sk-blue-soft-2);
}

/* ── Workspace / dashboard cards ─────────────────────────────────────── */
.widget.dashboard-widget-box,
.widget-group,
.widget-box {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.widget.dashboard-widget-box:hover,
.widget-box:hover {
  box-shadow: var(--sk-shadow-md);
  border-color: var(--sk-blue);
}
.widget .widget-head,
.widget-group .widget-head {
  background: var(--sk-blue-soft-2);
  border-radius: var(--sk-radius-md) var(--sk-radius-md) 0 0;
  border-block-end: 2px solid var(--sk-orange-dark);
}
/* Core's real selector is `.widget .widget-head .widget-label .widget-title`
   (an extra `.widget-label` ancestor) -- matching it exactly is required or
   Core's own `color: var(--text-color)` wins the cascade. Covers chart,
   links, and number-card widget headers alike (shared markup). */
.widget .widget-head .widget-label .widget-title,
.widget .widget-head .widget-title,
.widget-title {
  font-weight: 600;
  color: var(--sk-text);
  font-size: 13px;
}
.widget-group .widget-title a,
.widget .widget-title a {
  color: var(--sk-blue-dark);
}
/* Workspace "links" card items (e.g. "الأصناف والتسعير" quick-link list) --
   Core's `.widget.links-widget-box .link-item { color: var(--text-color) }`
   is a muted default; primary link/card titles read as important content. */
.widget.links-widget-box .link-item {
  color: var(--sk-text);
}
/* Workspace number-card widgets ("عدد الطلبات" etc.) -- Core's real
   selector is `.widget.number-widget-box .widget-body .widget-content
   .number` (5 classes); a shorter selector loses the cascade to Core's own
   `color: var(--text-color)`. `.number-card`/`.number-widget .number-value`
   kept below for compatibility with any other markup shape. */
.widget.number-widget-box .widget-body .widget-content .number,
.number-card .number-card-value,
.widget .number-widget .number-value {
  color: var(--sk-navy);
  font-weight: 700;
}

/* ── Apps / Home screen ──────────────────────────────────────────────────
   Structure/behavior untouched -- tile icons that already have a real
   app icon image are unaffected (no background is set on those). Only a
   subtle hover lift is added, reusing the same shadow token already used
   for Workspace card hover, so tiles feel intentional without any new
   visual effect being invented. */
.desktop-icon:hover .icon-container {
  box-shadow: var(--sk-shadow-md);
}
.desktop-icon:hover .icon-caption {
  color: var(--sk-blue-dark);
}

/* Workspace icon rail items -- dark navy background set above; blue
   accent marks the active module, matching the navbar's own active-nav
   treatment ("Saraia blue for active/current navigation"). */
.standard-sidebar-item {
  color: #C9D6E8;
}
.standard-sidebar-item .sidebar-item-icon,
.standard-sidebar-item .sidebar-item-label {
  color: #C9D6E8;
}
.standard-sidebar-item.active-sidebar {
  background: rgba(2, 137, 247, 0.18);
  border-inline-start: 3px solid var(--sk-blue);
}
.standard-sidebar-item.active-sidebar .sidebar-item-icon,
.standard-sidebar-item.active-sidebar .sidebar-item-label {
  color: #FFFFFF;
}
.standard-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.standard-sidebar-item:hover .sidebar-item-icon,
.standard-sidebar-item:hover .sidebar-item-label {
  color: #FFFFFF;
}
/* Core's own hover rule for this same element is
   `.body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover`
   -- the `.body-sidebar` ancestor prefix gives it higher specificity than
   the plain `:hover` rule above, so it wins and paints
   `var(--sidebar-hover-color)` (#f3f3f3, a light-theme value) over our dark
   navy sidebar, leaving the white item text unreadable. Matching Core's
   exact selector (same specificity, loaded after Core in the cascade)
   overrides it without !important. */
.body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover {
  background-color: var(--sk-orange-dark);
}

/* ── Dialogs ─────────────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--sk-radius-lg);
  border: none;
  box-shadow: 0 20px 60px rgba(15, 39, 71, 0.22);
  overflow: hidden;
}
/* Native modal-header carries its own background at equal-or-higher
   cascade priority -- !important scoped to just this header block. */
.modal-header {
  background: var(--sk-blue) !important;
  border-block-end: none;
  padding-block: 14px;
}
.modal-header .modal-title {
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 15px;
}
.modal-header .btn-modal-close,
.modal-header .btn-modal-close svg {
  color: #FFFFFF !important;
  opacity: 0.85;
}
.modal-header .btn-modal-close:hover {
  opacity: 1;
}
.modal-body {
  background: var(--sk-surface);
}
.modal-footer {
  border-block-start: 1px solid var(--sk-border-soft);
  background: var(--sk-surface);
}

/* ── Dropdowns / link search results ────────────────────────────────── */
.awesomplete ul {
  border-radius: var(--sk-radius-sm);
  box-shadow: var(--sk-shadow-md);
  border: 1px solid var(--sk-border-soft);
  background: var(--sk-surface);
}
.awesomplete li {
  color: var(--sk-text);
}
.awesomplete li:hover,
.awesomplete li[aria-selected="true"] {
  background: var(--sk-blue-soft);
  color: var(--sk-blue-dark);
}
.select2-results__option--highlighted {
  background: var(--sk-blue-soft) !important;
  color: var(--sk-blue-dark) !important;
}

/* ── Login page ──────────────────────────────────────────────────────── */
.page-card,
.for-login .page-card {
  border-radius: var(--sk-radius-lg);
  box-shadow: var(--sk-shadow-md);
  border: 1px solid var(--sk-border);
}
.page-card-head {
  font-weight: 700;
  color: var(--sk-navy);
}
.btn-login,
.page-card-actions .btn-login {
  background: var(--sk-blue) !important;
  border-color: var(--sk-blue) !important;
  border-radius: var(--sk-radius-sm);
  font-weight: 600;
}
.btn-login:hover,
.page-card-actions .btn-login:hover {
  background: var(--sk-blue-dark) !important;
  border-color: var(--sk-blue-dark) !important;
}

/* ── Scrollbar (cosmetic, no behavior) ──────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: #C3D0DF;
  border-radius: 999px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Saraia POS — colors/fonts/borders only, zero layout/logic change ─── */
.saraia-pos .btn-primary,
[data-page-route="saraia-pos"] .btn-primary {
  background: var(--sk-blue);
  border-color: var(--sk-blue);
}
.saraia-pos .btn-primary:hover,
[data-page-route="saraia-pos"] .btn-primary:hover {
  background: var(--sk-blue-dark);
}
.saraia-pos input:focus,
[data-page-route="saraia-pos"] input:focus {
  border-color: var(--sk-blue) !important;
  box-shadow: 0 0 0 3px rgba(2, 137, 247, 0.14) !important;
}

/* ── Wide Transaction Forms ──────────────────────────────────────────────
 * Core reads --page-max-width (default 900px) on .std-form-layout
 * .section-head/.section-body. Overriding it here, scoped to
 * .std-form-layout instead of :root, widens standard Form content
 * (Sales Invoice, Purchase Invoice, Stock Entry, ...) without touching
 * Core CSS or any other --page-max-width consumer. Confirmed via a
 * temporary runtime override on Production: RTL, header, sidebar, Items
 * Grid and .form-in-grid all unaffected; no horizontal overflow.
 */
.std-form-layout {
  --page-max-width: 1600px;
}