/* ============================================================
   EXECUTIVE OPERATIONS STUDIO
   Camada visual corporativa carregada por ultimo. Mantem os componentes
   funcionais originais e centraliza a identidade premium do produto.
   ============================================================ */

/* ---------- Identidade, superficies e elevacao ---------- */
:root{
  --navy-950:#210c2d;
  --navy-900:#291037;
  --navy-800:#351548;
  --navy-700:#47205d;
  --navy-line:rgba(255,255,255,.09);
  --navy-line-2:rgba(255,255,255,.18);
  --blue-50:#f5effc;
  --blue-100:#eadcf8;
  --blue-500:#7b35c8;
  --blue-600:#6421ad;
  --blue-700:#50168f;
  --blue-800:#3f116f;
  --indigo-500:#9552d8;
  --gray-25:#f6f5f8;
  --gray-50:#f1eff4;
  --gray-100:#e8e5eb;
  --gray-200:#d9d4de;
  --gray-300:#c3bdca;
  --gray-400:#938b9b;
  --gray-500:#6f6877;
  --gray-600:#554f5c;
  --gray-700:#3e3844;
  --gray-800:#29242f;
  --gray-900:#1b1720;
  --radius-xs:6px;
  --radius-sm:9px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(35,18,42,.05);
  --shadow-sm:0 2px 8px rgba(35,18,42,.06);
  --shadow-md:0 12px 30px -12px rgba(42,17,54,.24);
  --shadow-lg:0 30px 70px -24px rgba(30,10,38,.48);
  --shadow-focus:0 0 0 3px rgba(123,53,200,.22);
}

body{
  background:
    linear-gradient(rgba(86,57,99,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(86,57,99,.025) 1px,transparent 1px),
    var(--gray-25);
  background-size:28px 28px;
}

::selection{background:#ddc8f3;color:#281035;}

/* ---------- Shell e navegacao ---------- */
.app{background:transparent;}
.sidebar{
  width:264px;
  min-width:264px;
  padding:20px 14px 14px;
  background:
    radial-gradient(circle at 12% 4%,rgba(181,96,225,.2),transparent 25%),
    linear-gradient(168deg,#351444 0%,#26102f 52%,#1d0d26 100%);
  box-shadow:12px 0 34px -26px rgba(28,8,35,.8);
  isolation:isolate;
}
.sidebar::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,#a94fd4,#7831bd 65%,transparent);
  z-index:-1;
}
@media (min-width:721px){
  .sidebar.collapsed{width:78px;min-width:78px;padding:20px 10px 14px;}
}
.brand{gap:12px;padding:2px 8px 24px;}
.brand-icon{
  width:38px;
  height:38px;
  border-radius:11px;
  background:linear-gradient(145deg,#a34bd1,#6524a7);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 9px 22px -9px rgba(179,73,221,.8),inset 0 1px rgba(255,255,255,.2);
}
.brand-text b{font-size:15px;letter-spacing:.035em;}
.brand-text small{color:#c6a8d8;letter-spacing:2.4px;}
.nav-label{color:#a98ab8;padding:14px 12px 8px;letter-spacing:1.6px;}
.nav-list{gap:4px;}
.nav-item{
  min-height:42px;
  padding:10px 12px;
  border-left:0;
  color:#d3c5d8;
  border:1px solid transparent;
  position:relative;
}
.nav-item::before{
  content:"";
  position:absolute;
  left:-1px;
  width:3px;
  height:18px;
  border-radius:0 4px 4px 0;
  background:#c56be6;
  transform:scaleY(0);
  transition:transform var(--dur-fast) var(--ease);
}
.nav-item:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.05);}
.nav-item.active{
  background:linear-gradient(90deg,rgba(157,73,205,.27),rgba(122,49,178,.12));
  color:#fff;
  border-color:rgba(215,161,235,.13);
}
.nav-item.active::before{transform:scaleY(1);}
.nav-item.active svg{color:#d795ee;}
.side-box.solid,.role-switcher-side,.side-action-btn{background:rgba(255,255,255,.045);}
.sidebar-footer{color:#b8a6c0;}
.sidebar-footer--logout{margin-top:2px;border-top:0;padding-top:0;}

.main{min-height:100vh;}
.topbar{
  height:64px;
  padding:0 28px;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(76,47,87,.1);
  box-shadow:0 1px 12px rgba(43,25,50,.035);
  backdrop-filter:blur(14px) saturate(1.2);
  position:sticky;
  top:0;
}
.topbar-title h1,.topbar-title h2{font-size:17px;}
.topbar-title p{color:var(--gray-500);}
.tb-link{color:var(--gray-600);padding:8px 10px;}
.tb-link:hover{color:var(--blue-700);background:var(--blue-50);}
.user-chip{padding:6px 8px 6px 16px;border-left-color:var(--gray-100);}
.avatar{width:30px;height:30px;border:2px solid #fff;box-shadow:0 0 0 1px var(--gray-200);}
.user-meta span{display:block;font-size:10px;color:var(--gray-500);margin-top:2px;}
.content{max-width:1560px;padding:28px 30px 36px;margin:0 auto;}

/* ---------- Hierarquia editorial ---------- */
.hero-row{align-items:center;margin-bottom:24px;}
.hero-row h1{font-size:27px;font-weight:750;letter-spacing:-.035em;}
.hero-row p{margin-top:6px;}
.section-title{font-size:15px;letter-spacing:-.015em;}

/* ---------- Controles ---------- */
.btn{height:38px;padding:0 16px;border-radius:9px;letter-spacing:-.005em;}
.btn-sm{height:36px;}
.btn-lg{height:46px;}
.btn-primary{
  background:linear-gradient(180deg,#7430bd,#5e1fa4);
  border-color:#551991;
  box-shadow:0 5px 12px -7px rgba(84,19,139,.8),inset 0 1px rgba(255,255,255,.17);
}
.btn-primary:hover{background:linear-gradient(180deg,#6827b0,#50188f);box-shadow:0 8px 18px -9px rgba(84,19,139,.9);}
.btn-secondary{border-color:var(--gray-200);box-shadow:var(--shadow-xs);}
.btn-secondary:hover{background:#fbfafd;border-color:#bbb3c2;color:var(--gray-900);}
.input,.select,.textarea,.search-box input{border-color:var(--gray-200);box-shadow:inset 0 1px 2px rgba(32,16,39,.025);}
.input:focus,.select:focus,.textarea:focus,.search-box input:focus{border-color:var(--blue-500);}

/* ---------- Cards e estados ---------- */
.card,.chart-card,.kpi-card,.module-card{
  border-color:rgba(73,44,84,.11);
  box-shadow:var(--shadow-sm);
}
.card-hover:hover,.module-card:hover{border-color:rgba(101,38,150,.23);box-shadow:var(--shadow-md);}
.module-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.module-card{min-height:200px;padding:22px;background:linear-gradient(155deg,#fff 58%,#fbf8fd);}
.module-card::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--blue-500),#b863d8);
  opacity:0;
  transform:scaleX(.55);
  transition:opacity var(--dur-card),transform var(--dur-card);
}
.module-card:hover::after{opacity:1;transform:scaleX(1);}
.module-card .mc-icon,.kpi-card .kc-icon,.kpi-tile .kt-icon{
  background:var(--blue-50)!important;
  color:var(--blue-600)!important;
  border:1px solid var(--blue-100);
}
.module-card h3{font-size:16px;}
.module-card .mc-arrow{background:var(--blue-50);color:var(--blue-600);}
.add-module-card{min-height:200px;border-color:#c9bbd1;background:rgba(255,255,255,.38);}
.add-module-card:hover{border-color:var(--blue-500);background:var(--blue-50);}
.empty-state .es-icon{background:var(--blue-50);color:var(--blue-500);border:1px solid var(--blue-100);}

/* ---------- Tabelas de operacao ---------- */
.table-wrap{border-color:rgba(73,44,84,.12);}
table.dt thead th{
  padding:12px 14px;
  color:#5d5263;
  background:#f1edf3;
  border-bottom:1px solid #dcd5e0;
  letter-spacing:.055em;
}
table.dt tbody td{padding:9px 14px;font-size:12px;color:var(--gray-700);border-bottom-color:#ebe7ed;}
table.dt tbody tr:nth-child(even){background:rgba(247,245,248,.56);}
table.dt tbody tr:hover{background:#f5effb;}
.act-row{opacity:.62;}
table.dt tbody tr:hover .act-row,table.dt tbody tr:focus-within .act-row{opacity:1;}
.pagination{padding:12px 14px;background:#fbfafc;border-top-color:var(--gray-100);}
.page-btn{min-width:32px;height:32px;}

/* ---------- Dashboards estilo executivo ---------- */
.kpi-grid{gap:18px;}
.kpi-card{padding:21px;background:linear-gradient(145deg,#fff,#fcfafd);}
.kpi-card::after{
  content:"";
  position:absolute;
  width:88px;
  height:88px;
  right:-34px;
  top:-38px;
  border-radius:50%;
  background:var(--blue-50);
}
.kpi-card .kc-top,.kpi-card .kc-value,.kpi-card .kc-label{position:relative;z-index:1;}
.kpi-card .kc-value{font-size:26px;letter-spacing:-.035em;}
.chart-grid{gap:18px;}
.chart-card{padding:22px;background:#fff;}
.chart-card .cc-head{padding-bottom:14px;border-bottom:1px solid var(--gray-100);}
.bars .bar-col .bar{background:linear-gradient(180deg,#9d55d2,#6421ad);}
.dist-row .dl-fill{background:linear-gradient(90deg,#6421ad,#ad60d2);}
.dashboard-single-column{grid-template-columns:1fr;}

/* ---------- Modais e feedback ---------- */
.overlay{background:rgba(31,10,38,.58);backdrop-filter:blur(6px);}
.modal{max-width:var(--modal-width,520px);border:1px solid rgba(255,255,255,.55);border-radius:18px;}
.modal--confirm{max-width:400px;}
.modal-head{padding:22px 24px 18px;background:linear-gradient(180deg,#fff,#fcfafd);}
.modal-body{padding:22px 24px;}
.modal-foot{padding:16px 24px;background:#faf8fb;}
.toast{background:#24182a;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-lg);}
.toolbar{padding:12px;border:1px solid rgba(73,44,84,.1);border-radius:13px;background:rgba(255,255,255,.74);box-shadow:var(--shadow-xs);}
.toolbar-right-contents{display:contents;}
.bottom-panels{margin-top:20px;}
.bottom-panels__summary{flex:1.4;min-width:320px;}
.bottom-panels__insight{min-width:280px;}
.bottom-panels__title{font-size:var(--text-sm);color:var(--gray-900);}
.bottom-panels__copy{font-size:var(--text-xs);color:var(--gray-600);margin-top:6px;line-height:1.5;}
.bottom-panels__action{align-self:flex-start;}

/* ---------- Pagina de registros (usuario comum) ----------
   O reskin acima alarga topbar/content e a linha da tabela em toda a
   aplicacao. Nesta pagina o usuario ja tinha ajustado a densidade a mao
   (estilo grade densa, tipo Excel/ERP) para deixar a tela focada na
   tabela — restauramos esses valores aqui, sem mexer no reskin das
   demais paginas. Especificidade extra (.main--table-focus) já resolve
   o empate com as regras acima, sem precisar de !important. */
.main--table-focus .topbar{height:40px;padding:0 24px;}
.main--table-focus .content{padding:12px 6px 10px;max-width:1440px;margin:0;}
.main--table-focus table.dt thead th{
  padding:12px 16px;
  color:#fff;
  background:#21305d;
  border-bottom-color:var(--gray-100);
  letter-spacing:.04em;
  text-align:center;
}
.main--table-focus table.dt tbody td{
  padding:1px 1px;
  font-size:8pt;
  color:#31363f;
  border-bottom-color:#d1d6dd;
  text-align:center;
}
/* Pedido explícito: todas as colunas desta tabela centralizadas — inclusive
   ID e as numéricas (Custos etc.), que por padrão (tables.css) alinham à
   direita. */
.main--table-focus table.dt thead th.num,
.main--table-focus table.dt tbody td.num{
  text-align:center;
}

/* ---------- Login e cadastro ---------- */
.auth-shell{background:#fff;}
.auth-visual{
  flex:1.05;
  padding:52px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(30deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 75% 30%,rgba(172,73,213,.27),transparent 29%),
    linear-gradient(155deg,#351444,#210c2d 72%);
  background-size:44px 76px,44px 76px,auto,auto;
}
.auth-visual::before{background:radial-gradient(circle,#a64ed2,transparent 68%);opacity:.2;}
.auth-visual::after{background:radial-gradient(circle,#6d2bad,transparent 70%);}
.auth-headline h2{max-width:560px;font-size:34px;line-height:1.16;letter-spacing:-.035em;}
.auth-headline p{color:#d6c7dd;max-width:540px;}
.auth-stats{padding-top:28px;border-top:1px solid rgba(255,255,255,.1);}
.auth-stats div{padding-left:14px;border-left:2px solid rgba(203,112,231,.65);}
.auth-stats div span{color:#bdaac7;}
.auth-quote{color:#b9a8c2;}
.auth-form-side{background:linear-gradient(150deg,#fff 55%,#faf6fc);}
.auth-form-box{max-width:410px;}
.auth-form-box h1{font-size:27px;}
.auth-form{margin-top:30px;}
.role-demo-box{background:var(--blue-50);border-color:var(--blue-100);}

/* ---------- Responsividade e movimento ---------- */
@media (max-width:980px){
  .auth-form-side{background:linear-gradient(155deg,#fff,#f7f1fa);align-items:center;padding-top:32px;}
  .auth-form-box{padding:28px;border:1px solid var(--gray-100);border-radius:20px;background:#fff;box-shadow:var(--shadow-md);}
}
@media (max-width:720px){
  .sidebar{width:276px;min-width:276px;padding-top:18px;}
  .topbar{min-height:60px;padding:9px 14px;}
  .content{padding:20px 16px 28px;}
  .hero-row h1{font-size:23px;}
  .toolbar{padding:10px;}
  .module-card{min-height:auto;}
  table.dt tbody td{padding:9px 12px;font-size:12px;}
  .auth-form-box{padding:22px;}
  .toast-stack{left:16px;right:16px;bottom:16px;}
  .toast{min-width:0;width:100%;}
}
/* Removida a animação de entrada (fade + translateY) que rodava em todo filho
   de `.content` a cada navegação: como a troca de módulo aqui é reload de
   página inteira (não SPA), o efeito só chamava atenção pra ícones/tabela/
   título "surgindo" de novo a cada clique, lido como piscar em vez de suave. */