/* Admin page styles - matching site design */

body.admin {
  background: var(--beige);
  font-family: 'Gliker', sans-serif;
  color: var(--bleu);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.admin-top {
  width: 95%;
  max-width: 75rem;
  margin: 0 auto 2rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border-bottom: 0.2rem solid var(--bleu);
}

/* Drag & drop admin list styles */
.project-item { background: #fff; }
.project-item .drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.6rem;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--bleu);
    cursor: grab;
    font-weight: 800;
}
.project-item.dragging { opacity: 0.5; }
.project-item.drag-over {
    outline: 0.18rem dashed rgba(30,144,255,0.6);
    transform: translateY(-2px);
}
.project-item .project-meta { flex: 1; }
.drag-instruction { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }

.admin-top h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  color: var(--bleu);
  font-weight: 800;
}

.admin-top p {
  margin: 0;
  font-size: 0.95rem;
  color: #666;
  font-weight: 500;
}

.admin-wrap {
  width: 95%;
  max-width: 64rem;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body.admin.login-page .admin-wrap {
  max-width: 380px;
}

.admin-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 3rem;
}

.admin-card {
  background: #ffffff;
  border: 0.2rem solid var(--bleu);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(30, 144, 255, 0.08);
}

.admin-card h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--bleu);
  font-weight: 800;
}

.admin-card p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-form label {
  font-weight: 800;
  color: var(--bleu);
  font-size: 0.95rem;
}

.admin-form input[type="text"],
.admin-form input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.15rem solid #e0e0e0;
  background: #fafafa;
  font-family: 'Gliker', sans-serif;
  font-size: 0.95rem;
  transition: all 200ms ease;
}

/* Description textarea styling to match D.A. */
.admin-form textarea {
  width: 100%;
  min-height: 6.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.65rem;
  border: 0.15rem solid #e0e0e0;
  background: #fafafa;
  font-family: 'Gliker', sans-serif;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
  resize: vertical; /* allow vertical resize only */
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.admin-form textarea:focus{
  outline: none;
  border-color: var(--bleu);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(30,144,255,0.06);
}

/* Placeholder color consistent with DA */
.admin-form textarea::placeholder{ color: #9aa0a6; }

/* Select styling */
.admin-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.15rem solid #e0e0e0;
  background: #fafafa url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="%231E90FF" d="M7 10l5 5 5-5z"/></svg>') no-repeat right 0.9rem center/12px 12px;
  font-family: 'Gliker', sans-serif;
  font-size: 0.95rem;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.admin-form select:focus{ outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(30,144,255,0.06); }

/* Multi-select visual tweaks */
.admin-form select[multiple]{
  min-height: 6.25rem;
  padding-right: 0.6rem;
  background-position: right 0.6rem center;
}

/* Project list improvements */
.project-item{ transition: all 180ms ease; }
.project-item:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,144,255,0.06); }
.project-item .project-meta strong{ display:block; color:var(--bleu); font-size:1rem }
.project-item .project-meta div{ margin-top:0.15rem }

.drag-handle{ font-size:1.15rem; opacity:0.9 }
.drag-handle:active{ cursor:grabbing }

/* smooth movement when reordering */
#projects-list{ transition: height 200ms ease; }

/* Chip buttons */
.chip-group{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{ border:0.12rem solid rgba(30,144,255,0.12); background:#fff; color:var(--bleu); padding:0.45rem 0.8rem; border-radius:999px; cursor:pointer; font-weight:700; transition:all 160ms ease; font-family:'Gliker',sans-serif }
.chip:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(30,144,255,0.06) }
.chip.selected{ background:var(--bleu); color:#fff; border-color:var(--bleu); box-shadow:0 8px 20px rgba(30,144,255,0.12) }
.chip[aria-pressed="true"]{ outline:2px solid rgba(30,144,255,0.12) }
.chip kbd{ background:#f3f3f3; border-radius:4px; padding:0.08rem 0.25rem; font-size:0.75rem }

/* Thumbnail dropzone */
.thumb-dropzone{
  margin-top:0.5rem;
  padding:0.8rem;
  border:0.15rem dashed rgba(30,144,255,0.12);
  border-radius:0.75rem;
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
}
.thumb-dropzone .thumb-drop-inner{ color:#666; font-size:0.95rem }
.thumb-dropzone.drag-over{ border-color: rgba(30,144,255,0.6); box-shadow: 0 8px 24px rgba(30,144,255,0.06); transform: translateY(-2px); }
.thumb-preview img{ display:block }

.admin-form input[type="text"]:focus,
.admin-form input[type="password"]:focus {
  outline: none;
  border-color: var(--bleu);
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.1);
}

.actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--bleu);
  color: #ffffff;
  border: none;
  padding: 0.7rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 800;
  font-family: 'Gliker', sans-serif;
  font-size: 0.95rem;
  transition: all 200ms ease;
}

.btn-primary:hover {
  background: #1574d4;
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.25);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: var(--bleu);
  border: 0.15rem solid var(--bleu);
  padding: 0.65rem 1.125rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: 'Gliker', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  transition: all 200ms ease;
}

.btn-secondary:hover {
  background: var(--bleu);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 144, 255, 0.15);
}

.btn-secondary:active {
  transform: scale(0.98);
}

.note-small {
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.5rem;
}

.error-message {
  background: #ffebee;
  border-left: 0.25rem solid #ff6b52;
  color: #c62828;
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.success-message {
  background: #e8f5e9;
  border-left: 0.25rem solid var(--vert);
  color: #1b5e20;
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.info-box {
  background: #f5f5f5;
  border: 0.15rem solid #ddd;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

a.btn-secondary {
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

a {
  color: var(--bleu);
  text-decoration: none;
  font-weight: 700;
  transition: opacity 200ms ease;
}

a:hover {
  opacity: 0.8;
}

@media (min-width: 900px) {
  .admin-panel {
    grid-template-columns: 1fr 340px;
  }
  
  body.admin.login-page .admin-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .admin-top {
    padding: 1rem 0.75rem;
    margin-bottom: 1.5rem;
  }

  .admin-top h1 {
    font-size: 1.25rem;
  }

  .admin-wrap {
    max-width: 95%;
  }

  body.admin.login-page .admin-wrap {
    max-width: 95%;
  }

  .actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 0.75rem 1rem;
  }
}