/* ═══════════════════════════════════════════════════════════════════════
   GRC1 Tools — Estilos globais
   Inclui: flyout de 4 níveis, gerenciador de menus, quick access,
   botão de suporte, seletor de tema, widgets, banners
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. FLYOUT DE SUBMENUS (níveis 2 e 3) no sidebar do admin
   ────────────────────────────────────────────────────────────────────── */

/* Posição relativa nos itens de nível 1 para o flyout ser posicionado corretamente */
#side-menu .nav-second-level > li.grc1-has-sub {
    position: relative;
}

/* O flyout em si */
.grc1-flyout {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 210px;
    max-width: 280px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    z-index: 1055;
    display: none;
    animation: grc1FlyoutIn 0.15s ease;
}

@keyframes grc1FlyoutIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.grc1-flyout.grc1-flyout-open {
    display: block;
}

/* Item dentro do flyout */
.grc1-flyout-item {
    position: relative;
    list-style: none;
}

.grc1-flyout-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    color: #444;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    transition: background 0.1s;
    cursor: pointer;
}

.grc1-flyout-item > a:hover {
    background: #f5f6f7;
    color: #222;
    text-decoration: none;
}

.grc1-flyout-item > a .grc1-flyout-icon {
    width: 16px;
    text-align: center;
    opacity: 0.7;
    font-size: 12px;
}

.grc1-flyout-item > a .grc1-flyout-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grc1-flyout-item > a .grc1-sub-arrow {
    font-size: 9px;
    opacity: 0.5;
    margin-left: auto;
    flex-shrink: 0;
}

/* Divisor visual entre grupos no flyout */
.grc1-flyout-divider {
    height: 1px;
    background: #eee;
    margin: 4px 0;
}

/* Seta indicando que tem sub-filhos, no item de nível 1 */
.nav-second-level li.grc1-has-sub > a::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    margin-left: auto;
    opacity: 0.45;
    float: right;
    margin-top: 2px;
}

/* Flyout nível 3 (sub-sub-filho) */
.grc1-flyout-level-3 {
    min-width: 190px;
}

/* Flyout nível 4 (sub-sub-sub-filho) */
.grc1-flyout-level-4 {
    min-width: 170px;
}

/* Sidebar escura: ajuste de cores */
.sidebar-dark .grc1-flyout,
[data-sidebar="dark"] .grc1-flyout {
    background: #2c3140;
    border-color: rgba(255,255,255,0.1);
}

.sidebar-dark .grc1-flyout-item > a,
[data-sidebar="dark"] .grc1-flyout-item > a {
    color: #cdd3e0;
}

.sidebar-dark .grc1-flyout-item > a:hover,
[data-sidebar="dark"] .grc1-flyout-item > a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}


/* ──────────────────────────────────────────────────────────────────────
   2. GERENCIADOR DE MENUS — Árvore drag-and-drop (v2.1)
   ────────────────────────────────────────────────────────────────────── */

/* ── Listas ── */
.grc1-tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.grc1-tree-list.grc1-root {
    padding: 6px 0 8px;
}

/* Sub-lista sempre presente (para aceitar drops em folhas) */
.grc1-children-list {
    padding-left: 24px;
    border-left: 2px solid #eaedf2;
    margin-left: 22px;
    margin-top: 2px;
    min-height: 0;
    transition: min-height 0.15s, border-color 0.15s;
}

/* Quando vazia, mostra indicador de área de drop */
.grc1-children-list.grc1-empty-nest {
    min-height: 6px;
    border-left: 2px dashed transparent;
}

/* Destaca a área ao arrastar */
.grc1-tree-item.sortable-drag-over > .grc1-children-list.grc1-empty-nest,
.grc1-children-list:not(.grc1-empty-nest) {
    border-left-color: #d1d5db;
    pointer-events: auto;
}

/* ── Item ── */
.grc1-tree-item {
    border-radius: 7px;
    margin: 2px 6px;
    user-select: none;
    position: relative;
}

.grc1-tree-item.grc1-item-hidden > .grc1-tree-row {
    opacity: 0.55;
}

/* ── Linha principal ── */
.grc1-tree-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #f8f9fb;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
    position: relative;
}

.grc1-tree-row:hover {
    border-color: #dde3ec;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

/* ── Handle de arrasto ── */
.grc1-drag-handle {
    cursor: grab;
    color: #c4cdd8;
    font-size: 12px;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.1s;
}
.grc1-drag-handle:hover { color: #8898aa; }
.grc1-drag-handle:active { cursor: grabbing; }

/* ── Ícone do item ── */
.grc1-item-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #6c757d;
    flex-shrink: 0;
    background: #eef0f4;
    border-radius: 5px;
}

.grc1-icon-type { color: #9aa5b4; }
.grc1-icon-lock { color: #f59e0b; font-size: 10px; flex-shrink: 0; }

/* ── Rótulo ── */
.grc1-item-label {
    font-weight: 500;
    font-size: 13px;
    color: #1a2335;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

/* ── Badges ── */
.grc1-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.grc1-badge-system  { background: #dbeafe; color: #1d4ed8; }
.grc1-badge-custom  { background: #f3f4f6; color: #6b7280; }

/* ── Badges de profundidade ── */
.grc1-depth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.grc1-depth-0 { background: #3b82f6; color: #fff; }
.grc1-depth-1 { background: #10b981; color: #fff; }
.grc1-depth-2 { background: #f59e0b; color: #fff; }
.grc1-depth-3 { background: #ef4444; color: #fff; }

/* ── URL (discreta) ── */
.grc1-item-url {
    font-size: 11px;
    color: #b0bcc8;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
}

/* ── Ações ── */
.grc1-item-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}

.grc1-tree-row:hover .grc1-item-actions {
    opacity: 1;
}

.grc1-action-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    background: #fff;
    color: #6c757d;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.1s;
    line-height: 1;
}

.grc1-action-btn:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
    color: #343a40;
}

.grc1-action-btn.grc1-btn-danger:hover {
    border-color: #f5c6cb;
    background: #fff5f5;
    color: #dc3545;
}

.grc1-action-btn.grc1-hidden-item-btn {
    color: #f59e0b;
    border-color: #fde68a;
    background: #fffbeb;
}

/* ── Estados do Sortable ── */
.grc1-sortable-ghost {
    opacity: 0.4;
}

.grc1-sortable-ghost > .grc1-tree-row {
    background: #e8f0fe !important;
    border-color: #6366f1 !important;
    border-style: dashed !important;
}

.grc1-sortable-chosen > .grc1-tree-row {
    box-shadow: 0 4px 20px rgba(99,102,241,0.25);
    border-color: #6366f1 !important;
    background: #f5f3ff !important;
}

.grc1-sortable-drag > .grc1-tree-row {
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    border-color: #6366f1 !important;
    background: #fff !important;
    border-radius: 7px;
    transform: rotate(1deg);
}

/* Lista filha: quando aceita drop, mostra linha verde pulsante */
.grc1-children-list.sortable-drag-over,
.grc1-children-list:focus-within {
    border-left-color: #10b981;
    background: linear-gradient(to right, rgba(16,185,129,0.04), transparent);
}

/* ── Flash de feedback ── */
.grc1-flash-ok > .grc1-tree-row {
    background: #f0fdf4 !important;
    border-color: #10b981 !important;
}

/* ── Responsivo ── */
@media (max-width: 768px) {
    .grc1-item-url,
    .grc1-badge  { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   3. MODAL DE ITEM
   ────────────────────────────────────────────────────────────────────── */

#grc1-item-modal .panel {
    margin-bottom: 0;
}

#grc1-item-modal .panel-heading {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* ──────────────────────────────────────────────────────────────────────
   4. THEME SWITCHER FLUTUANTE
   ────────────────────────────────────────────────────────────────────── */

#grc1-theme-switcher {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 9050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#grc1-ts-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(30,35,60,0.75);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
}
#grc1-ts-btn:hover { background: rgba(30,35,60,0.95); transform: scale(1.08); }

#grc1-ts-panel {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.08);
    animation: grc1FlyoutIn 0.15s ease;
}
#grc1-ts-panel.grc1-ts-open { display: flex; }

.grc1-ts-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.grc1-ts-dot:hover { transform: scale(1.2); }
.grc1-ts-dot-active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.3); transform: scale(1.15); }

.grc1-dark #grc1-ts-panel { background: rgba(26,30,40,0.95); border-color: rgba(255,255,255,0.1); }


/* ──────────────────────────────────────────────────────────────────────
   5. QUICK ACCESS MENU
   ────────────────────────────────────────────────────────────────────── */

#grc1-quick-access {
    position: fixed;
    z-index: 9040;
    display: flex;
    align-items: center;
}

/* Posição: direita (vertical) */
#grc1-quick-access.grc1-qa-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row-reverse;
}
/* Posição: esquerda */
#grc1-quick-access.grc1-qa-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: row;
}
/* Posição: inferior */
#grc1-quick-access.grc1-qa-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

.grc1-qa-toggle {
    width: 36px;
    height: 60px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(239,68,68,0.4);
    transition: width 0.2s;
}
.grc1-qa-right   .grc1-qa-toggle { border-radius: 8px 0 0 8px; }
.grc1-qa-left    .grc1-qa-toggle { border-radius: 0 8px 8px 0; }
.grc1-qa-bottom  .grc1-qa-toggle { border-radius: 8px 8px 0 0; width: 60px; height: 36px; }
.grc1-qa-toggle:hover { width: 42px; }
.grc1-qa-bottom .grc1-qa-toggle:hover { width: 60px; height: 42px; }

.grc1-qa-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    padding: 8px 0;
    max-height: 70vh;
    overflow-y: auto;
    display: none;
    min-width: 210px;
    border-radius: 8px;
}
.grc1-qa-right .grc1-qa-panel  { border-radius: 8px 0 0 8px; border-right: none; }
.grc1-qa-left  .grc1-qa-panel  { border-radius: 0 8px 8px 0; border-left: none; }
.grc1-qa-panel.grc1-qa-panel-open { display: block; animation: grc1FlyoutIn 0.18s ease; }

.grc1-qa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px 10px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    border-bottom: 1px solid #f3f4f6;
}
.grc1-qa-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}
.grc1-qa-close:hover { color: #374151; }

.grc1-qa-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.1s;
    white-space: nowrap;
}
.grc1-qa-item:hover { background: #f9fafb; color: #111; text-decoration: none; }
.grc1-qa-icon { width: 20px; text-align: center; color: #6b7280; font-size: 13px; }
.grc1-qa-label { flex: 1; }
.grc1-qa-shortcut {
    font-size: 10px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    padding: 1px 5px;
    color: #6b7280;
    font-family: monospace;
}

.grc1-dark .grc1-qa-panel { background: var(--grc1-panel); border-color: var(--grc1-border); }
.grc1-dark .grc1-qa-item  { color: var(--grc1-text); }
.grc1-dark .grc1-qa-item:hover { background: rgba(255,255,255,0.05); }
.grc1-dark .grc1-qa-header { color: var(--grc1-text2); border-color: var(--grc1-border); }


/* ──────────────────────────────────────────────────────────────────────
   6. BOTÃO DE SUPORTE AIO
   ────────────────────────────────────────────────────────────────────── */

#grc1-support-btn {
    position: fixed;
    z-index: 9030;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s, transform 0.4s;
}
#grc1-support-btn.grc1-support-visible {
    opacity: 1;
    transform: translateY(0);
}
.grc1-support-br { bottom: 24px; right: 24px; }
.grc1-support-bl { bottom: 24px; left: 24px; }
.grc1-support-bc { bottom: 24px; left: 50%; transform: translateX(-50%); }
.grc1-support-bc.grc1-support-visible { transform: translateX(-50%); }

.grc1-support-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 50px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.grc1-support-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    color: #fff !important;
}
.grc1-support-link i { font-size: 18px; }

@keyframes grc1SupportPulse {
    0%   { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
    50%  { box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0.15); }
    100% { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
}
.grc1-support-pulse { animation: grc1SupportPulse 0.6s ease; }


/* ──────────────────────────────────────────────────────────────────────
   7. THEME ADAPTATIONS — flyout, tree e modal respeitam o tema ativo
   Usa as variáveis definidas em grc1_dark.css, grc1_office.css, etc.
   ────────────────────────────────────────────────────────────────────── */

/* Selector unificado para todos os temas com variáveis definidas */
:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-flyout,
.grc1-dark .grc1-flyout, .grc1-office .grc1-flyout,
.grc1-cyan .grc1-flyout, .grc1-violet .grc1-flyout,
.grc1-emerald .grc1-flyout, .grc1-sunset .grc1-flyout {
    background: var(--grc1-panel, #1e2332);
    border-color: var(--grc1-border, rgba(255,255,255,0.1));
    box-shadow: 4px 6px 20px rgba(0,0,0,0.3);
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-flyout-item > a,
.grc1-dark .grc1-flyout-item > a, .grc1-office .grc1-flyout-item > a,
.grc1-cyan .grc1-flyout-item > a, .grc1-violet .grc1-flyout-item > a,
.grc1-emerald .grc1-flyout-item > a, .grc1-sunset .grc1-flyout-item > a {
    color: var(--grc1-text, #c8d3e8);
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-flyout-item > a:hover,
.grc1-dark .grc1-flyout-item > a:hover, .grc1-office .grc1-flyout-item > a:hover,
.grc1-cyan .grc1-flyout-item > a:hover, .grc1-violet .grc1-flyout-item > a:hover,
.grc1-emerald .grc1-flyout-item > a:hover, .grc1-sunset .grc1-flyout-item > a:hover {
    background: var(--grc1-bg3, rgba(255,255,255,0.07));
    color: var(--grc1-text, #fff);
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-flyout-divider,
.grc1-dark .grc1-flyout-divider, .grc1-office .grc1-flyout-divider,
.grc1-cyan .grc1-flyout-divider, .grc1-violet .grc1-flyout-divider,
.grc1-emerald .grc1-flyout-divider, .grc1-sunset .grc1-flyout-divider {
    background: var(--grc1-border, rgba(255,255,255,0.08));
}

/* Tree (gerenciador de menus) */
:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-tree-row,
.grc1-dark .grc1-tree-row, .grc1-office .grc1-tree-row,
.grc1-cyan .grc1-tree-row, .grc1-violet .grc1-tree-row,
.grc1-emerald .grc1-tree-row, .grc1-sunset .grc1-tree-row {
    background: var(--grc1-panel, #1e2332);
    border-color: transparent;
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-tree-row:hover,
.grc1-dark .grc1-tree-row:hover, .grc1-office .grc1-tree-row:hover,
.grc1-cyan .grc1-tree-row:hover, .grc1-violet .grc1-tree-row:hover,
.grc1-emerald .grc1-tree-row:hover, .grc1-sunset .grc1-tree-row:hover {
    background: var(--grc1-panel2, #242a38);
    border-color: var(--grc1-border, rgba(255,255,255,0.1));
    box-shadow: none;
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-item-label,
.grc1-dark .grc1-item-label, .grc1-office .grc1-item-label,
.grc1-cyan .grc1-item-label, .grc1-violet .grc1-item-label,
.grc1-emerald .grc1-item-label, .grc1-sunset .grc1-item-label {
    color: var(--grc1-text, #c8d3e8);
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-item-icon,
.grc1-dark .grc1-item-icon, .grc1-office .grc1-item-icon,
.grc1-cyan .grc1-item-icon, .grc1-violet .grc1-item-icon,
.grc1-emerald .grc1-item-icon, .grc1-sunset .grc1-item-icon {
    background: var(--grc1-bg3, rgba(255,255,255,0.06));
    color: var(--grc1-text2, #7a8aa8);
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-children-list,
.grc1-dark .grc1-children-list, .grc1-office .grc1-children-list,
.grc1-cyan .grc1-children-list, .grc1-violet .grc1-children-list,
.grc1-emerald .grc1-children-list, .grc1-sunset .grc1-children-list {
    border-left-color: var(--grc1-border, rgba(255,255,255,0.08));
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-action-btn,
.grc1-dark .grc1-action-btn, .grc1-office .grc1-action-btn,
.grc1-cyan .grc1-action-btn, .grc1-violet .grc1-action-btn,
.grc1-emerald .grc1-action-btn, .grc1-sunset .grc1-action-btn {
    background: var(--grc1-panel2, #242a38);
    border-color: var(--grc1-border, rgba(255,255,255,0.12));
    color: var(--grc1-text2, #7a8aa8);
}

:root[data-grc1-theme]:not([data-grc1-theme="default"]) .grc1-action-btn:hover,
.grc1-dark .grc1-action-btn:hover, .grc1-office .grc1-action-btn:hover,
.grc1-cyan .grc1-action-btn:hover, .grc1-violet .grc1-action-btn:hover,
.grc1-emerald .grc1-action-btn:hover, .grc1-sunset .grc1-action-btn:hover {
    background: var(--grc1-bg2, #1c2030);
    border-color: var(--grc1-accent, #5b80c8);
    color: var(--grc1-text, #c8d3e8);
}

/* Modal */
:root[data-grc1-theme]:not([data-grc1-theme="default"]) #grc1-item-modal .panel-heading,
.grc1-dark #grc1-item-modal .panel-heading, .grc1-office #grc1-item-modal .panel-heading,
.grc1-cyan #grc1-item-modal .panel-heading, .grc1-violet #grc1-item-modal .panel-heading,
.grc1-emerald #grc1-item-modal .panel-heading, .grc1-sunset #grc1-item-modal .panel-heading {
    background: var(--grc1-panel2, #242a38);
    border-color: var(--grc1-border, rgba(255,255,255,0.1));
}

/* Office tem sidebar clara — flyout deve ser clara também */
.grc1-office .grc1-flyout {
    background: #ffffff;
    border-color: rgba(93,120,255,0.15);
}
.grc1-office .grc1-flyout-item > a { color: #1a2035; }
.grc1-office .grc1-flyout-item > a:hover { background: #f0f4ff; color: #1a2035; }
.grc1-office .grc1-tree-row { background: #f4f6ff; }
.grc1-office .grc1-tree-row:hover { background: #eaefff; border-color: rgba(93,120,255,0.25); }
.grc1-office .grc1-item-label { color: #1a2035; }


/* ──────────────────────────────────────────────────────────────────────
   7. BANNERS CONTAINER
   — z-index 1025: acima do conteúdo, abaixo do modal backdrop (1040)
     para não bloquear interações dentro de modais Bootstrap.
   ────────────────────────────────────────────────────────────────────── */

/* ── Container: ocupa a área de conteúdo (à direita do sidebar) ── */
#grc1-banners-container {
    left: 230px;
    right: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease;
}
body.hide-sidebar:not(.show-sidebar) #grc1-banners-container,
body.page-small:not(.show-sidebar)   #grc1-banners-container {
    left: 0;
}
@media (max-width: 768px) {
    #grc1-banners-container { left: 0; }
}

/* ── Item base ── */
#grc1-banners-container .grc1-banner-item {
    pointer-events: all;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
}
#grc1-banners-container .grc1-banner-item .close {
    pointer-events: all;
}
.grc1-bicon { margin-right: 6px; }
.grc1-bcontent { opacity: .9; }

/* ── Alturas ── */
.grc1-bh-slim   { padding: 2px 40px 2px 14px !important; font-size:12px !important; }
.grc1-bh-normal { padding: 9px 40px 9px 14px !important; }
.grc1-bh-tall   { padding: 16px 40px 16px 14px !important; min-height: 54px; display:flex; align-items:center; }
.grc1-bh-custom { padding: 6px 40px 6px 14px !important; }

/* ── Marquee (letreiro) ── */
.grc1-banim-marquee .grc1-bmarquee-wrap {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
.grc1-banim-marquee .grc1-bmarquee-inner {
    display: inline-block;
    white-space: nowrap;
    animation: grc1BMarquee var(--grc1-bspeed, 30s) linear infinite;
}
.grc1-banim-marquee:hover .grc1-bmarquee-inner { animation-play-state: paused; }
@keyframes grc1BMarquee {
    from { transform: translateX(100vw); }
    to   { transform: translateX(-100%); }
}

/* ── Slide (desliza do topo) ── */
.grc1-banim-slide { animation: grc1BSlide .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes grc1BSlide {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── Fade ── */
.grc1-banim-fade { animation: grc1BFade 1.4s ease both; }
@keyframes grc1BFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Pulse (pulsa brilho do fundo) ── */
.grc1-banim-pulse-bg { animation: grc1BPulse var(--grc1-bspeed, 2s) ease-in-out infinite; }
@keyframes grc1BPulse {
    0%, 100% { filter: brightness(1);     }
    50%       { filter: brightness(1.22); }
}

/* ── Gradient animado ── */
.grc1-banim-gradient-anim {
    background-size: 200% 200% !important;
    animation: grc1BGrad var(--grc1-bspeed, 4s) ease infinite;
}
@keyframes grc1BGrad {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}

/* ── Animações de ícone ── */
.grc1-icon-beat  { display:inline-block; animation: grc1IBeat  1s   ease       infinite; }
.grc1-icon-bounce{ display:inline-block; animation: grc1IBounce 1s  ease       infinite; }
.grc1-icon-spin  { display:inline-block; animation: grc1ISpin  1.5s linear     infinite; }
.grc1-icon-shake { display:inline-block; animation: grc1IShake  .6s ease       infinite; }
@keyframes grc1IBeat   { 0%,100%{transform:scale(1)}      50%{transform:scale(1.3)} }
@keyframes grc1IBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes grc1ISpin   { to{transform:rotate(360deg)} }
@keyframes grc1IShake  { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }


/* ──────────────────────────────────────────────────────────────────────
   8. MISC: smooth transitions para troca de tema
   ────────────────────────────────────────────────────────────────────── */

body, .panel, .navbar, .sidebar, #menu, .modal-content,
.form-control, .btn, .dropdown-menu, table, .table {
    transition: background-color 0.25s, border-color 0.25s, color 0.2s;
}

/* ──────────────────────────────────────────────────────────────────────
   8b. DATATABLES PROCESSING — fundo do indicador de carga

   Bootstrap DataTables define sProcessing com as classes
   "dataTables_processing panel panel-default", fazendo o indicador
   herdar o fundo branco do Bootstrap (.panel { background-color:#fff }).

   Esta regra usa CSS custom properties definidas nos temas. Para o tema
   padrão (sem classe de tema), usa #f5f5f5 como fallback — idêntico ao
   fundo cinza claro do body do Perfex. As regras por tema têm
   especificidade maior (3 classes vs 2) e sobrescrevem corretamente.
   ────────────────────────────────────────────────────────────────────── */
.dataTables_processing.panel,
.dataTables_processing.panel-default {
    background: var(--grc1-bg, #f5f5f5) !important;
    border-color: var(--grc1-accent, rgba(0,0,0,0.1)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
.dataTables_processing > div > div {
    background: var(--grc1-accent, #0784b5) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   9. SETTINGS PAGE — garante interatividade dos inputs nativos
   Previne que regras de ofuscação (pointer-events:none) do datatable
   manager vazem para campos da tela de configurações do módulo.
   ────────────────────────────────────────────────────────────────────── */
#grc1-settings-form input[type="checkbox"],
#grc1-settings-form input[type="radio"],
#grc1-settings-form input[type="number"],
#grc1-settings-form input[type="text"],
#grc1-settings-form select,
#grc1-settings-form .checkbox label,
#grc1-settings-form .radio label {
    pointer-events: auto !important;
    filter: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
}