/* ==========================================================================
   Painel Admin — Marco da Transição v3
   ========================================================================== */

/* ── Variáveis ── */
:root {
  --adm-bg:       #f5f2ee;
  --adm-sidebar:  #3d0318;
  --adm-sidebar2: #4b0f25;
  --adm-gold:     #AD8947;
  --adm-gold-lt:  #d4b069;
  --adm-wine:     #5a052a;
  --adm-ink:      #2c2c2c;
  --adm-ink-lt:   #666;
  --adm-border:   #e0d5cc;
  --adm-cream:    #faf8f5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; color: var(--adm-ink); background: var(--adm-bg); }

/* ── LOGIN ── */
body.page-login {
  background: #fff;
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px;
}
.login-shell { width: 100%; max-width: 900px; }
.login-card {
  display: grid; grid-template-columns: 1fr 1fr;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.login-card__brand {
  background: var(--adm-sidebar); color: #fff; padding: 52px 44px;
  display: flex; flex-direction: column; justify-content: center; gap: 0;
}
.login-card__eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--adm-gold); font-weight: 700; margin-bottom: 18px; }
.login-card__brand h1 { font-family: 'Playfair Display', serif; font-size: 36px; color: #fff; line-height: 1.1; margin-bottom: 16px; }
.login-card__brand h1 em { color: var(--adm-gold); font-style: italic; }
.login-card__brand p { color: rgba(212,184,194,.8); font-size: 15px; line-height: 1.6; }
.login-card form { padding: 52px 44px; display: flex; flex-direction: column; background: #fff; }
.login-card h2 { font-family: 'Playfair Display', serif; color: var(--adm-wine); font-size: 26px; margin-bottom: 28px; }
.login-card label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--adm-wine); font-weight: 700; margin-bottom: 5px; margin-top: 14px; display: block; }
.login-card input[type=email], .login-card input[type=password] {
  padding: 12px 14px; border: 1px solid var(--adm-border); font-size: 15px; outline: none; width: 100%;
}
.login-card input:focus { border-color: var(--adm-gold); }
@media (max-width: 720px) { .login-card { grid-template-columns: 1fr; } .login-card__brand { padding: 36px; } }

/* ── ALERTAS ── */
.alert { padding: 12px 16px; font-size: 14px; margin-bottom: 14px; border-left: 3px solid; }
.alert--error   { background: #fbe9e9; border-color: #b33a3a; color: #6e0e0e; }
.alert--success { background: #e9f5ee; border-color: #2e8b57; color: #1f5c3a; }
.alert--info    { background: #f5efe6; border-color: var(--adm-gold); color: var(--adm-wine); }

/* ══════════════════════════════════════
   SHELL ADMIN — layout principal
══════════════════════════════════════ */
.admin-shell {
  display: grid;
  grid-template-columns: 224px 1fr;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
.admin-sidebar {
  background: var(--adm-sidebar);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

/* Logo — caixa com fundo claro para contraste */
.admin-sidebar__logo {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
}
.admin-sidebar__logo img {
  max-width: 110px;
  height: auto;
  /* inverte para versão clara se o logo for escuro */
  filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg);
  opacity: .92;
}

/* Caso a logo já seja clara, remova o filter acima e descomente: */
/* .admin-sidebar__logo img { max-width: 110px; } */

.admin-sidebar__nav {
  flex: 1; padding: 12px 0; overflow-y: auto;
}
.admin-nav-section {
  padding: 18px 20px 6px;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(173,137,71,.65); font-weight: 700;
}
.admin-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 20px; color: rgba(230,210,218,.78);
  font-size: 13px; font-weight: 500; border-left: 3px solid transparent;
  text-decoration: none; transition: background .12s, color .12s;
}
.admin-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav-item.is-active {
  background: rgba(0,0,0,.22); color: #fff;
  border-left-color: var(--adm-gold); font-weight: 600;
}
.admin-nav-item svg {
  width: 16px; height: 16px; stroke: currentColor;
  fill: none; stroke-width: 1.7; flex-shrink: 0; opacity: .85;
}

.admin-sidebar__bottom {
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: auto;
}
.admin-sidebar__user      { color: #fff; font-weight: 600; font-size: 13px; }
.admin-sidebar__user-role { color: var(--adm-gold); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin: 2px 0 10px; }
.admin-sidebar__bottom a  { color: rgba(212,184,194,.7); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.admin-sidebar__bottom a:hover { color: var(--adm-gold); }

/* ── MAIN ── */
.admin-main { padding: 28px 36px; overflow-x: auto; }
.admin-main__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.admin-main__title {
  font-family: 'Playfair Display', serif; color: var(--adm-wine); font-size: 28px; font-weight: 700;
}
.admin-main__title small {
  display: block; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--adm-ink-lt); font-weight: 400; margin-top: 3px;
}

/* ══════════════════════════════════════
   STAT CARDS — Dashboard
══════════════════════════════════════ */
.stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 32px; }
.stat-card {
  background: #fff; padding: 20px 22px;
  border: 1px solid var(--adm-border); border-top: 3px solid var(--adm-gold);
}
.stat-card__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--adm-ink-lt); margin: 0 0 8px; }
.stat-card__value { font-family: 'Playfair Display', serif; color: var(--adm-wine); font-size: 34px; margin: 0; line-height: 1; }
.stat-card--live  { border-top-color: #2e8b57; }
.stat-card--live .stat-card__value { color: #2e8b57; }
.stat-card--live .stat-card__label::before { content: '● '; color: #2e8b57; }

/* ══════════════════════════════════════
   POSTS — EDITOR SPLIT-SCREEN
══════════════════════════════════════ */
.posts-editor {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 0;
  min-height: calc(100vh - 120px);
  border: 1px solid var(--adm-border);
  background: #fff;
}

/* Lista lateral */
.posts-list-panel {
  border-right: 1px solid var(--adm-border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.posts-list-panel__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--adm-border);
  display: flex; gap: 8px; align-items: center;
  background: var(--adm-cream);
}
.posts-list-panel__header input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--adm-border); font-size: 13px; outline: none;
}
.posts-list-panel__header input:focus { border-color: var(--adm-gold); }
.posts-list-panel__items { overflow-y: auto; flex: 1; }
.post-list-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 16px; border-bottom: 1px solid #f0ece6;
  cursor: pointer; transition: background .12s; text-decoration: none;
}
.post-list-item:hover { background: #f5efe6; }
.post-list-item.is-active { background: #f0e8d8; border-left: 3px solid var(--adm-gold); }
.post-list-item__title { font-size: 13px; font-weight: 600; color: var(--adm-wine); line-height: 1.3; }
.post-list-item__meta  { font-size: 11px; color: var(--adm-ink-lt); display: flex; gap: 8px; align-items: center; }
.post-list-item .status-pill { font-size: 9px; padding: 2px 7px; }

/* Painel do editor */
.posts-form-panel {
  padding: 24px 28px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}
.posts-form-panel h2 {
  font-family: 'Playfair Display', serif; color: var(--adm-wine); font-size: 20px; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--adm-border);
}

/* ══════════════════════════════════════
   FORMULÁRIOS
══════════════════════════════════════ */
.admin-form { background: #fff; border: 1px solid var(--adm-border); padding: 24px; }
.field { margin-bottom: 16px; }
.field label, .admin-form label {
  display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--adm-wine); font-weight: 700; margin-bottom: 5px;
}
.field input[type=text], .field input[type=email], .field input[type=url],
.field input[type=password], .field select, .field textarea,
.admin-form input[type=text], .admin-form input[type=email],
.admin-form input[type=url], .admin-form input[type=password],
.admin-form select, .admin-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--adm-border);
  font-size: 13px; outline: none; font-family: inherit; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus,
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  border-color: var(--adm-gold);
}
.field textarea, .admin-form textarea {
  min-height: 260px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.55; resize: vertical;
}
.field .help { font-size: 11px; color: var(--adm-ink-lt); margin-top: 4px; }
.field-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.field-row-3 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr; }
.admin-form__actions, .field-actions {
  display: flex; gap: 10px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--adm-border); flex-wrap: wrap;
}

/* ══════════════════════════════════════
   TOOLBAR / TABELAS
══════════════════════════════════════ */
.admin-toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.admin-toolbar form { display: flex; gap: 0; flex: 1; min-width: 200px; }
.admin-toolbar input[type=search], .admin-toolbar select {
  padding: 9px 12px; border: 1px solid var(--adm-border); font-size: 13px; flex: 1; outline: none; background: #fff;
}
.admin-toolbar input:focus, .admin-toolbar select:focus { border-color: var(--adm-gold); }
.admin-toolbar button {
  padding: 9px 16px; background: var(--adm-wine); color: #fff; border: 0; cursor: pointer;
  font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .12em;
}

table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--adm-border); }
table.admin-table th, table.admin-table td { padding: 11px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--adm-border); }
table.admin-table th { background: var(--adm-cream); color: var(--adm-wine); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .13em; }
table.admin-table tr:last-child td { border-bottom: 0; }
table.admin-table tr:hover td { background: #f9f6f2; }

.status-pill { display: inline-block; padding: 3px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.status-published { background: #dbefe0; color: #1f5c3a; }
.status-draft     { background: #f0ece6; color: #555; }
.status-archived  { background: #f2dad2; color: #7a2a1b; }
.status-active    { background: #dbefe0; color: #1f5c3a; }
.status-cancelled { background: #f2dad2; color: #7a2a1b; }

/* ── Botões ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 2px solid transparent; text-decoration: none; font-family: inherit; transition: all .15s; }
.btn--primary { background: var(--adm-wine); color: #fff; border-color: var(--adm-wine); }
.btn--primary:hover { background: #3d0318; border-color: #3d0318; color: #fff; }
.btn--outline { background: transparent; color: var(--adm-wine); border-color: var(--adm-gold); }
.btn--outline:hover { background: var(--adm-gold); color: #fff; }
.btn--ghost   { background: transparent; color: var(--adm-wine); border-color: var(--adm-border); }
.btn--ghost:hover { background: var(--adm-cream); }
.btn--danger  { background: #b33a3a; color: #fff; border-color: #b33a3a; }
.btn--danger:hover { background: #8e2d2d; color: #fff; }
.btn--sm { padding: 6px 12px; font-size: 11px; }
.btn--xs { padding: 4px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ── Imagem de destaque preview ── */
.img-preview { max-width: 100%; max-height: 140px; object-fit: cover; margin-top: 8px; display: block; border: 1px solid var(--adm-border); }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.48);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.modal { background: #fff; max-width: 520px; width: 100%; padding: 28px; }
.modal h3 { margin: 0 0 18px; font-family: 'Playfair Display', serif; color: var(--adm-wine); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-main { padding: 20px 16px; }
  .posts-editor { grid-template-columns: 1fr; }
  .posts-list-panel { max-height: 40vh; }
  .posts-form-panel { max-height: none; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
}