@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    #ercft-bar {display: flex !important;}
    #ercft-ul {display: none !important;}
}
/* ================================================================
   ERCFT – ercft.css  (MASTER STYLESHEET)
   Single file for entire site — public pages + admin panel.

   LOAD ORDER:
     1. This file sets CSS variables as fallbacks in :root
     2. theme-vars.php outputs an inline <style> that UPDATES
        those same :root variables from the database.
        Because both use identical variable names, the inline
        style simply changes the values — it cannot override
        font-size or any other property here.

   SECTIONS:
     A.  Reset & Base
     B.  CSS Variables (fallback defaults)
     C.  Typography  ← font-size lives HERE, not in body
     D.  Site Header
     E.  Navbar (desktop + mobile)
     F.  Main Content & Home Boxes
     G.  Slideshow & Carousel
     H.  Buttons
     I.  Page View
     J.  Prayer Times (widget + table)
     K.  Footer
     L.  Events pages
     M.  Admin Panel  (scoped to .admin-body)
     N.  Container call to override bootstrap containers code
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   A. RESET & BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════
   B. CSS VARIABLES  — fallback defaults
      theme-vars.php overrides these values from DB at runtime
      but CANNOT override any other CSS property (font-size etc.)
   ══════════════════════════════════════════════════════════════ */
:root {
  --green-dark:  #2a5c29;
  --green-mid:   #357334;
  --green-light: #4a9648;
  --gold:        #90d021;
  --text:        #2c2c2c;
  --bg:          #f7f7f5;
  --card-bg:     #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   C. TYPOGRAPHY  — defined on html/body, NOT on body alone
      html sets the base; body inherits it.
      theme-vars.php can only change font-family, not font-size.
   ══════════════════════════════════════════════════════════════ */
html {
  font-size: 24px;      /* BASE SIZE — everything scales from here */
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 1rem;      /* = 17px — inherits from html */
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  font-family: 'Source Sans 3', sans-serif; /* overridden by theme-vars */
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Amiri', serif; /* overridden by theme-vars */
  line-height: 1.25;
  margin-top: 0;
  color: var(--green-dark);
}
h1 { font-size: 2rem;    }
h2 { font-size: 1.6rem;  }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p  { font-size: 1rem; margin-bottom: 1rem; }
li { font-size: 1rem; line-height: 1.9; }
a  { color: var(--green-mid); }
a:hover { color: var(--green-dark); }

/* ══════════════════════════════════════════════════════════════
   D. SITE HEADER
   ══════════════════════════════════════════════════════════════ */
.site-header {
  background: var(--green-dark);
  padding: 14px 0 12px;
  border-bottom: 4px solid var(--gold);
}
.brand-row  { display: flex; align-items: center; gap: 14px; }
.site-brand { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.brand-arabic { font-size: 1.6rem; color: var(--gold); line-height: 1; }
.brand-name   { color: #fff; font-size: 1.3rem; font-weight: 700; }
.brand-sub    { color: rgba(255,255,255,.55); font-size: .85rem; }
.site-logo-link { display: block; line-height: 1; text-decoration: none; }
.brand-text-beside-logo { display: flex; flex-direction: column; gap: 2px; }
.brand-text-beside-logo .brand-name { color: #fff; }
.brand-text-beside-logo .brand-sub  { color: rgba(255,255,255,.55); font-size: .85rem; }

/* ══════════════════════════════════════════════════════════════
   E. NAVBAR
   ══════════════════════════════════════════════════════════════ */
#ercft-nav {
  background: var(--green-mid);
  position: relative;
  z-index: 9000;
  width: 100%;
}
#ercft-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#ercft-nav li { list-style: none !important; margin: 0 !important; padding: 0 !important; }

/* Hamburger bar — shown on mobile only */
#ercft-bar {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  min-height: 54px;
  background: var(--green-mid);
}
#ercft-brand { color: #fff; font-weight: 700; font-size: 1.05rem; }
#ercft-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; background: transparent;
  border: 2px solid rgba(255,255,255,.6); border-radius: 5px;
  padding: 8px 10px; cursor: pointer; -webkit-appearance: none;
  appearance: none; outline: none; flex-shrink: 0;
}
#ercft-btn span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
#ercft-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#ercft-btn.open span:nth-child(2) { opacity: 0; }
#ercft-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Desktop menu */
#ercft-ul {
  display: flex; flex-direction: row; align-items: stretch;
  width: 100%; margin: 0 auto !important; padding: 0 15px !important;
}
#ercft-ul > li { position: relative; }
#ercft-ul a {
  display: block; color: rgba(255,255,255,.92);
  text-decoration: none !important; font-weight: 600;
  font-size: .95rem; padding: 15px 13px; white-space: nowrap;
  transition: background .15s, color .15s;
}
#ercft-ul > li > a:hover,
#ercft-ul > li.ercft-has.open > a {
  background: var(--green-dark); color: var(--gold);
}
.ercft-arr { font-size: .6rem; margin-left: 3px; }

/* Desktop dropdown */
#ercft-ul .ercft-sub {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 210px; background: var(--green-dark);
  border-top: 3px solid var(--gold); border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); z-index: 9999;
}
#ercft-ul li.ercft-has.open > .ercft-sub { display: block; }
#ercft-ul .ercft-sub li a {
  padding: 11px 18px !important; font-size: .92rem !important;
  color: rgba(255,255,255,.88) !important; white-space: normal;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#ercft-ul .ercft-sub li:last-child a { border-bottom: none !important; }
#ercft-ul .ercft-sub li a:hover {
  background: var(--green-mid) !important; color: var(--gold) !important;
}

/* ── Mobile navbar (≤ 767px) ── */
@media screen and (max-width: 767px) {
  #ercft-bar { display: flex !important; }
  #ercft-ul {
    display: none !important; flex-direction: column !important;
    width: 100% !important; max-width: 100% !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--green-dark) !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
    overflow-y: auto !important; max-height: 75vh !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #ercft-ul.open { display: flex !important; }
  #ercft-ul li   { width: 100% !important; }
  #ercft-ul a {
    padding: 15px 20px !important; font-size: 1rem !important;
    white-space: normal !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }
  .ercft-tog {
    display: flex !important; justify-content: space-between !important;
    align-items: center !important;
  }
  #ercft-ul .ercft-sub {
    display: none !important; position: static !important;
    width: 100% !important; min-width: 0 !important;
    box-shadow: none !important; border: none !important;
    border-radius: 0 !important; background: rgba(0,0,0,.22) !important;
    z-index: auto !important;
  }
  #ercft-ul li.ercft-has.open > .ercft-sub { display: block !important; }
  #ercft-ul .ercft-sub li a {
    padding: 13px 20px 13px 38px !important; font-size: .95rem !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  html { font-size: 16px; }
  h1   { font-size: 1.6rem; }
  h2   { font-size: 1.3rem; }
  .main-content { padding-top: 16px !important; }
  .home-box     { padding: 18px 16px !important; }
  .carousel-inner img { height: 220px !important; }
  .site-footer .col-sm-4 { margin-bottom: 24px; }
  .page-hero h1 { font-size: 1.4rem !important; }
}

/* JS .mob class backup */
#ercft-nav.mob #ercft-bar { display: flex !important; }
#ercft-nav.mob #ercft-ul {
  display: none !important; flex-direction: column !important;
  width: 100% !important; max-width: 100% !important;
  padding: 0 !important; margin: 0 !important;
  background: var(--green-dark) !important;
  border-top: 1px solid rgba(255,255,255,.15) !important;
  overflow-y: auto; max-height: 75vh;
}
#ercft-nav.mob #ercft-ul.open { display: flex !important; }
#ercft-nav.mob #ercft-ul li { width: 100%; }
#ercft-nav.mob #ercft-ul a {
  padding: 15px 20px !important; font-size: 1rem !important;
  white-space: normal !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
#ercft-nav.mob .ercft-tog {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important;
}
#ercft-nav.mob .ercft-sub {
  display: none !important; position: static !important;
  width: 100% !important; min-width: 0 !important;
  box-shadow: none !important; border: none !important;
  border-radius: 0 !important; background: rgba(0,0,0,.22) !important;
}
#ercft-nav.mob li.ercft-has.open > .ercft-sub { display: block !important; }
#ercft-nav.mob .ercft-sub li a {
  padding: 13px 20px 13px 38px !important; font-size: .95rem !important;
}

/* ══════════════════════════════════════════════════════════════
   F. MAIN CONTENT & HOME BOXES
   ══════════════════════════════════════════════════════════════ */
.main-content { padding-top: 28px; padding-bottom: 50px; }

.home-box {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,.09);
  border-left: 5px solid var(--green-mid);
  border-radius: 3px;
  padding: 26px 30px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  width: 100%;
}
.home-box.slideshow-wrap { padding: 0 !important; border-left: none; overflow: hidden; }
.home-box.prayer-btn-box { padding: 14px 20px; text-align: right; background: rgba(0,0,0,.02); }

.greeting-box {
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  color: #fff; text-align: center; border-left: 5px solid var(--gold);
}
.arabic-greeting { display: block; font-size: 2.2rem; color: var(--gold); line-height: 1.2; margin-bottom: 4px; }
.greeting-trans  { font-size: 1rem; opacity: .8; }

.page-card-title        { margin: 0 0 10px; font-size: 1.4rem; }
.page-card-title a      { color: var(--green-mid); text-decoration: none; }
.page-card-title a:hover{ color: var(--green-dark); }
.label-category {
  display: inline-block; background: var(--gold); color: #1a2e1a;
  font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 3px;
  margin-bottom: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.page-card-excerpt { color: #444; font-size: 1rem; margin-bottom: 16px; }
.page-card-footer  { text-align: right; }

/* ══════════════════════════════════════════════════════════════
   G. SLIDESHOW
   ══════════════════════════════════════════════════════════════ */
.carousel-inner img { width: 100%; height: 100% !important; object-fit: cover; display: block; }

/* ══════════════════════════════════════════════════════════════
   H. BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn-ercft {
  background: var(--green-mid); color: #fff !important; border: none;
  font-weight: 700; border-radius: 4px; padding: 10px 22px;
  font-size: 1rem; cursor: pointer; display: inline-block;
  text-decoration: none !important; transition: background .2s;
}
.btn-ercft:hover, .btn-ercft:focus {
  background: var(--green-dark); color: var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════════
   I. PAGE VIEW (view.php)
   ══════════════════════════════════════════════════════════════ */
.dash-box {
  background: var(--card-bg); border: 1px solid rgba(0,0,0,.09);
  border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  padding: 28px; margin-bottom: 26px;
}
.page-view       { line-height: 1.8; }
.page-body       { font-size: 1rem; line-height: 1.8; }
.page-body img   { max-width: 100%; height: auto; border-radius: 6px; }
.page-body table { width: 100%; border-collapse: collapse; }
.page-body td, .page-body th { border: 1px solid #ddd; padding: 10px 14px; }
.page-body th    { background: #f0f8f0; color: var(--green-dark); }

/* ══════════════════════════════════════════════════════════════
   J. PRAYER TIMES
   ══════════════════════════════════════════════════════════════ */

/* Today's widget */
.pt-today-box    { padding: 0 !important; overflow: hidden; border-left: none !important; }
.pt-today-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; padding: 18px 24px 14px;
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  border-bottom: 3px solid var(--gold);
}
.pt-today-title { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 700; }
.pt-today-date  { margin: 3px 0 0; color: rgba(255,255,255,.7); font-size: .88rem; }
.pt-full-link   { color: var(--gold); font-size: .88rem; font-weight: 700; text-decoration: none; }
.pt-full-link:hover { color: #fff; text-decoration: none; }
.pt-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.pt-row, .pt-row-current, .pt-row-next {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.07);
  border-right: 1px solid rgba(0,0,0,.07); background: var(--card-bg);
}
.pt-row:nth-child(3n), .pt-row-current:nth-child(3n), .pt-row-next:nth-child(3n) { border-right: none; }
.pt-row-current { background: linear-gradient(135deg, var(--green-dark), var(--green-mid)) !important; }
.pt-row-current .pt-name { color: rgba(255,255,255,.9); }
.pt-row-current .pt-time { color: var(--gold); }
.pt-row-next    { background: rgba(53,115,52,.08) !important; }
.pt-row-next .pt-name, .pt-row-next .pt-time { color: var(--green-dark); font-weight: 700; }
.pt-row-left    { display: flex; align-items: center; gap: 9px; }
.pt-icon  { font-size: 1.2rem; line-height: 1; }
.pt-name  { font-weight: 600; font-size: 1rem; color: #333; }
.pt-time  { font-size: 1.1rem; font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.pt-badge { font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; }
.pt-badge-now  { background: var(--gold); color: #1a2e1a; }
.pt-badge-next { background: var(--green-mid); color: #fff; }
@media(max-width:600px) {
  .pt-grid { grid-template-columns: repeat(2,1fr); }
  .pt-row:nth-child(3n),.pt-row-current:nth-child(3n),.pt-row-next:nth-child(3n){ border-right:1px solid rgba(0,0,0,.07); }
  .pt-row:nth-child(2n),.pt-row-current:nth-child(2n),.pt-row-next:nth-child(2n){ border-right:none; }
}

/* Monthly prayer table */
.prayer-table td, .prayer-table th { text-align: center; vertical-align: middle !important; font-size: 1rem; }
.prayer-table thead tr th {
  background-color: var(--green-mid) !important; color: #fff !important;
  font-weight: 700 !important; border-color: var(--green-dark) !important;
}

/* ══════════════════════════════════════════════════════════════
   K. FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--green-dark); color: rgba(255,255,255,.78);
  padding: 40px 0 24px; margin-top: 50px; border-top: 4px solid var(--gold);
  font-size: 1rem;
}
.site-footer h4      { color: var(--gold); margin-top: 0; font-size: 1.1rem; }
.site-footer a       { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--gold); text-decoration: none; }
.site-footer hr      { border-color: rgba(255,255,255,.12); }
.site-footer .text-center { color: rgba(255,255,255,.4); font-size: .88rem; }

/* ══════════════════════════════════════════════════════════════
   L. EVENTS PAGES
   ══════════════════════════════════════════════════════════════ */
.ev-hero { background: linear-gradient(135deg,var(--green-dark),var(--green-mid)); border-radius: 12px; margin-bottom: 28px; overflow: hidden; }
.ev-hero-inner { padding: 36px 32px 28px; text-align: center; }
.ev-hero h1    { color: #fff; font-size: clamp(1.5rem,4vw,2.1rem); margin: 0 0 8px; }
.ev-hero p     { color: rgba(255,255,255,.8); margin: 0 0 16px; font-size: 1rem; }
.ev-tabs       { display: inline-flex; background: rgba(0,0,0,.2); border-radius: 50px; padding: 4px; gap: 4px; }
.ev-tab        { padding: 9px 22px; border-radius: 50px; text-decoration: none !important; font-weight: 700; font-size: .92rem; color: rgba(255,255,255,.75); transition: background .2s, color .2s; display: flex; align-items: center; gap: 6px; }
.ev-tab:hover  { color: #fff; background: rgba(255,255,255,.15); }
.ev-tab-active { background: var(--gold) !important; color: #1a2e1a !important; }
.ev-badge      { background: #fff; color: #2a5c29; border-radius: 20px; padding: 1px 7px; font-size: .72rem; font-weight: 900; }
.ev-badge-dim  { background: rgba(255,255,255,.25); color: #fff; }
.ev-empty      { background: #fff; border-radius: 12px; box-shadow: 0 3px 16px rgba(0,0,0,.07); padding: 60px 30px; text-align: center; }
.ev-empty h3   { color: #666; margin: 0 0 8px; font-size: 1.2rem; }
.ev-card-upcoming { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.08); display: flex; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.ev-card-upcoming:hover { box-shadow: 0 8px 30px rgba(0,0,0,.13); transform: translateY(-2px); }
.ev-card-date  { flex: 0 0 110px; background: linear-gradient(160deg,var(--green-dark),var(--green-mid)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 10px; text-align: center; gap: 2px; }
.ev-cal-month  { color: var(--gold); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ev-cal-day    { color: #fff; font-size: 2.4rem; font-weight: 900; line-height: 1; }
.ev-cal-year   { color: rgba(255,255,255,.55); font-size: .75rem; }
.ev-countdown  { margin-top: 10px; background: rgba(0,0,0,.2); border-radius: 8px; padding: 6px 10px; }
.ev-cd-num     { display: block; color: #fff; font-size: 1.3rem; font-weight: 900; line-height: 1; }
.ev-cd-label   { display: block; color: rgba(255,255,255,.65); font-size: .7rem; margin-top: 2px; }
.ev-badge-now  { margin-top: 10px; background: #e74c3c; color: #fff; border-radius: 6px; padding: 4px 8px; font-size: .7rem; font-weight: 800; animation: pulse 1.5s infinite; }
.ev-badge-today{ margin-top: 10px; background: var(--gold); color: #1a2e1a; border-radius: 6px; padding: 4px 8px; font-size: .7rem; font-weight: 800; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.ev-card-body  { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.ev-card-header{ display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ev-card-title { margin: 0; font-size: 1.2rem; color: var(--green-dark); flex: 1; }
.ev-meta       { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-meta-item  { color: #555; font-size: .92rem; background: #f5f5f5; border-radius: 20px; padding: 4px 12px; }
.ev-card-notes { color: #444; font-size: .95rem; line-height: 1.7; margin: 0; padding: 12px 16px; background: #fafafa; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; }
.ev-card-footer{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.ev-btn        { display: inline-block; padding: 9px 18px; border-radius: 6px; font-size: .92rem; font-weight: 700; text-decoration: none !important; background: var(--green-mid); color: #fff !important; transition: background .2s; }
.ev-btn:hover  { background: var(--green-dark); color: var(--gold) !important; }
.ev-btn-wa     { background: #25D366 !important; }
.ev-past-grid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 20px; }
.ev-past-card  { background: #fff; border-radius: 12px; box-shadow: 0 3px 16px rgba(0,0,0,.08); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.ev-past-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.ev-past-header{ height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; position: relative; }
.ev-past-icon  { font-size: 2.4rem; opacity: .9; }
.ev-past-date-badge { text-align: right; }
.ev-past-day   { display: block; color: #fff; font-size: 2rem; font-weight: 900; line-height: 1; }
.ev-past-mon   { display: block; color: rgba(255,255,255,.75); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.ev-past-body  { padding: 16px 18px 14px; }
.ev-past-title { margin: 0 0 8px; color: var(--green-dark); font-size: 1rem; line-height: 1.35; }
.ev-past-meta  { font-size: .88rem; color: #666; margin-bottom: 8px; }
.ev-past-notes { font-size: .88rem; color: #555; line-height: 1.6; margin: 0 0 10px; font-style: italic; }
.ev-past-label { display: inline-block; background: #f0f0f0; color: #888; border-radius: 20px; padding: 3px 12px; font-size: .75rem; font-weight: 700; }
@media(max-width:767px){
  .ev-hero-inner { padding: 24px 16px 20px; }
  .ev-tabs { flex-direction: column; border-radius: 12px; }
  .ev-tab  { justify-content: center; border-radius: 8px; }
  .ev-card-upcoming { flex-direction: column; }
  .ev-card-date { flex-direction: row; padding: 14px 18px; flex: none; gap: 14px; justify-content: flex-start; }
  .ev-cal-day   { font-size: 1.8rem; }
  .ev-countdown { margin-top: 0; margin-left: auto; }
  .ev-card-body { padding: 16px; }
  .ev-card-footer { flex-direction: column; }
  .ev-btn { text-align: center; }
  .ev-past-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   M. ADMIN PANEL  — scoped to .admin-body only
      These rules NEVER affect public pages because public pages
      do not have class="admin-body" on <body>.
   ══════════════════════════════════════════════════════════════ */
.admin-body {
  background: #f0f2f0;
  font-size: 1rem;
}
.admin-body .admin-navbar {
  background: var(--green-dark) !important;
  border: none;
  border-bottom: 3px solid var(--gold);
}
.admin-body .admin-navbar .navbar-brand { color: var(--gold) !important; font-size: 1.1rem; }
.admin-body .admin-navbar .nav > li > a { color: rgba(255,255,255,.8) !important; font-size: .95rem; }
.admin-body .admin-navbar .nav > li > a:hover,
.admin-body .admin-navbar .nav > li.active > a { color: var(--gold) !important; background: rgba(0,0,0,.2) !important; }
.admin-body .admin-navbar .navbar-nav > li > .dropdown-menu { background: var(--green-dark); border-top: 2px solid var(--gold); }
.admin-body .admin-navbar .navbar-nav > li > .dropdown-menu > li > a { color: rgba(255,255,255,.8); font-size: .9rem; }
.admin-body .admin-navbar .navbar-nav > li > .dropdown-menu > li > a:hover { background: var(--green-mid); color: var(--gold); }
.admin-body .admin-wrapper { padding: 28px 0 50px; }
.admin-body .page-title { font-family: 'Amiri', serif; color: var(--green-dark); font-size: 1.8rem; margin-top: 0; }
.admin-body .page-header-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-body .page-header-bar .page-title { margin: 0; }
.admin-body .btn-ercft { background: var(--green-mid); color: #fff !important; border: none; font-size: .95rem; }
.admin-body .btn-ercft:hover { background: var(--green-dark); color: var(--gold) !important; }
.admin-body .admin-table th { background: #f5f5f5; font-size: .92rem; }
.admin-body .admin-table td { vertical-align: middle !important; font-size: .92rem; }
.admin-body .panel-heading  { background: #f9faf9 !important; }

/* Admin stat cards */
.admin-body .stat-card   { padding: 22px 20px; border-radius: 4px; color: #fff; margin-bottom: 16px; }
.admin-body .stat-green  { background: linear-gradient(135deg,#2a5c29,#4a9648); }
.admin-body .stat-teal   { background: linear-gradient(135deg,#1a4a4a,#2d8080); }
.admin-body .stat-amber  { background: linear-gradient(135deg,#7a5000,#c58000); }
.admin-body .stat-num    { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.admin-body .stat-label  { font-size: .88rem; opacity: .85; margin-top: 4px; }

/* Admin slideshow manager */
.admin-body .slide-sortable { border: 1px solid #ddd; border-radius: 3px; }
.admin-body .slide-item     { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eee; background: #fff; }
.admin-body .drag-handle    { cursor: move; color: #aaa; font-size: 1.1rem; padding: 0 4px; }
.admin-body .slide-thumb    { width: 80px; height: 48px; object-fit: cover; border-radius: 2px; }
.admin-body .slide-info     { flex: 1; font-size: .9rem; }
.admin-body .slide-actions  { display: flex; gap: 4px; }

/* Admin menu manager */
.admin-body .menu-group   { margin-bottom: 14px; }
.admin-body .menu-parent  { background: #e8f3e8; padding: 8px 12px; border-radius: 3px; }
.admin-body .menu-children{ padding-left: 24px; margin-top: 4px; list-style: none; }
.admin-body .menu-children li { padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
/* ══════════════════════════════════════════════════════════════
   N. Override Bootstrap container
   ══════════════════════════════════════════════════════════════ */
.container {
    width:100% !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left 15px !important
    padding-right: 15px !important;
}
/* On Mobile - full width, no fixsizing */
@media screen and (max-width :850px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}