:root{
  --bg:#03101d;
  --panel:#071a2d;
  --panel-2:#08233d;
  --line:#168bd0;
  --line-soft:rgba(22,139,208,.35);
  --text:#f5fbff;
  --blue:#149ff0;
  --yellow:#ffd000;
  --red:#ff3155;
  --purple:#8e56d9;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body.tv-lite-mode{background:radial-gradient(circle at 50% 0,#092442 0,#03101d 58%,#020a12 100%)}
.sidebar,.filters,.status-panel,.processing-info,#tvLiteBottomPanel,#tvFooterLegend,.priority-button,#systemVersion,#externalModuleView{display:none!important}
.main{width:100vw;height:100vh;margin:0;padding:8px;overflow:hidden}
#dashboardView{height:100%;display:grid!important;grid-template-rows:40px 66px 38px minmax(0,1fr);gap:6px;min-height:0}

.header-card{display:flex;align-items:center;gap:10px;padding:5px 12px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#071a2d,#04111f);overflow:hidden;position:relative}
.header-logo-box{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:7px;padding:3px 6px;height:32px;min-width:78px}
.header-logo{width:64px;height:auto}
.header-text{display:flex;align-items:baseline;gap:10px;min-width:0}
.header-text h1{font-size:20px;line-height:1;margin:0;text-transform:uppercase;white-space:nowrap}
.header-text p{font-size:11px;margin:0;text-transform:uppercase;opacity:.9;white-space:nowrap}
#lastUpdate{position:absolute;right:14px;top:12px;font-size:9px;color:#19c6ff}

.kpi-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0}
.kpi-card{height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(180deg,#0a3359,#06233f)}
.kpi-card:nth-child(3){border-color:#d5a900;background:linear-gradient(180deg,#423800,#191700)}
.kpi-card:nth-child(4){border-color:#7142aa;background:linear-gradient(180deg,#271645,#130c26)}
.kpi-card span{font-size:9px;font-weight:800;text-transform:uppercase}
.kpi-card small{font-size:7px;margin-top:1px}
.kpi-card strong{font-size:32px;line-height:1;margin-top:3px;color:#08a2ff}
.kpi-card:nth-child(3) strong{color:var(--yellow)}
.kpi-card:nth-child(4) strong{color:#af69ff}

.operational-alerts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0}
.alert-item{height:38px;display:flex;align-items:center;justify-content:space-between;padding:4px 10px;border:1px solid;border-radius:8px;background:#061422}
.alert-item span{font-size:9px;font-weight:800;text-transform:uppercase}
.alert-item strong{font-size:20px}
.alert-priority{border-color:#ff254b}
.alert-time{border-color:#e7c000}
.alert-critical{border-color:#ff7b00}

.tv-content-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(320px,0.95fr);gap:8px;min-height:0}
.tv-cards-panel{display:grid!important;grid-template-rows:18px minmax(0,1fr);gap:6px;min-height:0;border:1px solid var(--line-soft);border-radius:10px;padding:8px;background:linear-gradient(180deg,rgba(7,26,45,.88),rgba(3,17,31,.92))}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.section-title{margin:0;font-size:10px;line-height:1;text-transform:uppercase;white-space:nowrap}
.page-indicator{display:flex!important;align-items:center;justify-content:flex-end;min-width:110px;font-size:9px;font-weight:700;color:#bfe9ff}
.page-indicator .page-priority{margin-left:8px;color:#ff7d92}

.cards-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;min-height:0;height:100%;overflow:hidden}
.order-card{position:relative;width:100%;height:100%;min-height:0;margin:0;padding:15px 8px 6px;border-radius:8px;border:1px solid #0877ba;background:linear-gradient(180deg,#061b31,#03111f);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.priority-card{border:2px solid #ff3155;background:linear-gradient(180deg,#3a0612,#1d030a)}
.card-status{position:absolute;top:0;left:0;right:0;height:14px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:900;text-transform:uppercase;color:white}
.order-card h3{margin:0 0 5px;font-size:17px;line-height:1;color:white}
.customer-name{margin:0;min-height:14px;max-height:30px;font-size:8.5px;line-height:1.05;font-weight:800;color:#0bbcff;display:flex;align-items:center;justify-content:center;overflow:hidden;text-transform:uppercase}
.priority-card .customer-name{color:#ff6c84}
.tempo-aberto{margin:6px 0 0;min-width:84px;height:20px;padding:2px 8px;border-radius:99px;border:1px solid #0aa6ec;background:#08466c;font-size:7px;display:inline-flex;align-items:center;justify-content:center;gap:3px}
.priority-card .tempo-aberto{border-color:#ff3155;background:#5b0b1a}
.tempo-aberto strong,.tempo-clock{font-size:8px}
.card-info-grid{display:none!important}

.tv-side-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:8px;min-height:0}
.summary-card,.chart-box{margin:0;padding:8px 10px;border:1px solid var(--line-soft);border-radius:10px;background:linear-gradient(180deg,rgba(7,26,45,.92),rgba(3,17,31,.96));overflow:hidden;min-width:0}
.summary-card h3,.chart-box h3{font-size:9px;margin:0 0 6px;text-transform:uppercase}
#statusSummary{display:grid;grid-template-columns:1fr;gap:6px}
.summary-row{min-width:0}
.summary-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.summary-top span{font-size:8px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary-top strong{font-size:14px}
.summary-bar-bg{height:8px;margin-top:4px;border-radius:99px;background:#25384c;overflow:hidden}
.summary-bar-fill{height:100%;border-radius:99px}

.distribution-box .mini-chart{height:138px;display:flex;align-items:flex-end;justify-content:space-around;gap:8px}
.chart-column{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
.chart-bar{width:62%;max-width:74px;border-radius:6px 6px 0 0;min-height:8px}
.chart-value{font-size:16px;font-weight:800;line-height:1}
.chart-label{font-size:8px;text-transform:uppercase;text-align:center;line-height:1.1}

.month-movement-box{display:flex!important;flex-direction:column;min-height:0}
.month-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.month-kpi{padding:7px;border:1px solid var(--line-soft);border-radius:8px;background:#0a2035}
.month-kpi span{display:block;font-size:8px;text-transform:uppercase;color:#9ed9ff}
.month-kpi strong{display:block;margin-top:3px;font-size:22px;color:#fff}
.month-chart{display:grid;grid-auto-rows:minmax(0,1fr);gap:8px;min-height:0;overflow:hidden}
.month-row{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:center;min-height:0;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.month-row:last-child{border-bottom:0;padding-bottom:0}
.month-date{display:flex;flex-direction:column;gap:3px;font-size:8px;font-weight:700}
.today-badge{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:1px 6px;border-radius:99px;background:#124e7a;color:#dff6ff;font-size:7px}
.month-bars{display:grid;gap:6px}
.month-bar-group{display:grid;grid-template-columns:54px 1fr 28px;gap:6px;align-items:center;min-width:0}
.month-bar-label{font-size:7px;text-transform:uppercase;color:#b2dcff}
.month-bar-bg{height:8px;border-radius:99px;background:#22384c;overflow:hidden}
.month-bar-fill{height:100%;border-radius:99px}
.month-bar-fill.incluidos{background:#14a7ff}
.month-bar-fill.finalizados{background:#00d084}
.month-bar-value{font-size:10px;font-weight:800;text-align:right}
.empty-state{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:12px;text-align:center;opacity:.75;font-size:12px;border:1px dashed rgba(255,255,255,.14);border-radius:8px}

.alerta-ok{box-shadow:inset 0 0 0 1px rgba(0,208,132,.35)}
.alerta-critico{box-shadow:inset 0 0 0 1px rgba(255,80,80,.35)}
.alerta-prioridade-ativa{box-shadow:inset 0 0 0 1px rgba(255,49,85,.35)}

@media (max-width:1400px){
  .tv-content-layout{grid-template-columns:minmax(0,2fr) minmax(280px,.9fr)}
  .distribution-box .mini-chart{height:122px}
}
@media (max-height:720px){
  #dashboardView{grid-template-rows:36px 60px 34px minmax(0,1fr)}
  .header-card{padding:4px 10px}
  .header-logo-box{height:28px;min-width:70px}
  .header-logo{width:56px}
  .header-text h1{font-size:18px}
  .kpi-card{height:60px}
  .kpi-card strong{font-size:28px}
  .alert-item{height:34px}
  .distribution-box .mini-chart{height:110px}
  .order-card h3{font-size:15px}
  .customer-name{font-size:7.5px}
}

/* Ajuste de legibilidade para TV - v3 */
.header-text h1{font-size:20px}
.header-text p{font-size:11px}
#lastUpdate{font-size:9px}
.kpi-card span{font-size:9px}
.kpi-card small{font-size:7px}
.kpi-card strong{font-size:28px}
.alert-item span{font-size:9px}
.alert-item strong{font-size:18px}
.section-title{font-size:10px}
.page-indicator{font-size:9px}
.card-status{font-size:7px}
.order-card h3{font-size:15px}
.customer-name{font-size:8px;line-height:1.1}
.tempo-aberto{font-size:7px;min-width:78px;height:18px}
.tempo-aberto strong,.tempo-clock{font-size:8px}
.summary-card h3,.chart-box h3{font-size:10px}
.summary-top span{font-size:8px}
.summary-top strong{font-size:14px}
.chart-value{font-size:16px}
.chart-label{font-size:8px}
.month-kpi span{font-size:8px}
.month-kpi strong{font-size:20px}
.month-date{font-size:8px}
.today-badge{font-size:7px}
.month-bar-label{font-size:7px}
.month-bar-value{font-size:9px}

@media (max-height:720px){
  .header-text h1{font-size:18px}
  .header-text p{font-size:10px}
  .kpi-card strong{font-size:24px}
  .order-card h3{font-size:14px}
  .customer-name{font-size:7px}
  .card-status{font-size:6px}
  .tempo-aberto,.tempo-aberto strong,.tempo-clock{font-size:8px}
}


/* =========================================================
   TV FINAL — HIERARQUIA DE LEITURA PARA TELA DISTANTE
   1) Indicadores do topo bem grandes
   2) Cards médios/grandes e centralizados
   3) Gráficos laterais legíveis
========================================================= */

/* 1. TOPO */
body.tv-lite-mode .header-text h1{
  font-size:22px !important;
}
body.tv-lite-mode .header-text p{
  font-size:12px !important;
}
body.tv-lite-mode #lastUpdate{
  font-size:10px !important;
}
body.tv-lite-mode .kpi-card span{
  font-size:10px !important;
  line-height:1 !important;
}
body.tv-lite-mode .kpi-card small{
  font-size:8px !important;
}
body.tv-lite-mode .kpi-card strong{
  font-size:38px !important;
  line-height:.95 !important;
  margin-top:3px !important;
}
body.tv-lite-mode .alert-item span{
  font-size:10px !important;
}
body.tv-lite-mode .alert-item strong{
  font-size:22px !important;
}

/* 2. CARDS */
body.tv-lite-mode .section-title{
  font-size:11px !important;
}
body.tv-lite-mode .page-indicator{
  font-size:10px !important;
}
body.tv-lite-mode .card-status{
  font-size:7px !important;
}
body.tv-lite-mode .order-card h3{
  font-size:18px !important;
  line-height:1 !important;
}
body.tv-lite-mode .customer-name{
  font-size:9px !important;
  line-height:1.1 !important;
}
body.tv-lite-mode .tempo-aberto,
body.tv-lite-mode .tempo-aberto strong,
body.tv-lite-mode .tempo-clock{
  font-size:9px !important;
}
body.tv-lite-mode .tempo-aberto{
  min-width:90px !important;
  height:22px !important;
}

/* 3. GRÁFICOS */
body.tv-lite-mode .summary-card h3,
body.tv-lite-mode .chart-box h3{
  font-size:10px !important;
}
body.tv-lite-mode .summary-top span{
  font-size:9px !important;
}
body.tv-lite-mode .summary-top strong{
  font-size:15px !important;
}
body.tv-lite-mode .chart-value{
  font-size:18px !important;
}
body.tv-lite-mode .chart-label{
  font-size:9px !important;
}
body.tv-lite-mode .month-kpi span{
  font-size:9px !important;
}
body.tv-lite-mode .month-kpi strong{
  font-size:24px !important;
}
body.tv-lite-mode .month-date{
  font-size:9px !important;
}
body.tv-lite-mode .today-badge{
  font-size:8px !important;
}
body.tv-lite-mode .month-bar-label{
  font-size:8px !important;
}
body.tv-lite-mode .month-bar-value{
  font-size:11px !important;
}

@media (max-height:720px){
  body.tv-lite-mode .header-text h1{font-size:20px !important;}
  body.tv-lite-mode .kpi-card strong{font-size:34px !important;}
  body.tv-lite-mode .order-card h3{font-size:16px !important;}
  body.tv-lite-mode .customer-name{font-size:8px !important;}
  body.tv-lite-mode .tempo-aberto,
  body.tv-lite-mode .tempo-aberto strong,
  body.tv-lite-mode .tempo-clock{font-size:8px !important;}
}


/* =========================================================
   AJUSTE TV — CORES TENNANT + ESPAÇAMENTO LATERAL
   - deixa o modo TV mais alinhado ao visual Tennant
   - cria mais respiro entre o grid de pedidos e os cards laterais
========================================================= */

body.tv-lite-mode,
body.tv-mode{
  background: radial-gradient(circle at 50% 0, #0b2d4b 0%, #05192c 45%, #030d18 100%) !important;
}

body.tv-lite-mode .header-card,
body.tv-mode .header-card{
  border-color:#15a8ff !important;
  background:linear-gradient(180deg,#0a2a47,#081a2d) !important;
  box-shadow:0 0 0 1px rgba(21,168,255,.10), 0 10px 24px rgba(0,0,0,.28) !important;
}

body.tv-lite-mode .kpi-grid,
body.tv-mode .kpi-grid{
  gap:8px !important;
}

body.tv-lite-mode .kpi-card,
body.tv-mode .kpi-card{
  border-color:#19b5ff !important;
  background:linear-gradient(180deg,#10385c,#0a2742) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.tv-lite-mode .kpi-card:nth-child(3),
body.tv-mode .kpi-card:nth-child(3){
  border-color:#f0c500 !important;
  background:linear-gradient(180deg,#4d4304,#231f03) !important;
}

body.tv-lite-mode .kpi-card:nth-child(4),
body.tv-mode .kpi-card:nth-child(4){
  border-color:#8d5bdb !important;
  background:linear-gradient(180deg,#2f1d4e,#171028) !important;
}

body.tv-lite-mode .operational-alerts,
body.tv-mode .operational-alerts{
  gap:8px !important;
}

body.tv-lite-mode .alert-item,
body.tv-mode .alert-item{
  background:linear-gradient(180deg,#0a2742,#071827) !important;
  box-shadow:0 8px 16px rgba(0,0,0,.18) !important;
}

body.tv-lite-mode .tv-content-layout,
body.tv-mode .tv-content-layout{
  grid-template-columns:minmax(0,2.08fr) minmax(360px,0.98fr) !important;
  gap:14px !important;
}

body.tv-lite-mode .tv-cards-panel,
body.tv-mode .tv-cards-panel{
  padding:10px !important;
  border-color:rgba(25,181,255,.42) !important;
  background:linear-gradient(180deg,rgba(10,35,58,.92),rgba(5,18,32,.96)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}

body.tv-lite-mode .cards-grid,
body.tv-mode .cards-grid{
  gap:10px !important;
}

body.tv-lite-mode .order-card,
body.tv-mode .order-card{
  padding:16px 10px 8px !important;
  border-color:#18b5ff !important;
  border-width:2px !important;
  background:linear-gradient(180deg,#07213a,#041525) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}

body.tv-lite-mode .priority-card,
body.tv-mode .priority-card{
  border-color:#ff4266 !important;
  background:linear-gradient(180deg,#470b18,#24060e) !important;
}

body.tv-lite-mode .tv-side-panel,
body.tv-mode .tv-side-panel{
  gap:12px !important;
  min-width:0 !important;
}

body.tv-lite-mode .dashboard-charts,
body.tv-mode .dashboard-charts{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:12px !important;
  min-height:0 !important;
}

body.tv-lite-mode .summary-card,
body.tv-lite-mode .chart-box,
body.tv-mode .summary-card,
body.tv-mode .chart-box{
  padding:10px 12px !important;
  border-color:rgba(25,181,255,.42) !important;
  background:linear-gradient(180deg,rgba(10,35,58,.94),rgba(5,18,32,.98)) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22) !important;
}

body.tv-lite-mode .distribution-box .mini-chart,
body.tv-mode .distribution-box .mini-chart{
  height:142px !important;
  gap:12px !important;
}

body.tv-lite-mode .chart-bar,
body.tv-mode .chart-bar{
  width:64% !important;
  border-radius:8px 8px 0 0 !important;
}

body.tv-lite-mode .month-kpis,
body.tv-mode .month-kpis{
  gap:10px !important;
}

body.tv-lite-mode .month-kpi,
body.tv-mode .month-kpi{
  border-color:rgba(25,181,255,.30) !important;
  background:#102a43 !important;
}

body.tv-lite-mode .month-chart,
body.tv-mode .month-chart{
  gap:10px !important;
}

body.tv-lite-mode .month-row,
body.tv-mode .month-row{
  padding-bottom:8px !important;
}

@media (max-width: 1440px){
  body.tv-lite-mode .tv-content-layout,
  body.tv-mode .tv-content-layout{
    grid-template-columns:minmax(0,2fr) minmax(320px,0.95fr) !important;
    gap:12px !important;
  }
}

@media (max-height: 720px){
  body.tv-lite-mode .tv-content-layout,
  body.tv-mode .tv-content-layout{
    gap:10px !important;
  }
  body.tv-lite-mode .cards-grid,
  body.tv-mode .cards-grid{
    gap:8px !important;
  }
  body.tv-lite-mode .tv-side-panel,
  body.tv-mode .tv-side-panel,
  body.tv-lite-mode .dashboard-charts,
  body.tv-mode .dashboard-charts{
    gap:10px !important;
  }
}