/* ═══════════════════════════════════════════════════════════════
   Sistema Censo JTI - Design System Premium
   Regra 85/10/5 — White Canvas / JTI Green / Black Type
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Main Palette - Regra 85 / 10 / 5 */
  --bg-white-canvas: #FFFFFF;
  --brand-jti-green: #00BB31;
  --text-black: #000000;

  /* Supporting Greens */
  --green-1: #D1F0D8;
  --green-2: #A5E2B2;
  --green-3: #7CD48D;
  --green-4: #59C669;

  /* Web Greens */
  --green-web-1: #00D231;
  --green-web-2: #00AA31;
  --green-web-3: #009931;
  --green-web-4: #008731;

  /* Greys */
  --grey-1: #CCCCCC;
  --grey-2: #999999;
  --grey-3: #666666;
  --grey-4: #343434;

  /* Extra Colors - Charts */
  --chart-magenta: #C2005E;
  --chart-purple: #8059B0;
  --chart-grey: #C2BFB5;
  --chart-yellow: #E0AB2B;
  --chart-blue: #4269A3;

  /* Semantic Aliases */
  --primary: #00BB31;
  --primary-light: #00D231;
  --primary-dark: #008731;
  --accent: #00D231;
  --success: #00AA31;
  --danger: #e53935;
  --warning: #E0AB2B;
  --bg: #F7F9F8;
  --card: #FFFFFF;
  --text: #343434;
  --text-light: #666666;
  --border: #E0E0E0;
  --radius: 10px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  --glow-green: 0 4px 15px rgba(0, 187, 49, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ─── Tipografia ───────────────────────────────────────────────── */
h1 { font-size: 1.6rem; font-weight: 700; color: var(--text-black); }
h2 { font-size: 1.3rem; font-weight: 600; color: var(--text-black); }
h3 { font-size: 1.1rem; font-weight: 600; color: var(--grey-4); }

/* ─── Layout geral ─────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.page-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(135deg, #F7F9F8 0%, #E8F5E9 100%);
}

/* ─── Cards — Neumorphism / Soft Shadows ──────────────────────── */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Login card special */
.login-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px rgba(0, 187, 49, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
}
.login-logo {
  height: 56px;
  margin-bottom: 16px;
}
.login-subtitle {
  color: var(--grey-3);
  margin-bottom: 24px;
  font-size: .95rem;
}
.login-links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-links a {
  font-size: .85rem;
  color: var(--grey-3);
  text-decoration: none;
  transition: color 0.3s;
}
.login-links a:hover {
  color: var(--brand-jti-green);
}
.am-link {
  font-weight: 600;
  color: var(--brand-jti-green) !important;
  font-size: .9rem !important;
}
.admin-link {
  font-size: .8rem !important;
}

/* ─── Botões — Gradients + Glow ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--green-web-1), var(--brand-jti-green));
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 187, 49, 0.3);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--brand-jti-green), var(--green-web-2));
  transform: translateY(-2px);
  box-shadow: var(--glow-green);
}

.btn-accent {
  background: linear-gradient(135deg, var(--green-web-1), var(--green-4));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 187, 49, 0.2);
}
.btn-accent:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 187, 49, 0.4);
}

.btn-success {
  background: linear-gradient(135deg, var(--green-web-2), var(--green-web-4));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 170, 49, 0.25);
}
.btn-success:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 170, 49, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #ef5350, #c62828);
  color: #fff;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.25);
}
.btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
}

.btn-warning {
  background: linear-gradient(135deg, #FFD54F, var(--warning));
  color: #333;
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--brand-jti-green);
  color: var(--brand-jti-green);
}
.btn-outline:hover:not(:disabled) {
  background: var(--green-1);
  transform: translateY(-1px);
}

.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-block { width: 100%; }

/* ─── Formulários ──────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--grey-4);
  font-size: .9rem;
}
.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
  transition: all 0.3s ease;
  background: #fff;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand-jti-green);
  box-shadow: 0 0 0 3px rgba(0, 187, 49, 0.12);
}
select.form-control { cursor: pointer; }

.autocomplete-wrapper { position: relative; }
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.autocomplete-list.active { display: block; }
.autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.autocomplete-item:hover,
.autocomplete-item.selected { background: var(--green-1); }

/* ─── Tabelas ──────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  background: linear-gradient(135deg, var(--green-web-2), var(--green-web-4));
  color: #fff;
  font-weight: 600;
  position: sticky;
  top: 0;
}

/* ─── Badges / Tags ────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
}
.badge-success { background: var(--green-1); color: var(--green-web-4); }
.badge-warning { background: #FFF8E1; color: #F57F17; }
.badge-danger { background: #ffcdd2; color: #c62828; }
.badge-info { background: var(--green-1); color: var(--green-web-3); }
.badge-default { background: #e0e0e0; color: #424242; }

/* ─── Header / Nav — Gradient Header ──────────────────────────── */
.header {
  background: linear-gradient(135deg, var(--green-web-4), var(--green-web-2), var(--brand-jti-green));
  color: #fff;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 135, 49, 0.3);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header .logo {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
}
.header .logo img {
  filter: brightness(0) invert(1);
}
.header nav { display: flex; gap: 8px; align-items: center; }
.header nav a {
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: .88rem;
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}
.header nav a:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-1px);
}

/* ─── Admin sidebar ────────────────────────────────────────────── */
.admin-layout { display: flex; min-height: calc(100vh - 52px); }
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--green-web-4) 0%, #005520 100%);
  color: #fff;
  padding: 16px 0;
  flex-shrink: 0;
}
.sidebar a {
  display: block;
  padding: 12px 20px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .9rem;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}
.sidebar a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-left-color: rgba(255,255,255,.4);
}
.sidebar a.active {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-left-color: #fff;
  font-weight: 600;
}
.admin-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: var(--bg);
}

/* ─── Lista de itens pesquisa ──────────────────────────────────── */
.item-list { list-style: none; }
.item-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}
.item-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.item-card .info { flex: 1; }
.item-card .info .title { font-weight: 600; font-size: .95rem; }
.item-card .info .meta { font-size: .82rem; color: var(--text-light); }
.item-card .actions { display: flex; gap: 8px; }
.img-preview {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid var(--green-1);
  transition: transform 0.3s;
}
.img-preview:hover { transform: scale(1.1); }

/* ─── Modal — Glassmorphism ────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  width: 95%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--grey-2);
  transition: color 0.2s;
}
.modal-close:hover { color: var(--danger); }

/* ─── Ajuda técnica ────────────────────────────────────────────── */
.help-panel {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.help-section { margin-bottom: 20px; }
.help-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.help-shortcut {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--green-1);
  text-align: center;
  font-size: .85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.help-shortcut:hover {
  background: var(--green-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 187, 49, 0.15);
}
.faq-item { margin-bottom: 12px; }
.faq-question {
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--brand-jti-green); }
.faq-answer {
  padding: 8px 0 8px 16px;
  color: var(--text-light);
  display: none;
}
.faq-answer.active { display: block; }
.assistant-chat { display: flex; gap: 8px; }
.assistant-chat input { flex: 1; }
.chat-response {
  margin-top: 12px;
  padding: 12px;
  background: var(--green-1);
  border-radius: var(--radius);
  font-size: .9rem;
  display: none;
  border-left: 4px solid var(--brand-jti-green);
}
.chat-response.active { display: block; }

/* ─── Mensagens / Alertas ──────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: .9rem;
}
.alert-success { background: var(--green-1); color: var(--green-web-4); }
.alert-danger { background: #ffcdd2; color: #c62828; }
.alert-info { background: var(--green-1); color: var(--green-web-3); }
.alert-warning { background: #FFF8E1; color: #F57F17; }

/* ─── Upload ───────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--green-2);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg);
}
.upload-zone:hover {
  border-color: var(--brand-jti-green);
  background: var(--green-1);
}
.upload-zone input[type=file] { display: none; }

/* ─── Loading / Spinner ────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--green-1);
  border-top-color: var(--brand-jti-green);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.loading-overlay.active { display: flex; }

/* ─── Tabs (admin) ─────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
.tab {
  padding: 10px 18px;
  cursor: pointer;
  font-size: .9rem;
  border: none;
  background: none;
  position: relative;
  color: var(--text-light);
  font-weight: 500;
  transition: color 0.3s;
}
.tab:hover { color: var(--brand-jti-green); }
.tab.active {
  color: var(--brand-jti-green);
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-jti-green), var(--green-web-1));
  border-radius: 3px 3px 0 0;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Dashboard Cards ──────────────────────────────────────────── */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dash-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.dash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-jti-green), var(--green-web-1));
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 187, 49, 0.12);
}
.dash-card .number { font-size: 1.8rem; font-weight: 700; color: var(--brand-jti-green); }
.dash-card .label { font-size: .8rem; color: var(--grey-3); margin-top: 4px; }

/* ─── Progress Bars ────────────────────────────────────────────── */
.progress-container { margin-top: 12px; }
.progress-bar-wrapper { background: var(--green-1); border-radius: 20px; height: 24px; overflow: hidden; position: relative; }
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-jti-green), var(--green-web-1));
  border-radius: 20px;
  transition: width .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  min-width: 40px;
}
.progress-info { display: flex; justify-content: space-between; font-size: .82rem; color: var(--grey-3); margin-top: 6px; }

/* ─── Admin form ───────────────────────────────────────────────── */
.admin-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 16px; }
.admin-form .form-group { margin-bottom: 0; }

/* ─── Charts ───────────────────────────────────────────────────── */
.chart-container {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}
.chart-container:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }
.chart-container h3 { margin-bottom: 12px; font-size: 1rem; }
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px; margin-bottom: 20px; }

/* ─── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { width: 100%; position: fixed; bottom: 0; left: 0; z-index: 40;
             display: flex; padding: 0; overflow-x: auto;
             background: linear-gradient(90deg, var(--green-web-4), var(--green-web-2)); }
  .sidebar a { white-space: nowrap; padding: 10px 14px; text-align: center; border-left: none; border-bottom: 3px solid transparent; }
  .sidebar a.active { border-left: none; border-bottom-color: #fff; }
  .admin-layout { flex-direction: column; }
  .admin-content { padding: 12px; margin-bottom: 48px; }
  .header nav { gap: 4px; }
  .header nav a { font-size: .8rem; padding: 4px 8px; }
  h1 { font-size: 1.3rem; }
  .card { padding: 16px; }
  .help-shortcuts { grid-template-columns: repeat(2, 1fr); }
  .tabs { overflow-x: auto; }
  .charts-grid { grid-template-columns: 1fr; }
  .admin-form { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { padding: 8px; }
  .card { padding: 12px; }
  .btn { padding: 8px 14px; font-size: .88rem; }
  .help-shortcuts { grid-template-columns: 1fr 1fr; }
}