/* ============================
   ADMIN PANEL — style mystique sobre
   ============================ */

.admin-dashboard {
  padding: 2rem 0;
}

.admin-card {
  padding: 1.8rem;
}

.admin-head {
  margin-bottom: 2rem;
  text-align: center;
}

.admin-title {
  font-size: 2.2rem;
  color: var(--gold);
}

.admin-subtitle {
  color: var(--gray-light);
  margin-top: .4rem;
}

.admin-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.admin-block {
  padding: 1.2rem 1.5rem;
  background: rgba(20, 20, 30, 0.7);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

.admin-block-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--gold);
}

.admin-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-links li {
  margin: .4rem 0;
}

.admin-links a {
  color: var(--white);
  text-decoration: none;
  padding: .25rem;
  display: inline-block;
  transition: .15s;
}

.admin-links a:hover {
  color: var(--gold);
  transform: translateX(4px);
}
.admin-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-filters input,
.admin-filters select {
  padding: .5rem .7rem;
  background: rgba(20,20,30,.7);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  color: var(--white);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.admin-table th,
.admin-table td {
  padding: .6rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.admin-table th {
  color: var(--gold);
}

.admin-action {
  margin-right: .6rem;
  color: var(--gold);
}

.admin-action.delete {
  color: #ff7777;
}

.admin-pagination {
  margin-top: 1.5rem;
  display: flex;
  gap: .5rem;
}

.admin-page {
  padding: .4rem .7rem;
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--white);
  transition: .15s;
}

.admin-page:hover {
  color: var(--gold);
}

.admin-page.active {
  background: var(--gold);
  color: #000;
  font-weight: bold;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 1rem;
}

.admin-form-group label {
  display: block;
  margin-bottom: .3rem;
  font-weight: 500;
}

.admin-form-group input,
.admin-form-group textarea {
  width: 100%;
  padding: .6rem .8rem;
  background: rgba(20,20,30,.7);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  color: var(--white);
}

.admin-form-actions {
  display: flex;
  gap: 1rem;
  margin-top: .8rem;
}

.admin-alert {
  padding: .8rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .95rem;
}

.admin-alert-error {
  background: rgba(150, 40, 40, .25);
  border: 1px solid #ff7777;
}

.admin-alert-success {
  background: rgba(40, 150, 90, .25);
  border: 1px solid #6be39c;
}

.admin-alert ul {
  margin: 0;
  padding-left: 1.1rem;
}

.admin-alert-link {
  margin-left: .5rem;
  text-decoration: underline;
}

.btn.btn-ghost {
  background: transparent;
  border: 1px solid var(--glass-b);
}
.admin-suggestion {
  padding: 1.2rem;
  margin-bottom: 2rem;
  background: rgba(20,20,30,.7);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
}

.admin-suggestion p {
  margin: .4rem 0;
}

.admin-comment-box {
  width: 100%;
  height: 80px;
  padding: .6rem .8rem;
  margin-top: .6rem;
  background: rgba(20,20,30,.7);
  border: 1px solid var(--glass-b);
  border-radius: var(--radius);
  color: var(--white);
}

.admin-suggestion-actions {
  display: flex;
  gap: 1rem;
  margin-top: .8rem;
}

.btn-danger {
  background: rgba(120,30,30,.4);
  border: 1px solid #ff7777;
  color: #ffaaaa;
}

.btn-danger:hover {
  background: rgba(160,40,40,.6);
}
.order-status {
  padding: .25rem .5rem;
  border-radius: var(--radius);
  font-size: .85rem;
  color: #fff;
}

.order-pending {
  background: #b38c00d9;
}

.order-paid {
  background: #2ea84ad9;
}

.order-processing {
  background: #0077c2d9;
}

.order-shipped {
  background: #6a3ec9d9;
}

.order-cancelled {
  background: #a82828d9;
}
.order-view-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.order-box {
  padding: 1.1rem 1.3rem;
  background: rgba(20,20,30,.7);
  border-radius: var(--radius);
  border: 1px solid var(--glass-b);
}

.admin-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: .6rem;
}

.admin-form-inline select {
  padding: .4rem .6rem;
  background: rgba(20,20,30,.8);
  border-radius: var(--radius);
  border: 1px solid var(--glass-b);
  color: var(--white);
}

.order-items {
  margin-top: 2rem;
}

.order-items-table td,
.order-items-table th {
  font-size: .95rem;
}

.order-summary {
  margin-top: 2rem;
}

.order-summary-grid {
  max-width: 380px;
  margin-top: .8rem;
}

.order-summary-line {
  display: flex;
  justify-content: space-between;
  padding: .3rem 0;
}

.order-summary-total {
  border-top: 1px solid rgba(255,255,255,.2);
  margin-top: .4rem;
  padding-top: .4rem;
  font-weight: 600;
}
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}

.admin-subtext {
  font-size: .85rem;
  color: var(--gray-light);
}

.badge-stock {
  display: inline-block;
  padding: .2rem .45rem;
  border-radius: var(--radius);
  background: rgba(70, 120, 70, .6);
  font-size: .8rem;
}

.badge-stock-low {
  background: rgba(160, 120, 40, .7);
}

.badge-stock-zero {
  background: rgba(150, 40, 40, .8);
}

.badge-visible,
.badge-hidden,
.badge-stripe {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: var(--radius);
  font-size: .8rem;
}

.badge-visible {
  background: rgba(60, 130, 80, .8);
}

.badge-hidden {
  background: rgba(90, 90, 90, .8);
}

.badge-stripe {
  background: rgba(60, 110, 170, .8);
}

.badge-stripe-missing {
  background: rgba(120, 70, 70, .8);
}
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-form img {
  margin-top: .4rem;
  box-shadow: 0 0 8px rgba(0,0,0,.4);
}
.badge-role {
  display: inline-block;
  padding: .15rem .4rem;
  margin: 0 .15rem .15rem 0;
  border-radius: var(--radius);
  font-size: .8rem;
  background: rgba(90,90,120,.7);
}

.badge-role-admin   { background: rgba(180,60,60,.8); }
.badge-role-gardien { background: rgba(214,180,106,.9); }
.badge-role-beta    { background: rgba(99,230,190,.8); }
.badge-role-artiste { background: rgba(173,121,255,.85); }
.badge-role-correcteur { background: rgba(120,180,255,.85); }
.badge-role-contributeur { background: rgba(120,220,140,.85); }
.badge-role-membre  { background: rgba(110,110,110,.8); }

.badge-role-none {
  background: rgba(80,80,80,.7);
}

.badge-active {
  padding: .2rem .5rem;
  border-radius: var(--radius);
  background: rgba(70,150,90,.85);
  font-size: .8rem;
}

.badge-inactive {
  padding: .2rem .5rem;
  border-radius: var(--radius);
  background: rgba(120,80,80,.85);
  font-size: .8rem;
}
.user-roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  margin-top: .4rem;
}

.user-role-item {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.admin-help {
  font-size: .85rem;
  color: var(--gray-light);
  margin-top: .3rem;
}
.roles-users-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.roles-users-list li {
  margin: .25rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.roles-users-list li .admin-action {
  font-size: .85rem;
}

.admin-subtext {
  color: var(--gray-light);
  font-size: .85rem;
}
.badge-visible {
  padding: .2rem .5rem;
  border-radius: var(--radius);
  background: rgba(60, 150, 80, .85);
  font-size: .8rem;
}

.badge-hidden {
  padding: .2rem .5rem;
  border-radius: var(--radius);
  background: rgba(120, 80, 80, .85);
  font-size: .8rem;
}
/* =============================
   DASHBOARD ADMIN — STATS
   ============================= */

.stats-grid {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stats-card {
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: rgba(20, 20, 30, 0.7);
  border: 1px solid var(--glass-b);
  box-shadow: 0 0 20px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
}

.stats-card h2 {
  font-size: 1.15rem;
  margin-bottom: .7rem;
  color: var(--gold);
  letter-spacing: .5px;
}

.stats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stats-list li {
  display: flex;
  justify-content: space-between;
  padding: .35rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  font-size: .95rem;
}

.stats-list li:last-child {
  border-bottom: none;
}

.stats-list strong {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--gold);
}

/* =============================
   BLOCKS: Derniers membres / commandes
   ============================= */

.stats-lists {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .stats-lists {
    grid-template-columns: 1fr 1fr;
  }
}

.stats-block {
  padding: 1.2rem;
  border-radius: var(--radius);
  background: rgba(15, 15, 25, 0.75);
  border: 1px solid var(--glass-b);
  box-shadow: 0 0 18px rgba(0,0,0,.35);
}

.stats-block h2 {
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: .4px;
  margin-bottom: .8rem;
}

.stats-table-small {
  font-size: .9rem;
}

.stats-table-small td,
.stats-table-small th {
  padding: .45rem .5rem !important;
}

.stats-link {
  margin-top: .8rem;
  text-align: right;
}

/* =============================
   BADGES ACTIVITY / STATUS
   ============================= */

.badge-active,
.badge-inactive {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: var(--radius);
  font-size: .8rem;
  text-transform: capitalize;
  color: #fff;
}

.badge-active {
  background: rgba(70, 150, 90, .85);
}

.badge-inactive {
  background: rgba(150, 70, 70, .85);
}

/* Commande status badges */
.order-status {
  padding: .2rem .6rem;
  border-radius: var(--radius);
  color: #fff;
  font-size: .8rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .5px;
}

.order-paid {
  background: rgba(60, 150, 90, .85);
}

.order-processing {
  background: rgba(70, 120, 180, .85);
}

.order-shipped {
  background: rgba(180, 120, 70, .85);
}

.order-pending {
  background: rgba(160, 140, 60, .85);
}

.order-cancelled {
  background: rgba(150, 60, 60, .85);
}

.order-refund {
  background: rgba(120, 60, 120, .85);
}

/* =============================
   PETITS DÉTAILS
   ============================= */

.admin-block-title {
  font-family: "IM Fell English SC", serif;
  font-size: 1.3rem;
  color: var(--gold);
  margin-bottom: .5rem;
}

.admin-subtext {
  font-size: .9rem;
  color: rgba(255,255,255,.5);
}

.stats-card span,
.stats-block table td {
  font-family: "Poppins", sans-serif;
}
/* Tags "À la une" en admin (et réutilisables en front) */

.news-tag {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(50, 50, 80, .85);
  color: #fff;
}

/* Variantes (optionnel, si tu veux les utiliser) */
.news-tag-new {
  background: rgba(120, 190, 90, .9);
}

.news-tag-magiktalk {
  background: rgba(120, 140, 230, .9);
}

.news-tag-profil {
  background: rgba(200, 140, 220, .9);
}

.news-tag-boutique {
  background: rgba(230, 180, 90, .9);
}

/* Petite subtext déjà utilisée ailleurs */
.admin-subtext {
  font-size: .9rem;
  color: rgba(255,255,255,.6);
}
/* ============================================================
   ADMIN — MODULE SANG-SATŌ (Books / Univers / Timeline)
   ============================================================ */

/* En-têtes */
.admin-head {
  margin-bottom: 1.4rem;
}

.admin-title {
  font-size: 2.2rem;
  color: var(--gold);
}

.admin-subtitle {
  font-size: .95rem;
  color: var(--muted);
  margin: .3rem 0;
}

/* Tableau */
.admin-table-wrapper {
  margin-top: 1rem;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glass-b);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(10,10,20,.85);
}

.admin-table th,
.admin-table td {
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .9rem;
  text-align: left;
  color: var(--ink);
}

.admin-table th {
  font-weight: 600;
  color: var(--gold);
  background: rgba(30,25,45,.75);
}

.admin-table tr:nth-child(even) {
  background: rgba(20,15,35,.5);
}

.admin-empty {
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
  color: var(--muted);
}

/* Actions & filtres */
.admin-actions-row {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.admin-filter-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-filter-row label {
  font-size: .9rem;
  color: var(--muted);
}

.admin-filter-row select {
  padding: .45rem .7rem;
  border-radius: var(--radius);
  background: rgba(15,12,25,.9);
  border: 1px solid var(--glass-b);
  color: var(--ink);
  font-size: .9rem;
}

/* Petites notes */
.admin-hint {
  font-size: .85rem;
  color: var(--muted);
  font-style: italic;
}

/* Slug & codes */
.admin-table code {
  background: rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .82rem;
  color: var(--ink);
}

/* Type badges */
.admin-type-badge {
  display: inline-flex;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
}

.admin-type-perso {
  background: rgba(110, 90, 150, .35);
  border-color: rgba(150,110,200,.6);
}

.admin-type-lieu {
  background: rgba(90,150,110,.35);
  border-color: rgba(100,180,130,.55);
}

.admin-type-creature {
  background: rgba(150,90,90,.35);
  border-color: rgba(200,120,120,.55);
}

/* Importance couleurs */
.admin-importance-1 {
  color: #bbb;
}

.admin-importance-2 {
  color: #ffd98c;
  font-weight: 600;
}

.admin-importance-3 {
  color: #ffb44d;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255,180,80,.6);
}

/* Responsive */
@media (max-width: 900px) {
  .admin-table th,
  .admin-table td {
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .admin-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 600px) {
  .admin-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Checkbox liste pour tomes dans l'admin Sang-Satō */

.admin-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.admin-checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(15,15,30,.9);
  border: 1px solid var(--glass-b);
  font-size: .8rem;
  cursor: pointer;
}

.admin-checkbox-pill input[type="checkbox"] {
  accent-color: var(--gold);
}

.admin-checkbox-pill span {
  white-space: nowrap;
}

/* ============================
   FORMULAIRES ADMIN — V2 WIDE
   Pour sato_univers_* et sato_timeline_*
   ============================ */

/* Formulaire centré un peu plus large */
.admin-form-wide {
  max-width: 680px;
  margin: 1.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Champ standard (label + input/textarea/select) */
.admin-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

/* Label */
.admin-field label {
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

/* Inputs, selects, textarea — style mystique */
.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  background: radial-gradient(circle at top left,
              rgba(40,30,80,.9),
              rgba(10,8,25,.95));
  border: 1px solid var(--glass-b);
  color: var(--white);
  font: 400 .95rem/1.4 "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02),
    0 12px 28px rgba(0,0,0,.65);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

/* Textarea un peu plus haute par défaut */
.admin-field textarea {
  min-height: 130px;
  resize: vertical;
}

/* Focus sexy */
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(255,210,120,.45),
    0 0 18px rgba(255,210,120,.25);
  background: radial-gradient(circle at top left,
              rgba(55,40,100,.98),
              rgba(10,8,25,.98));
}

/* Placeholder lisible mais discret */
.admin-field input::placeholder,
.admin-field textarea::placeholder {
  color: rgba(255,255,255,.45);
  font-size: .9rem;
}

/* Version inline pour les cases à cocher / switches */
.admin-field-inline {
  margin-top: .4rem;
}

.admin-field-inline label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  color: rgba(255,255,255,.85);
}

.admin-field-inline input[type="checkbox"],
.admin-field-inline input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--gold);
}

/* Petites aides sous les champs */
.admin-field .field-hint {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}

/* Harmonise aussi les anciens formulaires */
.admin-form input,
.admin-form select,
.admin-form textarea {
  font: inherit;
  border-radius: var(--radius);
}