/* ──────────────────────────────────────────────
   VARIABLES
────────────────────────────────────────────── */
:root {
  --rid-primary:       #12876f;
  --rid-primary-dark:  #0f6d59;
  --rid-primary-light: #ecfdf5;
  --rid-border:        #e2e8f0;
  --rid-bg:            #ffffff;
  --rid-text:          #0f172a;
  --rid-muted:         #64748b;
  --rid-success:       #16a34a;
  --rid-error:         #dc2626;
  --rid-warning:       #f59e0b;
  --rid-radius:        12px;
  --rid-shadow:        0 4px 20px rgba(15, 23, 42, .07);
}

/* ──────────────────────────────────────────────
   FORMULAIRES (inscription / connexion / dépôt)
────────────────────────────────────────────── */
.rid-form {
  background:    var(--rid-bg);
  border:        1px solid var(--rid-border);
  border-radius: 16px;
  padding:       28px;
  box-shadow:    var(--rid-shadow);
  color:         var(--rid-text);
  max-width:     560px;
}

.rid-form h2 {
  margin:      0 0 20px;
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--rid-text);
}

.rid-form label {
  display:      block;
  font-size:    .875rem;
  font-weight:  600;
  color:        var(--rid-muted);
  margin-bottom: 14px;
}

.rid-form input,
.rid-form select,
.rid-form textarea {
  display:       block;
  width:         100%;
  border:        1px solid var(--rid-border);
  border-radius: var(--rid-radius);
  padding:       11px 14px;
  margin-top:    5px;
  font:          inherit;
  font-size:     .95rem;
  background:    #fff;
  color:         var(--rid-text);
  box-sizing:    border-box;
  transition:    border-color .15s, box-shadow .15s;
}

.rid-form input:focus,
.rid-form select:focus,
.rid-form textarea:focus {
  outline:    none;
  border-color: var(--rid-primary);
  box-shadow: 0 0 0 3px rgba(18, 135, 111, .15);
}

/* Grille 2 colonnes pour formulaire dépôt */
.rid-form-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   0 16px;
}

/* ──────────────────────────────────────────────
   BOUTONS
────────────────────────────────────────────── */
.rid-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  background:      var(--rid-primary);
  color:           #fff;
  border:          none;
  border-radius:   var(--rid-radius);
  padding:         11px 20px;
  font:            inherit;
  font-size:       .95rem;
  font-weight:     600;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .15s;
}

.rid-btn:hover,
.rid-btn:focus {
  background: var(--rid-primary-dark);
  color:      #fff;
  outline:    none;
}

.rid-btn:disabled {
  opacity: .55;
  cursor:  not-allowed;
}

.rid-btn-sm {
  padding:   7px 14px;
  font-size: .875rem;
}

.rid-btn-outline {
  background: transparent;
  color:      var(--rid-primary);
  border:     1.5px solid var(--rid-primary);
}

.rid-btn-outline:hover {
  background: var(--rid-primary-light);
  color:      var(--rid-primary-dark);
}

.rid-delete-btn {
  background: var(--rid-error);
}

.rid-delete-btn:hover {
  background: #b91c1c;
}

/* ──────────────────────────────────────────────
   CARTES (dashboard + archive)
────────────────────────────────────────────── */
.rid-card {
  border:        1px solid var(--rid-border);
  border-radius: 16px;
  padding:       20px 22px;
  margin-bottom: 14px;
  background:    #fff;
  box-shadow:    var(--rid-shadow);
  border-left:   5px solid var(--rid-border);
}

.rid-card.is-active  { border-left-color: var(--rid-success); }
.rid-card.is-expired { border-left-color: var(--rid-error);   opacity: .9; }
.rid-card.is-pending { border-left-color: var(--rid-warning); }
.rid-card.is-draft   { border-left-color: var(--rid-muted);   }

.rid-card-header {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  margin-bottom: 10px;
}

.rid-card-header h3 {
  margin:      0;
  font-size:   1.05rem;
  font-weight: 700;
}

.rid-card-meta {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px 18px;
  font-size: .875rem;
  color:     var(--rid-muted);
  margin-bottom: 14px;
}

/* ──────────────────────────────────────────────
   BADGE STATUT
────────────────────────────────────────────── */
.rid-status {
  display:     inline-block;
  padding:     4px 10px;
  border-radius: 999px;
  font-size:   .8rem;
  font-weight: 600;
  background:  var(--rid-primary-light);
  color:       var(--rid-primary-dark);
}

.is-expired .rid-status  { background: #fee2e2; color: var(--rid-error);   }
.is-pending .rid-status  { background: #fef3c7; color: #92400e;            }
.is-draft   .rid-status  { background: #f1f5f9; color: var(--rid-muted);   }

/* ──────────────────────────────────────────────
   DASHBOARD
────────────────────────────────────────────── */
.rid-dashboard {
  max-width: 760px;
}

.rid-dashboard-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   20px;
}

.rid-dashboard-header h2 {
  margin:      0;
  font-size:   1.4rem;
  font-weight: 700;
}

.rid-actions {
  display: flex;
  gap:     10px;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────
   RECHERCHE
────────────────────────────────────────────── */
.rid-search-form {
  background:    var(--rid-bg);
  border:        1px solid var(--rid-border);
  border-radius: 16px;
  padding:       20px 22px;
  margin-bottom: 24px;
  box-shadow:    var(--rid-shadow);
}

.rid-search-simple {
  display:               grid;
  grid-template-columns: 1fr 1fr auto;
  gap:                   12px;
  align-items:           end;
}

.rid-search-simple input {
  border:        1px solid var(--rid-border);
  border-radius: var(--rid-radius);
  padding:       11px 14px;
  font:          inherit;
  font-size:     .95rem;
  width:         100%;
  box-sizing:    border-box;
}

.rid-search-simple input:focus {
  outline:      none;
  border-color: var(--rid-primary);
  box-shadow:   0 0 0 3px rgba(18, 135, 111, .15);
}

.rid-advanced-filters {
  margin-top:  16px;
  padding-top: 14px;
  border-top:  1px solid var(--rid-border);
}

.rid-advanced-filters summary {
  cursor:      pointer;
  font-weight: 600;
  font-size:   .9rem;
  color:       var(--rid-primary-dark);
  user-select: none;
}

.rid-advanced-grid {
  margin-top:            14px;
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
}

.rid-advanced-grid input,
.rid-advanced-grid select {
  border:        1px solid var(--rid-border);
  border-radius: var(--rid-radius);
  padding:       10px 12px;
  font:          inherit;
  font-size:     .9rem;
  width:         100%;
  box-sizing:    border-box;
  background:    #fff;
}

.rid-advanced-grid input:focus,
.rid-advanced-grid select:focus {
  outline:      none;
  border-color: var(--rid-primary);
  box-shadow:   0 0 0 3px rgba(18, 135, 111, .15);
}

/* ──────────────────────────────────────────────
   MESSAGES
────────────────────────────────────────────── */
.rid-message {
  margin-top: 12px;
  font-size:  .9rem;
  color:      var(--rid-muted);
  min-height: 1.2em;
}

.rid-notice {
  padding:       12px 16px;
  border-radius: var(--rid-radius);
  background:    var(--rid-primary-light);
  color:         var(--rid-primary-dark);
  font-size:     .95rem;
}

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */
@media ( max-width: 640px ) {
  .rid-search-simple {
    grid-template-columns: 1fr;
  }

  .rid-advanced-grid,
  .rid-form-grid {
    grid-template-columns: 1fr;
  }

  .rid-dashboard-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
  }
}