/* MoriahTracking: design system portado de 4. MORIAH TECH/Central de Tráfego/mockup-visual.html (aprovado pela Gisele) */
:root{
  --bg:#0A0E13;
  --surface:#10161D;
  --surface-2:#161D26;
  --surface-3:#1C2530;
  --border:#212B36;
  --border-soft:#182029;
  --text:#E7EBEF;
  --text-muted:#8C97A5;
  --text-faint:#57626F;
  --brand:#34D399;
  --brand-dim:#1C6B4E;
  --brand-soft:rgba(52,211,153,0.12);
  --critical:#F0563D;
  --critical-soft:rgba(240,86,61,0.12);
  --warning:#F5A524;
  --warning-soft:rgba(245,165,36,0.12);
  --info:#4C9EF1;
  --info-soft:rgba(76,158,241,0.12);
  --purple:#A78BFA;
  --purple-soft:rgba(167,139,250,0.12);
  --lime:#A3D93B;
  --font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
}
*{box-sizing:border-box;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;}
.icon{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.icon-lg{width:20px;height:20px;}
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px;}
.app{display:flex;min-height:100vh;}

.sidebar{width:236px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border-soft);display:flex;flex-direction:column;padding:var(--space-5) var(--space-3) var(--space-4);}
.brand{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3) var(--space-6);}
.brand-mark{width:26px;height:26px;flex-shrink:0;}
.brand-word{font-weight:700;font-size:14.5px;letter-spacing:.04em;}
.brand-word b{color:var(--brand);font-weight:800;}

.nav{flex:1;overflow-y:auto;}
.nav-group{margin-bottom:var(--space-1);}
.nav-link{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:9px var(--space-3);border:none;background:none;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;text-align:left;font-size:13.5px;transition:background .12s ease,color .12s ease;text-decoration:none;}
.nav-link:hover{background:var(--surface-2);color:var(--text);}
.nav-link.active{background:var(--brand-soft);color:var(--brand);font-weight:600;}
.nav-label{flex:1;}
.nav-badge{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:var(--brand);color:#04140D;padding:1px 6px;border-radius:999px;}
.nav-section{padding:14px var(--space-3) 4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);font-weight:700;}

.sidebar-footer{border-top:1px solid var(--border-soft);padding-top:var(--space-4);margin-top:var(--space-3);}
.admin-row{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);}
.avatar{width:28px;height:28px;border-radius:999px;background:var(--surface-3);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.footer-text{flex:1;min-width:0;}
.footer-text .name{font-size:12.5px;font-weight:600;}
.footer-text .mail{font-size:11px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.logout-link{font-size:11px;color:var(--text-faint);text-decoration:none;}
.logout-link:hover{color:var(--text-muted);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:5;background:rgba(10,14,19,0.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-5);flex-wrap:wrap;}
.period-tabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--border-soft);padding:3px;border-radius:var(--radius-sm);flex-wrap:wrap;}
.period-tabs a,.period-tabs button{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;background:none;border:none;color:var(--text-muted);font-size:12.5px;padding:6px 11px;border-radius:5px;cursor:pointer;transition:background .12s ease,color .12s ease;text-decoration:none;font-family:inherit;white-space:nowrap;vertical-align:top;}
.period-tabs a:hover,.period-tabs button:hover{color:var(--text);}
.period-tabs a.active,.period-tabs button.active{background:var(--brand);color:#04140D;font-weight:700;}
.custom-range-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px;box-shadow:0 12px 28px rgba(0,0,0,.45);}
.custom-range-pop form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.custom-range-pop label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--text-faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.custom-range-pop input[type=date]{background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text);padding:8px 10px;border-radius:var(--radius-sm);font-size:13px;font-family:inherit;}
.custom-range-pop .action-btn{border:1px solid var(--tone);color:var(--tone);background:color-mix(in srgb, var(--tone) 10%, transparent);font-size:12px;font-weight:700;padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;}
.custom-range-pop .action-btn:hover{background:var(--tone);color:#050708;}
.topbar-right{display:flex;align-items:center;gap:var(--space-3);}
.status-pill{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-soft);padding:6px 12px;border-radius:999px;font-size:12px;cursor:default;text-decoration:none;color:inherit;}
.status-dot{width:7px;height:7px;border-radius:999px;background:var(--critical);box-shadow:0 0 0 3px var(--critical-soft);}
.status-dot.ok{background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);}
.status-pill .sub-txt{color:var(--text-faint);display:block;font-size:10.5px;margin-top:-1px;}
.bell-btn{position:relative;width:34px;height:34px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border-soft);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.bell-dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:999px;background:var(--critical);}
.notif-wrap{position:relative;}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--critical);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}
.notif-backdrop{position:fixed;inset:0;z-index:19;background:transparent;}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:min(340px,90vw);max-height:420px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:0 12px 28px rgba(0,0,0,.45);}
.notif-panel-header{padding:12px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);border-bottom:1px solid var(--border-soft);}
.notif-overdue{padding:10px 14px;font-size:12px;color:var(--warning);background:var(--warning-soft);border-bottom:1px solid var(--border-soft);text-decoration:none;display:block;}
.notif-item{display:block;padding:10px 14px;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit;}
.notif-item:hover{background:var(--surface-2);}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:color-mix(in srgb, var(--brand) 6%, transparent);}
.notif-item-title{font-size:12.5px;font-weight:600;color:var(--text);}
.notif-item-body{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.notif-item-time{font-size:10.5px;color:var(--text-faint);margin-top:4px;}
.notif-empty{padding:24px 14px;text-align:center;font-size:12.5px;color:var(--text-faint);}

.content{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5);max-width:1400px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-3);}
.section-head h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:700;margin:0;}
.link-more{font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:4px;text-decoration:none;}
.link-more:hover{color:var(--brand);}
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--space-4);}

.actions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);}
.action-card{border-top:3px solid var(--tone);display:flex;flex-direction:column;gap:var(--space-3);}
.action-card[data-tone="critical"]{--tone:var(--critical);}
.action-card[data-tone="warning"]{--tone:var(--warning);}
.action-card[data-tone="positive"]{--tone:var(--brand);}
.action-card[data-tone="info"]{--tone:var(--info);}
.action-top{display:flex;align-items:flex-start;gap:var(--space-3);}
.action-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tone);background:color-mix(in srgb, var(--tone) 16%, transparent);}
.action-title{font-weight:700;font-size:13.5px;color:var(--tone);margin-bottom:2px;}
.action-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.action-meta{font-size:11.5px;color:var(--text-faint);font-family:var(--font-num);font-variant-numeric:tabular-nums;}
.action-btn{margin-top:auto;align-self:flex-start;border:1px solid var(--tone);color:var(--tone);background:color-mix(in srgb, var(--tone) 10%, transparent);font-size:12px;font-weight:700;padding:7px 13px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;display:inline-block;}
.action-btn:hover{background:var(--tone);color:#050708;}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);}
.kpi-card{display:flex;flex-direction:column;gap:var(--space-3);}
.kpi-card-tone{border-top:3px solid var(--k);}
.kpi-top{display:flex;align-items:center;justify-content:space-between;}
.kpi-icon{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--k);background:color-mix(in srgb, var(--k) 16%, transparent);}
.kpi-label{font-size:12px;color:var(--text-muted);}
.kpi-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:25px;font-weight:700;letter-spacing:-.01em;}
.kpi-value.muted{color:var(--text-faint);}
.kpi-delta{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px;}
.kpi-delta.up{color:var(--brand);} .kpi-delta.down{color:var(--critical);} .kpi-delta.flat{color:var(--text-faint);font-weight:400;}

.charts-row{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--space-4);align-items:stretch;}
.chart-card{display:flex;flex-direction:column;}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3);}
.chart-title{font-size:13.5px;font-weight:700;}
.legend{display:flex;gap:var(--space-4);font-size:12px;color:var(--text-muted);margin-top:2px;}
.legend span{display:flex;align-items:center;gap:6px;}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;}
.mini-select{background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text-muted);font-size:12px;padding:5px 9px;border-radius:var(--radius-sm);max-width:220px;text-overflow:ellipsis;}
.chart-svg-wrap{overflow-x:auto;position:relative;max-width:100%;}
.actions-grid>.card,.kpi-grid>.card,.charts-row>.card,.source-row>.card,.cards>.card{min-width:0;}
.card{overflow-wrap:break-word;}
.callout{position:absolute;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;font-size:11.5px;box-shadow:0 8px 20px rgba(0,0,0,.35);pointer-events:none;}
.callout .d{color:var(--text-faint);margin-bottom:3px;}
.callout .row{display:flex;align-items:center;gap:5px;font-family:var(--font-num);font-variant-numeric:tabular-nums;}
.callout .row i{width:7px;height:7px;border-radius:999px;display:inline-block;}

.funnel-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-2);}
.funnel-row{display:grid;grid-template-columns:112px 1fr 44px 44px;gap:var(--space-3);align-items:center;}
.funnel-label{font-size:12px;color:var(--text-muted);}
.funnel-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;}
.funnel-fill{height:100%;border-radius:999px;}
.funnel-count{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;text-align:right;}
.funnel-delta{font-size:11px;text-align:right;font-family:var(--font-num);color:var(--text-faint);}

.source-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.donut-row{display:flex;align-items:center;gap:var(--space-5);}
.trend-list{flex:1;display:flex;flex-direction:column;gap:var(--space-3);min-width:0;}
.trend-item{display:flex;align-items:center;gap:var(--space-3);}
.trend-dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.trend-name{font-size:12.5px;flex:1;min-width:0;}
.trend-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;white-space:nowrap;}

.activity-list{display:flex;flex-direction:column;}
.activity-item{display:flex;align-items:center;gap:var(--space-3);padding:10px 0;border-bottom:1px solid var(--border-soft);}
.activity-item:last-child{border-bottom:none;padding-bottom:0;}
.activity-icon{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--a);background:color-mix(in srgb, var(--a) 16%, transparent);}
.activity-body{flex:1;min-width:0;}
.activity-title{font-size:12.5px;font-weight:600;}
.activity-sub{font-size:11.5px;color:var(--text-faint);}
.activity-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;white-space:nowrap;}

.banner{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-faint);border:1px dashed var(--border);border-radius:var(--radius-md);padding:10px 14px;}
.banner svg{color:var(--warning);flex-shrink:0;}

.table-wrap{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-soft);}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
thead{background:var(--surface-2);}
th{padding:10px 14px;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
td{padding:10px 14px;border-top:1px solid var(--border-soft);color:var(--text);}
tbody tr:hover{background:var(--surface-2);}
.td-muted{color:var(--text-faint);font-size:11.5px;}
.mono{font-family:var(--font-num);}
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;padding:3px 10px;}
.badge-brand{background:var(--brand-soft);color:var(--brand);}
.badge-warning{background:var(--warning-soft);color:var(--warning);}
.badge-critical{background:var(--critical-soft);color:var(--critical);}
.badge-muted{background:var(--surface-3);color:var(--text-faint);}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
.filter-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-right:6px;}
.page-h1{font-size:19px;font-weight:700;margin:0 0 4px;}
.page-sub{font-size:12.5px;color:var(--text-muted);margin:0;}
.code-box{background:#05070A;border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-num);font-size:12px;color:var(--brand);overflow-x:auto;white-space:pre-wrap;word-break:break-all;}
.conn-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.conn-row .t{font-weight:700;font-size:13px;}
.conn-row .s{font-size:12px;color:var(--text-muted);}

.form-error{font-size:.78rem;color:var(--critical);margin:-6px 0 4px;}
.input{font-family:var(--font-ui);font-size:14px;height:42px;padding:0 14px;border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);width:100%;}
.input::placeholder{color:var(--text-faint);}
.input:focus{outline:none;border-color:var(--brand);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;font-size:12.5px;height:42px;padding:0 22px;}
.btn-primary{background:var(--brand);color:#04140D;}
.btn-primary:hover{background:#4fe3ae;}
.btn-full{width:100%;}

/* ── Tab bar mobile (padrao de app nativo) ── */
.bottom-nav{display:none;}
.more-sheet-backdrop{display:none;}
.more-sheet{display:none;}

@media (max-width: 980px){
  .app{flex-direction:column;}
  .sidebar{display:none;}
  .main{margin:0;}
  .content{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
  .topbar{flex-wrap:wrap;row-gap:8px;}
  .actions-grid,.kpi-grid{grid-template-columns:repeat(2,1fr);}
  .charts-row,.source-row{grid-template-columns:1fr;}
  .table-wrap{
    overflow-x:auto;
    -webkit-mask-image:linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
    mask-image:linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
  }
  table{min-width:560px;}
  .hide-mobile{display:none;}

  .bottom-nav{
    display:flex; align-items:center; justify-content:space-around; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); border-top:1px solid var(--border-soft);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .bottom-nav-item{
    flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:8px 14px; border-radius:999px; color:var(--text-faint); text-decoration:none; background:none; border:none;
    font-family:var(--font-ui); font-size:10px; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background .15s ease, padding .15s ease;
  }
  .bottom-nav-item .icon{width:22px;height:22px;}
  .bottom-nav-item span{display:none; white-space:nowrap;}
  .bottom-nav-item.active{color:var(--brand); background:color-mix(in srgb, var(--brand) 14%, transparent); padding-inline:16px;}
  .bottom-nav-item.active span{display:inline;}

  .more-sheet-backdrop{
    display:block; position:fixed; inset:0; background:rgba(4,6,9,.6); z-index:70;
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .more-sheet-backdrop.open{opacity:1; pointer-events:auto;}
  .more-sheet{
    display:flex; flex-direction:column; gap:2px;
    position:fixed; left:0; right:0; bottom:0; z-index:80; max-height:75vh; overflow-y:auto;
    background:var(--surface); border-top:1px solid var(--border-soft);
    border-radius:16px 16px 0 0; padding:8px 10px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .25s ease;
  }
  .more-sheet.open{transform:translateY(0);}
  .more-sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:4px auto 12px;}
  .more-sheet .nav-link{width:100%;}
}

@media (max-width: 560px){
  .content{padding-left:var(--space-4);padding-right:var(--space-4);padding-top:var(--space-4);}
  .actions-grid,.kpi-grid{grid-template-columns:1fr;}
  .hero-gauges{display:none;}
}