/* ═══════════════════════════════════════════════════════
   MonCanevas — Admin Panel Styles
   ═══════════════════════════════════════════════════════ */

.admin-body { background: var(--canvas); }
.admin-login { max-width: 400px; margin: var(--space-5) auto; padding: var(--space-3); background: var(--laine-blanche); border: var(--border-bold); border-radius: var(--radius-md); text-align: center; }
.admin-login h1 { font-size: var(--text-xl); margin-bottom: var(--space-3); color: var(--laine-noire); }
.admin-login input[type="password"] { width: 100%; padding: var(--space-2); border: var(--border-bold); border-radius: var(--radius-sm); font: inherit; margin-bottom: var(--space-2); }
.admin-panel { max-width: 1100px; margin: var(--space-3) auto; padding: 0 var(--space-2); }
.admin-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.admin-header h1 { font-size: var(--text-xl); }
.admin-stats { display: flex; gap: var(--space-2); }
.admin-stats .stat { text-align: center; font-size: var(--text-sm); color: var(--laine-pierre); }
.admin-stats .stat strong { display: block; font-size: var(--text-lg); color: var(--laine-noire); }

.admin-tabs { display: flex; gap: 0; margin-bottom: var(--space-3); border-bottom: var(--border-bold); }
.admin-tabs a { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--laine-pierre); border-bottom: 3px solid transparent; margin-bottom: -3px; transition: all var(--fast); }
.admin-tabs a.active, .admin-tabs a:hover { color: var(--laine-noire); border-bottom-color: var(--dmc-garance); }

.admin-filters { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); flex-wrap: wrap; }
.admin-filters a { padding: 0.3rem 0.8rem; border: var(--border-thin); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--laine-pierre); transition: all var(--fast); }
.admin-filters a.active, .admin-filters a:hover { background: var(--laine-noire); color: var(--laine-blanche); border-color: var(--laine-noire); }

.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--laine-blanche); border: var(--border-thin); }
.admin-table th { background: var(--laine-noire); color: var(--laine-blanche); padding: var(--space-2); text-align: left; font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.admin-table td { padding: var(--space-1) var(--space-2); border-bottom: var(--border-thin); }
.admin-table tr:hover { background: var(--toile-ecru); }
.admin-actions { display: flex; gap: var(--space-1); }

.status-pending { color: var(--dmc-moutarde); font-weight: 600; }
.status-paid, .status-processing { color: var(--laine-pierre); font-weight: 600; }
.status-delivered { color: var(--dmc-sauge); font-weight: 600; }
.status-failed, .status-refunded { color: var(--error); font-weight: 600; }
.status-draft { color: var(--laine-pierre); }
.status-published { color: var(--dmc-sauge); font-weight: 600; }

/* ── Article Form ── */
.article-form { background: var(--laine-blanche); border: var(--border-thin); border-radius: var(--radius-md); padding: var(--space-3); }
.article-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
.article-form-col h3 { margin-bottom: var(--space-2); padding-bottom: var(--space-1); border-bottom: var(--border-thin); }
.article-form-col label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--laine-pierre); }
.article-form-col input, .article-form-col textarea, .article-form-col select { width: 100%; padding: var(--space-1); border: var(--border-thin); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); }
.article-form-col input:focus, .article-form-col textarea:focus, .article-form-col select:focus { outline: none; border-color: var(--dmc-garance); }
.article-form-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.article-form-meta label { font-size: var(--text-sm); color: var(--laine-pierre); }
.article-form-meta input, .article-form-meta select { padding: var(--space-1); border: var(--border-thin); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); }

@media (max-width: 640px) {
  .article-form-grid { grid-template-columns: 1fr; }
  .admin-stats { width: 100%; justify-content: space-between; }
  .admin-header { flex-direction: column; align-items: flex-start; }
}