/* Navara identity on top of the stock Frappe Desk.
 *
 * Deliberately only re-paints: no layout, spacing or component overrides, so
 * the UX the framework ships with (and every ERPNext update to it) stays intact.
 * Brand palette is the one in CLAUDE.md.
 */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");

/* `html:root` (0,1,1) beats Frappe's own `:root` (0,1,0) rules, which load
 * after this file and would otherwise win on equal specificity. */
html:root,
html:root[data-theme="light"] {
  --navara-navy: #1b2a4a;
  --navara-navy-600: #24375f;
  --navara-cyan: #0fb9d6;
  --navara-cyan-600: #0ca3bd;
  --navara-gold: #e0a93a;
  --navara-bg: #f5f7fa;
  --navara-success: #0e9f6e;
  --navara-danger: #d94848;

  /* Frappe design tokens */
  --primary: var(--navara-cyan);
  --primary-color: var(--navara-cyan);
  --brand-color: var(--navara-navy);
  --navbar-bg: var(--navara-navy);
  --bg-color: var(--navara-bg);
  --fg-color: #ffffff;

  --blue-500: var(--navara-cyan);
  --blue-600: var(--navara-cyan-600);
  --green-500: var(--navara-success);
  --red-500: var(--navara-danger);
  --yellow-500: var(--navara-gold);
}

html:root[data-theme="dark"] {
  --navbar-bg: #101a2e;
  --primary: var(--navara-cyan);
  --primary-color: var(--navara-cyan);
}

/* Arabic reads in Tajawal, Latin keeps Frappe's Inter — matching v20. */
:lang(ar),
[dir="rtl"],
[dir="rtl"] .page-title,
[dir="rtl"] .form-control {
  font-family: "Tajawal", var(--font-stack), sans-serif;
}

/* Navbar: dark navy with legible contents */
.navbar,
header.navbar {
  background-color: var(--navara-navy) !important;
  border-bottom: 1px solid var(--navara-navy-600);
}
.navbar .navbar-nav > li > a,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar-expand .navbar-nav .dropdown-toggle {
  color: #eaf1f7 !important;
}
.navbar .navbar-nav > li > a:hover,
.navbar .nav-link:hover {
  color: var(--navara-cyan) !important;
}
.navbar .navbar-brand img {
  max-height: 26px;
}

/* Primary actions in brand cyan */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--navara-cyan);
  border-color: var(--navara-cyan);
  color: #05323a;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--navara-cyan-600);
  border-color: var(--navara-cyan-600);
  color: #04262c;
}

/* Sidebar active item picks up the brand accent */
.desk-sidebar .sidebar-item-container.selected > .desk-sidebar-item,
.standard-sidebar-item.selected {
  background-color: rgba(15, 185, 214, 0.14);
  border-radius: 6px;
}
.standard-sidebar-item.selected a,
.desk-sidebar .sidebar-item-container.selected a {
  color: var(--navara-navy) !important;
  font-weight: 600;
}

/* Money reads as money */
[data-fieldtype="Currency"] .control-value,
.dt-cell--col-currency {
  color: var(--navara-navy);
  font-variant-numeric: tabular-nums;
}

/* Login page */
.page-card,
.for-login .page-card {
  border-top: 3px solid var(--navara-cyan);
}
.for-login .page-card-head img,
.page-card-head img {
  max-height: 48px;
}

/* Tagline in the footer of printed/exported views */
.print-format .footer-tagline::after,
.navara-tagline::after {
  content: "#ClarityOverNoise";
  color: var(--navara-cyan);
  letter-spacing: 0.04em;
}