/** * SMARTERBIM BOQ — Tema base (claro/escuro) * Tema escuro por defeito; alternância via data-theme no */ /* ── Variáveis: tema escuro (default) ── */ :root, [data-theme="dark"] { --color-bg: #0f1117; --color-bg-elevated: #1a1d27; --color-bg-card: #1e2230; --color-bg-input: #262a33; --color-bg-hover: #2d3344; --color-bg-sidebar: #14161e; --color-text: #e8eaed; --color-text-muted: #9aa0b0; --color-text-inverse: #0f1117; --color-border: #2e3344; --color-border-focus: #4a7cff; --color-primary: #4a7cff; --color-primary-hover: #3a6aef; --color-primary-muted: rgba(74, 124, 255, 0.15); --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-danger-muted: rgba(239, 68, 68, 0.12); --color-shadow: rgba(0, 0, 0, 0.35); --color-overlay: rgba(0, 0, 0, 0.5); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Cascadia Code", "Consolas", monospace; --sidebar-width: 240px; --header-height: 56px; --transition: 0.2s ease; /* Aliases legados (compatibilidade com templates antigos) */ --form-bg: var(--color-bg-input); --text-color: var(--color-text); --border-color: var(--color-border); --primary-color: var(--color-primary); } /* ── Variáveis: tema claro ── */ [data-theme="light"] { --color-bg: #f4f6f9; --color-bg-elevated: #ffffff; --color-bg-card: #ffffff; --color-bg-input: #ffffff; --color-bg-hover: #eef1f6; --color-bg-sidebar: #1e293b; --color-text: #1e293b; --color-text-muted: #64748b; --color-text-inverse: #ffffff; --color-border: #e2e8f0; --color-border-focus: #3b6fd9; --color-primary: #3b6fd9; --color-primary-hover: #2f5fc4; --color-primary-muted: rgba(59, 111, 217, 0.1); --color-shadow: rgba(15, 23, 42, 0.08); --color-overlay: rgba(15, 23, 42, 0.3); } /* ── Reset & base ── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 15px; -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); line-height: 1.5; min-height: 100vh; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-primary-hover); } img { max-width: 100%; height: auto; } /* ── Layout: sidebar + conteúdo ── */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--color-bg-sidebar); color: #cbd5e1; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto; transition: transform var(--transition); } .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-weight: 700; font-size: 1.1rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sidebar__nav { list-style: none; margin: 0; padding: 12px 0; flex: 1; } .sidebar__section { padding: 12px 20px 6px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; font-weight: 600; } .sidebar__link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #94a3b8; transition: background var(--transition), color var(--transition); border-left: 3px solid transparent; } .sidebar__link:hover, .sidebar__link--active { background: rgba(255, 255, 255, 0.06); color: #fff; border-left-color: var(--color-primary); } .sidebar__footer { padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .main-content { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: var(--header-height); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 50; } .topbar__title { font-size: 1.15rem; font-weight: 600; margin: 0; } .topbar__actions { display: flex; align-items: center; gap: 12px; } .content-wrapper { flex: 1; padding: 24px; max-width: 1400px; width: 100%; margin: 0 auto; } .content-body { transition: opacity var(--transition); } /* ── Cards ── */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 1px 3px var(--color-shadow); } .card__header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card__title { margin: 0; font-size: 1rem; font-weight: 600; } .card__body { padding: 20px; } .card__footer { padding: 14px 20px; border-top: 1px solid var(--color-border); background: var(--color-bg-hover); border-radius: 0 0 var(--radius-md) var(--radius-md); } /* ── Formulários ── */ .form-group { margin-bottom: 16px; } .form-label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); } .form-control, .form-select, textarea.form-control { width: 100%; padding: 8px 12px; font-family: inherit; font-size: 0.9rem; color: var(--color-text); background: var(--color-bg-input); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } .form-control:focus, .form-select:focus, textarea.form-control:focus { outline: none; border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-primary-muted); } .form-control:disabled, .form-control[readonly] { opacity: 0.7; cursor: not-allowed; background: var(--color-bg-hover); } .form-control--error { border-color: var(--color-danger); } .form-hint { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; } /* ── Botões ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.4; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition); text-decoration: none; white-space: nowrap; } .btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn--primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; } .btn--secondary { background: var(--color-bg-hover); color: var(--color-text); border-color: var(--color-border); } .btn--secondary:hover { background: var(--color-border); } .btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); } .btn--danger:hover { background: #dc2626; } .btn--ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; } .btn--ghost:hover { background: var(--color-bg-hover); color: var(--color-text); } .btn--sm { padding: 5px 10px; font-size: 0.8rem; } .btn--icon { padding: 8px; min-width: 36px; } /* Botão alternar tema */ .btn-theme-toggle { background: var(--color-bg-hover); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 6px 10px; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background var(--transition); } .btn-theme-toggle:hover { background: var(--color-primary-muted); } /* ── Tabelas ── */ .table-wrapper { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .table th { background: var(--color-bg-hover); font-weight: 600; color: var(--color-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .table tbody tr:hover { background: var(--color-bg-hover); } .table tbody tr:last-child td { border-bottom: none; } .table--striped tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } [data-theme="light"] .table--striped tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.02); } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ── Alertas & badges ── */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; font-size: 0.875rem; margin-bottom: 16px; } .alert--success { background: rgba(34, 197, 94, 0.1); border-color: var(--color-success); color: var(--color-success); } .alert--danger { background: var(--color-danger-muted); border-color: var(--color-danger); color: var(--color-danger); } .badge { display: inline-block; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: var(--color-primary-muted); color: var(--color-primary); } /* ── Utilitários ── */ .text-muted { color: var(--color-text-muted); } .text-right { text-align: right; } .text-center { text-align: center; } .d-flex { display: flex; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-2 { margin-top: 8px; } .mb-0 { margin-bottom: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ── Responsivo ── */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.is-open { transform: translateX(0); } .main-content { margin-left: 0; } .content-wrapper { padding: 16px; } }