/* =========================================================================
   Guidelyze · Dashboard — referência prototipo-tracker, paleta sage.
   ========================================================================= */

:root{
  --bg:        #F4F2EC;
  --surface:   #FFFFFF;
  --surface-2: #FAF8F2;
  --border:    #E6E1D5;
  --text:      #1C1C1A;
  --text-soft: #6B6B62;
  --text-mute: #9A968B;
  --accent:    #5C8F7A;
  --accent-deep:#3D5A45;
  --sand:      #C9A87C;
  --green:     #6B9B7A;
  --shadow:    0 1px 2px rgba(28,28,26,0.04), 0 2px 8px rgba(28,28,26,0.05);
}
[data-theme="dark"]{
  --bg:        #131A17;
  --surface:   #1B2421;
  --surface-2: #212C28;
  --border:    rgba(255,255,255,0.08);
  --text:      #ECEEEA;
  --text-soft: #A8B0AA;
  --text-mute: #6E776F;
  --accent:    #7CC9A8;
  --accent-deep:#A8C4B5;
  --sand:      #D8B98A;
  --green:     #8CCB9E;
  --shadow:    0 1px 2px rgba(0,0,0,0.3), 0 2px 10px rgba(0,0,0,0.25);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'DM Sans', system-ui, sans-serif;font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.material-symbols-outlined{font-size:20px;line-height:1;vertical-align:middle}

.layout{display:grid;grid-template-columns:240px 1fr;min-height:100dvh}

/* ===== Sidebar ===== */
.sidebar{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 16px;position:sticky;top:0;height:100dvh;
}
.sidebar-header{display:flex;align-items:center;padding:4px 8px 24px}
.sidebar-logo{height:24px;width:auto}
.nav-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mute);margin:0 8px 8px;font-weight:600}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;border:0;background:transparent;
  color:var(--text-soft);font-family:inherit;font-size:14px;font-weight:500;
  cursor:pointer;text-decoration:none;text-align:left;width:100%;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--accent);color:#fff}
.nav-item.active .material-symbols-outlined{color:#fff}
.sidebar-footer{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.sidebar-version{font-size:11px;color:var(--text-mute);padding:0 12px}

/* ===== Content / topbar ===== */
.content{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;z-index:10;
}
.topbar-title{font-size:20px;font-weight:700}
.topbar-actions{display:flex;align-items:center;gap:10px}
.theme-toggle{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:2px}
.theme-btn{
  border:0;background:transparent;color:var(--text-mute);cursor:pointer;
  padding:6px 8px;border-radius:8px;display:flex;align-items:center;
}
.theme-btn:hover{color:var(--text)}
.theme-btn.active{background:var(--accent);color:#fff}
.auto-refresh-label{font-size:12px;color:var(--text-mute);white-space:nowrap}
.refresh-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;
}
.refresh-btn:hover{background:var(--surface-2)}
.spinning .material-symbols-outlined{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.page-body{padding:24px 28px;display:flex;flex-direction:column;gap:16px;max-width:1320px}

.error-banner{
  display:flex;align-items:center;gap:8px;
  background:rgba(176,122,111,.12);color:#9a5a4e;border:1px solid rgba(176,122,111,.3);
  padding:12px 16px;border-radius:12px;font-size:13px;
}
/* Modo demonstração: âmbar (não é erro, é só informativo) */
.error-banner.demo-mode{
  background:rgba(201,168,124,.15);color:#8a6526;border-color:rgba(201,168,124,.35);
}
[data-theme="dark"] .error-banner.demo-mode{
  background:rgba(216,185,138,.10);color:#d8b98a;border-color:rgba(216,185,138,.22);
}

/* ===== Metric cards ===== */
.metrics-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
@media (max-width:1200px){.metrics-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:680px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.metric-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:14px}
.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);font-weight:600;line-height:1.3}
.metric-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.metric-icon .material-symbols-outlined{font-size:17px}
.metric-icon.sage{background:rgba(92,143,122,.14);color:var(--accent)}
.metric-icon.green{background:rgba(107,155,122,.16);color:var(--green)}
.metric-icon.sand{background:rgba(201,168,124,.18);color:var(--sand)}
.metric-value{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}

/* ===== Panels ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.panel-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.panel-title{font-size:15px;font-weight:700}
.panel-badge{margin-left:auto;background:var(--surface-2);color:var(--text-soft);font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--border)}

/* breakdown bars */
.breakdown-list{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.breakdown-row-header{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px}
.breakdown-label{color:var(--text-soft)}
.breakdown-count{font-weight:700}
.bar-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-deep));border-radius:999px;transition:width .5s var(--ease-out,ease)}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:12px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mute);font-weight:600;border-bottom:1px solid var(--border)}
tbody td{padding:13px 20px;border-bottom:1px solid var(--border);color:var(--text-soft)}
tbody tr:last-child td{border-bottom:0}
td.mono,.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
td.nowrap,.nowrap{white-space:nowrap}
code{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:var(--surface-2);padding:2px 6px;border-radius:6px}

/* badges */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600}
.badge-page{background:rgba(92,143,122,.14);color:var(--accent)}
.badge-video{background:rgba(201,168,124,.18);color:#a07a3c}
.badge-cta{background:rgba(107,155,122,.16);color:var(--green)}
.badge-whatsapp{background:rgba(37,211,102,.14);color:#1da851}
.badge-other{background:var(--surface-2);color:var(--text-soft)}

/* empty */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;color:var(--text-mute);text-align:center}
.empty-state .material-symbols-outlined{font-size:34px;opacity:.6}
.empty-state p{margin:0;font-size:13px}

@media (max-width:760px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .sidebar-nav{flex-direction:row;flex-wrap:wrap}
  .nav-section-label{display:none}
  .sidebar-footer{border:0;flex-direction:row;padding-top:0}
}