/* ===================================================
   TEMA SUAVE – FactoryFlow
   ---------------------------------------------------
   Tema claro, de cantos arredondados, inspirado no painel
   da Hostinger: faixa escura no topo, menu lateral num painel
   cinza-claro destacado, item selecionado virando uma "pílula"
   branca, e tipografia em caixa normal (sem CAIXA ALTA no menu).

   TUDO neste arquivo está dentro de [data-theme="suave"].
   Nenhum seletor aqui alcança os temas dark / light / induscolor,
   então ligar ou desligar este tema não muda nada para quem não
   está usando ele.

   Por enquanto o tema só é oferecido aos logins listados em
   FF_TEMA_SUAVE_LOGINS, em js/app.js. Para liberar para todos,
   basta esvaziar aquela lista.
   =================================================== */

[data-theme="suave"] {
  /* Fundo da página num cinza bem claro, para os cartões brancos
     terem contorno sem precisar de borda forte. */
  --bg:       #f7f7f8;
  --bg2:      #ffffff;
  --bg3:      #eeecf1;
  --surface:  #ffffff;
  --surface2: #faf9fb;
  --border:   #e9e8eb;

  --text:  #1d1b20;
  --text2: #6b6774;
  --text3: #9a96a4;

  /* Azul da marca continua sendo a cor de ação e dos gráficos;
     o roxo entra só na moldura (topo e menu), como no print. */
  --blue:   #144196;
  --green:  #16a34a;
  --yellow: #b8860b;   /* #FFF000 some em fundo claro */
  --red:    #dc2626;
  --orange: #ea580c;
  --purple: #673de6;
  --cyan:   #0891b2;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(24,18,38,.05), 0 10px 30px rgba(24,18,38,.07);

  /* Tokens só deste tema */
  --sv-topo:        #144196;   /* azul da marca: faixa do topo e fundo do menu */
  --sv-menu:        #ebeaec;   /* painel do menu lateral */
  --sv-roxo:        #144196;   /* destaque: item ativo, botao principal */
  --sv-pill:        #ffffff;
  --sv-altura-topo: 60px;
  --sv-curva:       16px;      /* curva do painel do menu */
  --sv-calha:       10px;      /* folga do azul em volta do painel do menu */

  color-scheme: light;
}

[data-theme="suave"] body {
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* ===== FAIXA ESCURA DO TOPO =====
   O cabeçalho da sidebar e a topbar formam uma faixa só, contínua,
   atravessando a tela inteira – é o que dá a leitura do print. */
[data-theme="suave"] .sidebar-header {
  background: var(--sv-topo);
  border-bottom: none;
  border-top: none;              /* tira a listra amarela do tema padrão */
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;          /* o print não usa caixa alta */
  letter-spacing: -0.01em;
}
[data-theme="suave"] .sidebar-header i.sidebar-hdr-icon {
  background: rgba(255,255,255,.14);
  color: #ffffff;
  box-shadow: none;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  font-size: .95rem;
}

[data-theme="suave"] .topbar {
  background: var(--sv-topo);
  border-bottom: none;
  box-shadow: none;
  color: #ffffff;
}

/* Altura da faixa só no desktop. No celular a topbar tem altura própria
   (54px / 50px), já acertada no style.css – mexer nela aqui desalinharia
   o layout de celular que foi ajustado antes. */
@media (min-width: 769px) {
  [data-theme="suave"] .topbar {
    min-height: var(--sv-altura-topo);
    padding: 0 1.5rem;
  }
  [data-theme="suave"] .sidebar-header {
    min-height: var(--sv-altura-topo);
    padding: 0 1.1rem;
  }
}
[data-theme="suave"] .topbar-title { color: #ffffff; font-weight: 600; }
[data-theme="suave"] .sidebar-toggle { color: rgba(255,255,255,.75); }
[data-theme="suave"] .sidebar-toggle:hover { color: #ffffff; }
[data-theme="suave"] .topbar .alert-bell i { color: rgba(255,255,255,.8); }
[data-theme="suave"] .topbar .btn-primary {
  background: #ffffff;
  border: none;
  color: var(--sv-topo);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
}
[data-theme="suave"] .topbar .btn-primary:hover {
  background: #eef2fa;
  color: var(--sv-topo);
}
/* Os outros botoes da faixa escura sao capsulas vazadas de contorno branco,
   como no print. So aqui: fora da faixa, botao e retangulo de canto suave. */
[data-theme="suave"] .topbar .btn:not(.btn-primary),
[data-theme="suave"] .topbar .btn-sm:not(.btn-primary) {
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 500;
  box-shadow: none;
}
[data-theme="suave"] .topbar .btn:not(.btn-primary):hover,
[data-theme="suave"] .topbar .btn-sm:not(.btn-primary):hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  color: #ffffff;
}

/* ===== PAINEL DO MENU LATERAL ===== */
[data-theme="suave"] .sidebar {
  /* O azul fica ATRAS do painel claro. A folga de var(--sv-calha) à
     esquerda, em cima e embaixo é que deixa esse azul aparecer – a borda
     esquerda, que era o traço azul pedido antes, virou essa folga. À
     direita não há folga: ali o painel encosta no conteúdo. */
  background: var(--sv-topo);
  border-right: none;
  border-left: none;
}
[data-theme="suave"] .sidebar-nav,
[data-theme="suave"] .sidebar-footer {
  background: var(--sv-menu);
  border-top: none;
}
[data-theme="suave"] .sidebar-nav {
  padding: .9rem .7rem .4rem;
  gap: .12rem;
}
/* O painel flutua sobre o azul por três lados e encosta no conteúdo pelo
   quarto. Só os cantos de fora são arredondados: o de cima no .sidebar-nav
   e o de baixo no .sidebar-footer, que são irmãos encostados e leem como um
   cartão só. Só no desktop: no celular a sidebar vira gaveta. */
@media (min-width: 769px) {
  [data-theme="suave"] .sidebar-nav,
  [data-theme="suave"] .sidebar-footer {
    margin-left: var(--sv-calha);
    margin-right: 0;               /* encosta no painel de conteúdo */
    border-right: none;
  }
  [data-theme="suave"] .sidebar-nav {
    margin-top: var(--sv-calha);
    border-top-left-radius: var(--sv-curva);
  }
  [data-theme="suave"] .sidebar-footer {
    margin-bottom: var(--sv-calha);
    border-bottom-left-radius: var(--sv-curva);
  }
  /* Recolhida, a sidebar tem 60px: 10px de folga comeriam o ícone. */
  [data-theme="suave"] .sidebar.collapsed .sidebar-nav,
  [data-theme="suave"] .sidebar.collapsed .sidebar-footer {
    margin-left: 4px;
  }
}

/* ===== PAINEL DE CONTEÚDO =====
   A sidebar e o conteúdo formam um bloco só, encostados, flutuando sobre o
   azul: a folga azul aparece em volta do conjunto (esquerda da sidebar,
   direita e embaixo do conteúdo) e os cantos de fora são arredondados.
   Só no desktop: no celular a sidebar é gaveta e isto não faria sentido. */
@media (min-width: 769px) {
  /* O azul que emoldura. A faixa do topo já é desta cor, então ele continua
     a faixa para baixo em vez de criar uma emenda. */
  [data-theme="suave"] .main-content { background: var(--sv-topo); }

  /* A moldura azul não pode rolar junto com o conteúdo, senão as bordas e os
     cantos saem da tela. Então o .main-content trava na altura da janela e
     quem rola é o painel, por dentro.
     O !important é obrigatório: o style.css tem um
     ".main-content { overflow: visible !important }" (um reset antigo de
     modal) que venceria mesmo com especificidade menor. Os modais ficam
     fora do #appPage no HTML, então este overflow não chega a recortá-los. */
  [data-theme="suave"] .main-content {
    height: 100vh;
    overflow: hidden !important;
  }
  [data-theme="suave"] .page.active {
    background: var(--bg);
    margin: var(--sv-calha) var(--sv-calha) var(--sv-calha) 0;
    border-top-right-radius:    var(--sv-curva);
    border-bottom-right-radius: var(--sv-curva);
    flex: 1;
    min-height: 0;                 /* sem isto o item flex nao encolhe e nao rola */
    overflow-y: auto;
  }

  /* "Pedidos Novos" é a exceção: no style.css ela é position:absolute com
     left:250px e uma pilha de !important, então não obedece a regra acima.
     Aqui ela é recolocada na mesma moldura – encostada na sidebar (240px)
     e começando abaixo da faixa do topo, que antes ela cobria. */
  [data-theme="suave"] #pagePedidosNovos.active {
    top: var(--sv-altura-topo) !important;
    left: 240px !important;
    right: var(--sv-calha) !important;
    bottom: var(--sv-calha) !important;
    width: auto !important;
    min-height: 0 !important;
    margin: var(--sv-calha) 0 0 0 !important;
    background: var(--bg) !important;
    border-top-right-radius:    var(--sv-curva);
    border-bottom-right-radius: var(--sv-curva);
  }
  /* Os cartões desta página têm fundo escuro fixo no style.css; sobre o
     painel claro eles precisam acompanhar o tema. */
  [data-theme="suave"] #pagePedidosNovos .pn-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
  }
  /* O miolo do cartão foi desenhado para fundo escuro: caixinhas de branco
     translúcido e números em azul claro. Sobre o branco isso some. */
  [data-theme="suave"] #pagePedidosNovos .pn-stat {
    background: var(--bg3);
    border-color: var(--border);
  }
  [data-theme="suave"] #pagePedidosNovos .pn-stat-num { color: var(--blue); }
  [data-theme="suave"] #pagePedidosNovos .pn-card-footer { border-top-color: var(--border); }
  [data-theme="suave"] #pagePedidosNovos .pn-btn-liberar {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
  }
  [data-theme="suave"] #pagePedidosNovos .pn-btn-liberar:hover {
    background: #0f3576;
    border-color: #0f3576;
    color: #ffffff;
    box-shadow: none;
  }
}

[data-theme="suave"] .nav-group-label {
  color: #86828f;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;          /* "Relatórios", não "RELATÓRIOS" */
  padding: 1rem .7rem .3rem;
}

[data-theme="suave"] .nav-item {
  color: #3c3845;
  font-size: .9rem;
  font-weight: 500;
  border-radius: 10px;
  padding: .58rem .7rem;
  gap: .7rem;
}
[data-theme="suave"] .nav-item i { color: #635f6d; width: 20px; }

[data-theme="suave"] .nav-item:hover,
[data-theme="suave"] .nav-item:active {
  background: rgba(255,255,255,.65);
  color: #1d1b20;
}
/* Item ativo = pílula branca. Sem a barrinha lateral do tema padrão. */
[data-theme="suave"] .nav-item.active,
[data-theme="suave"] .nav-item.active:hover,
[data-theme="suave"] .nav-item.active:active {
  background: var(--sv-pill);
  color: #1d1b20;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(24,18,38,.07);
}
[data-theme="suave"] .nav-item.active i { color: var(--sv-roxo); }

[data-theme="suave"] .user-info { border-bottom-color: #dedbe3; }
[data-theme="suave"] .user-avatar i { color: #8d8996; }
[data-theme="suave"] .sidebar-action-divider { border-top-color: #dedbe3; }
[data-theme="suave"] .sidebar-footer button,
[data-theme="suave"] .sidebar-footer .btn-expediente { border-radius: 10px; }
[data-theme="suave"] .btn-logout {
  background: #ffffff;
  border: 1px solid #e8c4c4;
  color: #c0392b;
}
[data-theme="suave"] .btn-logout:hover { background: #fdf2f2; }

/* ===== CANTOS ARREDONDADOS NO CONTEÚDO =====
   A maior parte dos componentes já usa var(--radius), então subir o
   token já arredondou quase tudo. Aqui ficam os que têm valor fixo. */
[data-theme="suave"] .metric-card,
[data-theme="suave"] .section-card,
[data-theme="suave"] .chart-card,
[data-theme="suave"] .kanban-col,
[data-theme="suave"] .kanban-card,
[data-theme="suave"] .lot-card,
[data-theme="suave"] .order-card,
[data-theme="suave"] .route-card,
[data-theme="suave"] .ms-card,
[data-theme="suave"] .am-card,
[data-theme="suave"] .pn-card,
[data-theme="suave"] .sim-card,
[data-theme="suave"] .sim-form-card,
[data-theme="suave"] .sim-kpi-card,
[data-theme="suave"] .rt-filters-card,
[data-theme="suave"] .rt-summary-card,
[data-theme="suave"] .table-container,
[data-theme="suave"] .rt-table-container,
[data-theme="suave"] .rt-table-wrap,
[data-theme="suave"] .sim-table-wrap,
[data-theme="suave"] .loading-box,
[data-theme="suave"] .alert-dropdown,
[data-theme="suave"] .toast {
  border-radius: 12px;
}
[data-theme="suave"] .modal,
[data-theme="suave"] .modal-large,
[data-theme="suave"] .pn-modal,
[data-theme="suave"] .am-modal,
[data-theme="suave"] .login-card {
  border-radius: 14px;
}
/* No print os botões do conteúdo são retângulos de canto suave, não cápsulas.
   Cápsula fica só nos botões da faixa escura do topo, logo abaixo. */
[data-theme="suave"] .btn,
[data-theme="suave"] .btn-sm,
[data-theme="suave"] .btn-xs,
[data-theme="suave"] .tab-btn,
[data-theme="suave"] .ms-btn,
[data-theme="suave"] .kc2-btn,
[data-theme="suave"] .sim-btn,
[data-theme="suave"] .am-btn-refresh {
  border-radius: 8px;
}
[data-theme="suave"] .form-group input,
[data-theme="suave"] .form-group select,
[data-theme="suave"] .form-group textarea,
[data-theme="suave"] .search-input,
[data-theme="suave"] .rt-filter-input,
[data-theme="suave"] .sim-input,
[data-theme="suave"] .sim-textarea,
[data-theme="suave"] .am-input,
[data-theme="suave"] .am-textarea,
[data-theme="suave"] .pn-select,
[data-theme="suave"] .pn-search-input,
[data-theme="suave"] .orders-search-input {
  border-radius: 8px;
  background: #ffffff;
}
[data-theme="suave"] .form-group label {
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  color: var(--text2);
}

/* No print os cartões são chapados: branco, borda fina de 1px e nenhuma
   sombra em repouso. A sombra aparece só no hover, como resposta ao mouse. */
[data-theme="suave"] .metric-card,
[data-theme="suave"] .section-card,
[data-theme="suave"] .chart-card {
  border-color: var(--border);
  box-shadow: none;
}
[data-theme="suave"] .metric-card:hover {
  box-shadow: 0 4px 14px rgba(24,18,38,.07);
}

/* Tabelas: cabeçalho claro, sem caixa alta agressiva. */
[data-theme="suave"] .data-table th,
[data-theme="suave"] .rt-th {
  background: #f4f2f6;
  color: var(--text2);
  letter-spacing: .02em;
}
[data-theme="suave"] .data-table tr:hover td { background: #faf9fb; }

/* Modal e sobreposições */
[data-theme="suave"] .modal-header { background: var(--surface); border-bottom: 1px solid var(--border); }
[data-theme="suave"] .modal-overlay,
[data-theme="suave"] .pn-modal-overlay,
[data-theme="suave"] .am-modal-overlay { background: rgba(24,18,38,.38); }

/* Scrollbar discreta, combinando com o cinza do menu */
[data-theme="suave"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="suave"] ::-webkit-scrollbar-thumb { background: #d6d3dc; border-radius: 3px; }

/* ===== MOBILE =====
   Só cor; a geometria da gaveta e da barra inferior continua
   sendo a do style.css, que já foi ajustada para celular. */
[data-theme="suave"] .topbar-logo-mobile,
[data-theme="suave"] .sidebar-logo-img { filter: brightness(0) invert(1); }
[data-theme="suave"] .sidebar-mobile-close { color: rgba(255,255,255,.85); }
[data-theme="suave"] .mobile-bottom-nav {
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(24,18,38,.07);
}
[data-theme="suave"] .mbn-item { color: var(--text2); }
[data-theme="suave"] .mbn-item.active { color: var(--sv-roxo); }

/* ===== LOGIN =====
   O login aparece antes de saber quem é o usuário, então na prática
   só cai aqui se o tema já estiver salvo neste navegador. */
[data-theme="suave"] .login-page {
  background: linear-gradient(160deg, #eef1f7 0%, #f7f7f8 55%, #e9eef7 100%);
}