/* =========================================================
   FlashReceitas — Painel Administrativo
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Fraunces:ital,wght@0,600;0,700;1,600&display=swap');

:root{
  --a-ink: #241A22;
  --a-plum: #3B2338;
  --a-plum-2: #4F3049;
  --a-plum-3: #5E3B57;
  --a-bg: #F6EEDF;
  --a-panel: #FFFDF9;
  --a-line: #E7DCC7;
  --a-primary: #B84A3E;
  --a-primary-dark:#93392F;
  --a-secondary: #6B7A3A;
  --a-accent: #D6A339;
  --a-danger: #B84A3E;
  --a-font-body: 'Poppins', system-ui, sans-serif;
  --a-font-display: 'Fraunces', Georgia, serif;
  --a-radius: 14px;
  --a-shadow: 0 1px 2px rgba(43,33,24,.06), 0 10px 26px -14px rgba(43,33,24,.22);
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; font-family: var(--a-font-body); background: var(--a-bg); color: var(--a-ink);
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
h1,h2,h3{ font-family: var(--a-font-display); margin:0 0 .4em; }
button, input, select, textarea{ font-family: inherit; }

/* ---------- Login / Recuperação ---------- */
.auth-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(214,163,57,.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(184,74,62,.18), transparent 45%),
    linear-gradient(155deg, var(--a-plum), var(--a-plum-2) 55%, var(--a-plum-3));
  padding: 24px;
}
.auth-card{
  background: var(--a-panel); border-radius: 22px; padding: 44px 40px;
  width: 100%; max-width: 420px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 26px; }
.auth-brand img{ width:38px; height:38px; }
.auth-brand span{ font-weight:800; font-size:1.1rem; }
.auth-brand em{ font-family: var(--a-font-display); font-style:italic; color: var(--a-primary); }
.auth-card h1{ font-size:1.5rem; }
.auth-card p.lead{ color:#7A6B5C; font-size:.92rem; margin-bottom:22px; }
.field{ margin-bottom: 16px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; }
.field .input-wrap{ position:relative; }
.field input{
  width:100%; padding: 12px 14px 12px 42px; border-radius: 10px; border:1px solid var(--a-line);
  background: var(--a-bg); font-size:.95rem;
}
.field .input-wrap svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#9A8A76;
}
.auth-submit{
  width:100%; padding: 13px; border:none; border-radius: 10px; background: var(--a-primary);
  color:#fff; font-weight:700; font-size:.95rem; margin-top: 6px;
}
.auth-submit:hover{ background: var(--a-primary-dark); }
.auth-links{ display:flex; justify-content:space-between; margin-top:16px; font-size:.85rem; }
.auth-links a{ color: var(--a-primary); font-weight:600; }
.auth-alert{
  padding: 12px 14px; border-radius: 10px; font-size:.88rem; margin-bottom: 18px;
}
.auth-alert.error{ background: rgba(184,74,62,.12); color: var(--a-primary-dark); border:1px solid rgba(184,74,62,.3); }
.auth-alert.success{ background: rgba(107,122,58,.12); color: var(--a-secondary); border:1px solid rgba(107,122,58,.3); }

/* ---------- Shell do painel ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width: 264px; flex-shrink:0; background: var(--a-plum); color: rgba(255,255,255,.82);
  display:flex; flex-direction:column; padding: 22px 16px;
  position: sticky; top:0; height:100vh;
}
.admin-sidebar .brand{ display:flex; align-items:center; gap:10px; padding: 6px 10px 22px; }
.admin-sidebar .brand img{ width:34px; height:34px; }
.admin-sidebar .brand span{ font-weight:800; color:#fff; }
.admin-sidebar .brand em{ font-family: var(--a-font-display); font-style:italic; color: #F2C879; }

.admin-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.admin-nav .nav-label{ font-size:.72rem; text-transform:none; letter-spacing:.3px; color: rgba(255,255,255,.4); margin: 16px 10px 6px; font-weight:600; }
.admin-nav a{
  display:flex; align-items:center; gap:11px; padding: 10px 12px; border-radius: 10px;
  font-size:.92rem; font-weight:500; color: rgba(255,255,255,.75);
}
.admin-nav a svg{ width:18px; height:18px; flex-shrink:0; }
.admin-nav a:hover{ background: rgba(255,255,255,.08); color:#fff; }
.admin-nav a.active{ background: var(--a-primary); color:#fff; }
.admin-sidebar-footer{ border-top:1px solid rgba(255,255,255,.12); padding-top:14px; margin-top:10px; }
.admin-user{ display:flex; align-items:center; gap:10px; padding: 6px 10px; }
.admin-user .avatar{
  width:36px; height:36px; border-radius:50%; background: var(--a-accent); color: var(--a-plum);
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.admin-user .info{ min-width:0; }
.admin-user .info strong{ display:block; font-size:.85rem; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-user .info span{ font-size:.75rem; color: rgba(255,255,255,.5); }
.logout-link{ display:flex; align-items:center; gap:9px; margin-top:10px; padding:9px 10px; border-radius:10px; font-size:.86rem; color: rgba(255,255,255,.65); }
.logout-link:hover{ background: rgba(255,255,255,.08); color:#fff; }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 32px; background: var(--a-panel); border-bottom:1px solid var(--a-line);
  position: sticky; top:0; z-index: 20;
}
.admin-topbar h1{ font-size:1.4rem; }
.admin-topbar .topbar-meta{ font-size:.85rem; color:#8A7A66; }
.admin-content{ padding: 28px 32px 60px; max-width: 1180px; }

.mobile-topbar{ display:none; }

/* ---------- Cards / grids ---------- */
.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-bottom: 28px; }
.stat-card{
  background: var(--a-panel); border:1px solid var(--a-line); border-radius: var(--a-radius);
  padding: 20px; box-shadow: var(--a-shadow);
}
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-card .stat-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
}
.stat-card .stat-icon svg{ width:19px; height:19px; }
.stat-card .stat-value{ font-family: var(--a-font-display); font-size:1.8rem; font-weight:700; }
.stat-card .stat-label{ font-size:.82rem; color:#8A7A66; }
.icon-bg-primary{ background: rgba(184,74,62,.12); color: var(--a-primary); }
.icon-bg-secondary{ background: rgba(107,122,58,.12); color: var(--a-secondary); }
.icon-bg-accent{ background: rgba(214,163,57,.15); color: #A87A1F; }
.icon-bg-plum{ background: rgba(59,35,56,.1); color: var(--a-plum); }

.panel{
  background: var(--a-panel); border:1px solid var(--a-line); border-radius: var(--a-radius);
  box-shadow: var(--a-shadow); padding: 24px 26px; margin-bottom: 24px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; gap:12px; flex-wrap:wrap; }
.panel-head h2{ font-size:1.15rem; }

/* ---------- Botões ---------- */
.a-btn{
  display:inline-flex; align-items:center; gap:8px; padding: 10px 18px; border-radius:10px;
  font-weight:600; font-size:.88rem; border:1px solid transparent; background: var(--a-bg); color: var(--a-ink);
}
.a-btn svg{ width:16px; height:16px; }
.a-btn:hover{ filter:brightness(.97); }
.a-btn-primary{ background: var(--a-primary); color:#fff; }
.a-btn-primary:hover{ background: var(--a-primary-dark); }
.a-btn-outline{ background:transparent; border-color: var(--a-line); }
.a-btn-danger{ background: rgba(184,74,62,.1); color: var(--a-primary-dark); }
.a-btn-danger:hover{ background: rgba(184,74,62,.2); }
.a-btn-sm{ padding: 7px 12px; font-size:.8rem; }

/* ---------- Tabela ---------- */
.a-table{ width:100%; border-collapse: collapse; }
.a-table th{ text-align:left; font-size:.78rem; text-transform:none; color:#8A7A66; padding: 10px 12px; border-bottom:1px solid var(--a-line); font-weight:600; }
.a-table td{ padding: 12px; border-bottom:1px solid var(--a-line); font-size:.9rem; vertical-align:middle; }
.a-table tr:last-child td{ border-bottom:none; }
.a-table img.thumb{ width:52px; height:52px; object-fit:cover; border-radius:8px; }
.a-table .row-actions{ display:flex; gap:8px; justify-content:flex-end; }
.badge{ display:inline-flex; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-published{ background: rgba(107,122,58,.14); color: var(--a-secondary); }
.badge-draft{ background: rgba(214,163,57,.16); color:#A87A1F; }

/* ---------- Formulários ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
.a-field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 16px; }
.a-field.full{ grid-column: 1 / -1; }
.a-field label{ font-size:.85rem; font-weight:600; }
.a-field .hint{ font-size:.78rem; color:#8A7A66; font-weight:400; }
.a-field input[type=text], .a-field input[type=number], .a-field input[type=url],
.a-field input[type=email], .a-field select, .a-field textarea{
  padding: 11px 13px; border-radius: 10px; border:1px solid var(--a-line); background: var(--a-bg);
  font-size:.9rem; width:100%;
}
.a-field textarea{ resize:vertical; min-height: 90px; }
.checkbox-row{ display:flex; align-items:center; gap:8px; }

/* Repetidor de ingredientes / passos */
.repeater-item{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.repeater-item input{ flex:1; }
.repeater-item .drag-handle{ color:#B7A88F; flex-shrink:0; }
.repeater-remove{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--a-line); background:#fff;
  display:flex; align-items:center; justify-content:center; color: var(--a-primary); flex-shrink:0;
}
.repeater-add{ margin-top:4px; }

/* Editor de texto rico (toolbar tipo Word) */
.editor-toolbar{
  display:flex; flex-wrap:wrap; gap:4px; padding: 8px; background: var(--a-bg);
  border: 1px solid var(--a-line); border-bottom:none; border-radius: 10px 10px 0 0;
}
.editor-toolbar button{
  width:34px; height:34px; border-radius:7px; border:none; background:transparent; color: var(--a-ink);
  display:flex; align-items:center; justify-content:center;
}
.editor-toolbar button svg{ width:16px; height:16px; }
.editor-toolbar button:hover{ background: var(--a-line); }
.editor-toolbar button.is-active{ background: var(--a-primary); color:#fff; }
.editor-toolbar .sep{ width:1px; background: var(--a-line); margin: 4px 4px; }
.editor-canvas{
  min-height: 260px; padding: 18px 20px; border:1px solid var(--a-line); border-radius: 0 0 10px 10px;
  background:#fff; font-size:.95rem; line-height:1.7;
}
.editor-canvas:focus{ outline:none; box-shadow: inset 0 0 0 2px var(--a-accent); }
.editor-canvas p{ margin: 0 0 1em; }

.upload-box{
  border: 1.5px dashed var(--a-line); border-radius: 12px; padding: 22px; text-align:center;
  background: var(--a-bg); font-size:.85rem; color:#8A7A66;
}
.image-preview{ width:100%; max-height:220px; object-fit:cover; border-radius:10px; margin-bottom:10px; }

/* Publicidade */
.ad-placement-preview{
  border:1px dashed var(--a-line); border-radius:10px; padding:14px; font-size:.8rem; color:#8A7A66; background:var(--a-bg);
}

.toast{
  position: fixed; bottom: 24px; right:24px; background: var(--a-plum); color:#fff;
  padding: 13px 20px; border-radius: 10px; font-size:.88rem; box-shadow: var(--a-shadow); z-index:100;
}

@media (max-width: 980px){
  .admin-sidebar{ display:none; }
  .admin-sidebar.is-open{ display:flex; position:fixed; z-index:90; }
  .mobile-topbar{
    display:flex; align-items:center; justify-content:space-between; padding: 14px 18px;
    background: var(--a-plum); color:#fff; position: sticky; top:0; z-index:80;
  }
  .stat-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid, .form-grid.cols-3{ grid-template-columns: 1fr; }
}