/* Matin (متين) — corporate skins on the Frappe desk and website (ADR 0006 §2.4).
   No product identity of its own: html[data-brand] selects the parent company's
   token set, taken verbatim from the CI stylesheets (Brands/UEM Edgenta/CSS/
   uem-edgenta.css, Brands/MEEM/CSS/meem.css). matin.js sets the attribute from the
   hostname; without it the UEM Edgenta set applies. Fonts are self-hosted
   (fonts.css). Logical properties only, so RTL needs no mirror file. */

:root,
html[data-brand="uem-edgenta"] {
  --mt-primary: #226aa3;        /* Edgenta Blue, PMS 2151 C */
  --mt-primary-hover: #1b5a8c;
  --mt-primary-active: #164b75;
  --mt-primary-soft: #cee2f4;   /* blue-100 */
  --mt-secondary: #162b75;      /* UEM Blue, PMS 2756 C */
  --mt-accent: #00a79d;         /* Turquoise Green */
  --mt-accent-soft: #d7eff1;
  --mt-ink: #323232;
  --mt-muted: #58585a;
  --mt-surface: #ffffff;
  --mt-surface-alt: #f4f6f8;
  --mt-border: #d6dce8;
  --mt-link: #226aa3;
  --mt-link-hover: #096dc9;
  --mt-ok: #00a79d;
  --mt-warn: #e8a317;
  --mt-danger: #c8102e;
  --mt-login-ground: #226aa3;
  --mt-font-latin: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mt-font-arabic: "Cairo", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --mt-font-heading: var(--mt-font-latin);
}

html[data-brand="meem"] {
  --mt-primary: #00a79d;        /* Turquoise Green — dominant */
  --mt-primary-hover: #00918a;
  --mt-primary-active: #0d8582;
  --mt-primary-soft: #eaf3f4;   /* mist */
  --mt-secondary: #0f4c5c;      /* Deep Teal */
  --mt-accent: #7ac142;         /* Leaf Green */
  --mt-accent-soft: #eaf6df;
  --mt-ink: #12262e;
  --mt-muted: #5b6b72;
  --mt-surface: #ffffff;
  --mt-surface-alt: #f3f8f9;
  --mt-border: #d5e0e3;
  --mt-link: #0d8582;
  --mt-link-hover: #0f4c5c;
  --mt-ok: #7ac142;
  --mt-warn: #e8a317;
  --mt-danger: #c8102e;
  --mt-login-ground: #0f4c5c;
  --mt-font-latin: "Carlito", "Calibri", "Segoe UI", Arial, sans-serif;
  --mt-font-arabic: "Almarai", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --mt-font-heading: "Caladea", "Cambria", Georgia, serif;
}

:root,
html,
body {
  /* Frappe desk and website variables we override (Frappe sets --font-stack on
     body, so :root alone loses; html and body are listed to win the cascade) */
  --primary: var(--mt-primary);
  --primary-color: var(--mt-primary);
  --btn-primary: var(--mt-primary);
  --sidebar-select-color: var(--mt-primary-soft);
  --text-color: var(--mt-ink);
  --text-muted: var(--mt-muted);
  --heading-color: var(--mt-secondary);
  --bg-color: var(--mt-surface-alt);
  --navbar-bg: var(--mt-surface);
  --border-color: var(--mt-border);
  --checkbox-color: var(--mt-primary);
  --control-bg-on-gray: var(--mt-surface);
  --font-stack: var(--mt-font-latin), var(--mt-font-arabic), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html[dir="rtl"],
html[dir="rtl"] body,
body[dir="rtl"] {
  --font-stack: var(--mt-font-arabic), var(--mt-font-latin), "Segoe UI", Tahoma, sans-serif;
}

body,
.form-control,
.btn,
input,
select,
textarea {
  font-family: var(--font-stack);
}
h1, h2, h3, .page-title .title-text {
  font-family: var(--mt-font-heading), var(--mt-font-arabic);
}

/* Primary buttons and active states */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--mt-primary) !important;
  border-color: var(--mt-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background-color: var(--mt-primary-hover) !important;
}
a,
.text-primary {
  color: var(--mt-link);
}
a:hover {
  color: var(--mt-link-hover);
}
.indicator-pill.green,
.indicator.green::before {
  background-color: var(--mt-ok);
}

/* Desk sidebar and navbar */
.navbar {
  border-block-end: 1px solid var(--mt-border);
}
.desk-sidebar .standard-sidebar-item.selected,
.sidebar-item.selected {
  background-color: var(--mt-primary-soft);
}
.desk-sidebar .standard-sidebar-item.selected .sidebar-item-label,
.sidebar-item.selected .sidebar-item-label {
  color: var(--mt-secondary);
}
.widget.shortcut-widget-box:hover {
  border-color: var(--mt-primary);
}

/* Desk home (/desk) logo: upstream boxes it to 32x32; the stacked wordmark is 76px
   tall by design, so let it take the navbar height (48px) minus breathing room. */
.navbar-home img,
.desktop-navbar .navbar-home img {
  height: 40px;
  width: auto;
  max-width: none;
}

/* Login page (Itqan concept, ADR 0006 §2.5): corporate ground, white card, the
   endorsement lockup and copyright line under the card. Frappe 16 wraps the card in
   <section class="for-login">, with no body class, hence :has(). The sign-in button
   is .btn-login / .btn-primary inside .form-login. */
body:has(section.for-login) {
  background-color: var(--mt-login-ground);
}
section.for-login {
  padding-block: 40px;
}
.for-login .page-card {
  background-color: var(--mt-surface);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(22, 43, 117, 0.12);
}
.btn-login,
.btn-login:hover,
.btn-login:focus,
.for-login .btn-primary {
  background-color: var(--mt-primary) !important;
  border-color: var(--mt-primary) !important;
  color: #ffffff !important;
}
.btn-login:hover {
  background-color: var(--mt-primary-hover) !important;
}
/* login.bundle caps .page-card-head img.app-logo at 32px; match its specificity */
.for-login .page-card-head img.app-logo,
.page-card-head img {
  height: 64px;
  max-height: none;
  width: auto;
}
/* Frappe 16 stretches the card to the viewport; let it size to its content so the
   endorsement footer sits under it, not below the fold. */
section.for-login .page-card {
  min-height: 0;
  height: auto;
  margin-inline: auto;
}
.mt-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 28px auto 0;
  max-width: 420px;
  text-align: center;
  padding-inline: 16px;
}
.mt-foot .mt-endorsement {
  height: 40px;
  width: auto;
}
.mt-foot .mt-copy {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1.5;
}
.for-login .web-footer,
.for-login .footer-logo-extension {
  display: none;
}

/* Website */
.web-footer {
  background-color: var(--mt-surface-alt);
  color: var(--mt-muted);
}
.navbar-light .navbar-brand img {
  max-height: 44px;
}