:root {
  --bs-primary: #1b1712;
  --bs-primary-rgb: 27, 23, 18;
  --bs-primary-text-emphasis: #1b1712;
  --bs-primary-bg-subtle: #f4e8c4;
  --bs-primary-border-subtle: #d9c48f;

  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: #2b2318;
  --bs-link-hover-color-rgb: 43, 35, 24;

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

.btn-primary {
  --bs-btn-bg: #1b1712;
  --bs-btn-border-color: #1b1712;
  --bs-btn-hover-bg: #2b2318;
  --bs-btn-hover-border-color: #2b2318;
  --bs-btn-active-bg: #362c1e;
  --bs-btn-active-border-color: #362c1e;
  --bs-btn-focus-shadow-rgb: 27, 23, 18;
}

.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{ width:240px; flex-shrink:0; background:#1b1712; color:#cdbf9c; padding:1.1rem .75rem; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.app-sidebar-brand{ display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem 1.1rem; }
.app-sidebar-mark{ width:34px; height:34px; border-radius:10px; background:#c9a227; color:#1b1712; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; font-family:"Plus Jakarta Sans","Inter",sans-serif; }
.app-sidebar-brand-text b{ display:block; font-family:"Plus Jakarta Sans","Inter",sans-serif; font-size:.86rem; color:#f4eee0; }
.app-sidebar-brand-text small{ color:#8f8267; font-size:.72rem; }
.app-sidebar-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.app-sidebar-links a{ display:block; padding:.55rem .6rem; border-radius:9px; color:#cdbf9c; text-decoration:none; font-size:.86rem; font-weight:600; border:1px solid transparent; }
.app-sidebar-links a:hover{ background:rgba(255,255,255,.05); color:#f4eee0; }
.app-sidebar-links a.active{ background:rgba(201,162,39,.14); color:#d9b74a; border-color:rgba(217,183,74,.25); }
.app-sidebar-logout{ margin-top:auto; }
.app-sidebar-logout a{ display:block; padding:.55rem .6rem; border-radius:9px; color:#cdbf9c; text-decoration:none; font-size:.86rem; font-weight:600; }
.app-sidebar-logout a:hover{ background:rgba(255,255,255,.05); color:#f4eee0; }
.app-main{ flex:1; min-width:0; padding:1.6rem 1.8rem; }

@media (max-width: 760px){
  .app-shell{ flex-direction:column; }
  .app-sidebar{ width:100%; flex-direction:row; align-items:center; overflow-x:auto; padding:.6rem; height:auto; }
  .app-sidebar-brand{ display:none; }
  .app-sidebar-links{ flex-direction:row; }
  .app-sidebar-logout{ margin-top:0; margin-left:auto; }
  .app-main{ padding:1.2rem 1rem; }
}

.btn-outline-primary {
  --bs-btn-color: #faf8f3;
  --bs-btn-bg: #1b1712;
  --bs-btn-border-color: #1b1712;
  --bs-btn-hover-color: #1b1712;
  --bs-btn-hover-bg: #f4e8c4;
  --bs-btn-hover-border-color: #1b1712;
  --bs-btn-focus-shadow-rgb: 27, 23, 18;
  --bs-btn-active-color: #faf8f3;
  --bs-btn-active-bg: #1b1712;
  --bs-btn-active-border-color: #1b1712;
  --bs-btn-disabled-color: #1b1712;
  --bs-btn-disabled-border-color: #1b1712;
}

.btn-outline-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-hover-color: #842029;
  --bs-btn-hover-bg: #f8d7da;
}

.btn-outline-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-hover-color: #0a3622;
  --bs-btn-hover-bg: #d1e7dd;
}

.btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-hover-color: #41464b;
  --bs-btn-hover-bg: #e2e3e5;
}

.btn-success {
  --bs-btn-hover-color: #0a3622;
  --bs-btn-hover-bg: #d1e7dd;
  --bs-btn-hover-border-color: #198754;
}

.btn-danger {
  --bs-btn-hover-color: #842029;
  --bs-btn-hover-bg: #f8d7da;
  --bs-btn-hover-border-color: #dc3545;
}

.app-sidebar-parent{ display:flex; align-items:center; justify-content:space-between; gap:.25rem; }
.app-sidebar-parent a{ flex:1; }
.app-sidebar-toggle{ background:none; border:none; color:#8f8267; padding:.3rem; cursor:pointer; font-size:.7rem; line-height:1; }
.app-sidebar-toggle:hover{ color:#f4eee0; }
.app-sidebar-submenu{ list-style:none; margin:0; padding:0 0 0 .9rem; display:flex; flex-direction:column; gap:2px; }
.app-sidebar-submenu a{ display:block; padding:.45rem .6rem; border-radius:9px; color:#a99a7c; text-decoration:none; font-size:.82rem; font-weight:600; }
.app-sidebar-submenu a:hover{ background:rgba(255,255,255,.05); color:#f4eee0; }
.app-sidebar-submenu a.active{ background:rgba(201,162,39,.14); color:#d9b74a; }



.kpi-card {
  background: #faf8f3;
  border: 1px solid #d9c48f;
}
.kpi-card .h3 {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  color: #1b1712;
}

.progress {
  --bs-progress-bg: #f4e8c4;
}
.progress-bar {
  --bs-progress-bar-bg: #c9a227;
  --bs-progress-bar-color: #1b1712;
}

.badge-complet {
  background-color: #c9a227;
  color: #1b1712;
}

.table {
  --bs-table-striped-bg: #faf6ec;
  border-color: #e5dcc3;
}
.table thead th {
  border-bottom: 2px solid #c9a227;
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}


.form-control,
.form-select {
  border-color: var(--bs-primary-border-subtle); /* #d9c48f, déjà défini en haut du fichier */
}
.form-control:focus,
.form-select:focus {
  border-color: #c9a227;
  box-shadow: 0 0 0 0.25rem rgba(201, 162, 39, 0.25);
}
/* Page de connexion en deux panneaux */
.connexion-split {
  display: flex;
  min-height: 100vh;
  margin: -1.6rem -1.8rem;
}

.connexion-split-image {
  flex: 5;
  background-image: url("../img/connexion-kaaba.f6f26a3592c8.jpg");
  background-size: cover;
  background-position: center;
}

.connexion-split-form {
  flex: 1;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #faf8f3;
  padding: 2rem;
}

.connexion-split-form-inner {
  width: 100%;
  max-width: 320px;
}

.connexion-split-brand {
  margin-bottom: 1.5rem;
  font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.15;
  color: #1b1712;
}

.connexion-split-brand-sup {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a227;
  margin-bottom: 4px;
}

@media (max-width: 760px) {
  .connexion-split {
    margin: -1.2rem -1rem;
  }
  .connexion-split-image {
    display: none;
  }
  .connexion-split-form {
    min-width: 0;
    min-height: 100vh;
  }
}

#sync-notifications:empty,
#offline-pending-list:empty {
  display: none;
}
.connexion-split-form {
  flex: 1;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #faf8f3;
  padding: 2rem 2rem 8rem;
}