/* ============================================
   PIANETTO MONITOR FINANCEIRO — STYLES
   ============================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-primary:#0a1628;
  --bg-secondary:#0f2035;
  --bg-card:#1a3352;
  --bg-card-hover:#1e3a5f;
  --green:#2db84d;
  --blue:#1976D2;
  --yellow:#f59e0b;
  --red:#ef4444;
  --orange:#f97316;
  --text-primary:#e8edf4;
  --text-secondary:#94a8c4;
  --text-muted:#5e7a9a;
  --border:#1a3352;
  --border-light:#253d5c;
  --sidebar-w:260px;
  --header-h:52px;
  --radius:8px;
  --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);font-size:13px;line-height:1.5}

/* Layout */
body{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr;height:100dvh}

/* Sidebar */
.sidebar{grid-row:1/-1;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;z-index:20}
.sidebar-header{padding:16px 18px 12px;border-bottom:1px solid var(--border)}
.logo-svg{height:28px;width:auto;display:block}
.sidebar-subtitle{display:block;font-size:11px;color:var(--text-muted);margin-top:4px;letter-spacing:.5px;text-transform:uppercase}
.sidebar-nav{flex:1;padding:8px 0}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;color:var(--text-secondary);text-decoration:none;font-size:12.5px;font-weight:500;transition:all .15s;border-left:3px solid transparent}
.nav-item:hover{background:rgba(45,184,77,.06);color:var(--text-primary)}
.nav-item.active{background:rgba(45,184,77,.1);color:var(--green);border-left-color:var(--green);font-weight:600}
.nav-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}

/* Main Content */
.main-content{display:flex;flex-direction:column;overflow:hidden}
.top-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:var(--header-h);background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}
.header-left{display:flex;align-items:center;gap:14px}
.header-title{font-size:15px;font-weight:600;color:var(--text-primary)}
.header-updated{font-size:11px;color:var(--text-muted);background:var(--bg-card);padding:3px 10px;border-radius:12px}
.header-right{display:flex;align-items:center;gap:16px}
.header-logo{height:24px;width:auto}
.menu-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:20px;cursor:pointer}
.btn-refresh{background:var(--green);color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-refresh:hover{opacity:.85}

/* Page container */
.page-container{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px 30px}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;padding:12px 14px;background:var(--bg-secondary);border-radius:var(--radius);border:1px solid var(--border)}
.filter-group{display:flex;flex-direction:column;gap:3px}
.filter-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.filter-select,.filter-input{background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-primary);padding:5px 10px;border-radius:5px;font-size:11.5px;font-family:var(--font);min-width:120px}
.filter-select:focus,.filter-input:focus{outline:none;border-color:var(--green)}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}
.grid-2-1{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.grid-1-2{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.grid-sidebar{display:grid;grid-template-columns:380px 1fr;gap:14px}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow:hidden}
.card-title{font-size:11px;text-transform:uppercase;color:var(--text-muted);letter-spacing:.5px;font-weight:600;margin-bottom:10px}

/* KPI Cards */
.kpi-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;flex:1;min-width:160px}
.kpi-label{font-size:10px;text-transform:uppercase;color:var(--text-muted);letter-spacing:.4px;font-weight:600;margin-bottom:6px}
.kpi-value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;color:var(--text-primary)}
.kpi-value.green{color:var(--green)}
.kpi-value.yellow{color:var(--yellow)}
.kpi-value.red{color:var(--red)}
.kpi-delta{font-size:11px;margin-top:4px;font-weight:500;font-variant-numeric:tabular-nums}
.kpi-delta.positive{color:var(--green)}
.kpi-delta.negative{color:var(--red)}
.kpi-delta.neutral{color:var(--text-muted)}

/* Gauge */
.gauge-container{display:flex;flex-direction:column;align-items:center;padding:10px}
.gauge-canvas{max-width:200px;max-height:120px}
.gauge-value{font-size:32px;font-weight:700;margin-top:-10px;font-variant-numeric:tabular-nums}
.gauge-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}

/* Tables */
.table-wrapper{overflow-x:auto;overflow-y:auto;max-height:400px}
.table-wrapper.full{max-height:none}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums}
thead{position:sticky;top:0;z-index:2}
th{background:var(--bg-secondary);color:var(--text-muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;padding:8px 10px;text-align:left;border-bottom:2px solid var(--border-light);white-space:nowrap;cursor:pointer;user-select:none}
th:hover{color:var(--text-primary)}
td{padding:6px 10px;border-bottom:1px solid var(--border);font-size:12px;white-space:nowrap;color:var(--text-secondary)}
tr:hover td{background:rgba(45,184,77,.04);color:var(--text-primary)}
td.num{text-align:right;font-variant-numeric:tabular-nums lining-nums}
td.currency{text-align:right;font-variant-numeric:tabular-nums lining-nums}
td.total{font-weight:700;color:var(--text-primary);background:var(--bg-secondary)!important}
tr.total-row td{font-weight:700;color:var(--text-primary);background:var(--bg-secondary);border-top:2px solid var(--border-light)}

/* Comparison cards (yellow) */
.compare-section{background:linear-gradient(135deg,#78640a 0%,#5c4d0a 100%);border-radius:var(--radius);padding:14px;margin-bottom:16px}
.compare-title{font-size:12px;font-weight:600;color:#fde68a;margin-bottom:12px;text-align:center}
.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.compare-card{background:rgba(0,0,0,.2);border-radius:6px;padding:12px;text-align:center}
.compare-label{font-size:10px;color:#fde68a;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}
.compare-value{font-size:22px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.compare-sub{font-size:10.5px;color:#d4c475;margin-top:4px;font-variant-numeric:tabular-nums}

/* Tabs */
.tabs{display:flex;gap:2px;margin-bottom:14px;background:var(--bg-secondary);border-radius:6px;padding:3px;width:fit-content}
.tab-btn{padding:6px 14px;border:none;background:transparent;color:var(--text-muted);font-size:11px;font-weight:600;border-radius:4px;cursor:pointer;font-family:var(--font);transition:all .15s}
.tab-btn.active{background:var(--green);color:#fff}
.tab-btn:hover:not(.active){color:var(--text-primary);background:var(--bg-card)}

/* Chart containers */
.chart-box{position:relative;width:100%;height:250px}
.chart-box.tall{height:320px}
.chart-box.short{height:180px}
.chart-box canvas{width:100%!important;height:100%!important}

/* Page sections */
.page{display:none}
.page.active{display:block}
.section-title{font-size:13px;font-weight:600;color:var(--text-primary);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}

/* Responsive — Tablet */
@media(max-width:1024px){
  :root{--sidebar-w:0px}
  .sidebar{position:fixed;left:-280px;width:280px;height:100%;transition:left .25s;z-index:100}
  .sidebar.open{left:0}
  .menu-toggle{display:block}
  .grid-2,.grid-3,.grid-4,.grid-2-1,.grid-1-2,.grid-sidebar{grid-template-columns:1fr!important}
  .compare-grid{grid-template-columns:repeat(2,1fr)}
}

/* Responsive — Mobile */
@media(max-width:600px){
  html,body{overflow-x:hidden;overflow-y:auto}
  body{grid-template-columns:1fr!important}
  .top-header{padding:0 12px;height:auto;min-height:var(--header-h);flex-wrap:wrap;gap:6px;padding-top:8px;padding-bottom:8px}
  .page-container{padding:8px 6px 24px}
  .filter-bar{flex-direction:column;gap:8px;padding:10px 12px}
  .filter-group{width:100%}
  .filter-select,.filter-input{width:100%;min-width:0}
  .kpi-row{flex-direction:column}
  .kpi-card{min-width:0}
  .kpi-value{font-size:20px}
  .card{padding:8px 6px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-title{font-size:10px}
  .grid-2,.grid-3,.grid-4,.grid-2-1,.grid-1-2,.grid-sidebar{grid-template-columns:1fr!important}
  .compare-grid{grid-template-columns:1fr}
  .tabs{flex-wrap:wrap;width:100%}
  .tab-btn{flex:1;min-width:0;text-align:center;font-size:10px;padding:6px 8px}
  table{font-size:11px}
  th{font-size:9.5px;padding:6px 8px}
  td{padding:5px 8px;font-size:11px}
  .chart-box{height:200px}
  .chart-box.tall{height:260px}
  .chart-box.short{height:150px}
  /* Agency login mobile */
  .agency-login-box{min-width:auto!important;max-width:calc(100vw - 40px)!important;padding:28px 20px!important}
  /* Agency header mobile */
  .agency-header-left{flex-wrap:wrap;gap:6px!important}
  .agency-header-left .agency-badge{display:none}
  .agency-header-right{flex-wrap:wrap;gap:8px!important}
  .agency-header-right span{font-size:10px!important}
  /* DRE 3-column layout override */
  .dre-grid-3{grid-template-columns:1fr!important}
  /* Filter date inputs */
  .filter-bar input[type="date"]{width:100%!important;min-width:0}
  .filter-bar input[type="text"],.filter-bar select{width:100%!important;min-width:0}
  .filter-bar .filter-group div[style*="display:flex"]{flex-wrap:wrap}
  /* Table scroll */
  .table-wrapper{max-height:none;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Ensure values don't truncate */
  td.currency{white-space:nowrap;text-align:right;padding-right:2px!important}
  /* DRE table: reduce cell padding for mobile fit */
  .dre-grid-3 td,.dre-grid-3 th{padding:5px 4px;font-size:11px}
  .dre-grid-3 td:first-child{max-width:200px;overflow:hidden;text-overflow:ellipsis}
  .dre-grid-3 td.currency{white-space:nowrap}
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Drill-up/drill-down styles */
.drill-header:hover { background: rgba(45,184,77,0.06) !important; }
.drill-item:hover { background: rgba(255,255,255,0.03) !important; }
.drill-sub { background: rgba(0,0,0,0.15); }
.drill-sub:hover { background: rgba(0,0,0,0.25) !important; }
.drill-icon { display: inline-block; transition: transform 0.2s; }