/* ============================================================
   MYSTIK ADMIN — padronizado no Design System (tema.css)
   Tokens: light (default) + dark ([data-theme=dark])
   ============================================================ */
@import url('tema.css');

.admin-layout{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:230px;background:var(--bg2);border-right:0.5px solid var(--brd);padding:18px 0;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;flex-shrink:0;transition:background .3s}
.sidebar .admin-badge{text-align:center;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--tx2);margin:6px 0 12px}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.sidebar .nav-item{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:10px;color:var(--tx2);font-size:.8rem;cursor:pointer;transition:all .2s;text-transform:uppercase;font-weight:700;letter-spacing:.05em}
.sidebar .nav-item:hover{background:var(--bg3);color:var(--tx)}
.sidebar .nav-item.active{background:var(--grad-btn);color:#fff;font-weight:600;box-shadow:0 4px 14px var(--glow)}
.sidebar-footer{margin-top:auto;padding:14px;border-top:0.5px solid var(--brd);display:flex;flex-direction:column;gap:10px}
.sidebar-footer p{font-size:.72rem;color:var(--tx2);word-break:break-all}
.btn-logout{background:var(--bg3);border:0.5px solid var(--brd);color:var(--tx);padding:9px 14px;border-radius:10px;cursor:pointer;font-size:.85rem;transition:all .2s}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* Conteudo */
.main-content{flex:1;padding:26px 30px;min-width:0}
.main-content header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.main-content header h1{font-size:1.45rem}
.main-content .date{color:var(--tx2);font-size:.85rem;text-transform:capitalize}

/* Cards de estatistica */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:var(--bg2);border:0.5px solid var(--brd);border-radius:var(--radius);padding:18px;display:flex;gap:14px;align-items:center;box-shadow:var(--card-shadow);transition:transform .15s,border-color .2s,background .3s}
.stat-card:hover{transform:translateY(-2px);border-color:var(--p)}
.stat-icon{width:44px;height:44px;border-radius:12px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.stat-info h3{font-size:1.3rem}
.stat-info p{font-size:.75rem;color:var(--tx2)}

/* Graficos */
.charts-row{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:20px}
.chart-card{background:var(--bg2);border:0.5px solid var(--brd);border-radius:var(--radius);padding:18px;box-shadow:var(--card-shadow)}
.chart-card h3{font-size:.9rem;margin-bottom:14px;color:var(--tx2)}
.plan-stats{display:flex;flex-direction:column;gap:12px}
.plan-bar{display:flex;align-items:center;gap:8px;font-size:.8rem}
.plan-bar .bar{flex:1;height:10px;background:var(--bg3);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;transition:width .5s}
.bar-fill.free{background:var(--p)}
.bar-fill.plus{background:var(--p2)}
.bar-fill.pro{background:var(--mag)}

/* Secoes */
.section{display:none}
.section.active{display:block;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Stats row */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.mini-stat{background:var(--bg2);border:0.5px solid var(--brd);border-radius:var(--radius-sm);padding:14px;text-align:center}
.mini-stat h4{font-size:1.15rem}
.mini-stat p{font-size:.72rem;color:var(--tx2)}

/* Tabelas (base no tema.css) */
.table-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.search-input{background:var(--bg);border:0.5px solid var(--brd);color:var(--tx);padding:9px 14px;border-radius:10px;font-size:.85rem;outline:none;min-width:220px;transition:border .2s}
.search-input:focus{border-color:var(--p);box-shadow:0 0 0 3px var(--glow)}
.data-table{background:var(--bg2);border:0.5px solid var(--brd);border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow)}
.data-table thead th{background:var(--bg3)}

/* botoes padrao */
.btn-gold{background:var(--grad-btn);color:#fff;border:none;padding:10px 22px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .25s;font-size:.88rem}
.btn-gold:hover{background:var(--grad-btn-hover);transform:translateY(-1px);box-shadow:0 6px 18px var(--glow)}
.btn-sm{padding:6px 12px;font-size:.8rem;border-radius:8px}
.user-actions .btn-sm{font-size:.7rem;padding:4px 10px;border-radius:6px;border:0.5px solid var(--brd);background:var(--bg3);color:var(--tx2);cursor:pointer;margin-right:4px;transition:all .2s}
.user-actions .btn-sm:hover{color:var(--p);border-color:var(--p)}
.btn-danger{background:rgba(220,38,38,.12)!important;color:var(--danger)!important;border-color:rgba(220,38,38,.4)!important}
.btn-danger:hover{background:rgba(220,38,38,.22)!important;color:#fff!important}

/* badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.68rem;font-weight:600;letter-spacing:.03em}
.badge-free{background:var(--bg3);color:var(--tx2)}
.badge-plus{background:rgba(144,50,176,.14);color:var(--p2)}
.badge-pro{background:rgba(220,53,227,.14);color:var(--mag)}
.badge-active{background:rgba(5,150,105,.14);color:var(--success)}
.badge-trial{background:rgba(104,213,223,.16);color:var(--cyano)}
.badge-cancelled{background:rgba(220,38,38,.15);color:var(--danger)}
[data-theme="dark"] .badge-free{background:rgba(157,140,255,.15);color:var(--pd)}

/* usuario bloqueado */
.row-blocked{opacity:.55;background:rgba(220,38,38,.06)}

/* cupons */
.coupon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.coupon-card{background:var(--bg2);border:0.5px solid var(--brd);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px}
.coupon-code{font-weight:700;color:var(--p)}

/* responsivo */
@media(max-width:860px){
  .admin-layout{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;flex-wrap:wrap;padding:10px}
  .sidebar nav{flex-direction:row;flex-wrap:wrap;padding:0}
  .sidebar-footer{margin-top:0;border-top:none;padding:0 10px}
  .charts-row{grid-template-columns:1fr}
  .main-content{padding:18px}
}