/* Tokens espelhados de martinauto-tokens.css (Leads/Sales) — fonte única de verdade da identidade dos 4 sistemas. Valores exactos, não aproximados. Nomes --ink-soft/--surface-muted/--brand-dark/--radius mantidos como aliases legado (o resto do ficheiro já os usa); o resto do ficheiro deve preferir os nomes novos (--text-muted, --surface-sunken, --brand-strong, --radius-md) a partir de aqui. */ :root { --brand: #019ee4; --brand-strong: #0076ab; --brand-weak: #e8f6fd; --brand-rgb: 1 158 228; --ink: #142033; --text-muted: #64748b; --text-subtle: #8a98aa; --bg: #f4f7fb; --surface: #ffffff; --surface-sunken: #f1f5f9; --border: #e6e8ec; --border-strong: #cfd6df; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 1px rgba(16, 20, 26, 0.04); --shadow-md: 0 6px 20px rgba(15, 23, 38, 0.08); /* sidebar segue o tema (ver .app-sidebar) — não é mais um painel fixo */ --sidebar-bg: #14181f; --sidebar-active: #1f2530; --sidebar-text: #aab2c0; --sidebar-text-active: #ffffff; /* aliases legado */ --brand-dark: var(--brand-strong); --ink-soft: var(--text-muted); --surface-muted: var(--surface-sunken); --radius: var(--radius-md); } /* Dark mode — segue o SO por definição (ver script pre-paint no layout); o botão de tema fixa a escolha via data-bs-theme no (public/js/theme.js). */ @media (prefers-color-scheme: dark) { html:not([data-bs-theme="light"]) { --ink: #e8edf4; --text-muted: #9aa7b8; --text-subtle: #6b7888; --bg: #0f141b; --surface: #161d27; --surface-sunken: #1c2530; --border: #263041; --border-strong: #3a4763; --brand-weak: rgba(1, 158, 228, 0.16); color-scheme: dark; } } html[data-bs-theme="dark"] { --ink: #e8edf4; --text-muted: #9aa7b8; --text-subtle: #6b7888; --bg: #0f141b; --surface: #161d27; --surface-sunken: #1c2530; --border: #263041; --border-strong: #3a4763; --brand-weak: rgba(1, 158, 228, 0.16); color-scheme: dark; } /* ---- Ponte Bootstrap 5.3 → tokens (como o Sales/Leads fazem) ------------ */ :root { --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb); --bs-link-color: var(--brand); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand-strong); --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-subtle); --bs-emphasis-color: var(--ink); --bs-secondary-bg: var(--surface-sunken); --bs-tertiary-bg: var(--surface-sunken); --bs-border-color: var(--border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-border-radius-xl: var(--radius-lg); --bs-body-font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; --bs-body-font-size: 0.9375rem; } body { font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 0.9375rem; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -0.02em; } code, kbd, samp, pre, .font-monospace, .num, .mono, .detail-number, .doc-total__value, .tabular-nums { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; } .btn { border-radius: var(--radius-md); font-weight: 600; } .dropdown-menu { --bs-dropdown-border-color: var(--border); --bs-dropdown-border-radius: var(--radius-md); --bs-dropdown-link-active-bg: var(--brand); box-shadow: var(--shadow-md); } .alert { border-radius: var(--radius-md); } .table { --bs-table-color: var(--ink); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-sunken); --bs-table-hover-bg: var(--brand-weak); } /* ---------- App shell ---------- */ .app-shell { display: flex; min-height: 100vh; } /* A sidebar segue o tema da página (clara/escura), como o resto do Grupo — não é um painel escuro fixo. Por isso o logo tem duas versões (troca com data-bs-theme, ver .brand-logo--dark/--light mais abaixo). */ .app-sidebar { width: 224px; flex-shrink: 0; background: var(--surface); color: var(--ink-soft); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; } /* Igual ao .ma-sidebar__brand do Portal/Sales/Leads: mesma altura da topbar, logo alinhado à esquerda com 170px de largura. */ .app-sidebar .brand { min-height: 52px; display: flex; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--border); } .app-sidebar .brand .brand-logo { width: 170px; height: auto; } .brand-logo--light { display: none; } html[data-bs-theme="dark"] .brand-logo--dark { display: none; } html[data-bs-theme="dark"] .brand-logo--light { display: block; } .app-sidebar nav { flex: 1; padding: 16px 12px; overflow-y: auto; } .app-sidebar .nav-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); opacity: 0.8; padding: 10px 12px 6px; font-weight: 700; } .app-sidebar .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; margin-bottom: 2px; position: relative; transition: background 0.12s ease, color 0.12s ease; } .app-sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; opacity: 0.85; } .app-sidebar .nav-link:hover { background: var(--surface-muted); color: var(--ink); } .app-sidebar .nav-link.active { background: rgba(1, 158, 228, 0.14); color: var(--brand-dark); font-weight: 600; } .app-sidebar .nav-link.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 16px; background: var(--brand); border-radius: 0 2px 2px 0; } .app-sidebar .nav-link.active i { color: var(--brand); opacity: 1; } .app-sidebar .sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); } .app-sidebar .logout-btn { background: none; border: none; color: var(--ink-soft); font-size: 0.78rem; padding: 0; display: inline-flex; align-items: center; gap: 4px; } .app-sidebar .logout-btn:hover { color: var(--brand); } .app-main { flex: 1; margin-left: 224px; display: flex; flex-direction: column; min-height: 100vh; } .app-topbar { background: var(--bg); border-bottom: 1px solid var(--border); min-height: 52px; padding: 0.5rem 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30; } .app-topbar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } .crumb { font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); display: flex; align-items: center; gap: 0.4rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb b { color: var(--ink); font-weight: 600; } .crumb span { color: var(--ink-soft); opacity: 0.6; } .nav-toggle { display: none; background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--ink-soft); padding: 4px; flex-shrink: 0; } .nav-toggle:hover { color: var(--ink); } .topbar-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .topbar-link:hover { color: var(--brand); border-color: var(--brand); background: var(--surface-muted); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--ink-soft); font-size: 0.95rem; transition: color 0.12s ease, border-color 0.12s ease; } .theme-toggle:hover { color: var(--brand); border-color: var(--brand); } .theme-toggle__icon { width: 16px; height: 16px; } .theme-toggle__icon--light { display: none; } .theme-toggle.is-dark .theme-toggle__icon--dark { display: none; } .theme-toggle.is-dark .theme-toggle__icon--light { display: inline; } .notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--ink-soft); font-size: 0.95rem; transition: color 0.12s ease, border-color 0.12s ease; } .notif-bell:hover { color: var(--brand); border-color: var(--brand); } .notif-bell__badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 17px; text-align: center; } .notif-dropdown { width: 320px; max-width: 90vw; padding: 0; overflow: hidden; } .notif-dropdown__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; } .notif-dropdown__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.82rem; color: var(--ink); text-decoration: none; } .notif-dropdown__item:last-child { border-bottom: none; } .notif-dropdown__item:hover { background: var(--surface-muted); } .notif-dropdown__item small { color: var(--text-subtle); font-size: 0.7rem; } .notif-dropdown__empty { padding: 18px 14px; text-align: center; font-size: 0.82rem; color: var(--text-subtle); } /* Ficha do utilizador na topbar (avatar + nome + marca), com dropdown de logout */ .topbar-userchip { appearance: none; -webkit-appearance: none; font: inherit; line-height: 1.1; display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 999px; background: none; color: inherit; cursor: pointer; } .topbar-userchip:hover { border-color: var(--brand); } .topbar-userchip__avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .topbar-userchip__name { font-size: 0.78rem; font-weight: 600; color: var(--ink); line-height: 1.15; } .topbar-userchip__role { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.15; } .app-content { padding: 24px 28px 40px; flex: 1; } /* ---------- Cabeçalho de página (topo do conteúdo, mesmo peso do resto do Grupo) ---------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-eyebrow { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand-dark); margin: 0 0 0.25rem; } .page-title { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0; } .page-title em { font-style: normal; color: var(--brand); } .page-datebox { text-align: right; flex-shrink: 0; } .page-datebox__d { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); } .page-datebox__y { font-size: 0.6875rem; color: var(--ink-soft); opacity: 0.75; } /* ---------- Components ---------- */ .card { --bs-card-bg: var(--surface); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-header { background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; } .btn-primary { background: var(--brand); border-color: var(--brand); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); } .btn-outline-primary { color: var(--brand); border-color: var(--brand); } .btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); } .form-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border-strong); } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(1, 158, 228, 0.15); } .table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); border-bottom-width: 1px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .table td { padding-top: 0.35rem; padding-bottom: 0.35rem; vertical-align: middle; font-size: 0.92rem; } .text-marca-todas { color: var(--brand); font-weight: 600; } .badge { font-weight: 600; padding: 5px 9px; border-radius: 6px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); } /* ---------- Requisição: detalhe ---------- */ .detail-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 3px solid var(--ink); } .detail-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; } .detail-breadcrumb:hover { color: var(--brand); } .detail-number { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 2px 0 0; color: var(--ink); } .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; color: #fff; } .status-neutral { background: var(--ink-soft); } .status-preparado { background: #6b7280; } .status-aprovado { background: var(--brand); } .status-enviado { background: #7c3aed; } .status-fechado { background: #1a8a4c; } .status-anulado { background: #c53030; } .doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; } .doc-section { padding: 24px 26px; } .doc-section--split { border-top: 1px solid var(--border); } @media (min-width: 992px) { .doc-card:has(.doc-section--split) { display: grid; grid-template-columns: 1fr 1fr; } .doc-section--split { border-top: none; border-left: 1px solid var(--border); } } .doc-section__title { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 18px; } .section-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 0.9rem; color: #fff; flex-shrink: 0; } .section-icon--doc { background: var(--ink-soft); } .section-icon--vehicle { background: var(--brand); } .section-icon--lines { background: #7c3aed; } .section-icon--notes { background: #b45309; } .section-icon--actions { background: #1a8a4c; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px 22px; } .info-grid--divider { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); } .info-item--wide { grid-column: 1 / -1; } .info-item__label { font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .info-item__value { font-weight: 700; color: var(--ink); font-size: 1.02rem; } .info-item__value--text { font-weight: 400; font-size: 0.95rem; white-space: pre-line; } .tabular-nums { font-variant-numeric: tabular-nums; } .lines-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); background: var(--surface-muted); border-bottom: none; padding: 10px 12px; } .lines-table thead th:first-child { border-radius: 8px 0 0 8px; } .lines-table thead th:last-child { border-radius: 0 8px 8px 0; } .lines-table tbody td { padding: 12px; border-bottom: 1px solid var(--border); } .lines-table tbody tr:hover td { background: var(--surface-muted); } .doc-total { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; /* Barra de destaque sempre escura (como a sidebar), independente do tema. */ background: var(--sidebar-bg); color: #fff; } .doc-total__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.65); font-weight: 700; } .doc-total__value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; } .action-btn { color: #fff; border: none; font-weight: 600; } .action-btn--aprovado { background: var(--brand); } .action-btn--aprovado:hover { background: var(--brand-dark); color: #fff; } .action-btn--enviado { background: #7c3aed; } .action-btn--enviado:hover { background: #6524d6; color: #fff; } .action-btn--fechado { background: #1a8a4c; } .action-btn--fechado:hover { background: #146b3a; color: #fff; } .action-btn--anulado { background: #c53030; } .action-btn--anulado:hover { background: #a52626; color: #fff; } .stat-card .stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; } .stat-card .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; } .stat-card-btn { cursor: pointer; text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .stat-card-btn:hover { border-color: var(--brand); } .stat-card-btn:active { transform: scale(0.99); } .stat-card-btn.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(1, 158, 228, 0.18); } .stat-card-btn.active .stat-label { color: var(--brand); font-weight: 700; } #requisitions-table tbody tr { cursor: pointer; } .btn-link-reset { background: none; border: none; padding: 0; color: var(--brand); font-size: 0.85rem; font-weight: 600; text-decoration: underline; } /* ---------- Login ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #14181f 0%, #1f2530 55%, #2a3140 100%); padding: 20px; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-md); padding: 36px 32px; } .auth-card .auth-logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 20px; } .auth-card h1 { font-size: 1.2rem; font-weight: 700; text-align: center; margin-bottom: 4px; } .auth-card .subtitle { text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 24px; } /* DataTables (integração bootstrap5 — a maior parte já é Bootstrap nativo e segue [data-bs-theme=dark] sozinho via a ponte --bs-* acima; só o texto informativo próprio da lib precisa de reforço). */ html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length, html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--text-muted); } @media (max-width: 900px) { .nav-toggle { display: inline-flex; } .app-sidebar { transform: translateX(-100%); transition: transform 0.2s ease; z-index: 50; } .app-sidebar.is-open { transform: translateX(0); } .app-main { margin-left: 0; } }