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

:root {
  --bg-primary: #0f1117;
  --bg-card: #1a1d27;
  --bg-sidebar: #141620;
  --bg-hover: #252836;
  --bg-input: #252836;
  --text-primary: #e0e0e0;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-dim: rgba(99, 102, 241, 0.15);
  --success: #22c55e;
  --success-dim: rgba(34, 197, 94, 0.15);
  --danger: #ef4444;
  --danger-dim: rgba(239, 68, 68, 0.15);
  --warning: #f59e0b;
  --warning-dim: rgba(245, 158, 11, 0.15);
  --border: #2a2d3a;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0,0,0,.3);
  --transition: 0.2s ease;
  --sidebar-width: 240px;
  --topbar-height: 64px;
}

html { font-size: 14px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
.muted { color: var(--text-muted); }

/* ===== Login ===== */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-primary); }
.login-container { width: 100%; max-width: 400px; padding: 1rem; }
.login-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.login-header { text-align: center; margin-bottom: 2rem; }
.login-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--accent); margin-bottom: 0.25rem; }
.login-header p { color: var(--text-secondary); font-size: 0.9rem; }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.65rem 0.9rem;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 0.95rem; font-family: inherit; outline: none;
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { min-height: 80px; resize: vertical; }

#loginForm button, .btn-primary {
  width: 100%; padding: 0.75rem;
  background: var(--accent); color: white; border: none;
  border-radius: var(--radius-sm); font-size: 1rem; font-weight: 500;
  transition: background var(--transition);
}
#loginForm button:hover, .btn-primary:hover { background: var(--accent-hover); }
.error-msg { margin-top: 1rem; padding: .65rem; background: var(--danger-dim); color: var(--danger); border-radius: var(--radius-sm); font-size: .85rem; text-align: center; }

/* ===== Layout principal ===== */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 50; overflow-y: auto;
}
.sidebar-header {
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-header h1 { font-size: 1.2rem; color: var(--accent); margin: 0; }
.sidebar-header .subtitle { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }

.sidebar-nav { padding: 1rem 0.5rem; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 1rem; margin-bottom: 0.25rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary); cursor: pointer;
  transition: background var(--transition);
  font-size: .9rem;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); }
.nav-item .badge { margin-left: auto; background: var(--danger); color: white; font-size: .7rem; padding: .15rem .4rem; border-radius: 10px; }

.sidebar-footer {
  padding: 1rem; border-top: 1px solid var(--border);
  font-size: .85rem; color: var(--text-secondary);
}
.sidebar-footer button {
  width: 100%; padding: .5rem; margin-top: .5rem;
  background: var(--bg-hover); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .85rem;
}

.main { flex: 1; margin-left: var(--sidebar-width); padding: 1.5rem 2rem; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.topbar h2 { font-size: 1.4rem; }
.points-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--warning-dim); color: var(--warning);
  padding: .4rem .8rem; border-radius: var(--radius-sm);
  font-weight: 600;
}
.points-badge::before { content: '🪙'; }

.user-pill { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .85rem; }
.role-badge { font-size: .7rem; padding: .15rem .5rem; border-radius: 10px; font-weight: 600; text-transform: uppercase; }
.role-admin { background: var(--accent-dim); color: var(--accent); }
.role-gerente { background: var(--success-dim); color: var(--success); }
.role-staff { background: var(--bg-hover); color: var(--text-secondary); }

/* ===== Cards ===== */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.card h3 { margin-bottom: .8rem; font-size: 1rem; }
.cards-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.stat-card .label { color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .value { font-size: 1.75rem; font-weight: 700; margin-top: .25rem; }
.stat-card.accent .value { color: var(--accent); }
.stat-card.warn .value { color: var(--warning); }
.stat-card.danger .value { color: var(--danger); }
.stat-card.success .value { color: var(--success); }

/* ===== Botões ===== */
.btn { padding: .5rem 1rem; border: none; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 500; transition: background var(--transition); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-success { background: var(--success); color: white; }
.btn-success:hover { background: #16a34a; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-warn { background: var(--warning); color: white; }
.btn-warn:hover { background: #d97706; }
.btn-ghost { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-input); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ===== Tabela ===== */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table th { text-align: left; padding: .65rem .8rem; color: var(--text-muted); font-weight: 500; border-bottom: 1px solid var(--border); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table td { padding: .75rem .8rem; border-bottom: 1px solid var(--border); }
table tr:last-child td { border-bottom: none; }
table tr:hover { background: var(--bg-hover); }
.table-wrap { overflow-x: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }

/* ===== Status pills ===== */
.pill { display: inline-block; padding: .15rem .55rem; border-radius: 10px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pill-scheduled { background: var(--bg-hover); color: var(--text-secondary); }
.pill-awaiting { background: var(--warning-dim); color: var(--warning); }
.pill-approved { background: var(--success-dim); color: var(--success); }
.pill-rejected { background: var(--danger-dim); color: var(--danger); }
.pill-pending { background: var(--warning-dim); color: var(--warning); }
.pill-delivered { background: var(--success-dim); color: var(--success); }

/* ===== Calendário semanal ===== */
.week-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.day-col {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem; min-height: 280px; display: flex; flex-direction: column; gap: .35rem;
}
.day-head { font-size: .8rem; color: var(--text-muted); padding: .25rem .25rem .5rem; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.day-head .num { color: var(--text-primary); font-weight: 600; font-size: 1rem; }
.day-head.today .num { color: var(--accent); }

.event-chip {
  background: var(--bg-hover); border-left: 3px solid var(--accent);
  padding: .4rem .55rem; border-radius: 4px;
  font-size: .78rem; cursor: pointer;
}
.event-chip:hover { background: var(--bg-input); }
.event-chip .time { color: var(--accent); font-weight: 600; }
.event-chip .name { display: block; margin-top: .15rem; }
.event-chip .meta { color: var(--text-muted); font-size: .7rem; margin-top: .15rem; }
.event-chip.scheduled { border-left-color: var(--accent); }
.event-chip.awaiting { border-left-color: var(--warning); }
.event-chip.approved { border-left-color: var(--success); }
.event-chip.rejected { border-left-color: var(--danger); }

.day-add-btn {
  background: transparent; border: 1px dashed var(--border); color: var(--text-muted);
  padding: .35rem; border-radius: var(--radius-sm); font-size: .75rem; margin-top: auto;
}
.day-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ===== Modal ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal-overlay.show { display: flex; }
.modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.modal h3 { margin-bottom: 1rem; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

/* ===== Tabs/Sections ===== */
.section { display: none; }
.section.active { display: block; }

/* ===== Lojinha ===== */
.shop-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.shop-item-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.shop-item-card .img { aspect-ratio: 16/9; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-muted); }
.shop-item-card .img img { width: 100%; height: 100%; object-fit: cover; }
.shop-item-card .body { padding: .85rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.shop-item-card h4 { font-size: .95rem; }
.shop-item-card .desc { color: var(--text-secondary); font-size: .8rem; flex: 1; }
.shop-item-card .cost { color: var(--warning); font-weight: 700; }
.shop-item-card .stock { color: var(--text-muted); font-size: .75rem; }
.shop-item-card .actions { padding: 0 .85rem .85rem; display: flex; gap: .35rem; }
.shop-item-card.inactive { opacity: .5; }

/* ===== Mobile ===== */
@media (max-width: 768px) {
  :root { --sidebar-width: 220px; }
  .sidebar { transform: translateX(-100%); transition: transform var(--transition); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 1rem; }
  .menu-toggle { display: inline-flex; }
  .week-grid { grid-template-columns: 1fr; }
  .day-col { min-height: 100px; }
  .modal-row { grid-template-columns: 1fr; }
}
.menu-toggle { display: none; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); padding: .4rem .65rem; border-radius: var(--radius-sm); }

/* ===== Form helpers ===== */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
@media (max-width: 600px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

.proof-thumb { max-width: 200px; max-height: 140px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; margin-top: .35rem; }

/* ===== Ranking pódio ===== */
.ranking-list { display: flex; flex-direction: column; gap: .5rem; }
.rank-row { display: grid; grid-template-columns: 50px 1fr 120px 90px; gap: .75rem; align-items: center; padding: .55rem .75rem; background: var(--bg-hover); border-radius: var(--radius-sm); border: 1px solid transparent; }
.rank-row.top-1 { background: linear-gradient(90deg, rgba(245,158,11,.18), var(--bg-hover) 60%); border-color: rgba(245,158,11,.4); }
.rank-row.top-2 { background: linear-gradient(90deg, rgba(156,163,175,.18), var(--bg-hover) 60%); border-color: rgba(156,163,175,.4); }
.rank-row.top-3 { background: linear-gradient(90deg, rgba(217,119,6,.15), var(--bg-hover) 60%); border-color: rgba(217,119,6,.4); }
.rank-row.inactive-row { opacity: .7; }
.rank-row.rank-me { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); }
.rank-pos { font-size: 1.4rem; text-align: center; }
.rank-name { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rank-name strong { font-size: .95rem; }
.rank-bar { width: 100%; height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.rank-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 4px; transition: width .3s ease; }
.rank-pts { text-align: right; font-weight: 600; color: var(--warning); }
.rank-pts.inactive-text { color: var(--text-muted); }
@media (max-width: 600px) {
  .rank-row { grid-template-columns: 40px 1fr 70px; }
  .rank-bar { display: none; }
}

/* card pulse pra avisos */
.stat-card.pulse { box-shadow: 0 0 0 0 var(--warning-dim); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); } 70% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: .75rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 200; font-size: .9rem; display: none; max-width: 320px; }
.toast.show { display: block; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }