/* ═══════════════════════════════════════════════════════════════════════════ JANUS SYSTEM — Design System Dark mode: classe .dark-mode no Light mode: padrão (body:not(.dark-mode)) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Variáveis CSS ──────────────────────────────────────────────────────── */ :root { --janus-app-shell-max: 3000px; --janus-content-max: 1480px; --janus-app-surface: #1f2937; --janus-app-surface-2: #273446; --janus-app-panel: rgba(17, 24, 39, .9); --janus-app-panel-strong: rgba(15, 23, 42, .96); --janus-app-border: rgba(255, 255, 255, .12); --janus-app-border-strong: rgba(148, 163, 184, .18); --janus-app-soft: rgba(255, 255, 255, .72); --janus-app-text: #f8fafc; --janus-app-heading: #ffffff; --janus-app-shadow: 0 14px 30px rgba(2, 6, 23, .22); --janus-app-shadow-soft: 0 8px 18px rgba(2, 6, 23, .14); --janus-app-radius-lg: 14px; --janus-app-radius-md: 10px; --janus-app-accent: #2563eb; --janus-app-accent-soft: rgba(37, 99, 235, .1); --janus-app-success-soft: rgba(34, 197, 94, .12); --janus-nav-width: 370px; --janus-topbar-h: 60px; --janus-transition: 200ms ease; --janus-btn-action-min: 168px; } body:not(.dark-mode) { --janus-app-surface: #f5f7fb; --janus-app-surface-2: #edf2f8; --janus-app-panel: rgba(255, 255, 255, .94); --janus-app-panel-strong: rgba(255, 255, 255, .98); --janus-app-border: rgba(100, 116, 139, .2); --janus-app-border-strong: rgba(71, 85, 105, .18); --janus-app-soft: rgba(71, 85, 105, .78); --janus-app-text: #111827; --janus-app-heading: #0f172a; --janus-app-shadow: 0 18px 36px rgba(15, 23, 42, .08); --janus-app-shadow-soft: 0 8px 20px rgba(15, 23, 42, .06); --janus-app-accent-soft: rgba(37, 99, 235, .08); --janus-app-success-soft: rgba(34, 197, 94, .1); } body:not(.dark-mode) .janus-topbar, body:not(.dark-mode) .janus-card, body:not(.dark-mode) .janus-nav { backdrop-filter: blur(10px); } /* ── 2. Reset e base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--janus-app-text); background: var(--janus-app-surface); transition: background var(--janus-transition), color var(--janus-transition); -webkit-font-smoothing: antialiased; } a { color: var(--janus-app-accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { color: var(--janus-app-heading); font-weight: 600; line-height: 1.25; } /* ── Utilitários ──────────────────────────────────────────────────────────── */ .janus-hidden { display: none !important; } .janus-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* ── 3. Layout principal ───────────────────────────────────────────────────── */ .janus-shell { display: flex; height: 100dvh; max-width: var(--janus-app-shell-max); overflow: hidden; } /* ── 4. Navegação sidebar ──────────────────────────────────────────────────── */ .janus-nav { width: var(--janus-nav-width); flex-shrink: 0; display: flex; flex-direction: column; background: var(--janus-app-surface-2); border-right: 1px solid var(--janus-app-border); transition: width var(--janus-transition), transform var(--janus-transition); overflow: hidden; z-index: 100; } .janus-nav.collapsed { width: 56px; } .janus-nav-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--janus-app-border); white-space: nowrap; overflow: hidden; } .janus-nav-brand-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } .janus-nav-brand-link:hover { text-decoration: none; } .janus-brand-logo { width: 26px; height: 26px; display: block; object-fit: contain; flex-shrink: 0; } .janus-nav-brand-label { font-size: 16px; font-weight: 700; color: var(--janus-app-heading); opacity: 1; transition: opacity var(--janus-transition); } .janus-nav.collapsed .janus-nav-brand-label { opacity: 0; } .janus-nav-close { display: none; width: 34px; height: 34px; border: 1px solid var(--janus-app-border-strong); border-radius: 10px; background: var(--janus-app-panel); color: var(--janus-app-soft); align-items: center; justify-content: center; cursor: pointer; } .janus-nav-close:hover { color: var(--janus-app-heading); background: var(--janus-app-border); } .janus-nav-menu { list-style: none; flex: 1; padding: 10px 8px; overflow-y: auto; overflow-x: hidden; } .janus-nav-item { /* margin-bottom: 2px; */ } /* Agrupamento visual por módulo (raiz do menu). */ .janus-nav-menu>.janus-nav-item { --janus-module-rgb: 37, 99, 235; margin-bottom: 6px; border-radius: 12px; /* border: 1px solid rgba(var(--janus-module-rgb), .24); */ background: linear-gradient(180deg, rgba(var(--janus-module-rgb), .12), rgba(var(--janus-module-rgb), .05)); } .janus-nav-menu>.janus-nav-item>.janus-nav-link { color: var(--janus-app-heading); background: rgba(var(--janus-module-rgb), .16); font-weight: 600; } .janus-nav-menu>.janus-nav-item>.janus-nav-link:hover, .janus-nav-menu>.janus-nav-item.active>.janus-nav-link { background: rgba(var(--janus-module-rgb), .24); } .janus-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--janus-app-soft); font-weight: 500; white-space: nowrap; overflow: hidden; min-width: 0; transition: background var(--janus-transition), color var(--janus-transition); text-decoration: none; } .janus-nav-link-toggle { width: 100%; border: none; background: transparent; text-align: left; justify-content: space-between; cursor: pointer; } .janus-nav-link-main { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .janus-nav-link:hover, .janus-nav-item.active>.janus-nav-link { background: var(--janus-app-accent-soft); /* color: var(--janus-app-accent); */ text-decoration: none; } .janus-nav-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .janus-lucide { width: 18px; height: 18px; display: block; stroke-width: 2.1; } .janus-nav-label { flex: 1; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 1; transition: opacity var(--janus-transition); } .janus-nav.collapsed .janus-nav-label { opacity: 0; } .janus-nav-chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--janus-app-soft); transition: transform var(--janus-transition); flex-shrink: 0; } .janus-nav-item.open>.janus-nav-link .janus-nav-chevron { transform: rotate(90deg); } .janus-nav-submenu { list-style: none; margin: 2px 0 4px; padding: 0; max-height: 0; overflow: hidden; transition: max-height var(--janus-transition); } .janus-nav-item.open>.janus-nav-submenu { max-height: 2000px; } .janus-nav-menu>.janus-nav-item>.janus-nav-submenu { margin-top: 2px; margin-left: 2px; border-left: 2px solid rgba(var(--janus-module-rgb), .4); padding-left: 4px; } .janus-nav-menu>.janus-nav-item>.janus-nav-submenu .janus-nav-link:hover, .janus-nav-menu>.janus-nav-item>.janus-nav-submenu .janus-nav-item.active>.janus-nav-link { background: rgba(var(--janus-module-rgb), .16); } .janus-nav.collapsed .janus-nav-chevron, .janus-nav.collapsed .janus-nav-submenu { display: none !important; } .janus-nav.collapsed .janus-nav-menu>.janus-nav-item { padding: 2px; margin-bottom: 6px; } .janus-nav-footer { padding: 12px 8px; border-top: 1px solid var(--janus-app-border); display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: hidden; } .janus-nav-user-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; } .janus-nav-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; } .janus-nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--janus-app-accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .janus-nav-user-info { display: flex; flex-direction: column; min-width: 0; opacity: 1; transition: opacity var(--janus-transition); } .janus-nav.collapsed .janus-nav-user-info { opacity: 0; } .janus-nav-user-name { font-size: 13px; font-weight: 600; color: var(--janus-app-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .janus-nav-logout { color: var(--janus-app-soft); display: flex; align-items: center; padding: 6px; border-radius: 8px; flex-shrink: 0; transition: color var(--janus-transition), background var(--janus-transition); } .janus-nav-logout:hover { color: #ef4444; background: rgba(239, 68, 68, .1); text-decoration: none; } .janus-nav-context { display: none; width: 100%; } .janus-nav-context__button, .janus-nav-context__pill { width: 100%; min-width: 0; border: 1px solid var(--janus-app-border-strong); border-radius: 12px; background: var(--janus-app-panel); color: var(--janus-app-text); padding: 10px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 26px; gap: 9px; align-items: center; font-family: inherit; text-align: left; } .janus-nav-context__button { cursor: pointer; } .janus-nav-context__button:hover { border-color: rgba(37, 99, 235, .45); background: var(--janus-app-panel-strong); } .janus-nav-context__pill { grid-template-columns: 28px minmax(0, 1fr); } .janus-nav-context__icon, .janus-nav-context__change { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--janus-app-accent); background: var(--janus-app-accent-soft); } .janus-nav-context__change { width: 26px; height: 26px; color: var(--janus-app-soft); background: var(--janus-app-border); } .janus-nav-context__icon .janus-lucide, .janus-nav-context__change .janus-lucide { width: 15px; height: 15px; } .janus-nav-context__body { min-width: 0; display: grid; gap: 2px; } .janus-nav-context__label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--janus-app-soft); line-height: 1; } .janus-nav-context__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--janus-app-heading); line-height: 1.2; } /* ── 5. Área principal ─────────────────────────────────────────────────────── */ .janus-page { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* ── 6. Topbar ─────────────────────────────────────────────────────────────── */ .janus-topbar { height: var(--janus-topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--janus-app-border); background: var(--janus-app-panel-strong); backdrop-filter: blur(8px); flex-shrink: 0; } .janus-topbar-toggle { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--janus-app-soft); display: flex; align-items: center; transition: background var(--janus-transition); } .janus-topbar-toggle:hover { background: var(--janus-app-border); } .janus-topbar-brand { display: none; align-items: center; gap: 8px; min-width: 0; color: var(--janus-app-heading); text-decoration: none; font-weight: 700; } .janus-topbar-brand:hover { text-decoration: none; } .janus-topbar-brand__logo { width: 24px; height: 24px; display: block; object-fit: contain; flex-shrink: 0; } .janus-topbar-brand__text { font-size: 14px; line-height: 1; } .janus-topbar-title { font-size: 16px; font-weight: 600; color: var(--janus-app-heading); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .janus-topbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; } .janus-context-switch { display: inline-flex; align-items: center; min-width: 0; max-width: 330px; } .janus-context-control__icon, .janus-context-pill__icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--janus-app-accent); background: var(--janus-app-accent-soft); } .janus-context-control__icon .janus-lucide, .janus-context-control__change .janus-lucide, .janus-context-pill__icon .janus-lucide { width: 14px; height: 14px; } .janus-context-control__body, .janus-context-pill__body { min-width: 0; display: grid; gap: 2px; flex: 1; } .janus-context-control { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 330px; height: 38px; padding: 5px 8px; border: 1px solid var(--janus-app-border-strong); border-radius: 11px; background: var(--janus-app-panel); color: var(--janus-app-text); cursor: pointer; font-family: inherit; } .janus-context-control:hover { border-color: rgba(37, 99, 235, .4); background: var(--janus-app-panel-strong); } .janus-context-control__label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--janus-app-soft); line-height: 1; } .janus-context-control__value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.15; color: var(--janus-app-heading); } .janus-context-control__change { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--janus-app-soft); background: var(--janus-app-border); } .janus-context-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 390px; } .janus-context-pill__label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--janus-app-soft); line-height: 1; } .janus-context-pill__value { display: block; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--janus-app-heading); line-height: 1.2; } .janus-context-options { display: grid; gap: 8px; margin-top: 4px; max-height: min(52vh, 420px); overflow: auto; text-align: left; } .janus-context-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--janus-app-border-strong); border-radius: 10px; background: var(--janus-app-surface); color: var(--janus-app-text); cursor: pointer; } .janus-context-option:hover { border-color: rgba(37, 99, 235, .45); background: var(--janus-app-accent-soft); } .janus-context-option__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; } .janus-swal-context { background: var(--janus-app-panel-strong) !important; color: var(--janus-app-text) !important; border: 1px solid var(--janus-app-border) !important; } .janus-theme-toggle { position: relative; width: 34px; height: 34px; padding: 0; } .janus-theme-toggle svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ── 7. Conteúdo ───────────────────────────────────────────────────────────── */ .janus-content { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--janus-app-surface); padding: 0px; } .janus-section { width: min(100%, var(--janus-content-max)); margin: 0 auto; padding: 14px; } .janus-layout-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* ── 8. Cards ──────────────────────────────────────────────────────────────── */ .janus-card { background: var(--janus-app-panel); border: 1px solid var(--janus-app-border); border-radius: var(--janus-app-radius-md); padding: 20px; box-shadow: var(--janus-app-shadow-soft); } .janus-card-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--janus-app-soft); margin-bottom: 12px; } .janus-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .janus-stat-value { font-size: 28px; font-weight: 700; color: var(--janus-app-heading); line-height: 1; } .janus-stat-label { font-size: 12px; color: var(--janus-app-soft); margin-top: 4px; } /* ── 9. Filtros ────────────────────────────────────────────────────────────── */ .janus-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 16px 24px; background: var(--janus-app-panel); border-bottom: 1px solid var(--janus-app-border); } /* ── 10. Formulários ───────────────────────────────────────────────────────── */ .janus-form-group { display: flex; flex-direction: column; gap: 5px; } .janus-form-group--submit { align-items: flex-start; } .janus-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, -1fr)); gap: 12px; align-items: end; } .janus-icon-field { display: flex; align-items: center; gap: 10px; } .janus-color-field { display: inline-flex; align-items: center; gap: 10px; } .janus-color-input { width: 42px; height: 38px; border: 1px solid var(--janus-app-border-strong); border-radius: 10px; background: var(--janus-app-surface); padding: 3px; cursor: pointer; } .janus-color-preview { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--janus-app-border); background: var(--janus-color-preview, #2563eb); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); } .janus-color-value { font-size: 12px; color: var(--janus-app-soft); } .janus-color-chip { display: inline-flex; align-items: center; gap: 8px; } .janus-color-chip__swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--janus-app-border-strong); background: var(--janus-color-preview, #2563eb); } .janus-icon-preview { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--janus-app-border); background: var(--janus-app-panel-strong); display: inline-flex; align-items: center; justify-content: center; color: var(--janus-app-soft); flex-shrink: 0; } .janus-icon-picker { position: relative; width: 100%; } .janus-icon-picker__trigger { width: 100%; min-height: 38px; border-radius: 10px; border: 1px solid var(--janus-app-border); background: var(--janus-app-surface-2); color: var(--janus-app-text); display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; } .janus-icon-picker__label { flex: 1; text-align: left; font-size: 13px; font-weight: 600; } .janus-icon-picker__chevron { color: var(--janus-app-soft); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--janus-transition); } .janus-icon-picker.open .janus-icon-picker__chevron { transform: rotate(180deg); } .janus-icon-picker__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 250; border: 1px solid var(--janus-app-border-strong); background: var(--janus-app-panel-strong); border-radius: 12px; box-shadow: var(--janus-app-shadow); padding: 10px; display: none; } .janus-icon-picker.open .janus-icon-picker__panel { display: block; } .janus-icon-picker__search { margin-bottom: 8px; } .janus-icon-picker__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; max-height: 250px; overflow: auto; } .janus-icon-picker__item { border: 1px solid var(--janus-app-border); background: var(--janus-app-surface-2); border-radius: 10px; min-height: 40px; padding: 7px 9px; color: var(--janus-app-text); display: grid; grid-template-columns: 18px 1fr; gap: 6px 8px; align-items: center; cursor: pointer; text-align: left; } .janus-icon-picker__item-label { font-size: 12px; font-weight: 600; line-height: 1.2; } .janus-icon-picker__item-key { grid-column: 2; font-size: 11px; color: var(--janus-app-soft); line-height: 1.2; } .janus-icon-picker__item.active, .janus-icon-picker__item:hover { border-color: rgba(37, 99, 235, .4); background: rgba(37, 99, 235, .12); } .janus-icon-picker__empty { font-size: 12px; color: var(--janus-app-soft); padding: 8px; } .janus-form-span-2 { grid-column: span 2; } .janus-form-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; } .janus-btn-action { min-width: var(--janus-btn-action-min); justify-content: center; } .janus-form-shell { max-width: 980px; width: 100%; margin: 0 auto; } .janus-form-shell__sub { margin-top: 6px; color: var(--janus-app-soft); font-size: 13px; } .janus-form-shell__actions { margin-top: 16px; } .janus-form-grid-user-create { margin-top: 6px; grid-template-columns: 1fr 1fr; } .janus-form-grid-user-create__name { grid-column: 1 / -1; } .janus-form-grid-user-edit-simple { margin-top: 6px; grid-template-columns: 1fr 1fr; } .janus-form-grid-user-edit-simple__name { grid-column: 1 / -1; } .janus-form-grid-user-admin { margin-top: 6px; grid-template-columns: 1fr 1fr; } .janus-form-grid-user-admin__name { grid-column: 1 / -1; } .janus-perm-context-form .janus-form-group--submit { align-items: flex-end; } .janus-perm-context-form { grid-template-columns: repeat(3, minmax(220px, 1fr)) auto; gap: 12px; } .janus-perm-context-form .janus-form-group--submit .janus-btn { min-width: 220px; } .janus-perm-context-card { padding-bottom: 16px; } .janus-perm-board-card { padding-bottom: 18px; } .janus-perm-context-form--pool-admin { grid-template-columns: minmax(360px, 620px) auto; justify-content: space-between; } .janus-perm-help { font-size: 12px; } .janus-perm-submit-strip { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--janus-app-border); } @media (max-width: 1280px) { .janus-perm-context-form { grid-template-columns: repeat(2, minmax(220px, 1fr)); } .janus-perm-context-form .janus-form-group--submit { grid-column: 1 / -1; align-items: flex-end; } .janus-perm-context-form--pool-admin { grid-template-columns: minmax(280px, 1fr) auto; } } .janus-label { font-size: 12px; font-weight: 600; color: var(--janus-app-soft); text-transform: uppercase; letter-spacing: .04em; } .janus-input, .janus-select { background: var(--janus-app-surface); border: 1px solid var(--janus-app-border-strong); border-radius: 10px; padding: 8px 12px; color: var(--janus-app-text); font-size: 14px; font-family: inherit; outline: none; transition: border-color var(--janus-transition), box-shadow var(--janus-transition); min-width: 0; } .janus-input:focus, .janus-select:focus { border-color: var(--janus-app-accent); box-shadow: 0 0 0 3px var(--janus-app-accent-soft); } .janus-input::placeholder { color: var(--janus-app-soft); opacity: .6; } .janus-password-field { position: relative; width: 100%; } .janus-password-field__input { width: 100%; display: block; padding-right: 40px; } .janus-password-field__toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px; border: none; border-radius: 8px; background: transparent; color: var(--janus-app-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .janus-password-field__toggle:hover { background: var(--janus-app-border); color: var(--janus-app-text); } /* ── 11. Botões ────────────────────────────────────────────────────────────── */ .janus-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: background var(--janus-transition), border-color var(--janus-transition), color var(--janus-transition); white-space: nowrap; } .janus-btn-primary { background: var(--janus-app-accent); color: #fff; border-color: var(--janus-app-accent); } .janus-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; } .janus-btn-ghost { background: transparent; color: var(--janus-app-soft); border-color: var(--janus-app-border-strong); } .janus-btn-ghost:hover { background: var(--janus-app-border); color: var(--janus-app-text); } /* ── 11.1. Menu de ações por linha ───────────────────────────────────────── */ .janus-actions-menu { position: relative; display: inline-block; } .janus-actions-trigger { width: 34px; height: 34px; padding: 0; justify-content: center; } .janus-actions-menu>summary { list-style: none; } .janus-actions-menu>summary::-webkit-details-marker { display: none; } .janus-actions-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; background: var(--janus-app-panel-strong); border: 1px solid var(--janus-app-border-strong); border-radius: 10px; box-shadow: var(--janus-app-shadow); padding: 6px; margin-top: 0; display: none; z-index: 120; } .janus-actions-menu[open] .janus-actions-dropdown { display: block; } .janus-actions-dropdown.janus-actions-floating { position: fixed; top: 0; left: 0; right: auto; z-index: 1200; } .janus-actions-item { width: 100%; display: flex; align-items: center; justify-content: flex-start; background: transparent; border: none; border-radius: 8px; padding: 8px 10px; color: var(--janus-app-text); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .janus-actions-item:hover { background: var(--janus-app-accent-soft); color: var(--janus-app-accent); text-decoration: none; } .janus-actions-form { margin: 0; } /* ── 12. Badge ─────────────────────────────────────────────────────────────── */ .janus-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--janus-app-accent-soft); color: var(--janus-app-accent); } /* ── 13. Tabela HTML simples ───────────────────────────────────────────────── */ /* Container com scroll — use height/max-height para fixar a área */ .janus-table-scroll { overflow: auto; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--janus-app-border); border-radius: var(--janus-app-radius-md); background: var(--janus-app-panel); } .janus-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; color: var(--janus-app-text); } /* Cabeçalho sticky */ .janus-table thead tr { position: sticky; top: 0; z-index: 2; } .janus-table thead th { padding: 10px 14px; background: var(--janus-app-surface-2); border-bottom: 1px solid var(--janus-app-border-strong); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--janus-app-soft); white-space: nowrap; text-align: left; } .janus-table thead th:first-child { border-radius: var(--janus-app-radius-md) 0 0 0; } .janus-table thead th:last-child { border-radius: 0 var(--janus-app-radius-md) 0 0; } /* Linhas do corpo */ .janus-table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--janus-app-border); vertical-align: middle; } .janus-table tbody tr:last-child td { border-bottom: none; } .janus-table tbody tr:hover td { background: var(--janus-app-accent-soft); } .janus-sort-row { cursor: move; } .janus-sort-row td:first-child::before { content: '⋮⋮'; margin-right: 8px; letter-spacing: -1px; color: var(--janus-app-soft); opacity: .7; } .janus-sort-row.dragging { opacity: .45; } .janus-sort-row.drag-over td { background: rgba(37, 99, 235, .14) !important; } /* Rodapé sticky — totais / sumário */ .janus-table tfoot tr { position: sticky; bottom: 0; z-index: 2; } .janus-table tfoot td, .janus-table tfoot th { padding: 9px 14px; background: var(--janus-app-surface-2); border-top: 1px solid var(--janus-app-border-strong); font-weight: 700; color: var(--janus-app-heading); } /* Alinhamento */ .janus-table .col-right { text-align: right; } .janus-table .col-center { text-align: center; } /* ── 13.1 Permissões em árvore ───────────────────────────────────────────── */ .janus-perm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .janus-perm-toolbar-actions { display: inline-flex; align-items: center; gap: 8px; } .janus-perm-head { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 72px 72px; gap: 10px; padding: 8px 12px; border: 1px solid var(--janus-app-border); border-radius: 10px 10px 0 0; background: var(--janus-app-surface-2); color: var(--janus-app-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .janus-perm-head-short { display: none; } .janus-perm-tree { border: 1px solid var(--janus-app-border); border-top: none; border-radius: 0 0 10px 10px; overflow: hidden; background: var(--janus-app-panel); } .janus-perm-empty { padding: 14px; color: var(--janus-app-soft); } .janus-perm-module { border-top: 1px solid var(--janus-app-border-strong); background: var(--janus-app-panel); } .janus-perm-module:first-child { border-top: none; } .janus-perm-module-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 72px 72px; gap: 10px; min-height: 46px; align-items: center; padding: 0 12px; background: var(--janus-app-surface-2); border-bottom: 1px solid var(--janus-app-border); } .janus-perm-module-main { min-width: 0; display: flex; align-items: center; gap: 8px; } .janus-perm-module-toggle { border: none; background: transparent; color: var(--janus-app-soft); width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .janus-perm-module-toggle:hover { background: var(--janus-app-accent-soft); } .janus-perm-module-toggle svg { transition: transform var(--janus-transition); } .janus-perm-module.open>.janus-perm-module-row .janus-perm-module-toggle svg { transform: rotate(90deg); } .janus-perm-module-title { font-weight: 700; color: var(--janus-app-heading); letter-spacing: .04em; } .janus-perm-module-body { display: none; background: color-mix(in srgb, var(--janus-app-panel) 96%, transparent); } .janus-perm-module.open>.janus-perm-module-body { display: block; } .janus-perm-node { border-bottom: 1px solid var(--janus-app-border); } .janus-perm-node:last-child { border-bottom: none; } .janus-perm-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 72px 72px; align-items: center; gap: 10px; min-height: 44px; padding: 2px 12px; } .janus-perm-main { display: flex; align-items: center; gap: 8px; min-width: 0; } .janus-perm-toggle, .janus-perm-toggle-placeholder { width: 20px; height: 20px; flex-shrink: 0; } .janus-perm-toggle { border: none; background: transparent; color: var(--janus-app-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; } .janus-perm-toggle:hover { background: var(--janus-app-accent-soft); } .janus-perm-toggle svg { transition: transform var(--janus-transition); } .janus-perm-node.open>.janus-perm-row .janus-perm-toggle svg { transform: rotate(90deg); } .janus-perm-read-label { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; } .janus-perm-labels { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .janus-perm-path { font-size: 10px; letter-spacing: .04em; color: var(--janus-app-soft); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .janus-perm-title { font-size: 13px; font-weight: 600; color: var(--janus-app-text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .janus-perm-link { font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; color: var(--janus-app-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .janus-perm-col { display: flex; align-items: center; justify-content: center; } .janus-perm-col input { width: 16px; height: 16px; } .janus-perm-row-all, .janus-perm-module-all { accent-color: var(--janus-app-accent); } .janus-perm-children { display: none; margin-left: 18px; border-left: 1px dashed var(--janus-app-border-strong); background: color-mix(in srgb, var(--janus-app-panel) 96%, transparent); } .janus-perm-node.open>.janus-perm-children { display: block; } /* ── 14. Tabulator ─────────────────────────────────────────────────────────── */ .janus-table-wrap { padding: 0 24px 24px; } /* Container */ .tabulator { background: var(--janus-app-panel) !important; border: 1px solid var(--janus-app-border) !important; border-radius: var(--janus-app-radius-md) !important; font-family: inherit !important; font-size: 13px !important; color: var(--janus-app-text) !important; overflow: hidden !important; } /* O Tabulator mantém .tabulator-table com fundo branco por padrão. Como o hover usa rgba (alpha), isso clareia demais a linha em dark mode. Forçamos o mesmo fundo base do tema para manter o hover consistente. */ .tabulator .tabulator-tableholder .tabulator-table { background: var(--janus-app-panel) !important; } /* Header */ .tabulator .tabulator-header { background: var(--janus-app-surface-2) !important; border-bottom: 1px solid var(--janus-app-border-strong) !important; } .tabulator .tabulator-col, .tabulator .tabulator-col .tabulator-col-content { background: var(--janus-app-surface-2) !important; color: var(--janus-app-soft) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; border-right: 1px solid var(--janus-app-border) !important; } .tabulator .tabulator-col.tabulator-sortable:hover, .tabulator .tabulator-col.tabulator-sortable:hover .tabulator-col-content { background: var(--janus-app-surface-2) !important; } .tabulator .tabulator-col .tabulator-col-title { color: var(--janus-app-soft) !important; } /* Setas de ordenação */ .tabulator-col.tabulator-sortable .tabulator-arrow { border-bottom-color: var(--janus-app-soft) !important; } .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-arrow, .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-arrow { border-bottom-color: var(--janus-app-accent) !important; border-top-color: var(--janus-app-accent) !important; } /* Filtros de coluna no header */ .tabulator .tabulator-header-filter input, .tabulator .tabulator-header-filter select { background: var(--janus-app-surface) !important; border: 1px solid var(--janus-app-border-strong) !important; color: var(--janus-app-text) !important; border-radius: 6px !important; padding: 3px 8px !important; font-family: inherit !important; font-size: 12px !important; outline: none !important; } .tabulator .tabulator-header-filter input:focus, .tabulator .tabulator-header-filter select:focus { border-color: var(--janus-app-accent) !important; } /* Linhas */ .tabulator .tabulator-row, .tabulator .tabulator-row.tabulator-row-odd, .tabulator .tabulator-row.tabulator-row-even { background: var(--janus-app-panel) !important; border-bottom: 1px solid var(--janus-app-border) !important; color: var(--janus-app-text) !important; } /* Hover — pinta a linha inteira, igual ao comportamento da tabela HTML simples */ .tabulator .tabulator-row:hover, .tabulator .tabulator-row.tabulator-selectable:hover, .tabulator .tabulator-row.tabulator-row-odd:hover, .tabulator .tabulator-row.tabulator-row-even:hover, .tabulator .tabulator-row.tabulator-selectable.tabulator-row-odd:hover, .tabulator .tabulator-row.tabulator-selectable.tabulator-row-even:hover { background-color: var(--janus-app-accent-soft) !important; background: var(--janus-app-accent-soft) !important; } /* Células no hover — recebem a mesma cor do fundo para o efeito ficar contínuo */ .tabulator .tabulator-row:hover .tabulator-cell, .tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell, .tabulator .tabulator-row.tabulator-row-odd:hover .tabulator-cell, .tabulator .tabulator-row.tabulator-row-even:hover .tabulator-cell, .tabulator .tabulator-row.tabulator-selectable.tabulator-row-odd:hover .tabulator-cell, .tabulator .tabulator-row.tabulator-selectable.tabulator-row-even:hover .tabulator-cell { background-color: var(--janus-app-accent-soft) !important; background: var(--janus-app-accent-soft) !important; } /* Sem hover visual na linha de calcs holder (header/footer) */ .tabulator .tabulator-calcs-holder .tabulator-row:hover, .tabulator .tabulator-calcs-holder .tabulator-row:hover .tabulator-cell { background: var(--janus-app-surface-2) !important; background-color: var(--janus-app-surface-2) !important; } /* Células */ .tabulator .tabulator-cell { background: transparent !important; color: var(--janus-app-text) !important; border-right: 1px solid var(--janus-app-border) !important; } /* Linha de totais (bottomCalc) */ .tabulator .tabulator-calcs-bottom, .tabulator .tabulator-calcs-bottom .tabulator-cell { background: var(--janus-app-surface-2) !important; color: var(--janus-app-heading) !important; font-weight: 700 !important; border-top: 1px solid var(--janus-app-border-strong) !important; } /* Footer / paginação */ .tabulator .tabulator-footer { background: var(--janus-app-surface-2) !important; border-top: 1px solid var(--janus-app-border-strong) !important; color: var(--janus-app-soft) !important; } .tabulator .tabulator-footer .tabulator-page-size, .tabulator .tabulator-footer .tabulator-paginator { color: var(--janus-app-soft) !important; } .tabulator .tabulator-footer .tabulator-page { background: transparent !important; border: 1px solid var(--janus-app-border-strong) !important; color: var(--janus-app-soft) !important; border-radius: 6px !important; padding: 2px 8px !important; } /* Sem efeito visual de hover no footer/paginação */ .tabulator .tabulator-footer .tabulator-page:not([disabled]):hover, .tabulator .tabulator-footer .tabulator-page:not(disabled):hover { background: transparent !important; border-color: var(--janus-app-border-strong) !important; color: var(--janus-app-soft) !important; } .tabulator .tabulator-footer .tabulator-page.active { background: var(--janus-app-accent) !important; border-color: var(--janus-app-accent) !important; color: #fff !important; } .tabulator .tabulator-footer .tabulator-page[disabled] { opacity: .35 !important; cursor: default !important; } /* ── 14. SweetAlert2 — dark mode ──────────────────────────────────────────── */ /* O SweetAlert2 é injetado diretamente no , então body.dark-mode alcança os popups independentemente de onde estão no DOM. */ /* Botões de ação (confirm/cancel/deny) alinhados ao tema Janus */ .swal2-popup .swal2-actions { gap: 10px; } .swal2-popup .swal2-actions .swal2-styled { margin: 0 !important; padding: 9px 16px !important; border-radius: 10px !important; border: 1px solid transparent !important; --swal2-action-button-focus-box-shadow: none !important; box-shadow: none !important; font-weight: 600 !important; transition: background var(--janus-transition), color var(--janus-transition), border-color var(--janus-transition), filter var(--janus-transition) !important; } .swal2-popup .swal2-actions .swal2-confirm.swal2-styled { background: var(--janus-app-accent) !important; border-color: var(--janus-app-accent) !important; color: #ffffff !important; } .swal2-popup .swal2-actions .swal2-confirm.swal2-styled:hover { filter: brightness(1.06); } .swal2-popup .swal2-actions .swal2-cancel.swal2-styled { background: var(--janus-app-surface-2) !important; border-color: var(--janus-app-border-strong) !important; color: var(--janus-app-text) !important; } .swal2-popup .swal2-actions .swal2-cancel.swal2-styled:hover { background: var(--janus-app-border) !important; } .swal2-popup .swal2-actions .swal2-deny.swal2-styled { background: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } .swal2-popup .swal2-actions .swal2-deny.swal2-styled:hover { filter: brightness(1.05); } .swal2-popup .swal2-actions .swal2-styled:focus, .swal2-popup .swal2-actions .swal2-styled:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .35) !important; } .swal2-popup .swal2-actions .swal2-cancel.swal2-styled:focus, .swal2-popup .swal2-actions .swal2-cancel.swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgba(100, 116, 139, .32) !important; } .swal2-popup .swal2-actions .swal2-deny.swal2-styled:focus, .swal2-popup .swal2-actions .swal2-deny.swal2-styled:focus-visible { box-shadow: 0 0 0 3px rgba(220, 38, 38, .34) !important; } body.dark-mode .swal2-popup { background: var(--janus-app-panel-strong) !important; color: var(--janus-app-text) !important; border: 1px solid var(--janus-app-border-strong) !important; box-shadow: var(--janus-app-shadow) !important; } body.dark-mode .swal2-title { color: var(--janus-app-heading) !important; } body.dark-mode .swal2-html-container, body.dark-mode .swal2-content { color: var(--janus-app-soft) !important; } /* Toast */ body.dark-mode .swal2-popup.swal2-toast { background: var(--janus-app-panel-strong) !important; color: var(--janus-app-text) !important; border: 1px solid var(--janus-app-border-strong) !important; box-shadow: var(--janus-app-shadow-soft) !important; } body.dark-mode .swal2-popup.swal2-toast .swal2-title { color: var(--janus-app-text) !important; } body.dark-mode .swal2-popup .swal2-actions .swal2-cancel.swal2-styled { background: rgba(148, 163, 184, .12) !important; border-color: rgba(148, 163, 184, .34) !important; color: var(--janus-app-heading) !important; } body.dark-mode .swal2-popup .swal2-actions .swal2-cancel.swal2-styled:hover { background: rgba(148, 163, 184, .2) !important; } /* Barra de progresso do timer */ body.dark-mode .swal2-timer-progress-bar { background: var(--janus-app-accent) !important; } /* Ícones — ajusta o fundo do círculo para não ficar branco */ body.dark-mode .swal2-icon { border-color: var(--janus-app-border-strong) !important; } body.dark-mode .swal2-icon.swal2-error { border-color: #f87171 !important; } body.dark-mode .swal2-icon.swal2-success { border-color: #22c55e !important; } body.dark-mode .swal2-icon.swal2-warning { border-color: #eab308 !important; } body.dark-mode .swal2-icon.swal2-info { border-color: #60a5fa !important; } body.dark-mode .swal2-icon.swal2-question { border-color: var(--janus-app-accent) !important; } /* Backdrop */ body.dark-mode .swal2-container.swal2-backdrop-show { background: rgba(2, 6, 23, .65) !important; } /* Toast não deve escurecer a tela inteira */ body.dark-mode.swal2-toast-shown .swal2-container { background: transparent !important; } /* ── 15. Login ─────────────────────────────────────────────────────────────── */ .janus-login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--janus-app-surface); padding: 24px; } .janus-login-card { width: 100%; max-width: 380px; background: var(--janus-app-panel); border: 1px solid var(--janus-app-border); border-radius: var(--janus-app-radius-lg); padding: 36px 32px; box-shadow: var(--janus-app-shadow); } .janus-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .janus-login-brand span { font-size: 20px; font-weight: 700; color: var(--janus-app-heading); } .janus-login-title { font-size: 22px; color: var(--janus-app-heading); margin-bottom: 6px; } .janus-login-sub { color: var(--janus-app-soft); font-size: 13px; margin-bottom: 24px; } .janus-login-error { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .25); border-radius: 10px; padding: 10px 14px; color: #f87171; font-size: 13px; margin-bottom: 16px; } .janus-login-card .janus-form-group { margin-bottom: 16px; } /* ── 15. Multi-select customizado (JanusMultiSelect) ──────────────────────── */ .janus-ms { position: relative; } .janus-ms-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--janus-app-surface); border: 1px solid var(--janus-app-border-strong); border-radius: 10px; padding: 8px 12px; color: var(--janus-app-text); font-size: 14px; font-family: inherit; cursor: pointer; user-select: none; transition: border-color var(--janus-transition), box-shadow var(--janus-transition); min-height: 38px; } .janus-ms-trigger:hover, .janus-ms.open .janus-ms-trigger { border-color: var(--janus-app-accent); box-shadow: 0 0 0 3px var(--janus-app-accent-soft); } .janus-ms-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .janus-ms-trigger-text.placeholder { color: var(--janus-app-soft); opacity: .6; } .janus-ms-trigger-tags { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; flex: 1; } .janus-ms-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--janus-app-accent-soft); border: 1px solid rgba(37, 99, 235, .25); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--janus-app-accent); white-space: nowrap; flex-shrink: 0; } .janus-ms-chevron { flex-shrink: 0; color: var(--janus-app-soft); transition: transform var(--janus-transition); } .janus-ms.open .janus-ms-chevron { transform: rotate(180deg); } /* Dropdown */ .janus-ms-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 400; background: var(--janus-app-panel-strong); border: 1px solid var(--janus-app-border-strong); border-radius: var(--janus-app-radius-md); box-shadow: var(--janus-app-shadow); overflow: hidden; animation: janus-fade-in 120ms ease; } .janus-ms.open .janus-ms-dropdown { display: block; } .janus-ms-search { padding: 8px; border-bottom: 1px solid var(--janus-app-border); } .janus-ms-search input { width: 100%; background: var(--janus-app-surface); border: 1px solid var(--janus-app-border-strong); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-family: inherit; color: var(--janus-app-text); outline: none; transition: border-color var(--janus-transition); } .janus-ms-search input:focus { border-color: var(--janus-app-accent); } .janus-ms-search input::placeholder { color: var(--janus-app-soft); opacity: .6; } .janus-ms-all { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--janus-app-border); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--janus-app-soft); cursor: pointer; transition: background var(--janus-transition); } .janus-ms-all:hover { background: var(--janus-app-accent-soft); color: var(--janus-app-accent); } .janus-ms-options { max-height: 220px; overflow-y: auto; padding: 4px 0; } .janus-ms-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; transition: background var(--janus-transition); font-size: 13px; } .janus-ms-option:hover { background: var(--janus-app-accent-soft); } .janus-ms-option label { cursor: pointer; flex: 1; color: var(--janus-app-text); } .janus-ms-option input[type="checkbox"], .janus-ms-all input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--janus-app-accent); cursor: pointer; } .janus-ms-empty { padding: 16px 12px; font-size: 13px; color: var(--janus-app-soft); text-align: center; } /* ── Scrollbar ─────────────────────────────────────────────────────────────── */ /* ── 16. Scrollbar ─────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--janus-app-border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--janus-app-soft); opacity: .5; } /* ── 16. Utilitários ───────────────────────────────────────────────────────── */ .janus-text-muted { color: var(--janus-app-soft); } .janus-text-accent { color: var(--janus-app-accent); } .janus-text-heading { color: var(--janus-app-heading); } .janus-mt-0 { margin-top: 0; } .janus-mb-16 { margin-bottom: 16px; } .janus-mb-24 { margin-bottom: 24px; } .janus-gap-8 { gap: 8px; } .janus-gap-16 { gap: 16px; } .janus-flex { display: flex; } .janus-flex-col { display: flex; flex-direction: column; } .janus-items-center { align-items: center; } .janus-justify-between { justify-content: space-between; } .janus-w-full { width: 100%; } /* ── 17. Loader global ─────────────────────────────────────────────────────── */ .janus-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 23, .45); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 160ms ease; } .janus-loader.active { opacity: 1; visibility: visible; pointer-events: auto; } .janus-loader__box { min-width: 220px; max-width: 360px; padding: 14px 16px; border-radius: 12px; background: var(--janus-app-panel-strong, rgba(15, 23, 42, .96)); border: 1px solid var(--janus-app-border-strong, rgba(148, 163, 184, .18)); color: var(--janus-app-text, #f8fafc); display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--janus-app-shadow, 0 14px 30px rgba(2, 6, 23, .22)); } .janus-loader__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(148, 163, 184, .35); border-top-color: var(--janus-app-accent, #2563eb); animation: janus-loader-spin 700ms linear infinite; flex-shrink: 0; } .janus-loader__text { font-size: 13px; font-weight: 600; color: var(--janus-app-text, #f8fafc); } body.janus-loading { overflow: hidden; } @keyframes janus-loader-spin { to { transform: rotate(360deg); } } /* ── 17. Responsivo ────────────────────────────────────────────────────────── */ /* Backdrop — visível apenas em mobile quando nav está aberta */ .janus-backdrop { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, .5); backdrop-filter: blur(2px); z-index: 150; cursor: pointer; animation: janus-fade-in 180ms ease; } .janus-backdrop.active { display: block; } @keyframes janus-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { /* Nav fica fora da tela por padrão em mobile */ .janus-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 100vw !important; transform: translateX(-100%); box-shadow: var(--janus-app-shadow); z-index: 200; transition: transform var(--janus-transition); } /* Classe adicionada pelo JS quando o botão toggle é clicado */ .janus-nav.mobile-open { transform: translateX(0); } /* Em mobile o collapsed do desktop não se aplica */ .janus-nav.collapsed { width: 100vw !important; } .janus-nav-brand { padding: 14px 16px; } .janus-nav-close { display: inline-flex; } .janus-nav-menu { padding: 10px 12px; } .janus-nav-footer { padding: 12px 14px 14px; align-items: stretch; } .janus-nav-context { display: block; } .janus-page { width: 100%; } .janus-topbar { min-height: 56px; height: auto; padding: 8px 12px; gap: 8px; flex-wrap: nowrap; } .janus-topbar-brand { display: inline-flex; } .janus-topbar-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .janus-topbar-actions { width: auto; gap: 6px; margin-left: auto; } .janus-topbar-actions.has-context { width: auto; order: 0; margin-left: auto; display: flex; align-items: center; gap: 6px; } .janus-topbar .janus-context-switch, .janus-topbar .janus-context-pill { display: none; } .janus-context-switch { flex: 1; max-width: none; width: 100%; min-width: 0; } .janus-context-control { width: 100%; max-width: none; height: 34px; padding: 5px 6px 5px 8px; gap: 6px; } .janus-context-control__icon { display: none; } .janus-context-control__body { display: block; } .janus-context-control__label { display: none; } .janus-context-control__change { width: 22px; height: 22px; border-radius: 6px; } .janus-context-control__change .janus-lucide { width: 12px; height: 12px; } .janus-context-control__value { font-size: 12px; line-height: 1.2; } .janus-context-pill { flex: 1; max-width: none; min-width: 0; padding: 6px 8px; border: 1px solid var(--janus-app-border-strong); border-radius: 10px; background: var(--janus-app-panel); } .janus-context-pill__icon, .janus-context-pill__label { display: none; } .janus-context-pill__value { max-width: none; font-size: 12px; line-height: 1.2; } .janus-section { width: 100%; padding: 10px; } .janus-layout-stack { gap: 12px; } .janus-card { padding: 14px; border-radius: 12px; } .janus-card-title { margin-bottom: 10px; } .janus-filter-bar { padding: 12px 14px; flex-direction: column; align-items: stretch; } .janus-form-grid { grid-template-columns: 1fr; gap: 10px; } .janus-perm-context-form .janus-form-group--submit { align-items: stretch; } .janus-perm-context-form .janus-form-group--submit .janus-btn { width: 100%; min-width: 0; } .janus-form-span-2 { grid-column: span 1; } .janus-form-actions { justify-content: stretch; } .janus-form-actions .janus-btn { width: 100%; } .janus-btn { min-height: 38px; justify-content: center; } .janus-actions-dropdown { min-width: 132px; } .janus-table thead th, .janus-table tbody td, .janus-table tfoot td, .janus-table tfoot th { padding: 8px 10px; } .janus-perm-head, .janus-perm-row, .janus-perm-module-row { grid-template-columns: minmax(0, 1fr) 42px 42px 42px 42px; gap: 6px; } .janus-perm-toolbar { align-items: stretch; } .janus-perm-toolbar-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } .janus-perm-toolbar-actions .janus-btn { width: 100%; } .janus-perm-head-long { display: none; } .janus-perm-head-short { display: inline; } .janus-perm-path, .janus-perm-link { display: none; } }