/* ========================================================= GRZ ERP — Tema PRO (layout + componentes) --------------------------------------------------------- - Mantém Bootstrap 5 - Respeita preferências em: - Tokens principais ficam em static/css/app.css ========================================================= */ /* ------------------------- Tokens adicionais (layout) ------------------------- */ :root{ --sidebar-w: 268px; --sidebar-w-collapsed: 76px; --topbar-h: 56px; /* Sidebar (defaults para LIGHT) */ --sidebar-bg: #ffffff; --sidebar-border: rgba(15,23,42,.10); --sidebar-fg: #0f172a; --sidebar-muted: rgba(71,85,105,.92); --sidebar-hover: rgba(2,6,23,.04); --sidebar-active: color-mix(in srgb, var(--brand-500) 12%, transparent); --sidebar-active-bar: var(--brand-600); /* Topbar */ --topbar-bg: var(--surface); --topbar-border: var(--border); /* Controles */ --btn-radius: var(--control-radius); --btn-h: 38px; --btn-h-sm: 32px; /* UI */ --focus-ring: 0 0 0 .22rem color-mix(in srgb, var(--brand-500) 24%, transparent); } html[data-density="compact"]{ --btn-h: 34px; --btn-h-sm: 30px; } /* Sidebar em DARK continua “enterprise” */ html[data-theme="dark"]{ --sidebar-bg: #0b1220; --sidebar-border: rgba(148,163,184,.14); --sidebar-fg: #e2e8f0; --sidebar-muted: rgba(226,232,240,.72); --sidebar-hover: rgba(226,232,240,.08); --topbar-bg: var(--surface); --topbar-border: var(--border); } /* System theme usa preferência do SO */ @media (prefers-color-scheme: dark){ html[data-theme="system"]{ --sidebar-bg: #0b1220; --sidebar-border: rgba(148,163,184,.14); --sidebar-fg: #e2e8f0; --sidebar-muted: rgba(226,232,240,.72); --sidebar-hover: rgba(226,232,240,.08); --topbar-bg: var(--surface); --topbar-border: var(--border); } } /* ========================================================= Base ========================================================= */ html, body{ height: 100%; } body.grz{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Links mais “corporate” */ a{ text-decoration: none; } a:hover{ text-decoration: underline; } /* ========================================================= Layout com Sidebar + Topbar ========================================================= */ body.grz.has-sidebar{ display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "sidebar topbar" "sidebar content"; min-height: 100vh; } #sidebar.sidebar{ grid-area: sidebar; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 14px 12px; gap: 10px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); z-index: 1050; } .topbar{ grid-area: topbar; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); } #content.content{ grid-area: content; padding: 18px 20px 24px; } @media (max-width: 992px){ body.grz.has-sidebar{ grid-template-columns: 0 minmax(0,1fr); grid-template-rows: var(--topbar-h) minmax(0,1fr); grid-template-areas: "topbar topbar" "content content"; } #sidebar.sidebar{ position: fixed; left: -290px; top: 0; bottom: 0; width: 290px; transition: left .18s ease-out; z-index: 1050; } #sidebar.sidebar.open{ left: 0; } #content.content{ padding: 14px 12px 18px; } .sidebar-backdrop{ position: fixed; inset: 0; background: rgba(2,6,23,.55); display: none; z-index: 1040; } body.sidebar-open .sidebar-backdrop{ display: block; } } .sidebar-backdrop{ display: none; } /* Sidebar colapsada (desktop) */ body.grz.has-sidebar.collapsed{ grid-template-columns: var(--sidebar-w-collapsed) minmax(0,1fr); } body.collapsed #sidebar.sidebar{ padding-inline: 10px; } body.collapsed #sidebar .brand-text, body.collapsed #sidebar .side-nav .nav-link span, body.collapsed #sidebar .side-footer span{ display: none; } /* no mobile: não “esconde texto” por acidente */ @media (max-width: 992px){ body.collapsed #sidebar .brand-text, body.collapsed #sidebar .side-nav .nav-link span, body.collapsed #sidebar .side-footer span{ display: inline; } } /* ========================================================= Sidebar ========================================================= */ .brand{ display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-600) 88%, var(--sidebar-bg)), color-mix(in srgb, var(--brand-500) 78%, var(--sidebar-bg)) ); box-shadow: 0 10px 22px rgba(2,6,23,.12); } .brand img{ width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.92); padding: 2px; } .brand-text{ font-weight: 700; letter-spacing: .2px; font-size: 13px; color: var(--sidebar-fg); line-height: 1.15; } .side-nav{ display: flex; flex-direction: column; gap: 4px; } .side-nav .nav-link{ display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; color: var(--sidebar-muted); font-size: 13px; border: 1px solid transparent; position: relative; transition: background .15s ease, color .15s ease, border-color .15s ease; } .side-nav .nav-link i{ font-size: 1.05rem; width: 22px; text-align: center; color: color-mix(in srgb, var(--sidebar-muted) 92%, var(--sidebar-fg)); } .side-nav .nav-link:hover{ background: var(--sidebar-hover); color: var(--sidebar-fg); } .side-nav .nav-link.active{ background: color-mix(in srgb, var(--brand-500) 18%, transparent); color: var(--sidebar-fg); border-color: color-mix(in srgb, var(--sidebar-border) 70%, transparent); } .side-nav .nav-link.active::before{ content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; border-radius: 99px; background: var(--sidebar-active-bar); } .nav-sep{ height: 1px; margin: 10px 8px; background: color-mix(in srgb, var(--sidebar-muted) 16%, transparent); } .side-footer{ margin-top: auto; padding-top: 8px; } /* Burger no mobile */ #burger{ display: inline-flex; } @media (min-width: 993px){ #burger{ display: none; } } /* ========================================================= Topbar / botões de ícone ========================================================= */ .topbar-title{ font-weight: 650; letter-spacing: .2px; color: var(--text); } .topbar-right{ display:flex; align-items:center; gap: 10px; } .icon-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, var(--bg-soft)); color: var(--text); font-size: 13px; transition: transform .06s ease, background .15s ease, border-color .15s ease; } .icon-btn:hover{ background: color-mix(in srgb, var(--surface) 80%, var(--bg-soft)); border-color: color-mix(in srgb, var(--border) 70%, var(--brand-400)); text-decoration: none; } .icon-btn:active{ transform: translateY(1px); } /* ========================================================= Page head ========================================================= */ .page-head h1, .page-head .h5{ font-weight: 700; letter-spacing: .2px; } /* ========================================================= Botões / Inputs (deixa “menos pill” e mais ERP) ========================================================= */ .btn{ border-radius: var(--btn-radius) !important; height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 650; } .btn.btn-sm{ height: var(--btn-h-sm); } .btn-primary{ box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-600) 26%, transparent); } .btn:focus, .btn:focus-visible, .icon-btn:focus, .icon-btn:focus-visible, .form-control:focus, .form-select:focus, textarea:focus, .input:focus{ outline: none !important; box-shadow: var(--focus-ring) !important; } /* Classe .input existe em vários templates */ .input{ border-radius: var(--control-radius); padding: var(--pad-y) var(--pad-x); background: var(--surface); color: var(--text); border: 1px solid var(--border); } .input::placeholder{ color: color-mix(in srgb, var(--muted) 82%, transparent); } /* ========================================================= Cards — leve, “enterprise” ========================================================= */ .card{ overflow: hidden; } .card-header{ padding: .85rem 1rem; } .card-body{ padding: 1rem; } .hover-lift{ transition: transform .12s ease, box-shadow .12s ease; } .hover-lift:hover{ transform: translateY(-2px); box-shadow: 0 18px 46px rgba(2,6,23,.10); } /* ========================================================= Tables — com cara de ERP ========================================================= */ .table-responsive{ border-radius: var(--card-radius); } .table thead th{ text-transform: none; letter-spacing: .02em; } .table-compact thead th, .table-compact tbody td{ padding: var(--table-pad-y) var(--table-pad-x) !important; } .table tbody tr:hover{ cursor: default; } .table-dashboard tbody tr.table-row-link:hover{ cursor: pointer; } .sort-link{ color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .sort-link i{ font-size: .85em; opacity: .75; } .sort-link:hover{ color: var(--brand-700); text-decoration: none; } .sort-link:hover i{ opacity: 1; } /* ========================================================= Pagination ========================================================= */ .pagination .page-link{ border-radius: 10px; margin-left: 4px; border-color: var(--border); color: var(--text); } .pagination .page-item.active .page-link{ background: var(--brand-600); border-color: var(--brand-600); } /* ========================================================= Dropdown ========================================================= */ .dropdown-menu{ border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 22px 60px rgba(2,6,23,.18); background: var(--surface); color: var(--text); } .dropdown-item{ color: var(--text); } .dropdown-item:hover, .dropdown-item:focus{ background: color-mix(in srgb, var(--brand-500) 10%, var(--surface)); color: var(--text); text-decoration: none; } .dropdown-divider{ border-top-color: var(--border); } .modal-content{ background: var(--surface); color: var(--text); } /* ========================================================= Toasts (mantém) ========================================================= */ .grz-toast-stack{ position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .grz-toast{ min-width: 220px; max-width: 340px; padding: 10px 12px; border-radius: 14px; font-size: 13px; box-shadow: 0 16px 50px rgba(2,6,23,.22); background: var(--surface); color: var(--text); border: 1px solid var(--border); opacity: 0; transform: translateY(-6px); animation: grz-toast-in .22s ease-out forwards, grz-toast-out .42s ease-out 4s forwards; } .grz-toast-success{ border-left: 4px solid #16a34a; } .grz-toast-error, .grz-toast-danger{ border-left: 4px solid #ef4444; } .grz-toast-info{ border-left: 4px solid #2563eb; } .grz-toast-warning{ border-left: 4px solid #eab308; } @keyframes grz-toast-in{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: translateY(0); } } @keyframes grz-toast-out{ to{ opacity: 0; transform: translateY(-6px); } } /* ---- Adminpanel: Usuários (UI/UX) ---- */ .role-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px; } @media (max-width: 720px){ .role-grid{ grid-template-columns: 1fr; } } .role-card{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:16px; background: rgba(255,255,255,.02); cursor:pointer; transition: transform .08s ease, border-color .12s ease, background .12s ease; } .role-card:hover{ transform: translateY(-1px); background: rgba(255,255,255,.035); } .role-card input[type="radio"]{ margin-top: 4px; } .role-card.is-selected{ border-color: rgba(59,130,246,.6); box-shadow: 0 0 0 3px rgba(59,130,246,.15); } .role-card__title{ font-weight: 700; margin-bottom: 2px; } /* ========================================================= Financeiro: Fluxo de caixa (mais vida) ========================================================= */ .kpi-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 14px; } @media (max-width: 980px){ .kpi-grid{ grid-template-columns: 1fr; } } .kpi-card{ display: flex; align-items: center; gap: 12px; padding: 14px; } .kpi-icon{ width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, var(--bg-soft)); color: var(--text); flex: 0 0 auto; } .kpi-label{ font-size: 12px; color: var(--muted); margin-bottom: 2px; } .kpi-value{ font-weight: 800; letter-spacing: .2px; font-size: 18px; } .kpi-card-in{ background: color-mix(in srgb, #22c55e 10%, var(--surface)); } .kpi-card-out{ background: color-mix(in srgb, #ef4444 10%, var(--surface)); } .kpi-card-net{ background: color-mix(in srgb, var(--brand-500) 10%, var(--surface)); } .money-pos{ color: #16a34a; font-weight: 800; } .money-neg{ color: #ef4444; font-weight: 800; } html[data-theme="dark"] .money-pos{ color: #22c55e; } html[data-theme="dark"] .money-neg{ color: #f87171; } .mini-bar{ width: 88px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--border) 55%, transparent); overflow: hidden; } .mini-bar-fill{ height: 100%; border-radius: 999px; } .mini-bar-pos{ background: rgba(34,197,94,.75); } .mini-bar-neg{ background: rgba(239,68,68,.75); } .role-card__desc{ color: var(--muted); font-size: 13px; margin-bottom: 6px; } .role-card__bullets{ margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; } .chip.chip-role{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); }