/* ============================================================ THEME.CSS — Design system do sistema (claro/escuro) Substitui visualmente o template antigo por completo. Carregar SEMPRE por último no (depois de css/style.css). Tema controlado por data-theme no , via /js/theme.js. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* superfícies */ --bg-body: #f6f7fb; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-inset: #f8f9fc; --bg-hover: #f1f3f9; /* texto */ --text-primary: #16181d; --text-secondary: #3f4650; --text-muted: #7a828e; /* bordas */ --border: #e6e8ee; --border-strong: #d4d8e1; /* marca */ --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: rgba(79, 70, 229, 0.09); --accent-grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --accent-glow: 0 4px 14px rgba(79, 70, 229, 0.35); /* semânticas */ --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #0284c7; /* profundidade */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.16); --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.05), 0 24px 48px -16px rgba(16, 24, 40, 0.24); /* forma */ --radius: 16px; --radius-sm: 10px; --radius-xs: 8px; --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } [data-theme="dark"] { --bg-body: #0d0f14; --bg-surface: #14171e; --bg-elevated: #1a1e27; --bg-inset: #10131a; --bg-hover: #222735; --text-primary: #e7e9ee; --text-secondary: #b9bfca; --text-muted: #8b93a1; --border: #232936; --border-strong: #303848; --accent: #818cf8; --accent-hover: #a5b0fc; --accent-soft: rgba(129, 140, 248, 0.14); --accent-grad: linear-gradient(135deg, #818cf8 0%, #6366f1 100%); --accent-glow: 0 4px 18px rgba(99, 102, 241, 0.45); --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #38bdf8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 56px -12px rgba(0, 0, 0, 0.65); color-scheme: dark; /* controles nativos escurecem sozinhos */ } /* ---------- 2. Base ---------- */ html { background-color: var(--bg-body); } body { background-color: var(--bg-body) !important; background-image: radial-gradient(1100px 480px at 85% -180px, var(--accent-soft), transparent 65%); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary) !important; font-family: var(--font-ui) !important; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .content-wrapper, .main-panel, .page-body-wrapper, .container-scroller { background: transparent !important; color: var(--text-primary); font-family: var(--font-ui); } .content-wrapper { padding: 2rem 1.25rem; } body, .card, .form-control, .modal-content, .table, .btn, .app-topbar { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } h1, h2, h3, h4, h5, h6 { color: var(--text-primary); font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.015em; } p, span, small, div, li, td, th { color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } hr { border-color: var(--border); opacity: 1; } b, strong { font-weight: 600; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- 3. Cards ---------- */ .card { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important; overflow: hidden; } .card .card-body { color: var(--text-primary); padding: 1.75rem; } .card .card-title, .card h3, .card h4 { font-weight: 700; letter-spacing: -0.015em; margin-bottom: 1.1rem; } .card-description { color: var(--text-muted) !important; } .grid-margin { margin-bottom: 1.5rem; } /* ---------- 4. Botões ---------- */ .btn { font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; letter-spacing: 0.15px; border-radius: var(--radius-sm) !important; padding: 0.62rem 1.15rem; border-width: 1px; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-sm, .btn-group-sm > .btn { padding: 0.35rem 0.7rem; font-size: 12.5px; } .btn i, .btn .mdi { font-size: 1.05em; } .btn-primary { background: var(--accent-grad) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: var(--accent-glow); } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); box-shadow: var(--accent-glow); } .btn-outline-primary { color: var(--accent) !important; border-color: var(--accent) !important; background: transparent !important; } .btn-outline-primary:hover { background: var(--accent-soft) !important; } .btn-success { background-color: var(--success) !important; border-color: var(--success) !important; color: #fff !important; } .btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; } .btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; } .btn-info { background-color: var(--info) !important; border-color: var(--info) !important; color: #fff !important; } .btn-secondary, .btn-light, .btn-dark { background-color: var(--bg-hover) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important; } .btn-secondary:hover, .btn-light:hover, .btn-dark:hover { background-color: var(--border) !important; } /* ---------- 5. Formulários ---------- */ label, .col-form-label { color: var(--text-secondary) !important; font-weight: 600; font-size: 13px; margin-bottom: 0.35rem; } .form-group { margin-bottom: 1.25rem; } .form-control, .custom-select, select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="search"] { background-color: var(--bg-inset) !important; color: var(--text-primary) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-ui); font-size: 14px; padding: 0.55rem 0.9rem; height: auto; } .form-control:focus, .custom-select:focus, textarea:focus, select:focus { background-color: var(--bg-surface) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; outline: none; } .form-control::placeholder { color: var(--text-muted) !important; opacity: 0.8; } .form-control:disabled, .form-control[readonly] { background-color: var(--bg-hover) !important; color: var(--text-muted) !important; } .input-group-text { background-color: var(--bg-inset) !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important; border-radius: var(--radius-sm); } .input-group .form-control { border-radius: var(--radius-sm); } .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group-prepend + .form-control, .input-group .border-left-0 { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Select2 — prefixo html vence os