/* ==========================================================================
   Brand palette - matches the نقابة السادة الأشراف emblem (deep green medallion,
   gold/khaki outer ring and calligraphy).
   ========================================================================== */
:root {
  --brand-green: #1a5c34;
  --brand-green-dark: #0f3d22;
  --brand-green-light: #e6f0e9;
  --brand-gold: #c9a227;
  --brand-gold-dark: #a5821c;
  --brand-gold-light: #f3e6b8;

  --bs-primary: var(--brand-green);
  --bs-primary-rgb: 26, 92, 52;
  --bs-link-color: var(--brand-green);
  --bs-link-color-rgb: 26, 92, 52;
  --bs-link-hover-color: var(--brand-green-dark);
  --bs-link-hover-color-rgb: 15, 61, 34;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: #f4f6f4;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-gold);
}

/* ---------- Buttons / badges recolored to the brand palette ---------- */
.btn-primary {
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green-dark);
  --bs-btn-hover-border-color: var(--brand-green-dark);
  --bs-btn-active-bg: var(--brand-green-dark);
  --bs-btn-active-border-color: var(--brand-green-dark);
  --bs-btn-disabled-bg: var(--brand-green);
  --bs-btn-disabled-border-color: var(--brand-green);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green);
  --bs-btn-hover-border-color: var(--brand-green);
  --bs-btn-active-bg: var(--brand-green);
  --bs-btn-active-border-color: var(--brand-green);
}

.btn-outline-success {
  --bs-btn-color: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green);
  --bs-btn-hover-border-color: var(--brand-green);
}

.btn-success {
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green-dark);
  --bs-btn-hover-border-color: var(--brand-green-dark);
  --bs-btn-active-bg: var(--brand-green-dark);
  --bs-btn-active-border-color: var(--brand-green-dark);
}

.bg-primary, .badge.bg-primary {
  background-color: var(--brand-green) !important;
}

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

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

/* Gold accent for a few "official seal" touches */
.btn-gold, a.btn-gold {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold-dark);
  color: #2b2200;
}

.btn-gold:hover {
  background-color: var(--brand-gold-dark);
  border-color: var(--brand-gold-dark);
  color: #2b2200;
}

/* ---------- App shell / sidebar ---------- */
#app-shell aside {
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06);
  border-inline-start: 3px solid var(--brand-gold);
}

#app-shell .brand-header {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  border-bottom: 3px solid var(--brand-gold);
}

#app-shell .brand-header img {
  height: 36px;
  width: 36px;
}

#app-shell .brand-header span {
  color: var(--brand-gold-light);
  font-weight: 700;
}

#app-shell nav.nav .nav-link {
  color: #3b4a54;
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  margin-bottom: 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#app-shell nav.nav .nav-link:hover {
  background-color: var(--brand-green-light);
  color: var(--brand-green);
}

#app-shell nav.nav a.nav-link.active,
#app-shell nav.nav a.nav-link[aria-current="page"] {
  background-color: var(--brand-green);
  color: #fff;
}

#app-shell nav.nav .nav-link.disabled {
  color: #adb5bd;
}

/* Collapsible section headers in the sidebar */
.nav-section-toggle {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  text-decoration: none !important;
}

.nav-section-toggle:hover {
  color: var(--brand-green);
  background-color: transparent;
}

.nav-section-toggle.nav-subsection-toggle {
  font-size: 0.78rem;
  text-transform: none;
  font-weight: 500;
  color: var(--brand-gold-dark);
  margin-top: 0.15rem;
}

.nav-section-caret {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 0.75rem;
}

.nav-section-toggle.collapsed .nav-section-caret {
  transform: rotate(-90deg);
}

/* ---------- Login page brand header ---------- */
.login-brand img {
  height: 90px;
  width: 90px;
}

/* ---------- Cards / tiles ---------- */
.card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ---------- Tables ---------- */
.table {
  background-color: #fff;
}

.table thead th {
  background-color: var(--brand-green-light);
  color: var(--brand-green-dark);
  font-weight: 600;
  border-bottom-width: 1px;
}

.table-bordered {
  border-radius: 6px;
  overflow: hidden;
}

/* ---------- Forms ---------- */
label.form-label {
  font-weight: 500;
}

/* ---------- Chat (member <-> admin, see MemberMessagesController) ---------- */
.chat-scroll {
  height: 480px;
  overflow-y: auto;
  background-color: #f4f6f4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 1rem;
}

.chat-row {
  display: flex;
}

.chat-row-mine {
  justify-content: flex-end;
}

.chat-row-theirs {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 75%;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  word-break: break-word;
}

.chat-bubble-mine {
  background-color: var(--brand-green);
  color: #fff;
  border-bottom-left-radius: 3px;
}

.chat-bubble-theirs {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom-right-radius: 3px;
}

.chat-bubble-time {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 0.2rem;
}

/* ---------- Action button groups (logical property: correct in RTL too) ---------- */
td .btn + .btn,
td .btn + form,
td form + .btn,
td form + form,
.d-flex.justify-content-between > div > .btn + .btn,
.d-flex.justify-content-between > div > .btn + a {
  margin-inline-start: 0.35rem;
}