/* ===========================================================================
   base-layout.css — LAYER 2 of 3
   Global skeleton ONLY: reset, page frame, sticky footer, and the structural
   placement of header / main / footer. No colours, no borders, no typography
   choices — those live in app-components.css.
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, p { margin: 0; }

/* --- Header frame ------------------------------------------------------- */
.nc-header {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 0 0 auto;
}

.nc-header__inner {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.nc-brand__pulse { flex: 0 0 auto; }

.nc-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nc-nav__link {
  display: inline-block;
  padding: 0.5rem 0.85rem;
}

/* --- Main frame --------------------------------------------------------- */
.nc-main {
  flex: 1 0 auto;
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: 2rem 3rem;
}

/* --- Footer frame ------------------------------------------------------- */
.nc-footer {
  flex: 0 0 auto;
  padding-block: 1.1rem;
  text-align: center;
}

/* --- Shared component boxes (spacing only) ------------------------------ */
.nc-btn {
  display: inline-block;
  padding: 0.55rem 1.05rem;
}

.nc-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
}

.nc-dot { flex: 0 0 auto; }

.nc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3.5rem 1.5rem;
}

.nc-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-block: 4rem;
}

@media (max-width: 640px) {
  .nc-header__inner {
    min-height: 0;
    padding-block: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* --- Etapp 2: shared component boxes ------------------------------------ */

.nc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
}

.nc-card {
  display: flex;
  flex-direction: column;
}

.nc-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
}

.nc-card__id {
  flex: 1 1 auto;
  min-width: 0;
}

.nc-card__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
}

.nc-metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nc-chart {
  position: relative;
  height: 120px;
  padding: 0.5rem 0.75rem 0.25rem;
}

.nc-chart__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.nc-chart__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nc-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem 0.9rem;
  margin-top: auto;
}

/* --- Etapp 3: form and result boxes ------------------------------------- */

.nc-input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
}

.nc-alert { padding: 0.8rem 1rem; }

.nc-result {
  display: flex;
  flex-direction: column;
}

.nc-result__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
}

.nc-result__id {
  flex: 1 1 auto;
  min-width: 0;
}

.nc-result__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 1rem;
  margin: 0;
  padding: 0.85rem 1.1rem;
}

.nc-result__details dt,
.nc-result__details dd { margin: 0; }

.nc-output {
  margin: 0 1.1rem 1.1rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  white-space: pre;
}

.nc-result__note { padding: 0 1.1rem 1rem; }

/* --- Etapp 4: admin component boxes ------------------------------------- */

.nc-nav__form { display: inline-flex; }

.nc-nav__button { padding: 0.5rem 0.85rem; }

.nc-flashes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.nc-btn--small { padding: 0.35rem 0.7rem; }

.nc-table {
  width: 100%;
  table-layout: auto;
}

.nc-table__th,
.nc-table__td { padding: 0.7rem 1rem; }

.nc-table__th--actions,
.nc-table__td--actions { text-align: right; white-space: nowrap; }

.nc-table__td--url {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nc-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0;
}