:root {
/* Paleta redesign (Claude Design — "MagnooSystem Redesign") */
--primary-color: #8fb8a8;
--primary-light: #a4c8b9;
--primary-dark: #6fa090;
--secondary-color: #787f86;
--success-color: #8fb8a8;
--danger-color: #c08a6e;
--warning-color: #c9a86e;
--info-color: #9aa0a6;
--dark-color: #eceded;
--light-bg: #08090a;
--white: #15171a;
--border-color: #1e2024;
--border-strong: #24272c;
--text-2: #9aa0a6;
--text-3: #787f86;
--text-4: #6b7178;
--text-disabled: #565c63;
--card-shadow: none;
--card-shadow-hover: none;
}
/* Tokens nativos do Bootstrap 5.3 (data-bs-theme="dark" no ) alinhados
à paleta do redesign — isso já cobre automaticamente componentes padrão
(modal, dropdown, form-select, botões, links, tabelas) sem precisar
sobrescrever cada classe individualmente. */
[data-bs-theme="dark"] {
--bs-body-bg: #08090a;
--bs-body-color: #c3c7cb;
--bs-emphasis-color: #eceded;
--bs-secondary-color: #9aa0a6;
--bs-secondary-bg: #15171a;
--bs-tertiary-bg: #1b1d21;
--bs-tertiary-color: #787f86;
--bs-border-color: #1e2024;
--bs-border-color-translucent: #24272c;
--bs-font-sans-serif: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--bs-primary: #8fb8a8; --bs-primary-rgb: 143, 184, 168;
--bs-success: #8fb8a8; --bs-success-rgb: 143, 184, 168;
--bs-danger: #c08a6e; --bs-danger-rgb: 192, 138, 110;
--bs-warning: #c9a86e; --bs-warning-rgb: 201, 168, 110;
--bs-info: #9aa0a6; --bs-info-rgb: 154, 160, 166;
--bs-secondary: #787f86; --bs-secondary-rgb: 120, 127, 134;
--bs-link-color: #8fb8a8; --bs-link-color-rgb: 143, 184, 168;
--bs-link-hover-color: #a4c8b9; --bs-link-hover-color-rgb: 164, 200, 185;
--bs-modal-bg: #15171a;
--bs-modal-color: #eceded;
--bs-modal-border-color: #1e2024;
--bs-modal-header-border-color: #1e2024;
--bs-modal-footer-border-color: #1e2024;
--bs-dropdown-bg: #15171a;
--bs-dropdown-color: #c3c7cb;
--bs-dropdown-border-color: #1e2024;
--bs-dropdown-link-color: #c3c7cb;
--bs-dropdown-link-hover-color: #eceded;
--bs-dropdown-link-hover-bg: #1b1d21;
--bs-table-border-color: #1e2024;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--light-bg);
color: #c3c7cb;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
}
a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--primary-light); }
.sidebar {
position: fixed;
top: 0;
left: 0;
/* 100vh no mobile é calculado contra a viewport "cheia" (barra de
endereço recolhida) — com a barra visível (estado normal ao
abrir a página), a sidebar ficava mais alta que a tela de
verdade e o bloco do usuário no rodapé saía cortado embaixo.
100dvh acompanha a altura visível real; navegadores sem
suporte ignoram a linha e ficam só com o 100vh de fallback. */
height: 100vh;
height: 100dvh;
width: 260px;
background: #121316;
border-right: 1px solid var(--border-color);
color: var(--dark-color);
padding-top: 0;
z-index: 1000;
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 24px 20px;
padding-top: calc(24px + env(safe-area-inset-top));
border-bottom: 1px solid var(--border-color);
}
.sidebar .logo {
text-align: left;
padding: 0;
border: none;
margin: 0;
}
.sidebar .logo h2 {
margin: 0;
color: var(--dark-color);
font-family: 'Barlow Condensed', 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.3rem;
letter-spacing: 0.01em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
}
.brand-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.brand-icon-lg {
width: 28px;
height: 28px;
}
.sidebar .logo small {
color: var(--text-4);
font-size: 0.7rem;
display: block;
margin-top: 4px;
margin-left: 38px;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 16px 12px;
}
.sidebar .nav-item {
padding: 9px 10px;
cursor: pointer;
transition: all 0.15s ease;
border-radius: 9px;
margin-bottom: 2px;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-2);
display: flex;
align-items: center;
gap: 11px;
}
.sidebar .nav-item:hover {
background: #181a1e;
color: var(--dark-color);
}
.sidebar .nav-item.active {
background: #1b1d21;
color: var(--dark-color);
font-weight: 600;
box-shadow: none;
}
.sidebar .nav-item i {
font-size: 1rem;
width: 20px;
text-align: center;
color: var(--text-4);
}
.sidebar .nav-item.active i {
color: var(--primary-color);
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--border-color);
}
/* Garante visibilidade do item Plataforma para superadmins */
body.is-superadmin #nav-saas,
body.is-superadmin #nav-saas-separator,
body.is-superadmin #nav-saas-label {
display: block !important;
}
body.is-superadmin #nav-saas {
display: flex !important;
}
.main-content {
margin-left: 260px;
padding: 24px 32px;
min-height: 100vh;
min-height: 100dvh;
}
.page-header {
margin-bottom: 28px;
}
.page-header h4 {
font-weight: 600;
color: var(--dark-color);
font-size: 1.35rem;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 12px;
}
.page-header h4 i {
color: var(--primary-color);
}
.page-header .subtitle {
color: var(--text-3);
font-size: 0.9rem;
margin-top: 4px;
}
.stat-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 13px;
box-shadow: none;
transition: border-color 0.15s ease;
overflow: hidden;
position: relative;
}
.stat-card:hover {
border-color: var(--border-strong);
}
.stat-card .stat-icon {
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.stat-card .stat-value {
font-size: 1.65rem;
font-weight: 600;
color: var(--dark-color);
line-height: 1.2;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
font-size: 0.85rem;
color: var(--text-3);
font-weight: 500;
}
/* .card-stat — usado em Financeiro/Tributos/Relatórios (mesma linguagem
visual do .stat-card, mas com marcação própria: .icon em vez de
.stat-icon). Não existia estilo dedicado antes do redesign. */
.card-stat {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 13px;
}
.card-stat .icon {
width: 44px;
height: 44px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
background: #1b1d21 !important;
color: var(--text-3) !important;
}
.card-stat .stat-value,
.card-stat h3 {
color: var(--dark-color);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.card-stat .stat-label,
.card-stat small {
color: var(--text-3);
}
.content-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 13px;
box-shadow: none;
overflow: hidden;
}
.content-card .card-header {
padding: 15px 20px;
border-bottom: 1px solid var(--border-color);
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}
.content-card .card-header h5 {
font-weight: 600;
color: var(--dark-color);
margin: 0;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 8px;
}
.content-card .card-body {
padding: 0;
}
.table-container {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 13px;
padding: 20px;
}
.dashboard-list-scroll {
max-height: 340px;
overflow-y: auto;
}
.table {
margin: 0;
color: var(--dark-color);
}
.table thead th {
background: #121316;
padding: 12px 20px;
font-weight: 500;
color: var(--text-4);
font-size: 0.68rem;
font-family: 'IBM Plex Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.08em;
border: none;
border-bottom: 1px solid var(--border-color);
}
.table tbody td {
padding: 14px 20px;
border-color: #1b1d21;
vertical-align: middle;
color: var(--dark-color);
}
.table tbody tr:hover {
background: #181a1e;
}
.table tbody tr td:first-child {
font-weight: 500;
color: var(--dark-color);
}
.table tbody tr.table-warning td {
background: #201c12 !important;
color: #d9bc84 !important;
}
.btn-primary {
background: var(--primary-color);
border: none;
color: #0e0f11;
padding: 10px 18px;
border-radius: 10px;
font-weight: 600;
transition: all 0.15s;
}
.btn-primary:hover {
background: var(--primary-light);
color: #0e0f11;
transform: none;
}
.btn-success {
background: var(--success-color);
border: none;
color: #0e0f11;
}
.btn-success:hover { background: var(--primary-light); color: #0e0f11; }
.btn-danger {
background: var(--danger-color);
border: none;
color: #0e0f11;
}
.btn-danger:hover { background: #cc9a80; color: #0e0f11; }
.btn-info {
background: #9fb8c2;
border: none;
color: #0e0f11;
}
.btn-info:hover { background: #b3c8d1; color: #0e0f11; }
.btn-warning {
background: var(--warning-color);
border: none;
color: #0e0f11;
}
.btn-warning:hover { background: #d9bc84; color: #0e0f11; }
.btn-secondary {
background: #22252a;
border: 1px solid var(--border-strong);
color: var(--dark-color);
}
.btn-secondary:hover { background: #282c31; border-color: #33373d; }
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-dark,
.btn-outline-light {
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text-2);
}
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover {
background: #181a1e;
border-color: #33373d;
color: var(--dark-color);
}
.btn-action {
padding: 6px 10px;
border-radius: 8px;
margin: 0 2px;
}
/* Status por "peso" — fundo suave + texto colorido + pontinho antes do
texto (::before, herda a cor do texto via currentColor, então não
precisa de uma variável separada por status). */
.status-badge {
padding: 4px 9px 4px 7px;
border-radius: 6px;
font-size: 0.72rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.status-badge::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Grupo neutro */
.status-aberta,
.status-faturado,
.status-entregue,
.status-garantia,
.status-garantia_entregue,
.status-pendente { background: #22252a; color: var(--text-2); }
/* Grupo aviso */
.status-aguardando_aprovacao,
.status-aguardando_peca,
.status-entregue_a_prazo { background: #2a251c; color: var(--warning-color); }
/* Grupo acento (positivo) */
.status-aprovado,
.status-em_andamento,
.status-normal,
.status-normal_entregue,
.status-pronta,
.status-pago { background: #1c2a25; color: var(--primary-color); }
/* Grupo perigo */
.status-cancelada,
.status-cancelada_entregue,
.status-atrasado,
.status-cancelado { background: #2a231e; color: var(--danger-color); }
.modal-header {
background: var(--white);
color: var(--dark-color);
border-radius: 0;
padding: 20px 24px;
border-bottom: 1px solid var(--border-color);
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
}
.form-label {
font-weight: 500;
color: var(--text-2);
margin-bottom: 6px;
font-size: 0.85rem;
}
.form-control, .form-select {
background: #15171a;
border: 1px solid var(--border-strong);
color: var(--dark-color);
border-radius: 10px;
padding: 10px 14px;
transition: all 0.2s;
}
.form-select {
padding-right: 2.25rem;
}
.form-control:focus, .form-select:focus {
background: #15171a;
color: var(--dark-color);
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(143, 184, 168, 0.15);
}
.form-control::placeholder { color: var(--text-disabled); opacity: 1; }
.bg-light {
background-color: #1b1d21 !important;
color: var(--dark-color) !important;
}
.form-control.bg-light, .bg-light.form-control {
background: #101113 !important;
color: var(--text-3) !important;
}
.form-check-input {
background-color: #15171a;
border-color: var(--border-strong);
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.form-check-label { color: var(--text-2); }
.search-box {
position: relative;
}
.search-box input {
padding-left: 44px;
border-radius: 10px;
}
.search-box i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-disabled);
}
.quick-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.quick-actions .btn {
padding: 8px 16px;
border-radius: 10px;
font-size: 0.85rem;
}
.whatsapp-btn {
background: #25d366;
border: none;
}
.whatsapp-btn:hover {
background: #128c7e;
}
.empty-state {
padding: 60px 20px;
text-align: center;
}
.empty-state i {
font-size: 3.4rem;
color: var(--text-disabled);
margin-bottom: 16px;
}
.empty-state h5 {
color: var(--dark-color);
margin-bottom: 8px;
}
.empty-state p {
color: var(--text-3);
font-size: 0.9rem;
}
.nav-tabs {
border: none;
padding: 0 24px;
background: #121316;
border-bottom: 1px solid var(--border-color);
}
.nav-tabs .nav-link {
border: none;
padding: 16px 20px;
color: var(--text-3);
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.15s;
}
.nav-tabs .nav-link:hover {
color: var(--dark-color);
border-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--dark-color);
border-bottom-color: var(--primary-color);
background: transparent;
}
.loading-spinner {
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.toast-container {
position: fixed;
top: 24px;
right: 24px;
z-index: 9999;
}
.toast {
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.45);
background: var(--white);
color: var(--dark-color);
border: 1px solid var(--border-color);
}
/* === MOBILE TOPBAR === */
.mobile-topbar {
display: none;
position: fixed;
top: 0; left: 0; right: 0;
height: 56px;
/* status bar-style="black-translucent" (ver index.html) sobrepõe
o conteúdo em vez de reservar espaço — sem isso o botão de
menu ficava embaixo do relógio/notch em iPhones. */
height: calc(56px + env(safe-area-inset-top));
padding-top: env(safe-area-inset-top);
background: #121316;
border-bottom: 1px solid var(--border-color);
z-index: 1050;
align-items: center;
padding-left: 16px; padding-right: 16px;
gap: 12px;
}
.mobile-topbar .hamburger-btn {
background: none; border: none;
color: var(--dark-color); font-size: 1.5rem;
padding: 4px 8px; cursor: pointer;
line-height: 1;
}
.mobile-topbar .mobile-logo {
color: var(--dark-color);
font-family: 'Barlow Condensed', 'Manrope', sans-serif;
font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
font-size: 1.15rem; flex: 1;
display: flex; align-items: center; gap: 8px;
}
/* === SIDEBAR OVERLAY === */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.6);
z-index: 1040;
}
.sidebar-overlay.active { display: block; }
/* === TABLET (1024px) === */
@media (max-width: 1024px) {
.sidebar { width: 80px; }
.sidebar .logo h2 span,
.sidebar .logo small,
.sidebar .nav-item span,
.user-info, .sidebar-user i.bi-chevron-up { display: none; }
.sidebar .nav-item { justify-content: center; padding: 14px; }
.sidebar-user {
justify-content: center; padding: 14px 16px;
padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.main-content { margin-left: 80px; }
}
/* === MOBILE (768px) === */
@media (max-width: 768px) {
.mobile-topbar { display: flex; }
.sidebar {
position: fixed;
top: 0; left: -280px;
width: 260px; height: 100vh; height: 100dvh;
z-index: 1100;
transition: left 0.28s ease;
/* restaura textos que tablet escondia */
}
.sidebar .logo h2 span,
.sidebar .logo small,
.sidebar .nav-item span,
.user-info, .sidebar-user i.bi-chevron-up { display: unset !important; }
.sidebar .nav-item { justify-content: flex-start; padding: 12px 16px; }
.sidebar-user {
justify-content: flex-start; padding: 14px 16px;
padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.sidebar.mobile-open { left: 0; }
.main-content {
margin-left: 0;
padding: 68px 12px 20px;
padding-top: calc(68px + env(safe-area-inset-top));
padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
/* Page header */
.page-header { margin-bottom: 16px; }
.page-header h4 { font-size: 1.1rem; }
/* Card headers — empilha título e botões */
.content-card .card-header {
flex-wrap: wrap;
gap: 8px;
padding: 14px 16px;
}
.content-card .card-header h5 { font-size: 0.95rem; }
/* Tabelas — scroll horizontal */
.content-card .card-body,
.tab-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Nav tabs — scroll horizontal sem quebra */
.nav-tabs {
overflow-x: auto; flex-wrap: nowrap;
white-space: nowrap; padding: 0 8px;
scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { padding: 12px 14px; white-space: nowrap; }
/* Stat cards */
.stat-card .stat-value { font-size: 1.3rem; }
.stat-card .stat-label { font-size: 0.78rem; }
/* Botões de ação menores */
.btn-action { padding: 5px 8px; font-size: 0.78rem; }
.quick-actions { flex-wrap: wrap; gap: 6px; }
.quick-actions .btn { font-size: 0.8rem; padding: 6px 12px; }
/* Modais no mobile — painel de tela cheia com cabeçalho e rodapé
fixos e apenas o corpo rolando. Sem isso, um modal mais alto
que a viewport rolava inteiro (cabeçalho some ao descer) e,
como o body tem overflow-x:hidden, qualquer conteúdo interno
que estourasse a largura ficava cortado sem chance de rolar
até ele (ex.: botão "Salvar" sumindo no rodapé). */
.modal {
padding: 0 !important;
}
.modal-dialog {
margin: 0 auto;
max-width: 100%;
width: 100%;
height: 100vh;
height: 100dvh;
display: flex;
align-items: stretch;
}
.modal-dialog.modal-lg,
.modal-dialog.modal-xl { max-width: 100%; }
.modal-content {
width: 100%;
height: 100%;
max-height: 100%;
border-radius: 0;
overflow: hidden;
}
.modal-header,
.modal-footer {
flex-shrink: 0;
}
/* Modal cobre a tela inteira (inclusive por trás do notch/status
bar); sem isso o título/X do cabeçalho e os botões do rodapé
ficam embaixo do notch ou da barra de gestos. */
.modal-header {
padding-top: calc(16px + env(safe-area-inset-top));
}
.modal-footer {
flex-wrap: wrap;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.modal-body {
padding: 16px;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* Nenhum item de linha flexível dentro de modal deve conseguir
forçar largura maior que a tela (ex.:
nativo, que ignora max-width em alguns webviews). */
.modal-body .d-flex { flex-wrap: wrap; }
.modal-body input[type="file"].form-control {
max-width: 100% !important;
flex: 1 1 160px;
}
/* Toast reposicionado */
.toast-container { top: 64px; right: 12px; left: 12px; max-width: 100%; }
.toast { width: 100%; }
/* Tabela interna — fonte menor */
.table thead th { font-size: 0.62rem; padding: 10px 10px; }
.table tbody td { padding: 12px 10px; font-size: 0.85rem; }
/* Perm grid no modal de usuários */
.perm-grid { font-size: 11px; gap: 4px 8px; }
/* Pendências de Suprimentos (OS) — cabeçalho do card empilha */
.pendencia-card-header {
align-items: flex-start !important;
}
.pendencia-card-header-info {
width: 100%;
}
.pendencia-card-header > div:last-child {
width: 100%;
justify-content: flex-start !important;
}
#pendencias-lista .table thead th,
#pendencias-lista .table tbody td {
white-space: nowrap;
}
#pendencias-lista .table tbody td:nth-child(2) {
white-space: normal;
min-width: 140px;
}
/* Nova OS — no mobile o painel lateral (#modal-os) ocupa a tela toda */
#modal-os .modal-dialog {
width: 100%;
max-width: 100%;
}
/* Aba Fotos da OS — botão de câmera, "ou", input de arquivo e
botão Enviar em uma coluna só. Um nativo
pode ignorar max-width em alguns navegadores/webviews; ficando
cada item em sua própria linha isso nunca gera overflow. */
#os-tab-fotos .d-flex {
flex-direction: column;
align-items: stretch !important;
}
#os-tab-fotos .d-flex > .btn,
#os-tab-fotos .d-flex > input[type="file"] {
width: 100%;
max-width: 100% !important;
}
#os-tab-fotos .d-flex > span.text-muted {
text-align: center;
}
/* Configurações — nav lateral + conteúdo em colunas fixas não
cabe no mobile; empilha e transforma o nav em linha rolável. */
#section-configuracoes .content-card {
display: block !important;
}
#section-configuracoes .content-card > div:first-child {
position: static !important;
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
border-right: none !important;
border-bottom: 1px solid var(--border-color);
padding: 8px 10px !important;
-webkit-overflow-scrolling: touch;
}
#section-configuracoes .cfg-nav-link { white-space: nowrap; }
#section-configuracoes .content-card > div:last-child {
padding: 16px !important;
max-width: 100% !important;
}
/* Painel SaaS — cabeçalho e grid de estatísticas responsivos */
#saas-panel > div > div:first-child {
flex-wrap: wrap !important;
gap: 10px !important;
}
#saas-stats-bar {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* === SMALL MOBILE (480px) === */
@media (max-width: 480px) {
.main-content {
padding: 64px 8px 16px;
padding-top: calc(64px + env(safe-area-inset-top));
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.stat-card .stat-value { font-size: 1.1rem; }
}
.dashboard-stat {
padding: 20px 24px;
}
.dashboard-stat .stat-row {
display: flex;
align-items: center;
gap: 16px;
}
.list-item {
padding: 16px 20px;
border-bottom: 1px solid #1b1d21;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.15s;
}
.list-item:hover {
background: #181a1e;
}
.list-item:last-child {
border-bottom: none;
}
.list-item .item-info h6 {
font-weight: 600;
color: var(--dark-color);
margin-bottom: 2px;
}
.list-item .item-info small {
color: var(--text-3);
}
#login-screen {
position: fixed; inset: 0; z-index: 9999;
background: radial-gradient(circle at 15% 20%, #14161a 0%, #08090a 55%);
display: flex; align-items: center; justify-content: center;
}
#login-screen.hidden { display: none !important; }
.login-card {
background: #121316;
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 40px 36px 32px;
width: 100%; max-width: 420px;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 {
color: var(--dark-color);
font-family: 'Barlow Condensed', 'Manrope', sans-serif;
font-size: 1.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.login-logo small { color: var(--text-4); font-size: 0.8rem; display: block; margin-top: 4px; }
.login-field { margin-bottom: 18px; }
.login-field label { color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 6px; }
.login-field input {
width: 100%; background: #15171a;
border: 1px solid var(--border-strong);
border-radius: 10px; color: var(--dark-color); padding: 11px 14px;
font-size: 14px; outline: none; transition: border 0.2s;
}
.login-field input:focus { border-color: var(--primary-color); background: #15171a; box-shadow: 0 0 0 3px rgba(143,184,168,0.12); }
.login-field input::placeholder { color: var(--text-disabled); }
.login-btn {
width: 100%; padding: 12px; border: none; border-radius: 10px;
background: var(--primary-color);
color: #0e0f11; font-size: 15px; font-weight: 600;
cursor: pointer; margin-top: 8px; transition: opacity 0.2s, transform 0.1s;
}
.login-btn:hover { background: var(--primary-light); }
.login-btn:active { transform: scale(0.98); }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-error {
background: #2a231e; border: 1px solid #3a2c22;
border-radius: 8px; color: #d7a58c; font-size: 13px;
padding: 10px 14px; margin-bottom: 16px; display: none;
}
.login-error.show { display: block; }
/* Painel esquerdo (hero) da tela de login — ver .login-hero abaixo */
.login-hero {
display: none;
flex-direction: column;
justify-content: space-between;
gap: 40px;
max-width: 440px;
padding: 48px;
}
.login-hero .hero-brand { display: flex; align-items: center; gap: 11px; }
.login-hero .hero-brand .brand-icon { width: 30px; height: 30px; }
.login-hero .hero-brand span {
font-family: 'Barlow Condensed', 'Manrope', sans-serif;
font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em;
color: var(--dark-color);
}
.login-hero h2 {
margin: 0; font-size: 2.1rem; line-height: 1.15; font-weight: 600;
color: var(--dark-color); letter-spacing: -0.03em;
}
.login-hero p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-3); }
.login-hero .hero-stats { display: flex; gap: 28px; }
.login-hero .hero-stats .stat-num {
font-size: 19px; font-weight: 600; color: var(--dark-color);
font-variant-numeric: tabular-nums; display: block;
}
.login-hero .hero-stats .stat-label { font-size: 11.5px; color: var(--text-4); }
@media (min-width: 992px) {
#login-screen { justify-content: center; gap: 0; }
#login-screen .login-shell {
display: flex; align-items: stretch; width: 100%; max-width: 980px;
border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden;
}
.login-hero { display: flex; background: #121316; border-right: 1px solid var(--border-color); }
.login-card {
border: none; border-radius: 0; flex: 1;
display: flex; align-items: center; justify-content: center;
}
}
/* Usuário logado na sidebar */
.sidebar-user {
padding: 14px 16px; border-top: 1px solid var(--border-color);
display: flex; align-items: center; gap: 10px; cursor: pointer;
/* iPhones sem botão físico reservam uma faixa embaixo pro gesto
de "voltar à home" — sem isso, esse bloco (o último item
visível da sidebar) fica colado ou parcialmente atrás dela. */
padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.sidebar-user:hover { background: #181a1e; }
.user-avatar {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; color: var(--text-2); flex-shrink: 0;
background: #25282d;
}
.user-info { flex: 1; min-width: 0; }
.user-info .u-name { color: var(--dark-color); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .u-role { color: var(--text-4); font-size: 11px; }
.nav-item.disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; }
/* Gerenciar usuários modal */
.perm-grid { display: grid; grid-template-columns: 1fr repeat(4, auto); gap: 6px 12px; align-items: center; font-size: 13px; }
.perm-grid .perm-head { font-size: 11px; color: var(--text-3); text-align: center; }
.perm-grid input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; margin: auto; display: block; accent-color: var(--primary-color); }
.setor-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; color: #fff; }
/* Configurações — nav lateral de seções (tela 1g do redesign) */
.cfg-nav-link {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 11px;
border-radius: 9px;
font-size: 13px;
font-weight: 500;
color: var(--text-2);
}
.cfg-nav-link:hover { background: #181a1e; color: var(--dark-color); }
.cfg-nav-link.active,
.cfg-nav-link:target { background: #1b1d21; color: var(--dark-color); font-weight: 600; }
/* === Utilitários Bootstrap usados nos módulos JS (badges, alerts,
texto) — os módulos geram essas classes diretamente via template
string, então são recolorados aqui em vez de no JS. === */
.badge.text-dark { color: inherit !important; }
.badge.bg-success { background-color: #1c2a25 !important; color: var(--primary-color) !important; }
.badge.bg-primary { background-color: #1c2a25 !important; color: var(--primary-color) !important; }
.badge.bg-warning { background-color: #2a251c !important; color: var(--warning-color) !important; }
.badge.bg-danger { background-color: #2a231e !important; color: var(--danger-color) !important; }
.badge.bg-secondary { background-color: #22252a !important; color: var(--text-2) !important; }
.badge.bg-info { background-color: #1b2226 !important; color: #9fb8c2 !important; }
.badge.bg-light { background-color: #1b1d21 !important; color: var(--text-2) !important; }
.alert { border-radius: 10px; border: 1px solid; font-size: 0.85rem; }
.alert-success { background: #182420; border-color: #223530; color: #a9c9bd; }
.alert-danger { background: #2a1f1c; border-color: #3a2c26; color: #d9a68f; }
.alert-warning { background: #241f14; border-color: #362d1c; color: #d9bc84; }
.alert-info { background: #1a2226; border-color: #243036; color: #9fb8c2; }
.alert-secondary { background: #1b1d21; border-color: var(--border-strong); color: var(--secondary-color); }
.text-success { color: var(--primary-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: #9fb8c2 !important; }
.text-muted { color: var(--text-3) !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-dark { color: var(--dark-color) !important; }
/* Nova OS (#modal-os) — painel deslizando da direita em vez de modal
centralizado, sem tocar no mecanismo Bootstrap (abre/fecha/backdrop
continuam via data-bs-dismiss / bootstrap.Modal).
Restrito a telas > 768px: no mobile isso tinha especificidade igual
e vinha depois no arquivo que a regra mobile (que faz o painel
ocupar 100% da tela), então sempre vencia a cascata e forçava
620px de largura ancorados à direita — como `.modal` do Bootstrap
tem overflow-x:hidden, a metade esquerda do painel (que é onde
ficava boa parte do conteúdo) saía cortada, de forma inconsistente
conforme o que calhava de cair dentro da fatia de 375px visível. */
@media (min-width: 769px) {
#modal-os .modal-dialog {
margin: 0 0 0 auto;
max-width: 620px;
width: 620px;
height: 100vh;
height: 100dvh;
}
#modal-os .modal-content {
height: 100%;
border-radius: 0;
border: none;
border-left: 1px solid var(--border-strong);
}
#modal-os .modal-body {
overflow-y: auto;
}
#modal-os.fade .modal-dialog {
transition: transform 0.25s ease-out;
transform: translate(40px, 0);
}
#modal-os.show .modal-dialog {
transform: translate(0, 0);
}
}