/*
 * Dashboard brand styling, loaded after app-light.css so these rules win.
 *
 * Every colour decision lives in the custom properties below - change it here, not inline.
 * The palette is the existing Rock family plus the template's own neutrals and status
 * colours; the variables assign each shade one responsibility.
 *
 *   Brand navy        titles, important values, active navigation, primary actions, links
 *   Soft navy         icon containers, hover and active navigation surfaces, information pills
 *   Orange            the accent: active indicator, focus rings, one highlighted card
 *   Soft orange       the tinted container behind that one highlighted card's icon
 *   White             cards, sidebar, header
 *   Light neutral     page background, planned ("Soon") surfaces, hovered table rows
 *   Dark neutral      body text where navy would be too heavy
 *   Medium gray       secondary text, section labels, supporting copy
 *   Muted gray        decorative glyphs only - never body copy
 *
 * Status colours stay semantic (success / warning / danger) and are never navy or orange.
 *
 * Direction: the dashboard renders LTR (en) and RTL (ar). Rules written here use logical
 * properties so they mirror on their own; the template's physical rules that must flip
 * are overridden in the [dir="rtl"] section at the end of this file.
 */

:root {
  /* Brand */
  --brand-primary: #001a4e;
  --brand-primary-hover: #00266b;
  --brand-primary-active: #001238;
  --brand-primary-soft: #eef2ff;

  --brand-accent: #faa61a;
  --brand-accent-soft: rgba(250, 166, 26, 0.14);
  --brand-accent-ring: rgba(250, 166, 26, 0.45);

  /* Surfaces */
  --surface-page: #f8f9fa;
  --surface-card: #ffffff;
  --surface-muted: #f8f9fa;

  /* Text */
  --text-primary: #343a40;
  --text-secondary: #6c757d;
  --text-muted: #8a94a6;

  /* Borders and elevation */
  --border-default: #dfe5fb;
  --border-emphasis: var(--brand-accent);
  --shadow-card: 0 0.125rem 0.375rem rgba(0, 26, 78, 0.06);

  /* Status pills - the template's own alert pairs, reused so the tones match its alerts. */
  --status-success-bg: #d8f6ec;
  --status-success-text: #1e6d53;
  --status-warning-bg: #fcedcd;
  --status-warning-text: #7c5502;
  --status-danger-bg: #f8d7da;
  --status-danger-text: #721c24;
  --status-neutral-bg: #e9ecef;
  --status-neutral-text: #495057;

  /* Sidebar geometry, shared by the LTR rules in the template and the RTL mirror below. */
  --sidebar-width: 16rem;
  --sidebar-rail-width: 5rem;
}

/* ------------------------------------------------------------------ */
/* Page and typography                                                  */
/* ------------------------------------------------------------------ */

body.light {
  background-color: var(--surface-page);
}

/* Overpass has no Arabic glyphs; Tajawal carries the Arabic UI and is loaded only for it. */
[dir="rtl"] body {
  font-family: "Tajawal", "Overpass", sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--brand-primary);
}

a:hover,
a:focus {
  color: var(--brand-primary-hover);
}

.text-primary {
  color: var(--brand-primary) !important;
}

.page-title {
  margin: 1rem 0 1.25rem;
  color: var(--brand-primary);
  font-size: 1.35rem;
  font-weight: 700;
}

.breadcrumb + .page-title {
  margin-top: 0.5rem;
}

/* Logical spacing utilities used by the admin markup in place of Bootstrap 4's physical ones. */

.ms-1 { margin-inline-start: 0.25rem !important; }
.ms-2 { margin-inline-start: 0.5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.me-1 { margin-inline-end: 0.25rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.me-auto { margin-inline-end: auto !important; }
.ps-0 { padding-inline-start: 0 !important; }
.ps-3 { padding-inline-start: 1rem !important; }
.ps-4 { padding-inline-start: 1.5rem !important; }
.pe-0 { padding-inline-end: 0 !important; }
.text-start { text-align: start !important; }
.text-end { text-align: end !important; }

/* ------------------------------------------------------------------ */
/* Brand panel - the supplied logo is white, so it needs a navy backing. */
/* ------------------------------------------------------------------ */

.brand-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-primary);
}

.brand-panel img {
  display: block;
  max-width: 100%;
  height: auto;
}

.brand-logo-full {
  width: 10rem;
}

.brand-logo-mark {
  display: none;
  width: 2.25rem;
}

/*
 * In the sidebar the panel is a direct child of the aside (not of the padded <nav>), so it
 * spans the full sidebar width with no strip beside it in either direction.
 */
.sidebar-left .brand-panel {
  width: 100%;
  min-height: 4.5rem;
  padding: 1.25rem 1rem;
}

.brand-panel-login {
  display: inline-flex;
  padding: 1.25rem 1.75rem;
  border-radius: 0.5rem;
}

.brand-panel-login .brand-logo-full {
  width: 11rem;
}

/* The mobile drawer's close control sits on the navy panel, at the inline end. */
.sidebar-left .toggle-btn {
  position: absolute;
  top: 0.4rem;
  inset-inline-end: 0.4rem;
  z-index: 1001;
  margin: 0;
  padding: 0.25rem 0.5rem;
  color: var(--surface-card);
  opacity: 0.85;
}

.sidebar-left .toggle-btn:hover,
.sidebar-left .toggle-btn:focus {
  color: var(--surface-card);
  opacity: 1;
  box-shadow: 0 0 0 0.15rem var(--brand-accent-ring);
}

/*
 * Sidebar logo states. Exactly one of the two images is visible at any time:
 *
 *   expanded desktop, hover-expanded rail, tablet/mobile drawer  ->  wordmark (logo.png)
 *   collapsed desktop rail                                        ->  symbol   (favicon.png)
 *
 * Only above 992px does ".collapsed" mean a 5rem rail that fits the symbol alone. Below that
 * breakpoint app-light.css reuses ".collapsed" for an open 16rem drawer, which keeps the
 * wordmark. Every state sets both images explicitly, so no rule depends on inheritance from
 * the generic ".brand-panel img" declaration.
 */
.sidebar-left .brand-logo-full {
  display: block;
}

.sidebar-left .brand-logo-mark {
  display: none;
}

@media (min-width: 992px) {
  .vertical.collapsed:not(.hover) .sidebar-left .brand-panel {
    padding: 1.25rem 0.5rem;
  }

  .vertical.collapsed:not(.hover) .sidebar-left .brand-logo-full {
    display: none;
  }

  .vertical.collapsed:not(.hover) .sidebar-left .brand-logo-mark {
    display: block;
  }

  /* Hovering the rail expands it back to 16rem: the wordmark returns, the symbol hides. */
  .vertical.collapsed.hover .sidebar-left .brand-logo-full {
    display: block;
  }

  .vertical.collapsed.hover .sidebar-left .brand-logo-mark {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Buttons - navy is the action colour; orange marks focus.             */
/* ------------------------------------------------------------------ */

.btn-primary {
  color: var(--surface-card);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:hover {
  color: var(--surface-card);
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus {
  color: var(--surface-card);
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--surface-card);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: var(--surface-card);
  background-color: var(--brand-primary-active);
  border-color: var(--brand-primary-active);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover {
  color: var(--surface-card);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
  color: var(--surface-card);
  background-color: var(--brand-primary-active);
  border-color: var(--brand-primary-active);
}

.btn-outline-secondary:focus,
.btn-outline-danger:focus,
.btn-link:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.btn-link {
  color: var(--brand-primary);
}

.btn-link:hover {
  color: var(--brand-primary-hover);
}

/* ------------------------------------------------------------------ */
/* Forms - navy border on focus, orange ring.                           */
/* ------------------------------------------------------------------ */

.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

/* Technical values (e-mail, passwords, codes) keep an LTR field even inside the Arabic UI. */
.form-control[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: var(--surface-card);
  border-color: var(--brand-primary);
  background-color: var(--brand-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--brand-primary);
}

/* ------------------------------------------------------------------ */
/* Cards - white, thin neutral border, light shadow.                    */
/* ------------------------------------------------------------------ */

.card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
}

.card.shadow {
  box-shadow: var(--shadow-card) !important;
}

.card-header {
  background-color: var(--surface-card);
  border-bottom-color: var(--border-default);
}

.card-header .card-title {
  color: var(--brand-primary);
  font-size: 0.95rem;
}

.card-footer {
  background-color: transparent;
  border-top-color: var(--border-default);
}

.card-header:first-child {
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

.card-footer:last-child {
  border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
}

/* ------------------------------------------------------------------ */
/* Tables and pagination                                                */
/* ------------------------------------------------------------------ */

.table th,
.table td {
  border-color: var(--border-default);
}

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

.page-link {
  color: var(--brand-primary);
}

.page-link:hover {
  color: var(--brand-primary-hover);
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.page-item.active .page-link {
  color: var(--surface-card);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ------------------------------------------------------------------ */
/* Badges - brand pills carry information; status pills stay semantic.  */
/* ------------------------------------------------------------------ */

.badge-primary {
  color: var(--brand-primary);
  background-color: var(--brand-primary-soft);
  border: 1px solid var(--border-default);
}

.badge-success {
  color: var(--status-success-text);
  background-color: var(--status-success-bg);
}

.badge-warning {
  color: var(--status-warning-text);
  background-color: var(--status-warning-bg);
}

.badge-danger {
  color: var(--status-danger-text);
  background-color: var(--status-danger-bg);
}

.badge-secondary {
  color: var(--status-neutral-text);
  background-color: var(--status-neutral-bg);
}

/* One shared "planned" treatment for the sidebar, Quick Access, tiles and the CRM card. */
.badge-soon {
  display: inline-block;
  padding: 0.2em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background-color: var(--surface-card);
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

[dir="rtl"] .badge-soon {
  letter-spacing: 0;
  font-size: 0.72rem;
}

.badge-soon-lg {
  font-size: 0.75rem;
  padding: 0.35em 0.9em;
}

/* ------------------------------------------------------------------ */
/* Dropdowns                                                            */
/* ------------------------------------------------------------------ */

.dropdown-menu {
  border-color: var(--border-default);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--brand-primary);
  background-color: var(--brand-primary-soft);
}

/* ------------------------------------------------------------------ */
/* Footer attribution                                                   */
/* ------------------------------------------------------------------ */

.footer a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.footer a:hover,
.footer a:focus {
  color: var(--brand-primary-hover);
}

/* ------------------------------------------------------------------ */
/* Top navigation - lighter than the sidebar, navy brand text.          */
/* ------------------------------------------------------------------ */

.topnav {
  min-height: 3.75rem;
  border-bottom: 1px solid var(--border-default);
  background-color: var(--surface-card);
}

.topnav-brand {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  white-space: nowrap;
}

.topnav-brand:hover,
.topnav-brand:focus {
  text-decoration: none;
}

.topnav-brand-name {
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.topnav-brand-suffix {
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.85rem;
}

.topnav-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  cursor: default;
}

.topnav-identity-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.85rem;
}

.topnav-identity-role {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.topnav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
  border: 1px solid var(--border-default);
}

.topnav .nav-link.dropdown-toggle:hover .topnav-avatar,
.topnav .nav-link.dropdown-toggle:focus .topnav-avatar {
  border-color: var(--brand-primary);
}

/* Language switch - the same quiet treatment as the account controls, never competing with them. */

.topnav-lang-form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.topnav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border-default);
  border-radius: 0.5rem;
  background-color: var(--surface-card);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.topnav-lang .fe {
  color: var(--text-secondary);
}

.topnav-lang:hover {
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
  border-color: var(--brand-primary-soft);
}

.topnav-lang:hover .fe {
  color: var(--brand-primary);
}

.topnav-lang:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

/* The Arabic label is set in Tajawal even inside the English UI, and vice versa. */
.topnav-lang[lang="ar"] .topnav-lang-text {
  font-family: "Tajawal", "Overpass", sans-serif;
}

.topnav-lang[lang="en"] .topnav-lang-text {
  font-family: "Overpass", sans-serif;
}

.topnav .nav-item + .nav-item .topnav-lang-form,
.topnav .nav-item .topnav-lang-form {
  margin-inline-end: 0.75rem;
}

/* Login page: the switch sits at the top inline-end corner. */
.login-lang {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem 0;
}

/* ------------------------------------------------------------------ */
/* Sidebar navigation                                                   */
/* ------------------------------------------------------------------ */

.sidebar-left.border-right {
  border-right-color: var(--border-default) !important;
}

.vertical .sidebar-left .vertnav {
  padding: 0.5rem 0.75rem 1rem;
  align-items: flex-start;
}

.vertical .sidebar-left .vertnav .nav-heading {
  display: block;
  width: 100%;
  padding: 0.75rem 0.75rem 0.35rem;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: start;
}

[dir="rtl"] .vertical .sidebar-left .vertnav .nav-heading {
  letter-spacing: 0;
  font-size: 0.75rem;
}

.vertical .sidebar-left .navbar-nav > .nav-item {
  margin-bottom: 0.125rem;
}

.vertical .sidebar-left .navbar-nav > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--text-primary);
  line-height: 1.25;
  text-align: start;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.vertical .sidebar-left .navbar-nav > .nav-item > .nav-link .fe {
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
  color: var(--text-secondary);
}

.vertical .sidebar-left .navbar-nav > .nav-item > .nav-link .item-text {
  flex: 1 1 auto;
  margin-inline-start: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vertical .sidebar-left .navbar-nav > .nav-item > a.nav-link[href]:hover,
.vertical .sidebar-left .navbar-nav > .nav-item > a.nav-link[href]:focus {
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.vertical .sidebar-left .navbar-nav > .nav-item > a.nav-link[href]:hover .fe,
.vertical .sidebar-left .navbar-nav > .nav-item > a.nav-link[href]:focus .fe {
  color: var(--brand-primary);
}

.vertical .sidebar-left .navbar-nav > .nav-item > a.nav-link[href]:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem var(--brand-accent-ring);
}

/*
 * Active item - soft navy surface, navy text, a single orange indicator on the inline-start
 * edge. Drawn with an inset shadow, so it follows the item's rounded corners; the RTL block
 * flips its side.
 */

.vertical .sidebar-left .navbar-nav > .nav-item.active {
  background-color: transparent;
  border: none;
}

.vertical .sidebar-left .navbar-nav > .nav-item.active > .nav-link {
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--border-emphasis);
}

.vertical .sidebar-left .navbar-nav > .nav-item.active > .nav-link .fe {
  color: var(--brand-primary);
}

/* The template marks the active item with a blue bar; the inset indicator replaces it. */
.vertical .sidebar-left .navbar-nav > .nav-item.active:after {
  display: none;
}

/* Planned entries - readable, clearly secondary, never interactive. */

.vertical .sidebar-left .navbar-nav > .nav-item-soon > .nav-link {
  color: var(--text-secondary);
  cursor: default;
}

.vertical .sidebar-left .navbar-nav > .nav-item-soon > .nav-link .fe {
  color: var(--text-muted);
}

.vertical .sidebar-left .navbar-nav > .nav-item-soon > .nav-link:hover {
  background-color: transparent;
  color: var(--text-secondary);
}

.vertnav .badge-soon {
  float: none;
  margin-inline-start: 0.5rem;
}

/*
 * Collapsed rail (>= 992px): only the icon remains. Headings and the "Soon" badge
 * follow the template's own rule for the item text, and are restored on hover.
 */
@media (min-width: 992px) {
  .vertical.collapsed:not(.hover) .sidebar-left .vertnav .nav-heading {
    display: none;
  }

  .vertical.collapsed:not(.hover) .sidebar-left .vertnav {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .vertical.collapsed:not(.hover) .sidebar-left .navbar-nav > .nav-item > .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .vertical.collapsed:not(.hover) .sidebar-left .navbar-nav > .nav-item > .nav-link .fe {
    width: auto;
  }

  /* On the rail the indicator would sit under the icon; a bottom edge reads better there. */
  .vertical.collapsed:not(.hover) .sidebar-left .navbar-nav > .nav-item.active > .nav-link {
    box-shadow: inset 0 -3px 0 var(--border-emphasis);
  }
}

/* ------------------------------------------------------------------ */
/* Dashboard home                                                       */
/* ------------------------------------------------------------------ */

.welcome-title {
  color: var(--brand-primary);
  font-weight: 700;
}

.welcome-identity {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.welcome-identity-email {
  color: var(--text-secondary);
  font-size: 0.85rem;
  word-break: break-all;
}

/* Metric cards - one system: soft navy icon well, navy value, gray label and note. */

.stat-card .card-body {
  padding: 1.25rem;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.875rem;
  border-radius: 0.625rem;
  background-color: var(--brand-primary-soft);
  border: 1px solid var(--border-default);
  color: var(--brand-primary);
}

/* The one metric that asks for action carries the accent: tinted well, orange top edge. */

.stat-card-accent {
  border-top: 3px solid var(--border-emphasis);
}

.stat-icon-accent {
  background-color: var(--brand-accent-soft);
  border-color: transparent;
}

/* A completed state uses the semantic success pair, not the brand. */

.stat-icon-success {
  background-color: var(--status-success-bg);
  border-color: transparent;
  color: var(--status-success-text);
}

.stat-label {
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[dir="rtl"] .stat-label,
[dir="rtl"] .pending-reviews-table thead th {
  letter-spacing: 0;
}

.stat-value {
  margin-bottom: 0.25rem;
  color: var(--brand-primary);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-note {
  margin-bottom: 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 300;
}

/* Quick access list */

.quick-access .list-group-item {
  background-color: transparent;
  border-color: var(--border-default);
}

.quick-access .list-group-item:last-child {
  border-bottom: 0;
  border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
}

.quick-access-item {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.25rem;
  color: var(--text-primary);
}

a.quick-access-item:hover,
a.quick-access-item:focus {
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
  text-decoration: none;
}

a.quick-access-item:focus {
  outline: none;
  box-shadow: inset 0 0 0 0.15rem var(--brand-accent-ring);
}

a.quick-access-item:hover .quick-access-chevron,
a.quick-access-item:focus .quick-access-chevron {
  color: var(--brand-accent);
}

.quick-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-end: 0.875rem;
  border-radius: 0.5rem;
  background-color: var(--brand-primary-soft);
  border: 1px solid var(--border-default);
  color: var(--brand-primary);
}

.quick-access-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.quick-access-label {
  font-weight: 600;
  line-height: 1.3;
}

.quick-access-note {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 300;
}

.quick-access-chevron {
  color: var(--text-muted);
}

/* The chevron points toward the inline end; it is a direction cue, so it flips in RTL. */
[dir="rtl"] .quick-access-chevron {
  transform: scaleX(-1);
}

.quick-access-soon {
  color: var(--text-secondary);
  cursor: default;
}

.quick-access-soon .quick-access-icon {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}

/* Operations overview tiles */

.soon-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--border-default);
  background-color: var(--surface-card);
  color: var(--text-secondary);
}

.soon-tile-icon {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.soon-tile-label {
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* Pending reviews table */

.pending-reviews-table thead th {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-top: 0;
}

/* CRM card - planned state, same neutral language as the tiles. */

.crm-card .stat-icon {
  background-color: var(--surface-muted);
  color: var(--text-secondary);
}

/* CRM integration pages - read-only counts and configuration state.
   The count tile borrows the stat card's language but is solid rather than
   dashed: unlike a "Soon" tile it shows a real figure. */

.crm-count-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-default);
  background-color: var(--surface-card);
}

.crm-count-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.crm-count-value {
  color: var(--brand-primary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.crm-count-label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.crm-config-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-default);
}

.crm-config-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.crm-config-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.crm-config-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.crm-config-note {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 300;
}

/* Sync issue tiles - a count tile that opens its read-only list. Neutral at
   zero, warning tone while the mirror holds rows of that type. */

.crm-issue-tile,
.crm-issue-tile:hover,
.crm-issue-tile:focus {
  color: inherit;
  text-decoration: none;
}

.crm-issue-tile {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.crm-issue-tile:hover,
.crm-issue-tile:focus {
  border-color: var(--border-emphasis);
  box-shadow: 0 0 0 0.15rem var(--brand-accent-soft);
}

.crm-issue-tile-open .crm-count-icon {
  background-color: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.crm-issue-tile-open .crm-count-value {
  color: var(--status-warning-text);
}

/* API documentation chooser - every contract card also offers its document and Postman file:
   the main action on its own row, the two files beside each other below it. */

.api-docs-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.api-docs-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Small screens: keep the top bar on one line and give cards a little more room. */
/* ------------------------------------------------------------------ */

@media (max-width: 575.98px) {
  .topnav {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .topnav-brand-name {
    font-size: 0.95rem;
  }

  .topnav-lang {
    padding: 0.35rem 0.5rem;
  }

  .topnav-lang-text {
    font-size: 0.8rem;
  }

  .stat-value {
    font-size: 1.6rem;
  }

  .page-title {
    font-size: 1.2rem;
  }
}

/* ------------------------------------------------------------------ */
/* RTL - mirrors of the template's physical rules                        */
/* ------------------------------------------------------------------ */
/*
 * app-light.css positions the sidebar with left:0 and offsets the header and content with
 * margin-left. Everything written in this file already uses logical properties; the rules
 * below flip only what the template hard-codes. Selector order follows the template so the
 * same state wins in both directions (collapsed before hover, base before collapsed in the
 * drawer breakpoint).
 */

/* Sidebar on the right, its edge shadow on the inner side. */
[dir="rtl"] .vertical .sidebar-left,
[dir="rtl"] .vertical.hover .sidebar-left,
[dir="rtl"] .narrow.open .sidebar-left,
[dir="rtl"] .vertical.collapsed .sidebar-left,
[dir="rtl"] .vertical.narrow .sidebar-left {
  left: auto;
  right: 0;
  box-shadow: inset 1px 0 0 rgba(18, 38, 63, 0.05);
}

[dir="rtl"] .sidebar-left.border-right {
  border-right: 0 !important;
  border-left: 1px solid var(--border-default) !important;
}

/* Header and content offset from the right instead of the left. */
[dir="rtl"] .vertical.collapsed .topnav,
[dir="rtl"] .vertical.collapsed .main-content,
[dir="rtl"] .vertical.narrow .topnav,
[dir="rtl"] .vertical.narrow .main-content {
  margin-left: 0;
  margin-right: var(--sidebar-rail-width);
}

[dir="rtl"] .vertical .topnav,
[dir="rtl"] .vertical .main-content,
[dir="rtl"] .vertical.hover .topnav,
[dir="rtl"] .vertical.hover .main-content,
[dir="rtl"] .narrow.open .topnav,
[dir="rtl"] .narrow.open .main-content {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

@media (max-width: 991.98px) {
  /* Drawer breakpoint: closed drawer has no offset, open drawer pushes from the right. */
  [dir="rtl"] .vertical .topnav,
  [dir="rtl"] .vertical .main-content,
  [dir="rtl"] .vertical.hover .topnav,
  [dir="rtl"] .vertical.hover .main-content,
  [dir="rtl"] .vertical.narrow .topnav,
  [dir="rtl"] .vertical.narrow .main-content {
    margin-left: 0;
    margin-right: 0;
  }

  [dir="rtl"] .vertical.collapsed .topnav,
  [dir="rtl"] .vertical.collapsed .main-content,
  [dir="rtl"] .vertical.narrow.open .topnav,
  [dir="rtl"] .vertical.narrow.open .main-content {
    margin-left: 0;
    margin-right: var(--sidebar-width);
  }
}

/* Active indicator moves to the inline-start edge, which is now the right. */
[dir="rtl"] .vertical .sidebar-left .navbar-nav > .nav-item.active > .nav-link {
  box-shadow: inset -3px 0 0 var(--border-emphasis);
}

@media (min-width: 992px) {
  [dir="rtl"] .vertical.collapsed:not(.hover) .sidebar-left .navbar-nav > .nav-item.active > .nav-link {
    box-shadow: inset 0 -3px 0 var(--border-emphasis);
  }
}

/* Account menu: the toggle sits at the inline end, so the menu aligns to that edge. */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

[dir="rtl"] .dropdown-menu-right {
  right: auto;
  left: 0;
}

[dir="rtl"] .dropdown-toggle::after {
  margin-left: 0;
  margin-right: 0.255em;
}

/* Checkboxes and switches: control on the inline-start side of the label. */
[dir="rtl"] .custom-control {
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after {
  left: auto;
  right: -1.5rem;
}

[dir="rtl"] .custom-switch {
  padding-left: 0;
  padding-right: 2.25rem;
}

[dir="rtl"] .custom-switch .custom-control-label::before {
  left: auto;
  right: -2.25rem;
}

[dir="rtl"] .custom-switch .custom-control-label::after {
  left: auto;
  right: calc(-2.25rem + 2px);
}

[dir="rtl"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(-0.75rem);
}

/* Dismissible alerts: the close control moves to the inline end. */
[dir="rtl"] .close {
  float: left;
}

[dir="rtl"] .alert-dismissible {
  padding-right: 1.25rem;
  padding-left: 3.8125rem;
}

[dir="rtl"] .alert-dismissible .close {
  right: auto;
  left: 0;
}

/* Breadcrumb separators. */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
  padding-right: 0.5rem;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  padding-right: 0;
  padding-left: 0.5rem;
}

/* Pagination corners. */
[dir="rtl"] .page-item:first-child .page-link {
  margin-left: -1px;
  margin-right: 0;
  border-radius: 0 0.25rem 0.25rem 0;
}

[dir="rtl"] .page-item:last-child .page-link {
  border-radius: 0.25rem 0 0 0.25rem;
}

/* Native select arrow stays on the inline end. */
[dir="rtl"] select.form-control {
  background-position: left 0.75rem center;
  padding-right: 0.75rem;
  padding-left: 1.75rem;
}

/* Tables read right-to-left; technical values inside them are isolated as LTR by markup. */
[dir="rtl"] .table {
  text-align: right;
}

[dir="rtl"] .form-row > .col,
[dir="rtl"] .form-row > [class*="col-"] {
  text-align: start;
}

/* Operational tiles share the existing surfaces, with a visible keyboard focus. */
a.property-count-link {
  color: var(--brand-primary);
  text-decoration: none;
}

a.property-count-link:hover,
a.property-count-link:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Project media and editor controls. */
.project-media-preview { max-width: 220px; max-height: 160px; }
.project-upload-preview { max-width: 180px; max-height: 140px; }
[data-amenity-row] .btn { margin-inline-start: .5rem; }
[dir="rtl"] [data-project-editor] .form-check { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] [data-project-editor] .form-check-input { margin-left: 0; margin-right: -1.25rem; }

/* Copy button in tables, cards, and definition lists */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-secondary);
  border-radius: 0.25rem;
  vertical-align: middle;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  text-decoration: none !important;
}

.copy-btn:hover,
.copy-btn:focus {
  color: var(--brand-primary);
  background-color: var(--brand-primary-soft);
  outline: none;
}

.copy-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--brand-accent-ring);
}

.copy-btn.copy-success {
  color: #1e6d53;
  background-color: var(--status-success-bg);
}

.crm-code-pill {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
  background-color: #f1f3f9;
  border: 1px solid #dfe5fb;
  border-radius: 0.25rem;
  color: #1a202c;
  display: inline-block;
  line-height: 1.2;
}

[dir="rtl"] .copy-btn {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

/* Mobile App Content: thumbnails and approximate phone previews. */
.mc-thumb { width: 48px; height: 84px; object-fit: cover; border-radius: 6px; border: 1px solid #e3e7ee; }
.mc-thumb-wide { width: 96px; height: 54px; }
.mc-thumb-lg { width: 160px; height: 160px; }
.mc-preview-pair { gap: 16px; }
.mc-phone { position: relative; width: 225px; height: 500px; border-radius: 28px; overflow: hidden; background: #13254f; border: 6px solid #1b1f2a; }
.mc-phone-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-phone-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 45%, transparent 80%, rgba(0, 0, 0, .45)); }
.mc-phone-text { position: absolute; top: 64px; left: 14px; right: 14px; color: #fff; }
.mc-phone-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.mc-phone-description { font-size: 11px; margin-top: 8px; opacity: .9; }
.mc-banner { display: flex; align-items: center; max-width: 380px; min-height: 120px; padding: 14px; border-radius: 16px; background: #eef2fb; border: 1px solid #dbe2f1; }
.mc-banner-text { flex: 1; color: #13254f; }
.mc-banner-title { font-size: 16px; font-weight: 800; }
.mc-banner-description { font-size: 11px; margin-top: 4px; color: #5b6478; }
.mc-banner-action { font-size: 12px; font-weight: 700; margin-top: 8px; }
.mc-banner-image { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; margin-inline-start: 12px; }