@charset "UTF-8";

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --mc-primary:    #0d5c63;
  --mc-secondary:  #1a8c96;
  --mc-light:      #f0f8f9;
  --sidebar-w:     240px;
  --topbar-h:      56px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body { font-family:"Segoe UI",system-ui,sans-serif; margin:0; background:var(--mc-light); }

/* ============================================================
   TOPBAR
   ============================================================ */
.mc-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--mc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: 1040;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  gap: .5rem;
}
.mc-topbar .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  flex: 1;
  min-width: 0;
}
.mc-topbar .brand-title { font-size:.95rem; font-weight:700; line-height:1.1; }
.mc-topbar .brand-sub   { font-size:.6rem; opacity:.7; letter-spacing:.08em; }
.mc-topbar .brand-icon  {
  width: 34px; height: 34px;
  border-radius: .5rem;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.mc-topbar .topbar-right {
  display: flex; align-items: center; gap: .75rem; flex-shrink: 0;
}
.mc-topbar .topbar-user {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer; padding: .25rem .6rem;
  border-radius: .5rem; transition: background .15s;
}
.mc-topbar .topbar-user:hover { background: rgba(255,255,255,.12); }
.mc-topbar .user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.mc-topbar .user-name { font-size:.82rem; line-height:1.2; }
.mc-topbar .user-role { font-size:.68rem; opacity:.7; }

/* hamburger — visible uniquement sur mobile */
.mc-sidebar-toggle {
  background: none; border: none; color: #fff;
  font-size: 1.25rem; padding: .25rem .4rem;
  border-radius: .4rem; cursor: pointer;
  display: none; flex-shrink: 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.mc-sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background: linear-gradient(180deg, #0a4f55 0%, #0d5c63 40%, #0e6670 100%);
  border-right: none;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1030;
  padding: .75rem 0 2rem;
  transition: transform .25s ease;
}

.mc-nav-section {
  display: block;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; color: rgba(255,255,255,.4);
  text-transform: uppercase;
  padding: 1rem 1.1rem .3rem;
}

.mc-nav-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1.1rem;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-size: .845rem;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.mc-nav-link i { font-size:1rem; width:1.2rem; text-align:center; flex-shrink:0; color:rgba(255,255,255,.5); transition: color .12s; }
.mc-nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.mc-nav-link:hover i { color: rgba(255,255,255,.9); }
.mc-nav-link.active {
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 600;
}
.mc-nav-link.active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #f0a500;
  border-radius: 0 2px 2px 0;
}
.mc-nav-link.active i { color: #fff; }

.nav-badge {
  font-size: .62rem; background: #f0a500; color: #000;
  border-radius: 99px; padding: .15em .5em; font-weight: 700;
  margin-left: auto;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.mc-main {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 1.5rem 1.75rem;
  min-height: calc(100vh - var(--topbar-h));
}

/* ============================================================
   FOOTER
   ============================================================ */
.mc-footer {
  background: var(--mc-primary);
  color: rgba(255,255,255,.45);
  font-size: .72rem;
  padding: .5rem 1.75rem;
  margin-left: var(--sidebar-w);
  display: flex;
  justify-content: space-between;
}

/* ============================================================
   RESPONSIVE MOBILE (< 992px)
   ============================================================ */
@media (max-width: 991.98px) {
  .mc-sidebar-toggle { display: block; }
  .mc-sidebar { transform: translateX(-100%); }
  .mc-sidebar.open  { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.15); }
  .mc-main   { margin-left: 0; }
  .mc-footer { margin-left: 0; }
  .mc-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 1029;
  }
  .mc-overlay.show { display: block; }
}

/* ============================================================
   COMPOSANTS METIER
   ============================================================ */
.bg-mc { background: var(--mc-primary) !important; }

.mc-card { background:#fff; border-radius:.75rem; box-shadow:0 2px 12px rgba(0,0,0,.07); border:none; }
.mc-card .card-body { padding:1.5rem 1.75rem; }
.mc-card-header { background:var(--mc-primary); color:#fff; padding:.875rem 1.75rem; border-radius:.75rem .75rem 0 0; font-weight:600; font-size:.9rem; }

.kpi-card    { border-radius:.75rem; padding:1.4rem 1.5rem; color:#fff; box-shadow:0 4px 15px rgba(0,0,0,.15); }
.kpi-primary { background: linear-gradient(135deg, var(--mc-primary), var(--mc-secondary)); }
.kpi-success { background: linear-gradient(135deg, #0a7d45, #1aab60); }
.kpi-warning { background: linear-gradient(135deg, #c47800, #f0a500); }
.kpi-danger  { background: linear-gradient(135deg, #a71d2a, #dc3545); }
.kpi-info    { background: linear-gradient(135deg, #0a6c8c, #17a2b8); }
.kpi-value { font-size:2rem; font-weight:800; line-height:1; }
.kpi-label { font-size:.8rem; opacity:.88; margin-top:.2rem; }

.table-mc thead th { background:var(--mc-primary); color:#fff; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border:none; padding:.75rem 1rem; }
.table-mc tbody tr:hover { background: var(--mc-light); }
.table-mc tbody td { padding:.7rem 1rem; }

.btn-mc       { background:var(--mc-primary); color:#fff; border:none; }
.btn-mc:hover { background:var(--mc-secondary); color:#fff; }

.filtre-bar { background:#fff; border-radius:.5rem; padding:.875rem 1.25rem; box-shadow:0 1px 6px rgba(0,0,0,.06); margin-bottom:1rem; }

.form-label { font-weight:600; font-size:.82rem; margin-bottom:.35rem; }
.form-control, .form-select { padding:.55rem .85rem; border-radius:.45rem; }
.form-text { font-size:.78rem; margin-top:.3rem; color:#6c757d; }

/* Alias utilises dans les vues */
.table-gesiam { font-size:.85rem; }
.table-gesiam thead th { background:var(--mc-primary); color:#fff; font-size:.8rem; font-weight:600; border:none; padding:.6rem .9rem; }
.table-gesiam tbody tr:hover { background: var(--mc-light); }
.card-module { background:#fff; border-radius:.65rem; box-shadow:0 1px 8px rgba(0,0,0,.06); border:1px solid #e2ecee; margin-bottom:1rem; }
.card-header-gesiam { background:var(--mc-primary); color:#fff; border-radius:.65rem .65rem 0 0; padding:.65rem 1rem; font-weight:600; font-size:.85rem; }
.card-title { font-size:.88rem; font-weight:600; }