/* mc2i -- Qualite des dossiers de competences -- app shell & page layout */

* { box-sizing: border-box; }
html, body, #root { margin: 0; height: 100%; }
body { background: var(--neutral-05); color: var(--text-default); font-family: var(--font-sans); }

a { color: var(--primary-5); text-decoration: none; }
a:hover { color: var(--primary-6); }

.material-icons-outlined { vertical-align: middle; }

.mc2i-app { min-height: 100vh; display: flex; flex-direction: column; }

/* --- TOPBAR ---------------------------------------------------------------- */
.topbar {
  height: 64px; background: #fff; border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; gap: 20px; flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 24px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

/* --- BODY: sidenav + main -------------------------------------------------- */
.app-body { display: flex; flex: 1; min-height: 0; }

/* --- SIDENAV --------------------------------------------------------------- */
.sidenav {
  width: 240px; flex-shrink: 0;
  background: #fff; border-right: 1px solid var(--divider);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  position: sticky; top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  border: none; cursor: pointer;
  font: 700 14px/1 var(--font-sans); letter-spacing: 0.5px;
  text-align: left; width: 100%; margin-bottom: 4px;
  transition: background .15s ease, color .15s ease;
  background: transparent; color: var(--text-default);
}
.nav-item:hover { background: var(--neutral-1); }
.nav-item.active { background: var(--primary-0); color: var(--primary-7); }

/* --- MAIN CONTENT ---------------------------------------------------------- */
.app-main { flex: 1; padding: 32px 48px 56px; min-width: 0; }
.page { max-width: 1320px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }

/* --- STAT ROW (KPI) -------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { padding: 20px 22px; border-radius: 16px; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; }

/* --- TABS (sub-tabs) ------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--divider); margin-bottom: 20px; }
.tab {
  padding: 12px 18px; border: none; background: transparent;
  font: 700 13px/1 var(--font-sans); letter-spacing: 1px;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-secondary);
}
.tab:hover { color: var(--text-default); }
.tab.active { color: var(--primary-5); border-bottom-color: var(--primary-5); }

/* --- DATA TABLE ------------------------------------------------------------ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font: 700 11px/1 var(--font-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-secondary);
  padding: 10px 14px; border-bottom: 1px solid var(--divider);
}
.data-table td {
  padding: 14px; border-bottom: 1px solid var(--divider);
  font-size: 14px; vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--neutral-05); }

.mc2i-app select:focus { outline: none; border-color: var(--primary-5); box-shadow: 0 0 0 3px var(--primary-0); }
.mc2i-app .data-table th.sortable { cursor: pointer; user-select: none; }
.mc2i-app .data-table th.sortable:hover { color: var(--primary-5); }

/* --- SKELETON ANIMATION ---------------------------------------------------- */
@keyframes mc2iShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton { background: linear-gradient(90deg, var(--neutral-1), var(--neutral-2), var(--neutral-1)); background-size: 200% 100%; animation: mc2iShimmer 1.4s infinite; border-radius: 6px; }

/* --- RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .sidenav { width: 200px; }
  .app-main { padding: 24px 20px 40px; }
}

@media (max-width: 700px) {
  .app-body { flex-direction: column; }
  .sidenav {
    width: 100%; height: auto;
    position: static; flex-direction: row;
    overflow-x: auto; border-right: none;
    border-bottom: 1px solid var(--divider);
    padding: 8px 12px;
  }
  .nav-item { white-space: nowrap; margin-bottom: 0; }
  .stat-row { grid-template-columns: 1fr; }
}