/* ============================================================
   MOROCCAN AUBERGE — Design touristique marocain
   Palette : Bleu Chefchaouen / Bleu nuit / Bleu ciel — logo drapeau marocain
   ============================================================ */

:root {
  /* Palette bleue (Chefchaouen). Les anciens noms de variables sont
     conservés pour compatibilité avec les pages existantes. */
  --ma-terracotta: #1A4F8B;        /* bleu principal */
  --ma-terracotta-dark: #0F3563;   /* bleu foncé */
  --ma-bleu-chefchaouen: #2E7BC4;
  --ma-bleu-dark: #0B2545;
  --ma-safran: #5BA4E6;            /* accent bleu ciel */
  --ma-zellige-vert: #1596B0;      /* bleu turquoise */
  --ma-sable: #E3EDF8;             /* fond clair bleuté */
  --ma-sable-clair: #F4F8FC;
  --ma-nuit: #0B1F3A;              /* bleu nuit (texte / sidebar) */

  --ma-flag-red: #C1272D;
  --ma-flag-red-dark: #8f1c21;
  --ma-flag-green: #006233;

  --font-display: 'Amiri', 'Georgia', serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;
}

body {
  background-color: var(--ma-sable-clair);
  font-family: var(--font-body);
  color: var(--ma-nuit);
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

/* ---------- Topbar ---------- */
.topbar {
  background: linear-gradient(120deg, var(--ma-bleu-chefchaouen) 0%, var(--ma-terracotta) 45%, var(--ma-bleu-dark) 120%);
  border-bottom: 3px solid var(--ma-safran);
  position: relative;
  box-shadow: 0 2px 10px rgba(11,37,69,0.3);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  background-image: url('../img/zellige-pattern-light.svg');
  background-size: 60px 60px;
  opacity: 0.9;
}

.brand-mark { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-logo {
  width: 38px; height: 38px; flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.navbar-brand.brand-mark { font-family: var(--font-display); font-size: 1.35rem; color: #fff !important; }

/* ---------- Sidebar ---------- */
.sidebar,
.offcanvas-lg.sidebar {
  width: 250px;
  min-height: calc(100vh - 59px);
  background-color: var(--ma-nuit) !important;
  background-image: url('../img/mashrabiya-subtle.svg');
  background-size: 80px 80px;
  border-right: 1px solid rgba(91,164,230,0.25);
  color-scheme: dark;
}
.sidebar .offcanvas-body { background-color: transparent !important; }
.sidebar .nav-link {
  color: #e6effa !important;
  opacity: 1 !important;
  padding: 0.55rem 1.1rem;
  border-left: 3px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sidebar .nav-icon-badge {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50% 50% 50% 6px;
  background: linear-gradient(135deg, var(--ma-terracotta), var(--ma-bleu-chefchaouen));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.95rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
}
.sidebar .nav-link:hover .nav-icon-badge { transform: scale(1.08); }
.sidebar .nav-link.active .nav-icon-badge {
  background: linear-gradient(135deg, var(--ma-safran), var(--ma-zellige-vert));
}
.sidebar .nav-link:hover { background-color: rgba(91,164,230,0.14); color: #fff !important; }
.sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(46,123,196,0.55), rgba(46,123,196,0.12));
  border-left: 3px solid var(--ma-safran);
  color: #fff !important; font-weight: 600;
}
.sidebar hr { border-color: rgba(91,164,230,0.25) !important; }
.content-area { min-height: calc(100vh - 59px); }

/* ---------- Cartes statistiques ---------- */
.card-stat { border: none; border-radius: 14px; color: #fff; position: relative; overflow: hidden; }
.card-stat::after {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/zellige-pattern-light.svg');
  background-size: 50px 50px; opacity: 0.15; pointer-events: none;
}
.card-stat.bg-terracotta { background: linear-gradient(135deg, var(--ma-terracotta), #2E7BC4); }
.card-stat.bg-teal { background: linear-gradient(135deg, var(--ma-zellige-vert), #3BB3CC); }
.card-stat.bg-dark-sand { background: linear-gradient(135deg, var(--ma-bleu-dark), #24578F); }
.card-stat.bg-danger-soft { background: linear-gradient(135deg, #9c2a1e, #c94a3a); }

.card { border: 1px solid rgba(26,79,139,0.12); border-radius: 12px; }

/* ---------- Page de connexion — bleu + logo drapeau marocain ---------- */
.login-page { min-height: 100vh; display: flex; background: var(--ma-bleu-dark); }
.login-hero {
  flex: 1.1; position: relative;
  background: linear-gradient(160deg, var(--ma-bleu-chefchaouen) 0%, var(--ma-terracotta) 45%, var(--ma-bleu-dark) 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: var(--ma-sable-clair); padding: 3rem; overflow: hidden;
}
.login-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/zellige-pattern-light.svg');
  background-size: 70px 70px; opacity: 0.35;
}
.login-hero .arch-illustration { width: 180px; position: relative; z-index: 1; margin-bottom: 1.5rem; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)); }
.login-hero h1 { font-size: 2.2rem; position: relative; z-index: 1; text-align: center; margin-bottom: 0.4rem; }
.login-hero p { position: relative; z-index: 1; color: var(--ma-sable-clair); text-align: center; max-width: 320px; font-family: var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; }
.login-hero .flag-stripe { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--ma-flag-red) 0 50%, var(--ma-flag-green) 50% 100%); }

.login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--ma-sable-clair); padding: 2rem; }
.login-card {
  border: none; border-radius: 4px 4px 120px 120px / 4px 4px 60px 60px;
  box-shadow: 0 20px 50px rgba(11,37,69,0.22);
  max-width: 400px; width: 100%; padding-top: 2.5rem !important;
  border-top: 4px solid var(--ma-terracotta); position: relative;
}

@media (max-width: 860px) {
  .login-page { flex-direction: column; }
  .login-hero { padding: 2rem 1.5rem; min-height: 260px; }
  .login-hero .arch-illustration { width: 140px; margin-bottom: 0.8rem; }
  .login-hero h1 { font-size: 1.5rem; }
}

/* ---------- Boutons ---------- */
.btn-primary-ma { background-color: var(--ma-terracotta); border-color: var(--ma-terracotta); color: #fff; font-weight: 500; letter-spacing: 0.02em; }
.btn-primary-ma:hover { background-color: var(--ma-terracotta-dark); border-color: var(--ma-terracotta-dark); color: #fff; }

/* ---------- Tableaux ---------- */
.table thead th {
  background-color: var(--ma-sable); color: var(--ma-nuit); font-family: var(--font-body);
  font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--ma-safran);
}
.badge-statut { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; }

/* ---------- En-têtes de page ---------- */
.page-header-ma { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.2rem; }
.page-header-ma .icon-arch {
  width: 42px; height: 42px; border-radius: 50% 50% 50% 6px;
  background: linear-gradient(135deg, var(--ma-terracotta), var(--ma-bleu-chefchaouen));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0;
}
.page-header-ma h4 { margin: 0; }

/* ---------- Divider ornemental (ligne + losange central, sans motif tronqué) ---------- */
.zellige-divider {
  height: 2px;
  border: none;
  border-radius: 2px;
  margin: 1.2rem 0;
  background: linear-gradient(90deg, var(--ma-terracotta) 0%, var(--ma-safran) 50%, var(--ma-terracotta) 100%);
  opacity: 0.55;
  position: relative;
}
.zellige-divider::after {
  content: "◆";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ma-sable-clair);
  color: var(--ma-safran);
  font-size: 0.7rem;
  padding: 0 0.5rem;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ma-sable-clair); }
::-webkit-scrollbar-thumb { background: var(--ma-terracotta); border-radius: 6px; }