/* ============================================================
   CINERMA DESIGN SYSTEM — v1 (2026)
   Redesign profissional do painel administrativo CINERMA.
   - Preserva TODOS os IDs, classes e seletores existentes.
   - Apenas sobrescreve a aparência com tokens e componentes únicos.
   - Carregar DEPOIS de admin-native.css e CSS específicos da página.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --c-bg:#070a0f;
  --c-bg-soft:#0b0f16;
  --c-panel:#0f141d;
  --c-panel-2:#131925;
  --c-panel-3:#18202f;
  --c-line:#1f2937;
  --c-line-soft:#232f41;
  --c-text:#eef2f8;
  --c-text-soft:#c3ccdb;
  --c-muted:#8b96a8;
  --c-gold:#e0b64f;
  --c-gold-soft:rgba(224,182,79,.14);
  --c-purple:#7c5cff;
  --c-purple-soft:rgba(124,92,255,.16);
  --c-green:#3fd68b;
  --c-green-soft:rgba(63,214,139,.13);
  --c-yellow:#f2c14b;
  --c-yellow-soft:rgba(242,193,75,.13);
  --c-red:#f2635f;
  --c-red-soft:rgba(242,99,95,.13);
  --c-blue:#4aa3f0;
  --c-blue-soft:rgba(74,163,240,.13);
  --c-radius:14px;
  --c-radius-sm:10px;
  --c-radius-lg:18px;
  --c-shadow:0 10px 30px rgba(0,0,0,.35);
  --c-shadow-soft:0 4px 14px rgba(0,0,0,.25);
  --c-font:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --c-sb-w:264px;
  --c-focus:0 0 0 3px rgba(124,92,255,.28);
}

*{box-sizing:border-box}

body.native-admin{
  background:
    radial-gradient(1100px 500px at 85% -10%,rgba(124,92,255,.07),transparent 60%),
    radial-gradient(900px 420px at -10% 110%,rgba(224,182,79,.05),transparent 60%),
    var(--c-bg);
  color:var(--c-text);
  font-family:var(--c-font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 2. Layout base ---------- */
.native-app{
  display:grid;
  grid-template-columns:var(--c-sb-w) minmax(0,1fr);
  min-height:100vh;
}

.native-main{
  padding:30px clamp(20px,2.4vw,44px) 56px;
  min-width:0;
}

.native-main > *{min-width:0;max-width:100%}

.native-main h1{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0;
}

.native-main h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.native-main h3{font-size:15px;font-weight:700;margin:0 0 4px}
.native-main p{color:var(--c-text-soft)}
.native-main section,
.native-main form,
.native-main article,
.native-main .box,
.native-main .card,
.native-main [class*="panel"],
.native-main [class*="shell"]{max-width:100%}
/* ---------- 3. Sidebar ---------- */
.native-sidebar{
  background:linear-gradient(180deg,#0c111b 0%,#090d14 100%);
  border-right:1px solid var(--c-line);
  padding:20px 14px 26px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  scrollbar-width:thin;
}

.native-logo{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
  color:var(--c-text);
  font-size:22px;
  font-weight:800;
  letter-spacing:.02em;
  padding:8px 12px 16px;
  border-bottom:1px solid var(--c-line-soft);
  margin-bottom:2px;
}

.native-logo span{color:var(--c-gold)}
.native-logo small{
  font-size:10.5px;
  font-weight:600;
  color:var(--c-muted);
  letter-spacing:.14em;
  text-transform:uppercase;
}

.native-nav{display:flex;flex-direction:column;gap:3px}

.native-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#5f6b7e;
  margin:16px 10px 6px;
}

.native-label:first-child{margin-top:2px}

.native-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:38px;
  padding:9px 12px;
  border-radius:var(--c-radius-sm);
  color:var(--c-text-soft);
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}

.native-nav a .ni{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:8px;
  background:var(--c-panel-3);
  font-size:13px;
  color:var(--c-muted);
  transition:background .15s ease,color .15s ease;
}

.native-nav a:hover{background:rgba(255,255,255,.045);color:#fff}
.native-nav a:hover .ni{background:var(--c-line-soft);color:#fff}

.native-nav a.active{
  background:linear-gradient(90deg,var(--c-purple-soft),rgba(124,92,255,.05));
  border-color:rgba(124,92,255,.35);
  color:#fff;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--c-purple);
}

.native-nav a.active .ni{background:rgba(124,92,255,.22);color:#cfc6ff}

.native-nav a.green.active{
  background:linear-gradient(90deg,var(--c-green-soft),rgba(63,214,139,.04));
  border-color:rgba(63,214,139,.32);
  box-shadow:inset 3px 0 0 var(--c-green);
}

.native-nav a.green.active .ni{background:rgba(63,214,139,.18);color:#b8f5d8}

.native-nav a.yellow.active{
  background:linear-gradient(90deg,var(--c-yellow-soft),rgba(242,193,75,.04));
  border-color:rgba(242,193,75,.32);
  box-shadow:inset 3px 0 0 var(--c-yellow);
}

.native-nav a.yellow.active .ni{background:rgba(242,193,75,.18);color:#ffe9b0}
.native-nav a.green .ni{color:var(--c-green)}
.native-nav a.yellow .ni{color:var(--c-yellow)}

/* Grupos (herdam o mesmo estilo; mantém classes antigas funcionando) */
.native-finance-group,
.native-panel-group{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:6px;
  border-left:1px dashed var(--c-line-soft);
  margin-left:6px;
}

/* Botão mobile do menu (injetado por admin-menu-v2.js) */
.native-menu-toggle{
  display:none;
  position:fixed;
  top:12px;
  left:12px;
  z-index:1200;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--c-line-soft);
  background:rgba(12,17,27,.92);
  color:var(--c-text);
  font-size:19px;
  cursor:pointer;
  backdrop-filter:blur(6px);
}

.native-menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:1090;
  background:rgba(2,5,10,.55);
  backdrop-filter:blur(2px);
}

@media (max-width:1024px){
  .native-menu-toggle{display:flex;align-items:center;justify-content:center}
  .native-menu-overlay.show{display:block}
  .native-app{grid-template-columns:1fr}
  .native-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(300px,86vw);
    z-index:1100;
    transform:translateX(-102%);
    transition:transform .22s ease;
    box-shadow:var(--c-shadow);
  }
  .native-app.menu-open .native-sidebar{transform:translateX(0)}
  .native-main{padding:70px 16px 40px}
}
/* ---------- 4. Cabeçalho de página ---------- */
.native-main .top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:0 0 26px;
  padding-bottom:18px;
  border-bottom:1px solid var(--c-line-soft);
}

.native-main .top h1{font-size:26px}

.status{
  background:var(--c-green-soft);
  color:var(--c-green);
  border:1px solid rgba(63,214,139,.3);
  padding:8px 15px;
  border-radius:30px;
  font-size:12.5px;
  font-weight:600;
}

/* ---------- 5. Cards / painéis ---------- */
.native-admin .card,
.native-admin .box{
  background:linear-gradient(180deg,var(--c-panel) 0%,var(--c-bg-soft) 100%);
  border:1px solid var(--c-line);
  border-radius:var(--c-radius);
  padding:20px;
  box-shadow:var(--c-shadow-soft);
}

.native-admin .card small{color:var(--c-muted)}
.native-admin .card strong{display:block;font-size:26px;margin-top:8px;font-weight:800;letter-spacing:-.02em}
.native-admin .badge{font-size:11.5px;padding:5px 10px;border-radius:20px;border:1px solid var(--c-line-soft);font-weight:600}

/* Cards comuns de páginas (padrão products-v5 e variantes) */
.products-v5-card,
.analyticsSection,
.financeBox,
.financePanel,
.panel-connectors-card{
  background:linear-gradient(180deg,var(--c-panel) 0%,var(--c-bg-soft) 100%) !important;
  border:1px solid var(--c-line) !important;
  border-radius:var(--c-radius) !important;
  box-shadow:var(--c-shadow-soft) !important;
}

/* ---------- 6. Botões ---------- */
.native-main button{
  font-family:inherit;
  cursor:pointer;
  border-radius:var(--c-radius-sm);
  border:1px solid var(--c-line-soft);
  background:var(--c-panel-3);
  color:var(--c-text);
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  transition:filter .15s ease,transform .06s ease,border-color .15s ease,background .15s ease;
}

.native-main button:hover{filter:brightness(1.12);border-color:#33405a}
.native-main button:active{transform:translateY(1px)}
.native-main button:focus-visible,
.native-main input:focus-visible,
.native-main select:focus-visible,
.native-main textarea:focus-visible{outline:none;box-shadow:var(--c-focus);border-color:var(--c-purple)!important}

.native-main button.success,
.native-main .button.success,
.button.success{
  background:linear-gradient(180deg,rgba(63,214,139,.18),rgba(63,214,139,.1));
  border-color:rgba(63,214,139,.4);
  color:#7bf0b6;
}

.native-main button.secondary,
.native-main .button.secondary,
.button.secondary{
  background:transparent;
  border-color:var(--c-line-soft);
  color:var(--c-text-soft);
}

.native-main .button,
.button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  cursor:pointer;
  border-radius:var(--c-radius-sm);
  border:1px solid var(--c-line-soft);
  background:var(--c-panel-3);
  color:var(--c-text);
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:filter .15s ease,border-color .15s ease;
}

.native-main .button:hover,.button:hover{filter:brightness(1.12);border-color:#33405a}

/* Botões específicos de produtos/planos (mantêm classes) */
.products-v5-primary,
.products-v72-button{
  background:linear-gradient(135deg,var(--c-purple),#5f49e0) !important;
  border-color:transparent !important;
  color:#fff !important;
}

.products-v5-secondary,
.products-v72-button.secondary{
  background:transparent !important;
  border-color:var(--c-line-soft) !important;
  color:var(--c-text-soft) !important;
}

.products-v5-edit{
  background:var(--c-blue-soft) !important;
  border-color:rgba(74,163,240,.35) !important;
  color:#a9d3fb !important;
}

.products-v72-delete{
  background:var(--c-red-soft) !important;
  border-color:rgba(242,99,95,.35) !important;
  color:#ffb3b1 !important;
}
/* ---------- 7. Formulários ---------- */
.native-main input,
.native-main select,
.native-main textarea{
  font-family:inherit;
  font-size:13.5px;
  color:var(--c-text);
  background:var(--c-bg-soft);
  border:1px solid var(--c-line-soft);
  border-radius:var(--c-radius-sm);
  padding:9px 12px;
  min-height:38px;
  transition:border-color .15s ease,box-shadow .15s ease;
}

.native-main input::placeholder,
.native-main textarea::placeholder{color:#5f6b7e}

.native-main input:disabled,
.native-main select:disabled,
.native-main textarea:disabled{opacity:.5;cursor:not-allowed}

.native-main label{color:var(--c-text-soft);font-size:12.5px;font-weight:600}
.native-main label small{color:var(--c-muted);font-weight:500}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field > span{font-size:12px;font-weight:700;color:var(--c-muted);letter-spacing:.03em}

.native-admin select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-muted) 50%),linear-gradient(135deg,var(--c-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:32px;
}

input[type="checkbox"],input[type="radio"]{min-height:auto;accent-color:var(--c-purple)}

/* ---------- 8. Tabelas ---------- */
.native-main table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.native-main table th{
  text-align:left;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-muted);
  padding:11px 12px;
  background:var(--c-panel-3);
  border-bottom:1px solid var(--c-line-soft);
  position:sticky;
  top:0;
  z-index:2;
}

.native-main table td{
  padding:11px 12px;
  border-bottom:1px solid rgba(31,41,55,.55);
  color:var(--c-text-soft);
  vertical-align:middle;
}

.native-main table tbody tr{transition:background .12s ease}
.native-main table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.native-main table tbody tr:hover{background:rgba(124,92,255,.06)}

.clients-table-wrap,
.inventory-table-wrap,
.c60-table-wrap,
.c62-table-wrap,
.table-wrap,
.table-scroll,
[class*="table-wrap"],
[class*="table-scroll"]{
  max-width:100% !important;
  overflow-x:auto !important;
  scrollbar-gutter:stable;
  border-radius:var(--c-radius-sm);
}
/* ---------- 9. Modais ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,7,16,.74);
  backdrop-filter:blur(5px);
}

.modal-backdrop[hidden]{display:none}

.modal{
  width:min(680px,96vw);
  max-height:92vh;
  overflow-y:auto;
  background:linear-gradient(180deg,var(--c-panel) 0%,var(--c-bg-soft) 100%);
  border:1px solid var(--c-line-soft);
  border-radius:var(--c-radius-lg);
  box-shadow:var(--c-shadow);
  scrollbar-width:thin;
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid var(--c-line-soft);
  position:sticky;
  top:0;
  background:var(--c-panel);
  z-index:3;
  border-radius:var(--c-radius-lg) var(--c-radius-lg) 0 0;
}

.modal-head h2{font-size:17px;font-weight:800;margin:0}
.modal-head p{margin:3px 0 0;font-size:12.5px;color:var(--c-muted)}

.modal-close{
  width:34px;height:34px;
  flex:0 0 34px;
  border-radius:10px;
  border:1px solid var(--c-line-soft);
  background:transparent;
  color:var(--c-muted);
  font-size:17px;
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}

.modal-close:hover{color:#fff;border-color:var(--c-red);background:var(--c-red-soft)}

.modal-body{padding:18px 20px}

.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:14px 20px;
  border-top:1px solid var(--c-line-soft);
  background:var(--c-panel-2);
  border-radius:0 0 var(--c-radius-lg) var(--c-radius-lg);
  position:sticky;
  bottom:0;
}

.form-modal{width:min(820px,96vw)}
.small-modal{width:min(620px,96vw)}
.profile-modal{width:min(980px,96vw)}

@media (max-width:700px){
  .modal-backdrop{padding:8px;align-items:flex-end}
  .modal{max-height:96vh;border-radius:16px 16px 0 0}
  .modal-head,.modal-foot{border-radius:0}
}

/* ---------- 10. Mensagens / estados ---------- */
.form-error{color:var(--c-red);font-size:12.5px;margin-top:8px}
.info-box{
  background:var(--c-blue-soft);
  border:1px solid rgba(74,163,240,.28);
  border-radius:var(--c-radius-sm);
  padding:12px 14px;
  font-size:12.5px;
  color:var(--c-text-soft);
}

.mp-gateway-message{display:none;margin-top:12px;padding:11px 14px;border-radius:var(--c-radius-sm);font-size:13px}
.mp-gateway-message.ok{display:block;background:var(--c-green-soft);border:1px solid rgba(63,214,139,.35);color:#8df2c0}
.mp-gateway-message.error{display:block;background:var(--c-red-soft);border:1px solid rgba(242,99,95,.35);color:#ffb6b4}

.mp-gateway-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  padding:5px 11px;
  border-radius:20px;
}

.mp-gateway-badge.on{background:var(--c-green-soft);border:1px solid rgba(63,214,139,.4);color:#7cf0b8}
.mp-gateway-badge.off{background:var(--c-red-soft);border:1px solid rgba(242,99,95,.35);color:#ffb3b1}
/* ---------- 11. Scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:#2a3345 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#2a3345;
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{background:#3a475f;background-clip:content-box;border:2px solid transparent}

/* ---------- 12. Responsividade 4K ---------- */
@media (min-width:1800px){
  :root{--c-sb-w:276px}
  .native-main{padding:38px clamp(32px,2.2vw,54px) 60px}
  .native-main > *{width:min(100%,1680px);margin-left:auto;margin-right:auto}
  .native-main h1{font-size:30px}
  .native-nav a{font-size:13.5px;min-height:41px}
  .native-label{font-size:11px}
}

@media (min-width:2400px){
  :root{--c-sb-w:292px}
  .native-main > *{width:min(100%,1840px)}
  .native-main h1{font-size:33px}
  .native-nav a{font-size:14px;min-height:44px}
  .native-main button,
  .native-main input,
  .native-main select,
  .native-main textarea{min-height:42px;font-size:14px}
}

@media (min-width:3200px){
  :root{--c-sb-w:320px}
  .native-main > *{width:min(100%,2080px)}
  .native-main h1{font-size:38px}
  .native-nav a{font-size:15px;min-height:48px}
}

@media (max-width:900px){
  .native-main > *{width:100%!important;max-width:100%!important;margin-inline:0!important}
  .native-admin .cards{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  .native-admin .cards{grid-template-columns:1fr}
  .native-main .top{flex-direction:column;align-items:flex-start}
}

/* ---------- 13. Acessibilidade / misc ---------- */
a{color:var(--c-blue)}
a:focus-visible{outline:2px solid var(--c-purple);outline-offset:2px;border-radius:4px}

img,svg,canvas,video{max-width:100%;height:auto}

::selection{background:rgba(124,92,255,.35);color:#fff}

/* ---------- 14. Botões .btn (gateways e páginas legadas) ---------- */
.native-admin .btn,
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:inherit;
  cursor:pointer;
  border-radius:var(--c-radius-sm);
  border:1px solid var(--c-line-soft);
  background:var(--c-panel-3);
  color:var(--c-text);
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  transition:filter .15s ease,border-color .15s ease;
}

.btn:hover{filter:brightness(1.12);border-color:#33405a}

.btn.primary{
  background:linear-gradient(135deg,var(--c-purple),#5f49e0);
  border-color:transparent;
  color:#fff;
}

.btn.danger{
  background:var(--c-red-soft);
  border-color:rgba(242,99,95,.4);
  color:#ffb3b1;
}

.mp-gateway-card{
  border-radius:var(--c-radius) !important;
  box-shadow:var(--c-shadow-soft) !important;
}

.mp-secret-wrap{display:flex;gap:8px;align-items:center}
.mp-secret-wrap input{flex:1}
.mp-eye{
  border-radius:8px;
  border:1px solid var(--c-line-soft);
  background:var(--c-panel-3);
  color:var(--c-muted);
  padding:8px 12px;
  cursor:pointer;
  font-size:12px;
}
.mp-eye:hover{color:#fff}

/* ---------- 16. Botões somente-ícone (ex.: ações da tabela de clientes) ----------
   Os botões .icon-action possuem largura fixa (30px) e desenham o ícone
   via SVG inline. O botão genérico do design system aplica padding que
   colapsaria o SVG (padding 16px+16px em caixa de 30px) e daria fundo
   visível onde o original é transparente — por isso o componente recebe
   regra própria: padding 0, fundo transparente e borda apenas no hover. */
.native-main button.icon-action{
  padding:0;
  min-height:0;
  background:transparent;
  border-color:transparent;
  border-radius:8px;
  font-weight:400;
}

.native-main button.icon-action:hover{
  background:rgba(255,255,255,.055);
  border-color:rgba(148,163,184,.18);
  filter:none;
}

.native-main button.icon-action svg{
  width:15px;
  height:15px;
  flex:none;
}


/* ---------- 15. Acessibilidade (movimento) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}