/* =====================================================
   DASHBOARD.CSS —
   Styles spécifiques au dashboard.
   Nécessite base.css chargé avant.

   SECTIONS :
   ① Layout
   ② Kickers & Pills (aliases db-)
   ③ Section shell
   ④ Banners (quota / info)
   ⑤ Sparkline
   ⑥ Header
   ⑦ Legend
   ⑧ Global stats
   ⑨ Identities V3
   ⑩ Plan summary
   ⑪ Traffic
   ⑫ Usage panel
   ⑬ Responsive
===================================================== */


/* ─────────────────────────────────────────────────────
   ① LAYOUT
───────────────────────────────────────────────────── */

/* Hérite de .page-content (base.css) pour le centrage et l'espacement vertical */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.dashboard .base-form-card {
  display: grid;
  gap: 1.6rem;
}


/* ─────────────────────────────────────────────────────
   ② KICKERS & PILLS — préfixe db-
   Aliases légers de .ui-kicker / .ui-pill de base.css.
   On garde le préfixe db- pour ne pas casser les templates.
───────────────────────────────────────────────────── */

/* Kicker */
.db-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 26px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 0 .85em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.db-kicker--muted {
  color: var(--muted);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border-color: color-mix(in srgb, var(--muted) 18%, transparent);
}

/* Pills */
.db-pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 26px;
  padding: 0 .8em;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--muted);
}

.db-pill--good {
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}

.db-pill--muted {
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border-color: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.db-pill--danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
}

.db-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.db-pill-dot--good   { box-shadow: 0 0 0 3px var(--accent-bg); }
.db-pill-dot--danger { box-shadow: 0 0 0 3px var(--danger-bg); }


/* ─────────────────────────────────────────────────────
   ③ SECTION SHELL
───────────────────────────────────────────────────── */

.db-section {
  position: relative;
  border-radius: var(--radius-6);
  padding: 1.8em;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent-glow);
}

.db-section--gradient {
  background:
    radial-gradient(circle at 12% 0%,
      color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 52%),
    radial-gradient(circle at 88% 40%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    var(--card);
}

.db-section::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 0%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    radial-gradient(circle at 85% 15%,
      color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%);
  pointer-events: none;
  opacity: .65;
}

.db-section > * { position: relative; }

/* Head */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.db-section-title {
  display: flex;
  align-items: center;
  gap: .65em;
  font-size: 1.15em;
  font-weight: 900;
  color: var(--text);
}

/* Icon — alias de .ui-icon-box--md */
.db-section-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  flex: 0 0 auto;
}

.db-section-sub {
  color: var(--muted);
  font-size: .92em;
  margin-top: .22em;
}

/* Divider — conservé pour usage futur éventuel */


/* ─────────────────────────────────────────────────────
   ④ BANNERS
───────────────────────────────────────────────────── */

/* Quota (erreur critique) */
.db-quota-banner {
  display: flex;
  align-items: flex-start;
  gap: .75em;
  padding: .9em 1.1em;
  margin-bottom: 1.2rem;
  border-radius: var(--radius-4);
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.55;
}

.db-quota-banner b { font-weight: 900; }

.db-quota-banner-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .05em;
}

/* Info banner (sync en cours) */
.db-info-banner {
  display: flex;
  align-items: flex-start;
  gap: .75em;
  padding: .9em 1.1em;
  margin-bottom: 1.2rem;
  border-radius: var(--radius-4);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.55;
}

.db-info-banner b { font-weight: 900; color: var(--text); }

.db-info-banner-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .05em;
  animation: base-spin 2s linear infinite; /* défini dans base.css */
}


/* ─────────────────────────────────────────────────────
   ⑤ SPARKLINE
───────────────────────────────────────────────────── */

.db-sparkline {
  margin-top: .5em;
  opacity: .8;
  overflow: hidden;
  border-radius: var(--radius-2);
  width: 100%;
  display: block;
}

.db-sparkline svg {
  display: block;
  width: 100%;
}


/* ─────────────────────────────────────────────────────
   ⑥ HEADER
───────────────────────────────────────────────────── */

.db-header-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 2em 1.8em;
  background:
    radial-gradient(circle at 15% 0%,
      color-mix(in srgb, var(--accent-bg) 80%, transparent), transparent 55%),
    radial-gradient(circle at 90% 40%,
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent);
}

.db-header-section::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 30% 20%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(circle at 80% 10%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
  opacity: .7;
  pointer-events: none;
}

.db-header-section > * { position: relative; }

.db-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1em;
}

.db-header-left {
  display: flex;
  flex-direction: column;
  gap: .4em;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 60px; /* reserve space for absolute .db-avatar top-right */
}

.db-header-eyebrow {
  display: flex;
  align-items: center;
  gap: .6em;
  flex-wrap: wrap;
  margin-bottom: .15em;
}

.db-header-title {
  font-size: clamp(1.15rem, 4vw, 2.4rem);
  font-weight: 950;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.db-header-accent {
  color: var(--accent);
  text-shadow: 0 10px 42px color-mix(in srgb, var(--accent) 22%, transparent);
}

.db-header-sub {
  color: var(--muted);
  font-size: clamp(.85rem, 1.6vw, 1rem);
  line-height: 1.6;
  max-width: 65ch;
}

.db-header-right {
  display: flex;
  align-items: center;
  gap: .75em;
  flex-wrap: wrap;
  align-self: flex-end;
  justify-content: flex-end;
}

.db-header-back-btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Badge "live" */
.db-live-badge {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .48em .9em;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius-pill);
  font-size: .88em;
  font-weight: 800;
  color: var(--text);
}

.db-live-badge b { color: var(--accent); }

/* Dot pulsé — reprend .ui-live-dot de base.css */
.db-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex: 0 0 auto;
  animation: base-pulse 2s infinite; /* défini dans base.css */
}

/* Avatar — reprend .ui-avatar--md */
.db-avatar {
  position: absolute;
  top: 1.4em;
  right: 1.4em;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent-bg);
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  font-weight: 900;
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  user-select: none;
}


/* ─────────────────────────────────────────────────────
   ⑦ LEGEND
───────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────
   ⑧ GLOBAL STATS
───────────────────────────────────────────────────── */

.db-stats-grid {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr 1fr 1.8fr;
  grid-template-areas: "bw req ids traf";
  gap: 1.1rem;
}

/* Lock each card into its slot — prevents any 3+1 or weird reflow */
.db-stats-grid > .db-stat-card:nth-child(1) { grid-area: bw; }
.db-stats-grid > .db-stat-card:nth-child(2) { grid-area: req; }
.db-stats-grid > .db-stat-card:nth-child(3) { grid-area: ids; }
.db-stats-grid > .db-stat-card:nth-child(4) { grid-area: traf; }

.db-stat-card {
  position: relative;
  overflow: hidden;
  padding: 1.3em 1.2em 1.2em;
  border-radius: var(--radius-5);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: .5em;
  transition:
    transform    var(--duration-2) var(--ease-out),
    box-shadow   var(--duration-2) var(--ease-out),
    border-color var(--duration-2) var(--ease-out);
}

.db-stat-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 20% 0%,
    color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
  pointer-events: none;
  opacity: .6;
}

.db-stat-card > * { position: relative; }

.db-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Icône flottante coin haut-droite */
.db-stat-icon {
  position: absolute;
  top: 1em;
  right: 1em;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-3);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .8;
}

.db-stat-label {
  font-size: .78em;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-right: 46px; /* reserve space for absolute .db-stat-icon */
}

.db-stat-value {
  font-size: 1.85em;
  font-weight: 950;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.02em;
  padding-right: 46px; /* reserve space for absolute .db-stat-icon */
  word-break: break-word;
}

.db-stat-accent { color: var(--accent); }

.db-stat-footer {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-top: .15em;
  flex-wrap: wrap;
}

/* Trend badge */
.db-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .82em;
  font-weight: 800;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  padding: .22em .58em;
  border-radius: var(--radius-pill);
}

.db-stat-trend-sub {
  color: var(--muted);
  font-size: .82em;
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────
   ⑨ IDENTITIES V3 — préfixe id-
───────────────────────────────────────────────────── */

.id-section {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-6);
  padding: 1.8em;
  background:
    radial-gradient(circle at 12% 0%,
      color-mix(in srgb, var(--accent-bg) 75%, transparent), transparent 50%),
    radial-gradient(circle at 88% 45%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 56%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: var(--shadow-accent-glow);
}

.id-section::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 25% 0%,
    color-mix(in srgb, var(--accent) 8%, transparent), transparent 48%);
  pointer-events: none;
  opacity: .7;
}

.id-section > * { position: relative; }

/* ── Head ── */
.id-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.id-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .76em;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5em;
}

.id-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-bg);
  flex: 0 0 auto;
  animation: id-kicker-pulse 2.4s infinite;
}

@keyframes id-kicker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-bg); }
  50%       { box-shadow: 0 0 0 7px transparent; }
}

.id-head-title {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 950;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 .3em;
}

.id-head-sub {
  color: var(--muted);
  font-size: .9em;
  font-weight: 700;
  letter-spacing: .02em;
}

.id-head-right {
  display: flex;
  align-items: center;
  gap: .7em;
  padding-top: .2em;
}

/* ── Grille de cards ── */
.id-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
}

.id-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-5);
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: var(--shadow-3);
  transition:
    transform    var(--duration-2) var(--ease-out),
    box-shadow   var(--duration-2) var(--ease-out),
    border-color var(--duration-2) var(--ease-out);
  animation: id-card-in .4s var(--ease-out) both;
  animation-delay: var(--id-delay, 0ms);
  flex: 0 0 520px;
  max-width: 580px;
  width: 520px;
}

@keyframes id-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.id-card:hover {
  transform: translateY(-4px);
  box-shadow:
    var(--shadow-4),
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

.id-card--disabled {
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}

.id-card--warn {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 25%, transparent);
}

.id-card--warn:hover {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 40%, transparent);
  box-shadow:
    var(--shadow-4),
    0 0 0 1px color-mix(in srgb, var(--warning, #f59e0b) 25%, transparent);
}

.id-card--disabled:hover {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  box-shadow:
    var(--shadow-4),
    0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent);
}

/* ── Strip (header de la card) ── */
.id-card-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85em 1.4em;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 20%, transparent),
    color-mix(in srgb, var(--accent) 7%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.id-card--disabled .id-card-strip {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--danger) 16%, transparent),
    color-mix(in srgb, var(--danger) 5%, transparent));
  border-bottom-color: color-mix(in srgb, var(--danger) 18%, transparent);
}

.id-strip-left,
.id-strip-right {
  display: flex;
  align-items: center;
  gap: .5em;
}

.id-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex: 0 0 auto;
}

.id-card--disabled .id-node-dot {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}

.id-node-index {
  font-size: .72em;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--muted);
  font-family: var(--font-mono);
}
.dark .id-node-index {
  color: var(--accent);
}

.id-card--disabled .id-node-index { color: var(--danger); }

.id-flag { font-size: 1em; }

.id-country {
  font-size: .76em;
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 75%, transparent);
  letter-spacing: .04em;
}

/* ── Card body ── */
.id-card-body {
  padding: 1.4em 1.4em 1em;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  flex: 1;
}

.id-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5em;
}

.id-name {
  font-family: var(--font-mono);
  font-size: 1.1em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.id-status-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .32em;
}

/* Badges d'état */
.id-badge {
  display: inline-flex;
  align-items: center;
  gap: .38em;
  font-size: .73em;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .25em .62em;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.id-badge--active {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.id-badge--disabled {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}

.id-badge--time {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
  font-size: .68em;
}

.id-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.id-badge--active .id-badge-dot { animation: id-badge-pulse 2s infinite; }

@keyframes id-badge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* Ligne IP */
.id-ip-line {
  display: flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-mono);
  font-size: .74em;
  font-weight: 700;
  color: var(--muted);
  margin-top: .2em;
  letter-spacing: .01em;
}

.id-ip-masked {
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--muted) 60%, transparent);
  user-select: none;
}

/* Chip serveur */
.id-server-chip {
  font-family: var(--font-mono);
  font-size: .68em;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  padding: .18em .5em;
  border-radius: var(--radius-2);
  letter-spacing: .04em;
}
.dark .id-server-chip {
  color: color-mix(in srgb, var(--accent) 80%, transparent);
}

/* Bannière de désactivation */
.id-disable-banner {
  display: flex;
  align-items: flex-start;
  gap: .65em;
  padding: .75em .9em;
  border-radius: var(--radius-3);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
  color: var(--danger);
}

.id-disable-banner-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-2);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .05em;
}

.id-disable-banner-body {
  display: flex;
  flex-direction: column;
  gap: .2em;
  min-width: 0;
}

.id-disable-banner-title {
  font-size: .82em;
  font-weight: 900;
  color: var(--danger);
  line-height: 1.3;
  letter-spacing: .01em;
}

.id-disable-banner-text {
  font-size: .78em;
  font-weight: 600;
  color: color-mix(in srgb, var(--danger) 75%, var(--muted));
  line-height: 1.5;
}

.id-disable-banner-date {
  font-size: .72em;
  font-weight: 700;
  color: var(--muted);
  margin-top: .1em;
  letter-spacing: .01em;
}

/* ── Rings SVG ── */
.id-rings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: .25em 0;
}

.id-ring-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  position: relative;
}

.id-rings-sep {
  width: 1px;
  height: 100px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  flex: 0 0 auto;
  margin: 0 .75em;
}

.id-ring-svg    { width: 110px; height: 110px; }
.id-card--disabled .id-ring-svg { opacity: .85; }

.id-ring-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.id-ring-pct {
  font-size: .9em;
  font-weight: 950;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: -.03em;
}

.id-ring-pct--warn   { color: var(--warning, #f59e0b); }
.id-ring-pct--danger { color: var(--danger); }

.id-ring-label {
  font-size: .68em;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .15em;
}

.id-ring-val {
  font-size: .72em;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 65%, transparent);
}

/* ── Meta row ── */
.id-meta-row {
  display: flex;
  gap: .4em;
  flex-wrap: wrap;
}

.id-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .72em;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 12%, transparent);
  padding: .25em .6em;
  border-radius: var(--radius-3);
}

.id-meta-chip--warn {
  color: var(--warning, #f59e0b);
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 22%, transparent);
  font-weight: 800;
}

.id-meta-chip--danger {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  font-weight: 800;
}

/* ── Footer de la card ── */
.id-card-footer {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .9em 1.4em;
  border-top: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}

.id-card--disabled .id-card-footer {
  border-top-color: color-mix(in srgb, var(--danger) 10%, transparent);
}

/* ── Empty state ── */
.id-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9em;
  text-align: center;
  padding: 3em 2em;
  border-radius: var(--radius-5);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 20%, transparent);
}

.id-empty-glyph {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-5);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent-sm);
}

.id-empty-title {
  font-size: 1.15em;
  font-weight: 950;
  color: var(--text);
  margin: 0;
}

.id-empty-body {
  color: var(--muted);
  line-height: 1.65;
  font-size: .95em;
  margin: 0;
  width: max-content;   /* ← s'étire pour tenir sur 1 ligne */
  max-width: 100%;      /* ← revient à la ligne seulement si le conteneur est trop petit */
  overflow-wrap: break-word;
}


/* ─────────────────────────────────────────────────────
   ⑩ PLAN SUMMARY
───────────────────────────────────────────────────── */

.db-plan-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 1.2rem;
  align-items: start;
}

/* Plan card (actif) */
.db-plan-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-5);
  padding: 1.5em 1.4em;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent-bg) 80%, transparent),
    color-mix(in srgb, var(--card) 85%, transparent));
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: .85em;
  align-self: start;
}

.db-plan-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 80% 0%,
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
  pointer-events: none;
  opacity: .65;
}

.db-plan-card > * { position: relative; }

/* Plan inactif */
.db-plan-card--inactive {
  border: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  align-self: start;
}

/* Features list */
.db-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55em;
}

.db-plan-features li {
  display: flex;
  align-items: center;
  gap: .65em;
  color: var(--text);
  font-size: .95em;
  font-weight: 700;
}

.db-plan-check {
  width: 22px;
  height: 22px;
  border-radius: .75em;
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: var(--shadow-accent-sm);
}

/* Status footer */
.db-plan-status-footer {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .55em .75em;
  border-radius: var(--radius-4);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: .85em;
  font-weight: 800;
  color: var(--accent);
  width: fit-content;
}

.db-plan-status-footer--inactive {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

/* Status dot — alias de .ui-live-dot */
.db-plan-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  flex: 0 0 auto;
}

.db-plan-status-dot--inactive {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

/* Renewal info */
.db-renewal-info {
  display: flex;
  align-items: center;
  gap: .55em;
  padding: .6em .9em;
  border-radius: var(--radius-4);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: .85em;
  font-weight: 800;
  color: var(--muted);
}

.db-renewal-info b { color: var(--text); }

.db-renewal-info--cancel {
  background: color-mix(in srgb, var(--danger, #e74c3c) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger, #e74c3c) 22%, transparent);
  color: color-mix(in srgb, var(--danger, #e74c3c) 80%, var(--muted));
}

.db-renewal-info--cancel strong { color: var(--danger, #e74c3c); }


/* ─────────────────────────────────────────────────────
   ⑪ TRAFFIC
───────────────────────────────────────────────────── */

.db-stat-traffic {
  display: flex;
  flex-direction: column;
  gap: .5em;
  margin-top: .2em;
}

.db-traffic-row {
  display: flex;
  align-items: flex-end;
  gap: .75em;
  min-width: 0;
}

.db-traffic-icon {
  font-size: .78em;
  font-weight: 900;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  font-family: var(--font-mono);
}

/* Tokens trafic — centralisés pour dark mode et cohérence thème */
:root {
  --traffic-down-color:   #a855f7;
  --traffic-down-bg:      rgba(6, 182, 212, .14);
  --traffic-up-color:     #38bdf8;
  --traffic-up-bg:        rgba(129, 140, 248, .15);
}

/* Couleurs trafic (cyan / violet / vert) */
.db-traffic-row--down  .db-traffic-icon { background: var(--traffic-down-bg);  color: var(--traffic-down-color); }
.db-traffic-row--up    .db-traffic-icon { background: var(--traffic-up-bg);    color: var(--traffic-up-color); }
.db-traffic-row--total .db-traffic-icon { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

.db-traffic-val {
  font-size: .92em;
  font-weight: 800;
  letter-spacing: -.01em;
  flex: 1;
  min-width: 0;
}

.db-traffic-row--down  .db-traffic-val { color: var(--traffic-down-color); }
.db-traffic-row--up    .db-traffic-val { color: var(--traffic-up-color); }
.db-traffic-row--total .db-traffic-val { color: var(--accent); }

.db-traffic-lbl {
  font-size: .72em;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.db-traffic-divider {
  height: 1px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  margin: .2em 0;
}


/* ─────────────────────────────────────────────────────
   ⑫ USAGE PANEL
───────────────────────────────────────────────────── */

.db-usage-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-5);
  padding: 2.2em 2em;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.db-usage-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 10% 0%,
    color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%);
  pointer-events: none;
}

.db-usage-panel > * { position: relative; }

.db-usage-row { display: flex; flex-direction: column; gap: .6em; }

/* Carte usage — remplace les inline styles dans plan-summary */
.db-usage-card {
  padding: 1.1em;
  background: var(--card-2, var(--card));
  border-radius: var(--radius-4);
  border: none;
  display: flex;
  flex-direction: column;
  gap: .6em;
}

/* Texte "X remaining" sous la barre */
.db-usage-remaining {
  font-size: .78em;
  color: color-mix(in srgb, var(--muted) 85%, var(--text));
  font-weight: 700;
}

/* Valeurs pct + texte alignés */
.db-usage-vals {
  display: flex;
  align-items: center;
  gap: .65em;
}

/* Bannière disable-reason (disable-reason.ejs) */
.db-disable-reason {
  display: flex;
  flex-direction: column;
  gap: .5em;
  padding: .9em 1.1em;
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
  border-radius: var(--radius-4);
  margin-bottom: 1rem;
}

.db-disable-reason-header {
  display: flex;
  align-items: center;
  gap: .55em;
  font-weight: 900;
  color: var(--danger);
  font-size: .95em;
}

.db-disable-reason-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex: 0 0 auto;
  animation: base-pulse-danger 2s infinite;
}

.db-disable-reason-text {
  font-size: .88em;
  color: var(--muted);
  line-height: 1.55;
  font-weight: 600;
}

.db-usage-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5em;
  text-align: left;
  flex-wrap: wrap;
}

.db-usage-label {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: .9em;
  font-weight: 800;
  color: var(--text);
  text-align: left;
  margin-right: auto;
}
.db-usage-val   { font-size: .85em; font-weight: 700; color: var(--muted); }
.db-usage-val b { color: var(--accent); }

/* Track — alias de .ui-progress-track */
.db-usage-track {
  width: 100%;
  height: 6px;
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Fill — alias de .ui-progress-fill */
.db-usage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: var(--radius-pill);
  transition: width .4s ease;
}

.db-usage-fill--warn   { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.db-usage-fill--danger { background: linear-gradient(90deg, var(--danger), var(--red-400, #f87171)); }

/* Badge pourcentage */
.db-usage-pct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8em;
  padding: .2em .55em;
  border-radius: var(--radius-pill);
  font-size: .8em;
  font-weight: 900;
  letter-spacing: .02em;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.db-usage-pct--warn {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}

.db-usage-pct--danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}


/* ─────────────────────────────────────────────────────
   PLAN SUMMARY — responsive helpers
───────────────────────────────────────────────────── */

/* Date full/short toggle — default: full visible */
.ps-date-short { display: none; }
.ps-date-full  { display: inline; }

/* Plan title — fluid */
.db-plan-title {
  font-size: clamp(.95em, 2.5vw, 1.25em);
  font-weight: 950;
  color: var(--text);
  margin: 0;
}

/* Plan actions — wrap sur petits écrans */
.db-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin-top: auto;
  padding-top: .3em;
}

/* ─────────────────────────────────────────────────────
   ⑬ RESPONSIVE
───────────────────────────────────────────────────── */


/* ── Plan Summary — responsive complet ─────────────────── */


/* Mobile large : row-head en colonne, dates courtes */
@media (max-width: 600px) {
  .db-plan-title        { font-size: clamp(.9em, 4vw, 1.05em); }
  .db-plan-features li  { font-size: .82em; gap: .5em; }
  .db-plan-check        { width: 18px; height: 18px; flex-shrink: 0; }
  .db-usage-label       { font-size: .8em; }
  .db-usage-val         { font-size: .77em; }
  .db-usage-pct         { font-size: .75em; min-width: 2.4em; padding: .18em .45em; }
  .db-usage-remaining   { font-size: .74em; }
  .db-renewal-info      { font-size: .78em; padding: .5em .7em; }

  /* Stack label / values vertically */
  .ps-usage-row-head    { flex-direction: column; align-items: flex-start; gap: .25em; }
  .db-usage-vals        { display: flex; width: 100%; justify-content: space-between; align-items: center; }

  /* Dates courtes */
  .ps-date-full  { display: none; }
  .ps-date-short { display: inline; }

  /* Boutons plan en colonne */
  .db-plan-actions      { flex-direction: column; }
  .db-plan-actions > *  { width: 100%; justify-content: center; }

  /* Banners */
  .db-quota-banner,
  .db-info-banner       { font-size: .76rem; padding: .7em .85em; gap: .55em; }
  .db-quota-banner-icon,
  .db-info-banner-icon  { width: 18px; height: 18px; }
}

/* Petit mobile */
@media (max-width: 420px) {
  .db-plan-title        { font-size: .9em; }
  .db-plan-features li  { font-size: .78em; }
  .db-usage-label       { font-size: .76em; }
  .db-usage-val         { font-size: .74em; }
  .db-usage-pct         { font-size: .72em; }
  .db-usage-remaining   { font-size: .7em; }
  .db-renewal-info      { font-size: .74em; }
  .db-quota-banner,
  .db-info-banner       { font-size: .72rem; }
}

@media (max-width: 1100px) {
  .db-stats-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "bw  req"
      "ids traf";
    gap: .9rem;
  }
}

@media (max-width: 900px) {
  .db-stats-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bw"
      "req"
      "ids"
      "traf";
  }
}

/* Tablette portrait : grid 1 col + scales de texte */
@media (max-width: 960px) {
  .db-plan-grid         { grid-template-columns: 1fr; }
  .db-plan-title        { font-size: 1.1em; }
  .db-plan-features li  { font-size: .88em; }
  .db-usage-label       { font-size: .85em; }
  .db-usage-val         { font-size: .82em; }
  .db-renewal-info      { font-size: .82em; flex-wrap: wrap; gap: .35em; }
}

/* ── Tablette paysage / petits laptops ── */
@media (max-width: 820px) {
  .db-header-right { gap: .5em; }

  .db-live-badge   { font-size: .82em; padding: .42em .75em; }
  .db-avatar       { width: 38px; height: 38px; font-size: 1em; }
}

/* ── Tablette portrait / grands mobiles ── */
@media (max-width: 700px) {
  .db-header-section,
  .db-section,
  .id-section { padding: 1.3em 1.1em; }

  /* Eyebrow pills plus petits */
  .db-header-eyebrow { gap: .4em; margin-bottom: .1em; }
  .db-pill            { font-size: .76em; padding: .3em .65em; }

  .db-header-right { gap: .5em; }

  .db-live-badge { font-size: .8em; }
}

/* ── Mobile ── */
@media (max-width: 620px) {
  .id-card        { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .id-rings       { gap: .5em; }
  .id-ring-svg    { width: 90px; height: 90px; }
  .id-ring-center { width: 90px; height: 90px; }
  .id-rings-sep   { height: 80px; }

  .db-header-section { padding: 1.2em 1em; }
  .db-avatar         { top: 1em; right: 1em; width: 38px; height: 38px; font-size: 1em; }
  .db-header-left    { padding-right: 46px; }

  /* Sub-text: légèrement plus petit */
  .db-header-sub { font-size: .84rem; line-height: 1.55; }
}

/* ── Petit mobile (≤ 480px) ── */
@media (max-width: 480px) {
  /* Titre — clamp plus aggressif pour petits écrans */
  .db-header-title {
    font-size: clamp(1.05rem, 5.2vw, 1.5rem);
    letter-spacing: -.015em;
  }

  /* Avatar plus petit + moins d'espace réservé */
  .db-avatar         { width: 34px; height: 34px; font-size: .9em; top: .9em; right: .9em; }
  .db-header-left    { padding-right: 42px; }

  /* Eyebrow: limite le nombre de pills visibles en réduisant */
  .db-header-eyebrow { gap: .3em; }
  .db-pill            { font-size: .72em; padding: .27em .55em; }
  .db-pill-dot        { width: 5px; height: 5px; }

  /* Sub */
  .db-header-sub { font-size: .82rem; }

  /* Right: boutons full-width si wrappés */
  .db-header-right { gap: .4em; }
  .db-live-badge   { font-size: .76em; padding: .38em .65em; }

}

/* ── Très petit mobile (≤ 380px) ── */
/* 380px block merged below */

@media (max-width: 620px) {
  .id-disable-banner        { padding: .65em .75em; gap: .5em; }
  .id-disable-banner-title  { font-size: .78em; }
  .id-disable-banner-text   { font-size: .74em; }
  .id-disable-banner-date   { font-size: .68em; }
}

/* ── Très petit mobile (≤ 380px) — fusionné ── */
@media (max-width: 380px) {
  .db-header-section        { padding: 1em .85em; border-radius: var(--radius-4); }
  .db-avatar                { top: .75em; right: .75em; width: 30px; height: 30px; font-size: .82em; }
  .db-header-left           { padding-right: 36px; }
  .db-header-title          {
    font-size: clamp(.98rem, 5.5vw, 1.25rem);
    letter-spacing: -.01em;
  }
  .db-header-sub            { font-size: .78rem; }
  .db-pill                  { font-size: .68em; }
  .id-disable-banner-icon   { display: none; }
  .id-disable-banner-text   { font-size: .72em; }
}

/* ─────────────────────────────────────────────────────
   PLAN SUMMARY extras
───────────────────────────────────────────────────── */

/* Period elapsed fill — subtler than quota bars */
.db-usage-fill--period {
  opacity: .42;
  background: linear-gradient(90deg, var(--accent), var(--accent-light, var(--accent)));
}

/* Remaining text — color states */
.db-usage-remaining--warn   { color: var(--warning, #f59e0b); font-weight: 800; }
.db-usage-remaining--danger { color: var(--danger); font-weight: 800; }

/* Days left chip */
.db-period-days-left {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  padding: .18em .5em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.db-period-days-left--warn {
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, transparent);
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 22%, transparent);
  color: var(--warning, #f59e0b);
}

.db-period-days-left--danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

/* Status dot pulse */
.db-plan-status-dot--pulse {
  animation: base-pulse 2s infinite;
}

/* ── Global Stats extras ─────────────────────────────────── */

.db-stat-value-sub {
  font-size: .52em;
  font-weight: 700;
  color: var(--muted);
  margin-left: .25em;
  vertical-align: middle;
}

.db-stat-footer--spaced {
  margin-top: .6em;
}

/* Protocol badge in requests card */
.db-proto-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .7em;
  font-weight: 800;
  padding: .18em .5em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  margin-left: .4em;
  white-space: nowrap;
}

/* Empty state */
.gs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  padding: 2.5em 1.5em;
  text-align: center;
}

.gs-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-5);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
}

.gs-empty-text {
  font-size: .88em;
  color: var(--muted);
  line-height: 1.6;
  width: max-content;
  max-width: 100%;
  overflow-wrap: break-word;
}