/* Visual da administração alinhado com /cervejas.php. */
@import url('/fonts/fonts.css');

body.admin-ranking {
  --cream: #fdf8f0;
  --parchment: #f0e6d3;
  --espresso: #1c0e04;
  --coffee: #4a2612;
  --terracotta: #c04820;
  --terra-dark: #a03a16;
  --amber: #d98c30;
  --text: #2a1509;
  --muted: #795434;
  --border: rgba(74, 38, 18, .16);
  box-sizing: border-box;
  margin: 0;
  padding: 0 !important;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  background: var(--cream) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.5;
}
body.admin-ranking *, body.admin-ranking *::before, body.admin-ranking *::after { box-sizing: border-box; }
body.admin-ranking a { color: var(--terracotta); }
body.admin-ranking a:hover { color: var(--terra-dark); }
body.admin-ranking :focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

body.admin-ranking > header,
body.admin-ranking .container > header,
body.admin-ranking .admin-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 1.1rem max(1.5rem, calc((100vw - 1400px) / 2));
  background: var(--espresso) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .24);
}
body.admin-ranking .container > header { margin-bottom: 1.75rem; }
body.admin-ranking .admin-site-header { margin-bottom: 1.75rem; }
body.admin-ranking > header h1,
body.admin-ranking .container > header h1,
body.admin-ranking .admin-site-header .brand {
  margin: 0;
  color: #fff !important;
  font-family: 'Fraunces', serif !important;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  text-decoration: none;
}
body.admin-ranking .admin-site-header .brand em { color: var(--amber); font-style: normal; }
body.admin-ranking nav,
body.admin-ranking .nav-links,
body.admin-ranking .admin-site-header .admin-nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  margin: 0;
}
body.admin-ranking nav a,
body.admin-ranking .nav-links a,
body.admin-ranking .admin-site-header .admin-nav a {
  display: inline-block;
  padding: .45rem .85rem;
  border-radius: 100px;
  color: rgba(255,255,255,.78) !important;
  background: transparent;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
body.admin-ranking nav a:hover,
body.admin-ranking .nav-links a:hover,
body.admin-ranking .admin-site-header .admin-nav a:hover,
body.admin-ranking .admin-site-header .admin-nav a.active {
  color: var(--espresso) !important;
  background: var(--amber) !important;
}
body.admin-ranking main,
body.admin-ranking > .container,
body.admin-ranking > .consolidate-container,
body.admin-ranking > .debug-container {
  width: min(100%, 1400px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 3vw, 2rem);
}
body.admin-ranking > .container > header { margin: -1.75rem calc(-1 * clamp(1rem, 3vw, 2rem)) 1.75rem; width: calc(100% + 2 * clamp(1rem, 3vw, 2rem)); }
body.admin-ranking h1, body.admin-ranking h2, body.admin-ranking h3, body.admin-ranking h4 { color: var(--espresso) !important; }
body.admin-ranking h1, body.admin-ranking h2 { font-family: 'Fraunces', serif !important; line-height: 1.25; }
body.admin-ranking h1 { font-size: clamp(1.7rem, 3vw, 2.25rem); margin: 0 0 1.4rem; }
body.admin-ranking h1:not(header h1) { border-color: var(--parchment) !important; }
body.admin-ranking h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); margin: 0 0 1rem; }
body.admin-ranking h3 { line-height: 1.3; }
body.admin-ranking p, body.admin-ranking li, body.admin-ranking label { color: inherit; }

body.admin-ranking .card,
body.admin-ranking .section,
body.admin-ranking .panel,
body.admin-ranking .stat-card,
body.admin-ranking .status-box,
body.admin-ranking .form-section,
body.admin-ranking .tag-card,
body.admin-ranking .variation-card,
body.admin-ranking .variation-group,
body.admin-ranking .step,
body.admin-ranking .modal-content,
body.admin-ranking .variations-list,
body.admin-ranking .consolidate-form {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 16px rgba(28, 14, 4, .07) !important;
}
body.admin-ranking .card,
body.admin-ranking .section,
body.admin-ranking .panel,
body.admin-ranking .status-box,
body.admin-ranking .form-section,
body.admin-ranking .step { padding: clamp(1rem, 2vw, 1.75rem) !important; margin-bottom: 1.25rem; }
body.admin-ranking .card h2 { border-bottom: 2px solid var(--parchment); padding-bottom: .65rem; }
body.admin-ranking .panel h2 { border-color: var(--parchment) !important; }
body.admin-ranking .stat-card { padding: 1.3rem !important; text-align: center; }
body.admin-ranking .stat-card h3,
body.admin-ranking .stat-label,
body.admin-ranking .stat-item .label { color: var(--muted) !important; }
body.admin-ranking .stat-card .value,
body.admin-ranking .stat-value,
body.admin-ranking .stat-item .value { color: var(--terracotta) !important; }
body.admin-ranking .dashboard, body.admin-ranking .stats-grid { gap: 1rem; }
body.admin-ranking .top5-rank { color: var(--terracotta); }
body.admin-ranking .top5-value { color: var(--muted); }
body.admin-ranking .top5-list li, body.admin-ranking .membro { border-color: var(--border); }

body.admin-ranking input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.admin-ranking select,
body.admin-ranking textarea {
  min-height: 42px;
  max-width: 100%;
  padding: .62rem .8rem;
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid rgba(74,38,18,.3) !important;
  border-radius: 10px !important;
  font: inherit;
  box-shadow: none !important;
}
body.admin-ranking input:focus, body.admin-ranking select:focus, body.admin-ranking textarea:focus { border-color: var(--terracotta) !important; outline: 2px solid rgba(192,72,32,.18); }
body.admin-ranking input::placeholder, body.admin-ranking textarea::placeholder { color: var(--muted); opacity: .8; }
body.admin-ranking label { color: var(--coffee) !important; font-weight: 600; }
body.admin-ranking button,
body.admin-ranking .btn,
body.admin-ranking a[role="button"] {
  background: var(--terracotta) !important;
  color: #fff !important;
  border: 1px solid var(--terracotta) !important;
  border-radius: 10px !important;
  padding: .62rem 1rem;
  font: 600 .9rem 'DM Sans', sans-serif;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
}
body.admin-ranking button:hover,
body.admin-ranking .btn:hover,
body.admin-ranking a[role="button"]:hover { background: var(--terra-dark) !important; border-color: var(--terra-dark) !important; }
body.admin-ranking .btn-danger, body.admin-ranking button.danger, body.admin-ranking .btn-stop { background: #a32f26 !important; border-color: #a32f26 !important; color: #fff !important; }
body.admin-ranking .btn-edit, body.admin-ranking .btn-warning { background: var(--amber) !important; border-color: var(--amber) !important; color: var(--espresso) !important; }
body.admin-ranking .tab-btn { background: #fff !important; color: var(--coffee) !important; border: 1px solid var(--border) !important; }
body.admin-ranking .tab-btn.active { background: var(--espresso) !important; color: #fff !important; border-color: var(--espresso) !important; }
body.admin-ranking .filters, body.admin-ranking .status-bar, body.admin-ranking .info-grid .info-item { background: var(--parchment) !important; color: var(--text) !important; border-radius: 12px !important; }
body.admin-ranking .status-bar { border: 1px solid var(--border) !important; }
body.admin-ranking .status-bar a { color: var(--terracotta) !important; }
body.admin-ranking .filters { padding: 1rem; }
body.admin-ranking .filters a { display: inline-flex; align-items: center; padding: .62rem 1rem !important; background: #fff !important; color: var(--terracotta) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; text-decoration: none; }
body.admin-ranking .pagination a, body.admin-ranking .pagination span { background: #fff !important; color: var(--terracotta) !important; border-color: var(--border) !important; border-radius: 8px; }
body.admin-ranking .pagination .active { background: var(--terracotta) !important; color: #fff !important; }

body.admin-ranking table, body.admin-ranking .log-table { width: 100%; border-collapse: collapse; background: #fff; color: var(--text); }
body.admin-ranking th, body.admin-ranking table th, body.admin-ranking .log-table th { background: var(--espresso) !important; color: #fff !important; border-color: var(--espresso) !important; }
body.admin-ranking td, body.admin-ranking table td, body.admin-ranking .log-table td { color: var(--text); border-color: var(--border) !important; }
body.admin-ranking tr:hover, body.admin-ranking table tr:hover { background: var(--cream) !important; }
body.admin-ranking .log-box, body.admin-ranking pre, body.admin-ranking code, body.admin-ranking .uid-code, body.admin-ranking .uid-mono { background: var(--parchment) !important; color: var(--coffee) !important; }
body.admin-ranking pre, body.admin-ranking .log-box { max-width: 100%; overflow-x: auto; padding: 1rem; border-radius: 10px; }
body.admin-ranking .info-box, body.admin-ranking .alert, body.admin-ranking .feedback, body.admin-ranking .message, body.admin-ranking .status, body.admin-ranking .warning-box, body.admin-ranking .problem-box, body.admin-ranking .solution-box, body.admin-ranking .success-box, body.admin-ranking .danger-box { color: var(--text) !important; border-radius: 12px !important; }
body.admin-ranking .info-box, body.admin-ranking .status-info { background: #fff2df !important; border: 1px solid #e8c998 !important; }
body.admin-ranking .alert-success, body.admin-ranking .feedback.success, body.admin-ranking .message.success, body.admin-ranking .status-success, body.admin-ranking .success-box { background: #e7f3e6 !important; color: #215828 !important; border-color: #9fc79e !important; }
body.admin-ranking .alert-error, body.admin-ranking .feedback.error, body.admin-ranking .message.error, body.admin-ranking .status-error, body.admin-ranking .error-message, body.admin-ranking .danger-box { background: #fbe9e6 !important; color: #922d25 !important; border-color: #e4aaa4 !important; }
body.admin-ranking .warning-box, body.admin-ranking .problem-box { background: #fff0d7 !important; color: #714411 !important; border-color: #e8c185 !important; }
body.admin-ranking .modal { background: rgba(28,14,4,.66) !important; }
body.admin-ranking .modal-close { color: var(--coffee) !important; }
body.admin-ranking .badge { border-radius: 100px; }
body.admin-ranking .step-number { background: var(--terracotta) !important; color: #fff !important; }
body.admin-ranking .log-entry, body.admin-ranking .log-line { background: var(--cream) !important; color: var(--text) !important; border-left: 3px solid var(--amber) !important; }
body.admin-ranking .log-entry.success { border-left-color: #348046 !important; color: #215828 !important; }
body.admin-ranking .log-entry.error { border-left-color: #a32f26 !important; color: #922d25 !important; }
body.admin-ranking .log-entry.partial { border-left-color: var(--amber) !important; color: var(--coffee) !important; }
body.admin-ranking .status-ok, body.admin-ranking .log-ok { color: #286a36 !important; }
body.admin-ranking .status-error, body.admin-ranking .log-error { color: #a32f26 !important; }
body.admin-ranking .status-warn, body.admin-ranking .status-warning { color: #916011 !important; }

body.admin-ranking.admin-login { display: flex; justify-content: center; align-items: center; padding: 1rem !important; }
body.admin-ranking.admin-login form { display: flex; flex-direction: column; gap: .85rem; width: min(100%, 400px); padding: 2rem; background: #fff !important; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 12px 36px rgba(28,14,4,.13); text-align: left; }
body.admin-ranking.admin-login form h2 { margin: 0 0 .4rem; }
body.admin-ranking.admin-login form input, body.admin-ranking.admin-login form button { width: 100%; margin: 0; }
body.admin-ranking.admin-login .login-brand { display: block; margin-bottom: .25rem; color: var(--terracotta); font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; }

@media (max-width: 760px) {
  body.admin-ranking > header, body.admin-ranking .container > header, body.admin-ranking .admin-site-header { flex-direction: column; align-items: flex-start; padding: 1rem; }
  body.admin-ranking main, body.admin-ranking > .container, body.admin-ranking > .consolidate-container, body.admin-ranking > .debug-container { padding: 1rem; }
  body.admin-ranking > .container > header { margin: -1rem -1rem 1rem; width: calc(100% + 2rem); }
  body.admin-ranking .dashboard, body.admin-ranking .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  body.admin-ranking .card, body.admin-ranking .section { overflow-x: auto; }
  body.admin-ranking .tabs { flex-direction: row; }
  body.admin-ranking .tab-btn { width: auto; }
}
