/* ========================================================================== controlestand — Design System (app.css) Camada de identidade sobre AdminLTE 4 + Bootstrap 5. Autor: Rafael (design de sistemas). Carregar DEPOIS de adminlte.min.css. ========================================================================== */ :root { /* Marca */ --cs-primary: #3b4c8a; --cs-primary-600: #33437a; --cs-primary-700: #2b3a67; --cs-primary-800: #223056; --cs-accent: #e08e3c; --cs-accent-600: #c9791f; /* Superfícies e texto */ --cs-bg: #f4f6fb; --cs-surface: #ffffff; --cs-surface-2: #eef1f7; --cs-text: #1f2733; --cs-text-muted: #6b7382; --cs-border: #e3e6ee; /* Semânticas */ --cs-success: #2fa36b; --cs-success-bg: #e7f6ee; --cs-danger: #d5493f; --cs-danger-bg: #fdeceb; --cs-warning: #cf8a1f; --cs-warning-bg: #fbf1dd; --cs-info: #3b7dc4; --cs-info-bg: #e9f1fb; /* Forma */ --cs-radius: 12px; --cs-radius-sm: 8px; --cs-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --cs-shadow-lg: 0 8px 24px rgba(16,24,40,.12); /* Bootstrap: alinha a primária da marca (afeta text-bg-primary, bg-primary, links, etc.) */ --bs-primary: var(--cs-primary); --bs-primary-rgb: 59, 76, 138; --bs-link-color: var(--cs-primary); --bs-link-hover-color: var(--cs-primary-700); --bs-body-color: var(--cs-text); --bs-border-color: var(--cs-border); } /* ---------- Tema claro forçado (design system) --------------------------- O AdminLTE pode alternar o tema conforme a preferência do SO; aqui fixamos as superfícies claras sobrescrevendo as variáveis do Bootstrap para qualquer valor de data-bs-theme no (a sidebar mantém o próprio escopo dark). */ html[data-bs-theme] { --bs-body-bg: var(--cs-bg); --bs-body-bg-rgb: 244, 246, 251; --bs-body-color: var(--cs-text); --bs-body-color-rgb: 31, 39, 51; --bs-emphasis-color: var(--cs-text); --bs-secondary-color: var(--cs-text-muted); --bs-tertiary-bg: var(--cs-bg); --bs-secondary-bg: var(--cs-surface-2); --bs-border-color: var(--cs-border); --bs-card-bg: var(--cs-surface); --bs-card-color: var(--cs-text); color-scheme: light; } /* ---------- Base ---------------------------------------------------------- */ body.layout-fixed { background-color: var(--cs-bg) !important; } .app-main { color: var(--cs-text); } h1,h2,h3,h4,h5,h6 { color: var(--cs-text); } /* ---------- Sidebar (cor de marca) --------------------------------------- */ .app-sidebar { background: linear-gradient(180deg, var(--cs-primary-700), var(--cs-primary-800)) !important; border-right: 0 !important; } .app-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.08); } .app-sidebar .brand-link { color: #fff; } .app-sidebar .brand-image { color: var(--cs-accent) !important; opacity: 1 !important; } .app-sidebar .nav-sidebar .nav-link { color: rgba(255,255,255,.78); border-radius: var(--cs-radius-sm); margin: 2px 8px; } .app-sidebar .nav-sidebar .nav-link:hover { background: rgba(255,255,255,.10); color: #fff; } .app-sidebar .nav-sidebar .nav-link.active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--cs-accent); } .app-sidebar .nav-icon { color: rgba(255,255,255,.9); } /* ---------- Topbar -------------------------------------------------------- */ .app-header { border-bottom: 1px solid var(--cs-border); box-shadow: var(--cs-shadow); } /* ---------- Cabeçalho de página ------------------------------------------ */ .app-content-header { padding-top: var(--cs-6); padding-bottom: var(--cs-2); } .app-content-header h3 { font-size: var(--cs-fs-2xl, 24px); font-weight: 700; letter-spacing: -.01em; } .cs-page-sub { color: var(--cs-text-muted); font-size: 14px; } /* ---------- Cards --------------------------------------------------------- */ .card { background-color: var(--cs-surface); color: var(--cs-text); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); } .card-header { background: var(--cs-surface); border-bottom: 1px solid var(--cs-border); border-top-left-radius: var(--cs-radius) !important; border-top-right-radius: var(--cs-radius) !important; } .card-header .card-title { font-size: 15px; font-weight: 600; } /* ---------- Botões -------------------------------------------------------- */ .btn { border-radius: var(--cs-radius-sm); font-weight: 500; } .btn-primary { --bs-btn-bg: var(--cs-primary); --bs-btn-border-color: var(--cs-primary); --bs-btn-hover-bg: var(--cs-primary-600); --bs-btn-hover-border-color: var(--cs-primary-600); --bs-btn-active-bg: var(--cs-primary-700); --bs-btn-active-border-color: var(--cs-primary-700); --bs-btn-disabled-bg: var(--cs-primary); --bs-btn-disabled-border-color: var(--cs-primary); } .btn-outline-primary { --bs-btn-color: var(--cs-primary); --bs-btn-border-color: var(--cs-primary); --bs-btn-hover-bg: var(--cs-primary); --bs-btn-hover-border-color: var(--cs-primary); --bs-btn-active-bg: var(--cs-primary-700); } /* ---------- Tabelas ------------------------------------------------------- */ .table { --bs-table-bg: var(--cs-surface); color: var(--cs-text); margin-bottom: 0; } .table > thead > tr > th { background: var(--cs-surface-2); color: var(--cs-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--cs-border); white-space: nowrap; } .table > tbody > tr > td { vertical-align: middle; border-color: var(--cs-border); } .table-hover > tbody > tr:hover > td { background: var(--cs-surface-2); } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: #f8f9fc; } /* ---------- Badges (semântica) ------------------------------------------- */ .badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; } /* ---------- Stat tile (KPI) ---------------------------------------------- */ .cs-stat { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); padding: var(--cs-4, 16px); display: flex; align-items: center; gap: 14px; height: 100%; } .cs-stat__icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; } .cs-stat__value { font-size: 26px; font-weight: 700; line-height: 1; color: var(--cs-text); } .cs-stat__label { font-size: 13px; color: var(--cs-text-muted); margin-top: 2px; } .cs-stat--primary .cs-stat__icon { background: rgba(59,76,138,.12); color: var(--cs-primary); } .cs-stat--accent .cs-stat__icon { background: rgba(224,142,60,.15); color: var(--cs-accent-600); } .cs-stat--success .cs-stat__icon { background: var(--cs-success-bg); color: var(--cs-success); } .cs-stat--info .cs-stat__icon { background: var(--cs-info-bg); color: var(--cs-info); } .cs-stat--warning .cs-stat__icon { background: var(--cs-warning-bg); color: var(--cs-warning); } .cs-stat--danger .cs-stat__icon { background: var(--cs-danger-bg); color: var(--cs-danger); } /* Título de seção (dashboards/resumos) */ .cs-sec-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; } /* Tabela que rola dentro do próprio card em telas estreitas (sem rolar o corpo) */ .cs-table-wrap { overflow-x: auto; } /* Badge de acento (âmbar) para números de destaque em tabelas */ .cs-badge-accent { background: rgba(224,142,60,.15); color: var(--cs-accent-600); } /* Rótulo de subseção dentro de um formulário/card */ .cs-form-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-primary); display: flex; align-items: center; gap: 7px; margin: 2px 0; } /* Nota em "pills" 0–10 (mesmo valor inteiro, aparência tocável) */ .cs-nota { display: flex; gap: 6px; flex-wrap: wrap; } .cs-nota__btn { width: 40px; height: 40px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); color: var(--cs-text); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; } .cs-nota__btn:hover { border-color: var(--cs-primary); } .cs-nota__btn.active { background: var(--cs-primary); color: #fff; border-color: var(--cs-primary); } .cs-nota__btn:disabled { opacity: .55; cursor: default; } .cs-nota__btn:disabled:hover { border-color: var(--cs-border); } /* ---------- Atalho de módulo (dashboard) --------------------------------- */ .cs-shortcut { display: flex; align-items: center; gap: 12px; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 14px 16px; color: var(--cs-text); text-decoration: none; height: 100%; transition: border-color .15s, box-shadow .15s, transform .05s; } .cs-shortcut:hover { border-color: var(--cs-primary); box-shadow: var(--cs-shadow-lg); color: var(--cs-text); } .cs-shortcut:active { transform: translateY(1px); } .cs-shortcut__icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; background: var(--cs-surface-2); color: var(--cs-primary); font-size: 18px; } .cs-shortcut__title { font-weight: 600; font-size: 14px; } .cs-shortcut__desc { font-size: 12px; color: var(--cs-text-muted); } /* ---------- Estado vazio -------------------------------------------------- */ .cs-empty { text-align: center; color: var(--cs-text-muted); padding: var(--cs-8, 32px) var(--cs-4); } .cs-empty__icon { font-size: 34px; opacity: .5; display: block; margin-bottom: 8px; } /* ---------- Callout ------------------------------------------------------- */ .callout { border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); } /* ---------- Accordion (usado em Equipes) --------------------------------- */ .accordion { --bs-accordion-border-color: var(--cs-border); --bs-accordion-border-radius: var(--cs-radius); } .accordion-item { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius) !important; margin-bottom: 10px; box-shadow: var(--cs-shadow); overflow: hidden; } .accordion-button { background: var(--cs-surface); font-weight: 600; color: var(--cs-text); } .accordion-button:not(.collapsed) { background: var(--cs-surface-2); color: var(--cs-primary-700); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(59,76,138,.15); } /* ---------- Árvore hierárquica (Imobiliária → Diretor → Gerente → Corretor) */ .cs-node { border-radius: var(--cs-radius-sm); background: var(--cs-surface); margin-bottom: 10px; } .cs-node--diretor { border: 1px solid var(--cs-border); padding: 12px 14px; } .cs-node--gerente { border-left: 3px solid var(--cs-info); background: var(--cs-info-bg); padding: 8px 12px; margin: 8px 0 8px 18px; } .cs-node__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cs-node__title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cs-text); } .cs-node__title .cs-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cs-text-muted); } .cs-corretor { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border-radius: 6px; margin: 3px 0 3px 20px; background: var(--cs-surface); border: 1px solid var(--cs-border); font-size: 14px; } .cs-corretor i { color: var(--cs-accent-600); } /* Formulário inline de adicionar (diretor/gerente/corretor) */ .cs-inline-add { display: flex; gap: 8px; align-items: center; } .cs-inline-add .form-control { max-width: 320px; } /* Botão "remover" discreto */ .cs-remove { color: var(--cs-text-muted); border: 0; background: transparent; padding: 2px 6px; border-radius: 6px; line-height: 1; } .cs-remove:hover { color: var(--cs-danger); background: var(--cs-danger-bg); } /* ========================================================================== Equipes — escala (busca, filtros, contadores, grade e "ver todos") ========================================================================== */ /* Barra de ferramentas fixa no topo da lista */ .cs-toolbar { position: sticky; top: 0; z-index: 20; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow); padding: 12px 14px; margin-bottom: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .cs-toolbar__search { flex: 1 1 260px; min-width: 190px; position: relative; } .cs-toolbar__search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cs-text-muted); pointer-events: none; } .cs-toolbar__search .form-control { padding-left: 34px; } .cs-toolbar .form-select { width: auto; min-width: 0; } .cs-toolbar__count { margin-left: auto; font-size: 12.5px; color: var(--cs-text-muted); white-space: nowrap; } .cs-toolbar__count b { color: var(--cs-text); font-variant-numeric: tabular-nums; } /* Chips de contagem por nível (imobiliária / diretor / gerente) */ .cs-metrics { display: inline-flex; gap: 6px; flex-wrap: wrap; } .cs-metric { background: var(--cs-surface-2); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--cs-text-muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .cs-metric b { color: var(--cs-text); font-variant-numeric: tabular-nums; } .cs-metric .bi { font-size: 12px; } /* Grade multi-coluna de corretores (substitui a lista em coluna única) */ .cs-cor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 10px; } .cs-cor { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 8px; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 8px; font-size: 13.5px; min-width: 0; } .cs-cor__av { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: rgba(224,142,60,.15); color: var(--cs-accent-600); display: grid; place-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; } .cs-cor__nome { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-cor form { display: inline; margin: 0; } .cs-cor--inativo { opacity: .55; } /* Botão de alternar situação (usa o mesmo desenho discreto de .cs-remove) */ .cs-toggle--off:hover { color: var(--cs-warning); background: var(--cs-warning-bg); } /* ativo → desativar */ .cs-toggle--on:hover { color: var(--cs-success); background: var(--cs-success-bg); } /* inativo → reativar */ .cs-cor--hit { border-color: var(--cs-accent); box-shadow: 0 0 0 2px rgba(224,142,60,.25); } /* "Ver todos os N corretores" (carga sob demanda) */ .cs-seemore { margin-top: 10px; } .cs-seemore button { width: 100%; background: var(--cs-surface); border: 1px dashed var(--cs-border); border-radius: var(--cs-radius-sm); padding: 8px 14px; font-size: 13px; color: var(--cs-primary); font-weight: 600; cursor: pointer; } .cs-seemore button:hover { border-color: var(--cs-primary); background: var(--cs-surface-2); } .cs-seemore button:disabled { opacity: .6; cursor: default; } /* Estado "nenhum resultado" da busca (o JS alterna o display) */ .cs-noresult { display: none; }