/* ============================================================
   SKYMARK · CONTROLE DE ENTRADA DE CLIENTES
   Design system — premium, clean, corporativo
   ============================================================ */

:root{
  --sky-blue:#0081FF;
  --sky-blue-dark:#0058B3;
  --sky-blue-soft:#E8F2FF;
  --navy:#0B2545;
  --navy-2:#132C4E;
  --graphite:#2A3242;
  --gray-25:#FBFCFE;
  --gray-50:#F7F9FC;
  --gray-100:#EEF1F6;
  --gray-150:#E7EBF2;
  --gray-200:#DDE3ED;
  --gray-300:#C7CEDA;
  --gray-400:#94A3B8;
  --gray-500:#6B7686;
  --gray-600:#5B6472;
  --gray-700:#3D4657;
  --green:#16A34A;
  --green-soft:#E7F8EE;
  --green-dark:#0F7A38;
  --red:#DC2626;
  --red-soft:#FDECEC;
  --red-dark:#B91C1C;
  --amber:#D97706;
  --amber-soft:#FEF3E2;
  --magenta:#D6249A;
  --magenta-soft:#FCE8F6;
  --white:#FFFFFF;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,37,69,.04), 0 1px 1px rgba(11,37,69,.03);
  --shadow-md:0 4px 16px rgba(11,37,69,.06), 0 1px 3px rgba(11,37,69,.05);
  --shadow-lg:0 12px 32px rgba(11,37,69,.10);
  --transition:all .18s ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--gray-50);
  color:var(--graphite);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
input, select{font-family:inherit;}
a{color:inherit; text-decoration:none;}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--gray-300); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============ LAYOUT ============ */
#app-shell{min-height:100vh; display:flex; flex-direction:column;}

/* ============ HEADER ============ */
.app-header{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  color:var(--white);
  padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  position:sticky; top:0; z-index:60;
  box-shadow:0 2px 18px rgba(0,0,0,.18);
}
.brand-block{display:flex; align-items:center; gap:16px;}
.brand-logo{background:var(--white); border-radius:10px; padding:8px 12px; height:40px; display:flex; align-items:center;}
.brand-logo img{height:22px; width:auto;}
.brand-text h1{font-size:16.5px; font-weight:700; letter-spacing:.4px; color:var(--white);}
.brand-text p{font-size:11.5px; color:#AFC4E4; font-weight:500; letter-spacing:.3px; margin-top:2px;}

.header-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.update-info{
  display:flex; flex-direction:column; align-items:flex-end;
  font-size:11px; color:#9FB4D8; margin-right:6px;
}
.update-info b{color:#E7F0FF; font-size:12px; font-weight:600;}
.base-source-badge{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px;
  background:rgba(255,193,7,.18); color:#FFD87A; font-size:9.5px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; vertical-align:middle; cursor:help;
}
.hidden{display:none !important;}

.btn{
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:9px 14px;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  transition:var(--transition);
  white-space:nowrap;
}
.btn-ghost-dark{background:rgba(255,255,255,.08); color:#EAF1FF; border-color:rgba(255,255,255,.18);}
.btn-ghost-dark:hover{background:rgba(255,255,255,.16);}
.btn-primary{background:var(--sky-blue); color:var(--white);}
.btn-primary:hover{background:var(--sky-blue-dark);}
.btn-outline{background:var(--white); color:var(--sky-blue-dark); border-color:var(--gray-200);}
.btn-outline:hover{border-color:var(--sky-blue); background:var(--sky-blue-soft);}
.btn-sm{padding:6px 10px; font-size:11.5px;}
.icon{width:14px; height:14px; flex:none;}

.dropdown-wrap{position:relative;}
.dropdown-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--white); border:1px solid var(--gray-150); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); min-width:200px; padding:6px; display:none; z-index:80;
}
.dropdown-menu.open{display:block;}
.dropdown-menu button{
  width:100%; text-align:left; background:none; border:none; padding:9px 10px;
  font-size:12.5px; border-radius:8px; color:var(--graphite); font-weight:500;
  display:flex; align-items:center; gap:8px;
}
.dropdown-menu button:hover{background:var(--gray-50); color:var(--sky-blue-dark);}

/* ============ NAV TABS ============ */
.tab-nav{
  background:var(--white);
  border-bottom:1px solid var(--gray-150);
  padding:0 28px;
  display:flex; gap:4px;
  position:sticky; top:72px; z-index:55;
  overflow-x:auto;
}
.tab-btn{
  background:none; border:none; padding:14px 16px 12px;
  font-size:13px; font-weight:600; color:var(--gray-500);
  border-bottom:3px solid transparent; white-space:nowrap;
  transition:var(--transition);
}
.tab-btn:hover{color:var(--sky-blue-dark);}
.tab-btn.active{color:var(--navy); border-bottom-color:var(--sky-blue);}

/* ============ FILTER BAR ============ */
.filter-bar{
  background:var(--white);
  border-bottom:1px solid var(--gray-150);
  padding:12px 28px;
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
  position:sticky; top:118px; z-index:50;
}
.filter-group{display:flex; flex-direction:column; gap:4px; min-width:150px; position:relative;}
.filter-group label{font-size:10.5px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.5px;}
.filter-control{
  border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--gray-25);
  padding:8px 10px; font-size:12.5px; color:var(--graphite); min-width:150px;
  display:flex; align-items:center; justify-content:space-between; gap:6px; cursor:pointer;
  transition:var(--transition);
}
.filter-control:hover{border-color:var(--sky-blue);}
.filter-control .count-chip{
  background:var(--sky-blue); color:#fff; font-size:10px; font-weight:700; border-radius:20px;
  padding:1px 7px; min-width:18px; text-align:center;
}
.filter-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:90;
  background:var(--white); border:1px solid var(--gray-150); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); width:230px; max-height:320px; overflow:auto; padding:8px; display:none;
}
.filter-panel.open{display:block;}
.filter-panel input[type=text]{
  width:100%; border:1px solid var(--gray-200); border-radius:7px; padding:7px 9px; font-size:12px; margin-bottom:6px;
}
.filter-opt{display:flex; align-items:center; gap:8px; padding:6px 7px; border-radius:6px; font-size:12.3px;}
.filter-opt:hover{background:var(--gray-50);}
.filter-opt input{accent-color:var(--sky-blue); width:14px; height:14px;}
.filter-group.date-group{flex-direction:row; align-items:center; gap:6px;}
.filter-group.date-group input[type=date]{
  border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:7px 8px; font-size:12px; background:var(--gray-25);
}
.filter-bar-actions{display:flex; gap:8px; margin-left:auto; align-items:center;}
.active-filters-row{
  padding:0 28px 12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--white);
  border-bottom:1px solid var(--gray-150);
}
.active-filters-row.empty{display:none;}
.filter-chip{
  background:var(--sky-blue-soft); color:var(--sky-blue-dark); border-radius:20px; padding:5px 10px 5px 12px;
  font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:6px;
}
.filter-chip button{background:none; border:none; color:var(--sky-blue-dark); font-size:14px; line-height:1; padding:0;}
.filter-tag-label{font-size:11.5px; color:var(--gray-500); font-weight:600;}

/* ============ MAIN CONTENT ============ */
.app-main{padding:22px 28px 60px; flex:1; max-width:1560px; margin:0 auto; width:100%;}
.page{display:none;}
.page.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

.section-title{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--gray-600); margin:28px 0 12px; display:flex; align-items:center; gap:8px;
}
.section-title:first-child{margin-top:0;}
.section-title .bar{width:4px; height:14px; background:var(--sky-blue); border-radius:3px; display:inline-block;}
.section-sub{font-size:11.5px; color:var(--gray-400); font-weight:500; margin-left:auto;}

/* ============ GRID ============ */
.grid{display:grid; gap:16px;}
.kpi-grid{grid-template-columns:repeat(8, 1fr);}
.grid-2{grid-template-columns:repeat(2, 1fr);}
.grid-3{grid-template-columns:repeat(3, 1fr);}
.grid-4{grid-template-columns:repeat(4, 1fr);}
.grid-12{grid-template-columns:repeat(12, 1fr);}
.span-4{grid-column:span 4;}
.span-6{grid-column:span 6;}
.span-8{grid-column:span 8;}
.span-12{grid-column:span 12;}

/* ============ CARD ============ */
.card{
  background:var(--white);
  border:1px solid var(--gray-150);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 18px;
  transition:box-shadow .2s ease;
}
.card:hover{box-shadow:var(--shadow-md);}
.card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px;}
.card-title{font-size:12.5px; font-weight:700; color:var(--navy); letter-spacing:.2px;}
.card-title .fa{color:var(--sky-blue); margin-right:6px;}
.card-actions{display:flex; gap:6px;}
.chip-toggle{display:flex; background:var(--gray-100); border-radius:20px; padding:2px;}
.chip-toggle button{
  border:none; background:none; padding:5px 12px; font-size:11px; font-weight:700; border-radius:18px; color:var(--gray-500);
}
.chip-toggle button.active{background:var(--white); color:var(--sky-blue-dark); box-shadow:var(--shadow-sm);}

/* ============ KPI CARD ============ */
.kpi-card{
  background:var(--white); border:1px solid var(--gray-150); border-radius:var(--radius-lg);
  padding:16px 16px 14px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:6px; min-height:118px;
}
.kpi-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--sky-blue);}
.kpi-card.positive::before{background:var(--green);}
.kpi-card.negative::before{background:var(--red);}
.kpi-card.neutral::before{background:var(--magenta);}
.kpi-top{display:flex; align-items:center; justify-content:space-between;}
.kpi-label{font-size:10.5px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.5px;}
.kpi-icon{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--sky-blue-soft); color:var(--sky-blue-dark); font-size:13px;}
.kpi-value{font-size:23px; font-weight:800; color:var(--navy); letter-spacing:-.3px; cursor:default;}
.kpi-value.small{font-size:19px;}
.kpi-sub{font-size:11px; color:var(--gray-500); font-weight:600; display:flex; align-items:center; gap:5px;}
.kpi-sub.pos{color:var(--green-dark);}
.kpi-sub.neg{color:var(--red-dark);}
.trend-badge{font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px;}
.trend-badge.pos{background:var(--green-soft); color:var(--green-dark);}
.trend-badge.neg{background:var(--red-soft); color:var(--red-dark);}
.trend-badge.neu{background:var(--magenta-soft); color:var(--magenta);}

/* ============ LEITURA EXECUTIVA ============ */
.insight-card{
  background:linear-gradient(135deg, var(--navy) 0%, #163B6B 100%);
  border-radius:var(--radius-lg); padding:20px 22px; color:#fff; box-shadow:var(--shadow-md);
}
.insight-card .card-title{color:#EAF1FF;}
.insight-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px 22px; margin-top:8px;}
.insight-list li{
  font-size:13px; line-height:1.5; color:#E4ECF8; display:flex; gap:10px; align-items:flex-start;
}
.insight-list li::before{content:'▸'; color:var(--sky-blue); font-weight:900; flex:none;}
.insight-list b{color:#fff;}

/* ============ CHARTS ============ */
.chart-box{position:relative; width:100%;}
.chart-box.h-260{height:260px;}
.chart-box.h-300{height:300px;}
.chart-box.h-220{height:220px;}
canvas{max-width:100%;}

/* ============ TABLES ============ */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:12.5px;}
table.data-table thead th{
  text-align:left; padding:9px 10px; font-size:10.5px; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:.4px; border-bottom:2px solid var(--gray-150);
  background:var(--gray-25); position:sticky; top:0; cursor:pointer; user-select:none; white-space:nowrap;
}
table.data-table thead th:hover{color:var(--sky-blue-dark);}
table.data-table thead th .sort-arrow{font-size:9px; margin-left:4px; opacity:.5;}
table.data-table tbody td{padding:9px 10px; border-bottom:1px solid var(--gray-100); color:var(--graphite); white-space:nowrap;}
table.data-table tbody tr{transition:var(--transition);}
table.data-table tbody tr:hover{background:var(--sky-blue-soft); cursor:pointer;}
table.data-table tbody tr:last-child td{border-bottom:none;}
.bar-cell{display:flex; align-items:center; gap:8px;}
.bar-cell .bar-track{flex:1; height:7px; background:var(--gray-100); border-radius:4px; overflow:hidden; min-width:60px;}
.bar-cell .bar-fill{height:100%; background:var(--sky-blue); border-radius:4px;}
.rank-badge{
  width:22px; height:22px; border-radius:6px; background:var(--gray-100); color:var(--gray-600);
  font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center;
}
.rank-badge.top1{background:var(--sky-blue); color:#fff;}
.rank-badge.top2{background:var(--sky-blue-dark); color:#fff;}
.rank-badge.top3{background:var(--navy); color:#fff;}

.status-pill{
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:5px;
}
.status-pill::before{content:''; width:6px; height:6px; border-radius:50%; display:inline-block;}
.status-Ativo{background:var(--green-soft); color:var(--green-dark);}
.status-Ativo::before{background:var(--green);}
.status-Ativo---Bloqueado{background:var(--amber-soft); color:var(--amber);}
.status-Ativo---Bloqueado::before{background:var(--amber);}
.status-Cancelado{background:var(--red-soft); color:var(--red-dark);}
.status-Cancelado::before{background:var(--red);}
.status-Nunca-Fat{background:var(--gray-100); color:var(--gray-600);}
.status-Nunca-Fat::before{background:var(--gray-400);}

.badge-meio{
  background:var(--gray-100); color:var(--gray-700); font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px;
}

/* ============ FORMS / SEARCH ============ */
.search-input{
  border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:9px 12px 9px 34px; font-size:12.5px;
  width:260px; background:var(--gray-25) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236B7686" stroke-width="2"%3E%3Ccircle cx="11" cy="11" r="8"/%3E%3Cpath d="M21 21l-4.35-4.35"/%3E%3C/svg%3E') no-repeat 12px center;
}
.pagination{display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:12px; font-size:12px; color:var(--gray-500);}
.pagination button{
  border:1px solid var(--gray-200); background:var(--white); border-radius:6px; padding:5px 10px; font-size:12px; color:var(--graphite);
}
.pagination button:hover:not(:disabled){border-color:var(--sky-blue); color:var(--sky-blue-dark);}
.pagination button:disabled{opacity:.4; cursor:default;}

/* ============ ALERT / EMPTY STATE ============ */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px;
  color:var(--gray-400); text-align:center; gap:8px;
}
.empty-state .fa{font-size:28px; color:var(--gray-300);}
.empty-state p{font-size:13px; font-weight:600;}
.alert-box{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--radius-sm); font-size:12.5px; font-weight:600;
}
.alert-box.warn{background:var(--amber-soft); color:var(--amber);}
.alert-box.danger{background:var(--red-soft); color:var(--red-dark);}
.alert-box.info{background:var(--sky-blue-soft); color:var(--sky-blue-dark);}

/* ============ SIDE PANEL (client detail) ============ */
.side-panel-overlay{
  position:fixed; inset:0; background:rgba(11,37,69,.45); z-index:200; display:none; backdrop-filter:blur(2px);
}
.side-panel-overlay.open{display:block;}
.side-panel{
  position:fixed; top:0; right:0; height:100%; width:420px; background:var(--white); z-index:201;
  box-shadow:-10px 0 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column;
}
.side-panel.open{transform:translateX(0);}
.side-panel-header{
  padding:20px 22px; background:linear-gradient(135deg,var(--navy),var(--navy-2)); color:#fff; display:flex; align-items:flex-start; justify-content:space-between;
}
.side-panel-header h3{font-size:15px; font-weight:700;}
.side-panel-header p{font-size:11.5px; color:#AFC4E4; margin-top:3px;}
.side-panel-close{background:rgba(255,255,255,.12); border:none; color:#fff; width:28px; height:28px; border-radius:8px; font-size:16px;}
.side-panel-body{padding:20px 22px; overflow-y:auto; flex:1;}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px;}
.detail-item{background:var(--gray-50); border-radius:10px; padding:10px 12px;}
.detail-item .lbl{font-size:10px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.3px;}
.detail-item .val{font-size:14px; font-weight:700; color:var(--navy); margin-top:3px;}

/* ============ SKELETON ============ */
.skeleton{background:linear-gradient(90deg, var(--gray-100) 25%, var(--gray-150) 50%, var(--gray-100) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-md);}
@keyframes shimmer{0%{background-position:200% 0;} 100%{background-position:-200% 0;}}
.skeleton-kpi{height:118px;}
.skeleton-chart{height:300px;}
#loading-overlay{
  position:fixed; inset:0; background:var(--gray-50); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.loader-ring{width:44px; height:44px; border:4px solid var(--gray-200); border-top-color:var(--sky-blue); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#loading-overlay p{font-size:13px; font-weight:600; color:var(--gray-500);}
#loading-overlay.hidden{display:none;}

/* ============ TOAST ============ */
#toast-container{position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--navy); color:#fff; padding:12px 16px; border-radius:10px; font-size:12.5px; font-weight:600;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; animation:slideIn .25s ease;
}
.toast.success{background:var(--green-dark);}
.toast.error{background:var(--red-dark);}
@keyframes slideIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* ============ FOOTER ============ */
.app-footer{padding:18px 28px; text-align:center; font-size:11px; color:var(--gray-400); border-top:1px solid var(--gray-150); background:var(--white);}

/* ============ MATRIX TABLE ============ */
.matrix-table td, .matrix-table th{text-align:center;}
.matrix-table td.matrix-val{font-weight:700; color:var(--navy);}
.matrix-heat{border-radius:6px; padding:4px 0; display:inline-block; width:100%;}

/* ============ RESPONSIVE ============ */
@media (max-width:1400px){
  .kpi-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-12 .span-6{grid-column:span 12;}
  .grid-12 .span-4{grid-column:span 6;}
  .grid-12 .span-8{grid-column:span 12;}
}
@media (max-width:900px){
  .app-header{padding:12px 16px; flex-wrap:wrap;}
  .tab-nav, .filter-bar, .active-filters-row{padding-left:16px; padding-right:16px;}
  .app-main{padding:16px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2, .grid-3{grid-template-columns:1fr;}
  .grid-12 .span-4{grid-column:span 12;}
  .insight-list{grid-template-columns:1fr;}
  .side-panel{width:100%;}
  .update-info{display:none;}
  .tab-nav{top:64px;}
  .filter-bar{top:110px; position:relative;}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:1fr 1fr;}
  .search-input{width:100%;}
  .header-actions .btn span.txt{display:none;}
}

/* Print */
@media print{
  .app-header, .tab-nav, .filter-bar, .active-filters-row, .app-footer, .btn{display:none !important;}
  .page{display:none !important;}
  .page.active{display:block !important;}
}