/* ===== GL Theme Tokens ===== */
:root {
  --gl-bg: #f6f7f4;
  --gl-surface: #ffffff;
  --gl-surface-muted: #fafaf8;
  --gl-border: #e2e6df;
  --gl-border-strong: #cfd6cc;
  --gl-text: #202824;
  --gl-muted: #66706a;
  --gl-muted-light: #9aa39d;
  --gl-primary: #166a61;
  --gl-primary-soft: #e6f0ee;
  --gl-primary-dark: #0f4f49;
  --gl-success: #26845b;
  --gl-success-soft: #edf6f1;
  --gl-warning: #a66a16;
  --gl-warning-soft: #fbf4e8;
  --gl-danger: #b64c4c;
  --gl-danger-soft: #faeeee;
  --gl-info: #426b8f;
  --gl-info-soft: #eef3f7;
  --gl-sidebar-bg: #262b2f;
  --gl-sidebar-panel: #202428;
  --gl-sidebar-hover: #333a40;
  --gl-sidebar-text: #d1d6d3;
  --gl-sidebar-muted: #a8afaa;
  --gl-sidebar-width: 264px;
  --gl-sidebar-collapsed-width: 4.6rem;
  --gl-radius: 8px;
  --gl-radius-sm: 6px;
  /* one height for every form control, including select2's stand-in -- see the
     .form-control block near the end of this file for why it is a floor and not a height */
  --gl-control-height: 2.4rem;
  --gl-control-height-sm: 2rem;
  --gl-shadow: 0 1px 2px rgba(28, 35, 31, 0.08), 0 8px 24px rgba(28, 35, 31, 0.05);
  --gl-shadow-hover: 0 4px 10px rgba(28, 35, 31, 0.10), 0 14px 32px rgba(28, 35, 31, 0.08);
  --gl-transition: 0.2s ease;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Cairo', 'Inter', 'Segoe UI', sans-serif;
  background: var(--gl-bg);
  color: var(--gl-text);
}

/* Cairo carries the Arabic subset and Inter has none, so Arabic must lead with Cairo.
   For Latin text Inter is the better face, and unicode-range means the browser still
   falls back to Cairo for any Arabic that appears inside an English page (a company or
   account name, which stays as entered). */
html[dir="ltr"] body {
  font-family: 'Inter', 'Cairo', 'Segoe UI', sans-serif;
}

/* Both languages are shown, so each label renders in its own script. */
.gl-language-switcher .btn {
  padding-inline: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}

.gl-language-switcher .gl-language-active {
  opacity: 0.55;
  cursor: default;
}

body.gl-login-page {
  --login-panel: var(--gl-sidebar-bg);
  --login-panel-deep: var(--gl-sidebar-panel);
  --login-panel-soft: var(--gl-sidebar-hover);
  --login-surface: var(--gl-surface);
  --login-surface-muted: var(--gl-surface-muted);
  --login-border: var(--gl-border);
  --login-accent: var(--gl-primary);
  --login-accent-dark: var(--gl-primary-dark);
  --login-accent-soft: var(--gl-primary-soft);
  --login-text: var(--gl-text);
  --login-muted: var(--gl-muted);
  --login-soft: var(--gl-muted-light);
  --login-danger: var(--gl-danger);
  --login-warning: var(--gl-warning);
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--gl-bg);
  color: #f7f8fa;
  font-family: 'Inter', 'Cairo', 'Segoe UI', sans-serif;
}

.gl-login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(380px, 1.05fr);
  padding: clamp(32px, 6vw, 80px);
  background:
    linear-gradient(135deg, rgba(38, 43, 47, 0.97), rgba(32, 36, 40, 0.98) 52%, rgba(22, 106, 97, 0.92)),
    var(--login-panel-deep);
}

.gl-login-brand-pane,
.gl-login-form-pane {
  min-width: 0;
  display: flex;
  align-items: center;
}

.gl-login-brand-pane {
  justify-content: center;
  padding-inline-start: clamp(28px, 5vw, 72px);
}

.gl-login-form-pane {
  justify-content: center;
  padding-inline-end: clamp(28px, 5vw, 72px);
}

.gl-login-brand-card {
  width: min(100%, 430px);
}

.gl-login-mark {
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  border-radius: 16px;
  background: rgba(159, 210, 203, 0.14);
  color: #fff;
  font-size: 1.8rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.gl-login-mark-text {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: #fff;
  font-family: inherit;
}

.gl-login-mark-text span {
  color: #9fd2cb;
}

.gl-login-mark-text-sm {
  font-size: 1.1rem;
}

.gl-login-brand-name {
  margin: 0;
  color: #fff;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.gl-login-brand-name span {
  color: #9fd2cb;
}

.gl-login-brand-tagline {
  max-width: 360px;
  margin: 14px 0 0;
  color: rgba(247, 248, 250, 0.72);
  font-size: 0.98rem;
  line-height: 1.55;
}

.gl-login-card {
  width: min(100%, 424px);
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: var(--login-surface);
  color: var(--login-text);
  box-shadow: 0 24px 60px rgba(28, 35, 31, 0.24);
}

.gl-login-mobile-brand {
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  padding: 10px;
  border-radius: 8px;
  background: var(--login-panel);
}

.gl-login-mobile-mark {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  flex: 0 0 44px;
}

.gl-login-mobile-brand strong,
.gl-login-mobile-brand span {
  display: block;
}

.gl-login-mobile-brand strong {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 800;
}

.gl-login-mobile-brand span {
  margin-top: 2px;
  color: rgba(247, 248, 250, 0.72);
  font-size: 0.82rem;
  font-weight: 600;
}

.gl-login-card h2 {
  margin: 0 0 8px;
  color: var(--login-text);
  font-size: 1.78rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}

.gl-login-intro {
  margin: 0 0 28px;
  color: var(--login-muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.gl-login-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}

.gl-login-alert-danger {
  border-color: rgba(180, 35, 24, 0.16);
  background: rgba(180, 35, 24, 0.08);
  color: var(--login-danger);
}

.gl-login-alert-warning {
  border-color: rgba(146, 64, 14, 0.18);
  background: rgba(146, 64, 14, 0.08);
  color: var(--login-warning);
}

.gl-login-field {
  margin-bottom: 18px;
}

.gl-login-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--login-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.gl-login-field-wrap {
  position: relative;
}

/* Logical, not physical: these three rules position the field icon and the reveal toggle,
   and their original left/right values were LTR-conventional and never flipped -- which is
   why the leading icon currently sits on the far side of an Arabic field. Using
   start/end puts the icon at the reading edge in both directions. chart-tree.css already
   uses logical properties throughout; this matches it. */
.gl-login-field-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 15px;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--login-soft);
  font-size: 0.92rem;
  pointer-events: none;
  transition: color 0.18s ease;
}

.gl-login-control {
  width: 100%;
  height: 50px;
  /* start gutter clears the field icon, end gutter clears the reveal toggle */
  padding-block: 0;
  padding-inline: 42px 48px;
  border: 1px solid var(--login-border);
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: var(--login-text);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.gl-login-control::placeholder {
  color: #6f7a89;
  font-weight: 500;
}

.gl-login-control:hover {
  border-color: #c6cdd8;
}

.gl-login-control:focus {
  border-color: var(--login-accent);
  background: #fbfefd;
  box-shadow: 0 0 0 4px rgba(22, 106, 97, 0.16);
}

.gl-login-control:focus ~ .gl-login-field-icon {
  color: var(--login-accent);
}

.gl-login-password-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: transparent;
  color: var(--login-soft);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.gl-login-password-toggle:hover,
.gl-login-password-toggle:focus-visible {
  background: var(--login-accent-soft);
  color: var(--login-accent-dark);
}

.gl-login-submit {
  position: relative;
  width: 100%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: var(--login-accent);
  color: #fff;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 35, 31, 0.08), 0 12px 24px rgba(22, 106, 97, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.gl-login-submit:hover,
.gl-login-submit:focus-visible {
  background: var(--login-accent-dark);
  box-shadow: 0 1px 2px rgba(28, 35, 31, 0.1), 0 14px 26px rgba(22, 106, 97, 0.26);
  transform: translateY(-1px);
}

.gl-login-submit:focus-visible {
  outline: 3px solid rgba(22, 106, 97, 0.28);
  outline-offset: 3px;
}

.gl-login-submit:active {
  transform: translateY(0);
}

.gl-login-submit.is-loading {
  pointer-events: none;
  opacity: 0.78;
}

.gl-login-submit.is-loading span,
.gl-login-submit.is-loading i {
  visibility: hidden;
}

.gl-login-submit.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 20px;
  height: 20px;
  /* Centring, not a directional offset -- written logically so it pairs with
     inset-inline-start above and stays centred whichever way the page reads. */
  margin-block: -10px 0;
  margin-inline: -10px 0;
  border-radius: 50%;
  background: conic-gradient(from 90deg, #fff, rgba(255, 255, 255, 0.18));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation: gl-login-spin 0.7s linear infinite;
}

.gl-login-footer {
  margin-top: 24px;
  text-align: center;
}

.gl-login-footer p {
  margin: 0;
  color: var(--login-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.gl-login-footer span {
  color: var(--login-text);
  font-weight: 800;
}

@keyframes gl-login-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-login-submit,
  .gl-login-password-toggle,
  .gl-login-control,
  .gl-login-field-icon {
    transition: none;
  }

  .gl-login-submit.is-loading::after {
    animation: none;
  }
}

@media (max-width: 860px) {
  body.gl-login-page {
    overflow-y: auto;
  }

  .gl-login-shell {
    grid-template-columns: 1fr;
    place-items: center;
    padding: 28px;
  }

  .gl-login-brand-pane {
    display: none;
  }

  .gl-login-form-pane {
    width: 100%;
    padding: 0;
  }

  .gl-login-mobile-brand {
    display: flex;
  }
}

@media (max-width: 575.98px) {
  .gl-login-shell {
    padding: 18px;
  }

  .gl-login-card {
    padding: 26px;
  }

  .gl-login-card h2 {
    font-size: 1.52rem;
  }
}

body.gl-rtl-shell .wrapper {
  min-height: 100vh;
  background: var(--gl-bg);
}

/* ===== RTL Right-Side Sidebar Geometry ===== */
body.gl-rtl-shell:not(.layout-top-nav) .main-sidebar {
  right: 0;
  left: auto !important;
  width: var(--gl-sidebar-width);
  background: var(--gl-sidebar-bg);
  overflow-x: hidden;
  /* AdminLTE's own vendor CSS animates this element's width on sidebar-mini collapse --
     a genuine layout property, unavoidable for a real resize. will-change is the
     available mitigation without forking the vendor stylesheet. */
  will-change: width;
}

body.gl-rtl-shell.sidebar-collapse:not(.layout-top-nav) .main-sidebar {
  width: var(--gl-sidebar-collapsed-width) !important;
}

body.gl-rtl-shell:not(.layout-top-nav) .content-wrapper,
body.gl-rtl-shell:not(.layout-top-nav) .main-header,
body.gl-rtl-shell:not(.layout-top-nav) .main-footer {
  margin-right: var(--gl-sidebar-width) !important;
  margin-left: 0 !important;
  /* A push-layout sidebar collapse genuinely needs a layout property to animate --
     content must actually resize into the freed space, not just reposition, so
     transform/opacity can't substitute here. will-change asks the browser to promote
     this to its own layer ahead of the (single, click-triggered, not continuous) toggle. */
  transition: margin-right 0.3s ease-in-out;
  will-change: margin-right;
}

body.gl-rtl-shell.sidebar-collapse:not(.layout-top-nav) .content-wrapper,
body.gl-rtl-shell.sidebar-collapse:not(.layout-top-nav) .main-header,
body.gl-rtl-shell.sidebar-collapse:not(.layout-top-nav) .main-footer {
  margin-right: var(--gl-sidebar-collapsed-width) !important;
  margin-left: 0 !important;
}

body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:hover {
  width: var(--gl-sidebar-collapsed-width) !important;
}

body.gl-rtl-shell .content-wrapper {
  min-height: calc(100vh - 56px);
  background: var(--gl-bg);
  direction: rtl;
  text-align: right;
}

body.gl-rtl-shell .content-wrapper > .content {
  padding: 0 1.25rem 2rem;
}

body.gl-rtl-shell .content-wrapper > .content-header {
  padding: 1.25rem 1.25rem 0.85rem;
}

body.gl-rtl-shell .content .container-fluid,
body.gl-rtl-shell .content-header .container-fluid {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

/* ===== Sidebar Brand ===== */
.brand-link {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--gl-sidebar-panel);
  color: #fff !important;
}

.brand-link:hover {
  color: #fff !important;
}

.gl-brand-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: 0.7rem;
  border-radius: 8px;
  background: rgba(159, 210, 203, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.gl-brand-icon span {
  color: #9fd2cb;
}

/* Bootstrap 4 only ships physical spacing utilities (ml-*, pr-*), so a gap written for the
   Arabic layout lands on the wrong side in English -- icons ended up flush against their
   labels ("GLGeneral Ledger"). These are the logical equivalents: the space is always on
   the side the text flows towards, whichever way the page reads. */
.gl-icon-gap {
  margin-inline-end: 0.35rem;
}

.gl-list-indent {
  padding-inline-start: 1rem;
  padding-inline-end: 0;
}

/* Bootstrap 4 ships no RTL build, and these two rules are physical, so in Arabic the
   checkbox was drawn on the left while the label text also began there -- the box sat on
   top of the first letter. Same story for the modal close button, whose `margin-left:auto`
   pushed it onto the title instead of away from it. */
.form-check {
  padding-left: 0;
  padding-inline-start: 1.5rem;
}

.form-check-input {
  margin-left: 0;
  margin-inline-start: -1.5rem;
}

.modal-header .close {
  margin: -1rem;
  margin-inline-start: auto;
}

/* ===== Form dialogs ===== */
.gl-modal-hint {
  display: block;
  margin-top: 0.2rem;
  color: var(--gl-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* ===== Journal lines ===== */
/* Bootstrap's input padding plus the native select arrow leaves about 20px for the text,
   so a three-letter currency code was rendered as "GP". */
.line-currency {
  min-width: 5.5rem;
}

.balance-status {
  margin: 0.75rem 0 0;
  font-weight: 600;
}

.gl-navbar-mark {
  font-weight: 800;
  color: #16554e;
}

.gl-navbar-mark span {
  color: #2a9d8f;
}

.brand-link .brand-text {
  color: #fff;
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1;
  white-space: nowrap;
}

.main-sidebar .sidebar {
  padding: 0.45rem 0.35rem 1rem;
  background: var(--gl-sidebar-bg);
}

/* ===== Sidebar Navigation ===== */
.nav-sidebar {
  padding-top: 0.15rem;
}

.nav-sidebar .nav-header {
  padding: 0.85rem 0.95rem 0.3rem;
  color: var(--gl-sidebar-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: start;
}

.nav-sidebar .nav-item > .nav-link {
  /* No `direction: rtl` here: it used to force the icon to the right of the label even
     when the page was in English, which is the one thing the direction switch exists to
     avoid. Direction is inherited from the <html dir> attribute instead. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-height: 38px;
  margin: 0.08rem 0.38rem;
  padding: 0.54rem 0.78rem;
  border-radius: 7px;
  color: var(--gl-sidebar-text);
  box-sizing: border-box;
  transition: background var(--gl-transition), color var(--gl-transition), box-shadow var(--gl-transition);
}

.nav-sidebar .nav-item > .nav-link:hover {
  background: var(--gl-sidebar-hover);
  color: #fff;
}

.nav-sidebar .nav-item > .nav-link.active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  /* box-shadow has no logical form, so the active marker is placed per direction: it must
     sit on the edge the sidebar is attached to. */
  box-shadow: inset 3px 0 0 var(--gl-primary);
}

body.gl-rtl-shell .nav-sidebar .nav-item > .nav-link.active {
  box-shadow: inset -3px 0 0 var(--gl-primary);
}

.nav-sidebar .nav-item > .nav-link > .nav-icon {
  width: 1.35rem;
  margin-right: 0;
  margin-left: 0;
  text-align: center;
  color: currentColor;
  opacity: 0.78;
  flex: 0 0 1.35rem;
}

.nav-sidebar .nav-item > .nav-link.active > .nav-icon {
  opacity: 1;
}

.nav-sidebar .nav-item > .nav-link > p {
  margin-block: 0;
  margin-inline: 0.58rem 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text,
body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-header,
body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link > p {
  display: none;
}

body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
}

body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .gl-brand-icon {
  margin-left: 0;
}

body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link {
  justify-content: center;
  margin-right: 0.45rem;
  margin-left: 0.45rem;
  padding-right: 0;
  padding-left: 0;
  /* AdminLTE pins the collapsed link at 3.6rem. That plus the margins above is wider than
     the rail's content box, and in a right-hand sidebar the overflow runs off the *left*
     edge, where `overflow-x: hidden` cut it -- the collapsed rail showed slivers of icons
     instead of icons. Let it take the width that is actually there. */
  width: auto;
}

body.gl-rtl-shell.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link > .nav-icon {
  margin: 0;
}

/* ===== Navbar ===== */
body.gl-rtl-shell .main-header {
  min-height: 54px;
  border-bottom: 1px solid var(--gl-border);
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.gl-rtl-shell .main-header .navbar-nav {
  display: flex;
  align-items: center;
}

body.gl-rtl-shell .main-header .navbar-nav.mr-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

body.gl-rtl-shell .navbar-nav .nav-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  color: var(--gl-muted);
  font-size: 0.84rem;
}

body.gl-rtl-shell .navbar-nav .nav-link:hover {
  color: var(--gl-primary);
}

.gl-navbar-tools .gl-pushmenu {
  width: 38px;
  justify-content: center;
  border-radius: var(--gl-radius-sm);
}

.gl-navbar-tools .gl-pushmenu:hover {
  background: var(--gl-primary-soft);
}

.gl-navbar-title .nav-link {
  gap: 0.25rem;
}

.gl-navbar-account {
  gap: 0.1rem;
}

body.gl-rtl-shell .navbar-nav .nav-link.text-danger {
  color: var(--gl-danger) !important;
}

body.gl-rtl-shell .navbar-nav .nav-link.text-danger:hover {
  color: #b91c1c !important;
}

.gl-user-name {
  margin-inline-start: 0.3rem;
  color: var(--gl-text);
  font-weight: 700;
}

/* ===== Page Structure ===== */
.gl-title {
  margin: 0;
  color: var(--gl-text);
  font-size: 1.22rem;
  font-weight: 800;
  text-align: start;
}

.gl-content-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.gl-header-subtitle {
  margin: 4px 0 0;
  color: var(--gl-muted);
  font-size: 0.88rem;
}

.gl-section-title {
  margin-bottom: 1rem;
  color: var(--gl-muted);
  font-size: 1rem;
  font-weight: 700;
}

.gl-page-card {
  margin-bottom: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  background: var(--gl-surface);
  box-shadow: var(--gl-shadow);
}

.gl-page-card-header {
  padding: 0.78rem 1rem;
  border-bottom: 1px solid var(--gl-border);
  color: var(--gl-text);
  font-size: 0.82rem;
  font-weight: 800;
}

.gl-page-card-body {
  padding: 1rem;
}

.gl-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.gl-field {
  min-width: 170px;
  flex: 1 1 170px;
}

.gl-field.gl-field-sm {
  max-width: 190px;
  flex-basis: 170px;
}

.gl-field label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--gl-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.gl-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* The currency picker holds a variable number of checkboxes, so it sizes to them rather
   than to the fixed .gl-field-sm width the date and branch controls use. */
.gl-field-currencies {
  min-width: 220px;
  padding: 0;
  border: 0;
}

.gl-field-legend {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--gl-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.gl-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.gl-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--gl-text);
  font-size: 0.86rem;
  font-weight: 600;
}

.gl-check input {
  margin: 0;
}

/* The shared report/audit table. Report *pages* add sticky headers, footing rows and the
   transaction card on top of this, in `static/css/report-tables.css`; this stays here
   because `templates/audit/events.html` uses it too and does not load that sheet.

   The header, rule and hover colours were `#f8fafc` / `#eef2f7` -- a cool slate against a
   warm green-grey palette, the only place in the app where the two met. */
.gl-report-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  /* Figures line up in a column only if the digits are the same width. Set once on the
     table so a money cell cannot be missed; `.gl-num` then only has to align it. */
  font-variant-numeric: tabular-nums;
}

/* A thin rule on every side, not just underneath. A money table is read across as well as
   down -- "which column is this figure in" is the question a horizontal-rules-only table
   makes you answer by eye. `border` is the shorthand and is direction-neutral, so it stays
   clear of the physical-property ban in tests/i18n/test_css_has_no_direction_leaks.py. */
.gl-report-table thead th {
  padding: 0.72rem 0.8rem;
  border: 1px solid var(--gl-border);
  border-bottom-width: 2px;
  border-bottom-color: var(--gl-border-strong);
  background: var(--gl-surface-muted);
  color: var(--gl-muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: start;
}

.gl-report-table tbody td {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--gl-border);
  color: var(--gl-text);
  font-size: 0.82rem;
  line-height: 1.5;
  vertical-align: middle;
}

.gl-report-table tbody tr:nth-child(even) {
  background: var(--gl-surface-muted);
}

.gl-report-table tbody tr:hover {
  background: var(--gl-primary-soft);
}

.gl-empty-state {
  padding: 2.5rem 1rem !important;
  color: var(--gl-muted-light) !important;
  text-align: center;
}

/* ===== Ledger Dashboard Overview ===== */
.gl-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gl-dashboard-head h2 {
  margin: 0.1rem 0 0.15rem;
  color: var(--gl-text);
  font-size: 1.35rem;
  font-weight: 800;
}

.gl-dashboard-head p {
  margin: 0;
  color: var(--gl-muted);
  font-size: 0.82rem;
}

.gl-dashboard-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gl-getting-started {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-sm);
  background: var(--gl-primary-soft);
  color: var(--gl-primary-dark);
  font-size: 0.85rem;
  line-height: 1.6;
}

.gl-getting-started i {
  margin-top: 0.15rem;
  color: var(--gl-primary);
}

/* ===== KPI Cards ===== */
.gl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.gl-kpi-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 118px;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  background: var(--gl-surface);
  box-shadow: var(--gl-shadow);
  transition: box-shadow var(--gl-transition), transform var(--gl-transition);
}

.gl-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gl-shadow-hover);
}

.gl-kpi-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gl-radius-sm);
  font-size: 1.2rem;
  flex: 0 0 48px;
}

.gl-kpi-icon.blue { background: var(--gl-primary-soft); color: var(--gl-primary); }
.gl-kpi-icon.green { background: var(--gl-success-soft); color: var(--gl-success); }
.gl-kpi-icon.amber { background: var(--gl-warning-soft); color: var(--gl-warning); }
.gl-kpi-icon.gray { background: #f1f5f9; color: var(--gl-muted); }

.gl-kpi-value {
  color: var(--gl-text);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

.gl-kpi-label {
  margin-top: 0.2rem;
  color: var(--gl-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.gl-kpi-hint {
  margin-top: 0.1rem;
  color: var(--gl-muted-light);
  font-size: 0.74rem;
}

/* ===== Action Cards ===== */
.gl-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1rem;
}

.gl-action-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-sm);
  background: var(--gl-surface);
  color: var(--gl-text);
  text-decoration: none !important;
  box-shadow: var(--gl-shadow);
  transition: border-color var(--gl-transition), box-shadow var(--gl-transition), transform var(--gl-transition);
}

.gl-action-card:hover {
  transform: translateY(-2px);
  border-color: var(--gl-primary);
  color: var(--gl-text);
  box-shadow: var(--gl-shadow-hover);
}

.gl-action-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gl-radius-sm);
  background: var(--gl-primary-soft);
  color: var(--gl-primary);
  flex: 0 0 42px;
}

.gl-action-title {
  color: var(--gl-text);
  font-size: 0.9rem;
  font-weight: 800;
}

.gl-action-desc {
  margin-top: 0.15rem;
  color: var(--gl-muted-light);
  font-size: 0.74rem;
  line-height: 1.35;
}

/* ===== Base Components ===== */
.card {
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius);
  box-shadow: var(--gl-shadow);
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gl-border);
  background: #fff;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  border-top: 1px solid var(--gl-border);
  background: #f8fafc;
}

.table th {
  padding: 0.75rem 0.6rem;
  border-top: none;
  color: var(--gl-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.table td {
  padding: 0.65rem 0.6rem;
  font-size: 0.85rem;
  vertical-align: middle;
}

.table thead th {
  border-bottom: 2px solid var(--gl-border);
}

.table-hover tbody tr:hover {
  background: #f8fafc;
}

.btn {
  border-radius: 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.btn-primary {
  border-color: var(--gl-primary);
  background: var(--gl-primary);
}

.btn-primary:hover {
  border-color: var(--gl-primary-dark);
  background: var(--gl-primary-dark);
}

/* Bootstrap pins a fixed `height` on every form control, computed from *its* padding and
   font size (.form-control 38px, .form-control-sm 31px). The rules below restyle both, and
   `.form-control` here also wins the padding and font size of `.form-control-sm` on source
   order -- so a small control was a 31px box asked to hold 36.8px of content, and clipped
   the line through the middle. Arabic wears that badly: the النوع and الشركة pickers on the
   settings tables showed the top half of their letters and nothing else.

   A fixed height and restyled padding cannot both be right, so the fixed height goes. The
   box is sized from its content with `--gl-control-height` as the floor, which keeps every
   control the height it has always been while making it impossible to clip text again. */
.form-control,
.custom-select {
  border: 1px solid var(--gl-border);
  border-radius: 0.45rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  height: auto;
  min-height: var(--gl-control-height);
}

/* Chrome refuses to apply `line-height` to a <select> and lays it out on the font's own
   metrics instead. Cairo's are tall, so with equal padding a select came out 7px taller
   than the input beside it in the same row. Less block padding lands it back on the shared
   height, and the `min-height` above is still what actually sets that height. */
select.form-control {
  padding-block: 0.15rem;
}

.form-control-sm,
.custom-select-sm,
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  height: auto;
  min-height: var(--gl-control-height-sm);
}

/* last, so it survives the size rules above: room for the arrow the browser paints inside */
.custom-select,
.custom-select-sm,
.input-group-sm > .custom-select {
  padding-inline-end: 1.75rem;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--gl-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.alert {
  border: none;
  border-radius: var(--gl-radius-sm);
  font-size: 0.85rem;
}

.alert-success { background: var(--gl-success-soft); color: #166534; }
.alert-danger { background: var(--gl-danger-soft); color: #991b1b; }
.alert-warning { background: var(--gl-warning-soft); color: #92400e; }
.alert-info { background: var(--gl-info-soft); color: #075985; }

/* ===== Mobile ===== */
@media (max-width: 991.98px) {
  body.gl-rtl-shell:not(.layout-top-nav) .content-wrapper,
  body.gl-rtl-shell:not(.layout-top-nav) .main-header,
  body.gl-rtl-shell:not(.layout-top-nav) .main-footer {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.gl-rtl-shell .main-sidebar {
    transform: translateX(100%);
  }

  body.gl-rtl-shell.sidebar-open .main-sidebar {
    transform: translateX(0);
  }

  body.gl-rtl-shell .content-wrapper > .content,
  body.gl-rtl-shell .content-wrapper > .content-header {
    padding-right: 0.85rem;
    padding-left: 0.85rem;
  }

  .gl-filter-bar,
  .gl-toggle-row {
    align-items: stretch;
    flex-direction: column;
  }

  .gl-field,
  .gl-field.gl-field-sm {
    width: 100%;
    max-width: none;
  }

  .gl-kpi-grid,
  .gl-action-grid {
    grid-template-columns: 1fr;
  }

  .gl-dashboard-head {
    flex-direction: column;
  }
}

/* select2 is styled in `static/css/select2-gl.css`, which the pages that use it load after
   the vendor stylesheet. The rule that used to sit here targeted `--bootstrap5`, a theme
   nothing ever selected, so it matched nothing. */

/* ---------------------------------------------------------------------------------------
   Users settings page (`templates/settings/users.html`).

   Logical properties throughout -- `margin-inline`, `border-inline-start`, `text-align:
   start` -- so the whole page mirrors itself in Arabic with no `body.gl-rtl-shell` override
   and no second set of rules to keep in step.

   No `height` on any control. Bootstrap computes its fixed heights from *its* padding, and
   the padding is restyled above, which is what clipped every <select> through the middle.
   --------------------------------------------------------------------------------------- */

.gl-user-card {
  margin-bottom: 1rem;
}

/* The same card is the create form and the edit form. Without a mark, clicking تعديل on a
   row looked like nothing happened -- the tabs are below the fold on a short window. */
.gl-user-card-editing {
  border-inline-start: 3px solid var(--gl-primary);
}

.gl-user-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gl-border);
}

.gl-user-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gl-primary-soft);
  color: var(--gl-primary);
}

.gl-user-card-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-inline-end: auto;
}

.gl-user-card-heading strong {
  color: var(--gl-text);
  font-size: 0.98rem;
}

.gl-user-card-heading span {
  color: var(--gl-muted);
  font-size: 0.8rem;
}

.gl-user-tabs {
  padding-inline: 0.6rem;
  border-bottom: 1px solid var(--gl-border);
}

.gl-user-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--gl-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.gl-user-tabs .nav-link:hover {
  border-color: transparent transparent var(--gl-border-strong);
  color: var(--gl-text);
}

.gl-user-tabs .nav-link.active {
  border-color: transparent transparent var(--gl-primary);
  background: transparent;
  color: var(--gl-primary);
}

.gl-user-tab-content {
  padding: 1rem;
}

.gl-user-card-foot {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--gl-border);
  background: var(--gl-surface-muted);
}

.gl-field {
  margin-bottom: 0.75rem;
}

.gl-field label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--gl-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

/* --- the permission grid --- */

.gl-perm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.gl-perm-col {
  margin-bottom: 0.85rem;
}

.gl-perm-group {
  height: 100%;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-sm);
  overflow: hidden;
}

.gl-perm-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--gl-border);
  background: var(--gl-surface-muted);
  cursor: pointer;
}

.gl-perm-group-name {
  color: var(--gl-text);
  font-size: 0.86rem;
  font-weight: 700;
}

.gl-perm-count {
  margin-inline-start: auto;
  padding: 0.05rem 0.4rem;
  border-radius: 10px;
  background: var(--gl-surface);
  color: var(--gl-muted-light);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Only once something in the group is granted -- see the note in settings-users.js. */
.gl-perm-count-on {
  background: var(--gl-primary-soft);
  color: var(--gl-primary);
}

.gl-perm-pages {
  padding: 0.35rem 0.7rem 0.55rem;
}

.gl-perm-page {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.22rem 0;
  color: var(--gl-text);
  font-size: 0.82rem;
  font-weight: 400;
  cursor: pointer;
}

.gl-perm-page:hover {
  color: var(--gl-primary);
}

.gl-action-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.gl-action-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-radius-sm);
  color: var(--gl-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.gl-action-item:hover {
  border-color: var(--gl-primary);
  background: var(--gl-primary-soft);
}

/* --- the roster --- */

.gl-users-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--gl-border);
  color: var(--gl-text);
}

.gl-users-count {
  padding: 0.05rem 0.5rem;
  border-radius: 10px;
  background: var(--gl-surface-muted);
  color: var(--gl-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gl-users-table {
  margin: 0;
}

.gl-users-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--gl-border);
  color: var(--gl-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: start;
  white-space: nowrap;
}

.gl-users-table td {
  border-top: 1px solid var(--gl-border);
  vertical-align: middle;
}

.gl-users-table tbody tr:hover {
  background: var(--gl-surface-muted);
}

.gl-user-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gl-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gl-primary-soft);
  color: var(--gl-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.gl-user-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gl-user-name {
  color: var(--gl-text);
  font-size: 0.87rem;
  font-weight: 600;
}

.gl-user-email {
  color: var(--gl-muted);
  font-size: 0.76rem;
}

.gl-role-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--gl-border-strong);
  border-radius: 10px;
  color: var(--gl-text);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.gl-access-count {
  display: block;
  color: var(--gl-text);
  font-size: 0.8rem;
  font-weight: 600;
}

.gl-access-chips {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.gl-chip {
  padding: 0.02rem 0.38rem;
  border-radius: 8px;
  background: var(--gl-surface-muted);
  color: var(--gl-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.gl-access-none {
  color: var(--gl-muted-light);
  font-size: 0.8rem;
}

.gl-status {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.gl-status-active {
  background: var(--gl-success-soft);
  color: var(--gl-success);
}

.gl-status-warning {
  background: var(--gl-warning-soft);
  color: var(--gl-warning);
}

.gl-status-off {
  background: var(--gl-surface-muted);
  color: var(--gl-muted);
}

/* A flex row rather than Bootstrap's `.input-group`: that one joins the two controls with
   physical border radii, which come out on the wrong side in Arabic. */
.gl-pw-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Width only -- see the height note at the top of this block. */
.gl-user-password {
  width: 11rem;
  max-width: 100%;
}

.gl-users-actions {
  white-space: nowrap;
  text-align: end;
}

.gl-self-badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 10px;
  background: var(--gl-info-soft);
  color: var(--gl-info);
  font-size: 0.74rem;
  font-weight: 700;
}

.gl-users-empty {
  padding: 1.5rem 1rem;
  color: var(--gl-muted);
  text-align: center;
}