:root{
    --bg:#0b1220;
    --panel:#0f172a;
    --muted:#94a3b8;
    --text:#e2e8f0;
    --card:#0b1220;
    --border:#1e293b;
    --green:#22c55e;
    --green-ghost:#13351f;
    --orange:#ffa60c;
    --orange-ghost:#3a2a07;
    --red:#ef4444;
    --blue:#3b82f6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

#app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:var(--panel);border-right:1px solid var(--border);padding:20px;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#60a5fa,#22c55e);display:grid;place-items:center;font-weight:700;color:#0b1220}
.brand-title{font-weight:700}
.brand-sub{font-size:12px;color:var(--muted)}
.menu{display:flex;flex-direction:column;gap:8px}
.menu a{padding:10px 12px;border-radius:8px;color:var(--text);text-decoration:none;border:1px solid transparent}
.menu a.active,.menu a:hover{background:#0b1220;border-color:var(--border)}
.sidebar-footer{position:absolute;left:20px;right:20px;bottom:20px;border-top:1px solid var(--border);padding-top:16px}
.stat{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.legend{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot-green{background:var(--green)}
.dot-orange{background:var(--orange)}

.main{padding:24px;max-width:1200px;margin:0 auto}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}
.header h1{margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{border:1px solid var(--border);background:#0b1220;color:var(--text);padding:10px 14px;border-radius:8px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-primary{background:var(--blue);border-color:#1e40af}
.btn-success{background:var(--bg);border-color:var(--green);color:var(--green);font-weight:bold;transition:all 0.3s ease}
.btn-success:hover{background:var(--green);color:var(--bg);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn-warning{background:var(--bg);border-color:var(--orange);color:var(--orange);font-weight:bold;transition:all 0.3s ease}
.btn-warning:hover{background:var(--orange);color:var(--bg);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn-secondary{background:#111827;border-color:var(--border)}
.btn-danger{background:var(--red);border-color:#7f1d1d}
.btn-ghost{background:transparent}

/* Menu móvel */
.mobile-only{display:none}
.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999}
.sidebar-overlay.active{display:block}

@media(max-width:768px){
    .mobile-only{display:inline-flex}
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;justify-items:center}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){#app{grid-template-columns:1fr}.sidebar{position:static;height:auto}.grid{grid-template-columns:1fr;gap:12px;justify-items:center}}

.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;width:100%;max-width:520px;margin:0 auto}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;flex-wrap:wrap}

.login-card{max-width:420px}

.state-card .header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.state-id{display:flex;flex-direction:column}
.state-sigla{font-weight:700}
.state-nome{font-size:12px;color:var(--muted)}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid var(--border)}
.badge.green{background:var(--green-ghost);color:var(--green)}
.badge.orange{background:var(--orange-ghost);color:var(--orange)}

.field{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.field label{font-size:12px;color:var(--muted)}
.field input{background:#0b1220;border:1px solid #334155;border-radius:8px;padding:10px;color:var(--text);width:100%}

/* Input with copy button */
.input-with-button{display:flex;align-items:center;gap:4px}
.input-with-button input{flex:1;border-radius:8px 0 0 8px}
.copy-btn{border-radius:0 8px 8px 0;padding:8px;height:40px;display:flex;align-items:center;justify-content:center}
.copy-btn:hover{background:#1e293b}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Responsive button layout inside cards */
.actions-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.actions-row .btn{width:100%}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:10px;text-align:left;font-size:14px}
th{color:var(--muted);font-weight:600}

.toast{position:fixed;right:20px;bottom:20px;background:#111827;border:1px solid var(--border);padding:12px 16px;border-radius:10px;z-index:1000;animation:fadeInOut 2s ease-in-out}
.hidden{display:none}
.logged-in-only{display:none}
.error{color:#fca5a5;margin-top:8px}

/* Tooltip */
.tooltip{position:absolute;background:#111827;color:var(--text);padding:6px 10px;border-radius:4px;font-size:12px;pointer-events:none;white-space:nowrap;z-index:1000;opacity:0;transition:opacity 0.3s ease}
.tooltip.show{opacity:1}

@keyframes fadeInOut {
    0% {opacity:0;transform:translateY(10px)}
    10% {opacity:1;transform:translateY(0)}
    90% {opacity:1;transform:translateY(0)}
    100% {opacity:0;transform:translateY(10px)}
}

/* Small screens */
@media(max-width:720px){
    .main{padding:16px;max-width:520px}
    .header{flex-direction:column;align-items:flex-start}
    .header h1{font-size:22px}
    .actions{width:100%}
    .actions .btn{flex:1 1 calc(50% - 4px)}
    .row{grid-template-columns:1fr}
    .login-card{max-width:100%}
    .card{padding:10px;max-width:360px}
}
/* Extra small */
@media(max-width:420px){
    .main{padding:12px;max-width:360px}
    .actions .btn{flex:1 1 100%}
    .card{max-width:300px;padding:10px}
    .field input{padding:9px}
}

/* additions for responsive sidebar */
.mobile-only{display:none}
@media(max-width:720px){
    .mobile-only{display:inline-flex}
    .sidebar{position:fixed;z-index:30;left:-280px;top:0;width:260px;height:100vh;transition:left .25s ease}
    .sidebar.open{left:0}
    .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20}
}

/* log cards spacing and desktop width */
#audit.card,#access.card{margin-top:20px}
@media(min-width:1024px){
    #audit.card,#access.card{width:100%;max-width:none;margin-left:auto;margin-right:auto}
}

/* Loading view for public redirect pages */
.loading-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.loading-card h1{margin:0 0 6px 0}
.loading-card .secure-note{color:var(--muted);font-size:14px}
.spinner{width:28px;height:28px;border:3px solid rgba(148,163,184,.25);border-top-color:#60a5fa;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Dashboard de Métricas */
.metrics-dashboard{margin-bottom:32px}
.metrics-dashboard h2{margin:0 0 20px 0;color:var(--text);font-size:24px;font-weight:600}
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;transition:all 0.3s ease}
.metric-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.metric-card.wide{grid-column:span 2}
.metric-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,0.1);border-radius:8px}
.metric-icon.cashtime-icon{background:rgba(34,197,94,0.1);color:var(--green);font-size:40px;text-align:center;line-height:1}
.metric-icon.podpay-icon{background:rgba(255,166,12,0.1);color:#ffa60c;font-size:40px;text-align:center;line-height:1}
.metric-content{flex:1}
.metric-content h3{margin:0 0 8px 0;font-size:14px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.metric-value{font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px}
.metric-value.small{font-size:16px}
.metric-label{font-size:12px;color:var(--muted)}

/* Gráfico de Distribuição */
.distribution-chart{width:100%}
.chart-bar{height:12px;background:var(--border);border-radius:6px;overflow:hidden;display:flex;margin-bottom:16px}
.bar-segment{height:100%;transition:width 0.5s ease}
.bar-segment.cashtime{background:var(--green)}
.bar-segment.podpay{background:var(--orange)}
.chart-legend{display:flex;gap:20px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.legend-color{width:12px;height:12px;border-radius:2px}
.legend-color.cashtime{background:var(--green)}
.legend-color.podpay{background:var(--orange)}

/* Responsividade para métricas */
@media(max-width:768px){
    .metrics-grid{grid-template-columns:1fr}
    .metric-card.wide{grid-column:span 1}
    .chart-legend{justify-content:center}
}

/* Dashboard de Métricas */
.metrics-dashboard{margin-bottom:32px}
.metrics-dashboard h2{margin:0 0 20px 0;color:var(--text);font-size:24px;font-weight:600}

.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:24px}

.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;align-items:flex-start;gap:16px;transition:all 0.2s ease}
.metric-card:hover{border-color:#334155;transform:translateY(-2px)}
.metric-card.wide{grid-column:span 2}

.metric-icon{font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,0.1);border-radius:10px;flex-shrink:0}

.metric-content{flex:1;min-width:0}
.metric-content h3{margin:0 0 8px 0;font-size:14px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}

.metric-value{font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1}
.metric-value.small{font-size:16px;font-weight:600}

.metric-label{font-size:12px;color:var(--muted)}

/* Gráfico de Distribuição */
.distribution-chart{width:100%}
.chart-bar{height:12px;background:var(--border);border-radius:6px;overflow:hidden;display:flex;margin-bottom:16px}

.bar-segment{height:100%;transition:width 0.3s ease}
.bar-segment.cashtime{background:var(--green)}
.bar-segment.podpay{background:var(--orange)}
.bar-segment.inactive{background:var(--orange)}

.chart-legend{display:flex;gap:20px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.legend-color{width:12px;height:12px;border-radius:3px}
.legend-color.cashtime{background:var(--green)}
.legend-color.podpay{background:var(--orange)}
.legend-color.inactive{background:var(--orange)}

/* Responsividade */
@media(max-width:768px){
    #app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
    .sidebar{position:fixed;top:0;left:-260px;width:260px;height:100vh;z-index:1000;transition:left 0.3s ease}
    .sidebar.open{left:0}
    .main{padding:16px;margin-left:0}
    .header{flex-direction:column;align-items:stretch;gap:16px}
    .actions{justify-content:center}
    .metrics-grid{grid-template-columns:1fr}
    .metric-card.wide{grid-column:span 1}
    .chart-legend{justify-content:center}
    .metric-value{font-size:24px}
    .btn{padding:12px 16px;font-size:14px}
}

@media(max-width:480px){
    .main{padding:12px}
    .metric-card{padding:16px;gap:12px}
    .metric-value{font-size:20px}
    .metric-icon{width:40px;height:40px;font-size:20px}
    .brand{flex-direction:column;text-align:center;gap:8px}
    .menu a{padding:12px;text-align:center}
}