/* ==========================================================================
   KCS HUB - STYLE.CSS (VS CODE ARCHITECTURE + KCS V1 POLISH)
   ========================================================================== */

/* ==========================================================================
   MAPA DE SEÇÕES (Refatoração Segura)
   - Reset/Base
   - Layout
   - Header
   - Sidebar/Menu
   - Cards/Componentes
   - Forms/Inputs
   - Buttons
   - Tables/Listas
   - Modals/Overlays
   - Responsividade
   - Utilitários
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (Variáveis Globais)
   ========================================================================== */
:root {
    /* TIPOGRAFIA */

    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", system-ui, sans-serif;
    --font-family-mono: "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;

    --font-size-xs: 11px;
    --chatbot-width: 360px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;

    /* ESPAÇAMENTO */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* BORDAS E RAIOS */
    --border-width-base: 1px;
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 6px;
    --border-radius-xl: 12px;

    /* SOMBRAS */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.20);
}

/* ==========================================================================
   2. TEMAS (Light+ e Dark+)
   ========================================================================== */
html.dark {
    --color-editor-background: #1e1e1e;
    --color-sidebar-background: #252526;
    --color-activitybar-background: #333333;
    --color-statusbar-background: #007acc;
    --color-panel-background: #1e1e1e;
    --color-titlebar-background: #323233;

    --color-border: #3c3c3c;
    --color-border-subtle: #2d2d2d;
    --color-focus: #007fd4;
    --color-selection: #04395e;
    --color-hover: #2a2d2e;
    --color-active-item: #37373d;

    --color-text-primary: #cccccc;
    --color-text-secondary: #969696;
    --color-text-muted: #858585;
    --color-text-inverse: #ffffff;

    --bg-canvas: #1e1e1e;
    --bg-surface: #252526;
    --surface-color: var(--bg-surface);

    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-success-text: #34d399;
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-text: #fbbf24;
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-info-text: #60a5fa;
}

html.light {
    --color-editor-background: #ffffff;
    --color-sidebar-background: #f3f3f3;
    --color-activitybar-background: #2c2c2c;
    --color-statusbar-background: #007acc;
    --color-panel-background: #ffffff;
    --color-titlebar-background: #dddddd;

    --color-border: #cccccc;
    --color-border-subtle: #e4e4e4;
    --color-focus: #0090f1;
    --color-selection: #add6ff;
    --color-hover: #e8e8e8;
    --color-active-item: #e4e6f1;

    --color-text-primary: #3b3b3b;
    --color-text-secondary: #616161;
    --color-text-muted: #858585;
    --color-text-inverse: #ffffff;

    --bg-canvas: #ffffff;
    --bg-surface: #f3f3f3;
    --surface-color: var(--bg-surface);

    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-success-text: #059669; /* Verde mais escuro para contraste no branco */
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-text: #d97706; /* Laranja mais escuro para legibilidade */
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-info-text: #2563eb; /* Azul mais forte */
}

html {
    height: 100% !important;
    min-height: 100vh !important;
}

body {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-sm) !important;
    background-color: var(--color-editor-background) !important;
    color: var(--color-text-primary) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    height: 100% !important;
}

/* ==========================================================================
   3. FUNDAÇÃO DO LAYOUT (WORKBENCH GRID)
   ========================================================================== */
.workbench-grid {
    display: grid !important;
    grid-template-areas:
        "titlebar titlebar titlebar"
        "activitybar sidebar editor"
        "activitybar sidebar panel"
        "statusbar statusbar statusbar";
    grid-template-rows: 48px 1fr auto 22px; /* Titlebar ajustada para 48px */
    grid-template-columns: 48px 260px 1fr; /* Sidebar levemente mais larga */
    background-color: var(--color-editor-background) !important;
}

/* TITLE BAR (Header) */
header.workbench-titlebar {
    grid-area: titlebar;
    background-color: var(--color-titlebar-background) !important;
    border-bottom: 1px solid var(--color-border) !important;
    height: 48px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: none !important;
}
header.workbench-titlebar .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
header.workbench-titlebar input {
    height: 28px !important;
    background-color: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    font-size: var(--font-size-xs) !important;
    color: var(--color-text-primary) !important;
}

/* ACTIVITY BAR */
.workbench-activitybar {
    grid-area: activitybar;
    background-color: var(--color-activitybar-background) !important;
    border-right: 1px solid var(--color-border) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding-top: 8px;
    padding-bottom: 8px;
}
.activitybar-top, .activitybar-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.activitybar-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.2s ease;
}
.activitybar-btn:hover {
    color: var(--color-text-inverse);
}
.activitybar-btn.active {
    color: var(--color-focus);
    border-left: 2px solid var(--color-focus);
}

/* SIDE BAR */
#sidebar.workbench-sidebar {
    grid-area: sidebar;
    background-color: var(--color-sidebar-background) !important;
    border-right: 1px solid var(--color-border) !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    transform: none !important;
    box-shadow: none !important;
}
.workbench-sidebar .p-3 {
    padding: 16px !important;
}
#btn-new-article {
    background-color: #0056D2 !important; /* Azul Vibrante */
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    border: none !important;
    color: white !important;
}
#btn-new-sql {
    background-color: var(--color-hover) !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-border-subtle) !important;
}

/* Sidebar Menu Items */
.sidebar-section-title {
    padding: 16px 16px 8px 16px !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.sidebar-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    margin: 0 8px 2px 8px !important;
    width: calc(100% - 16px) !important;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-item-label {
    flex: 1;
    text-align: left;
}
.sidebar-item:hover {
    background-color: var(--color-hover) !important;
    color: var(--color-text-primary);
}
.sidebar-item.active {
    background-color: rgba(0, 127, 212, 0.1) !important;
    color: var(--color-focus) !important;
    font-weight: 600;
}
.count-badge {
    background-color: var(--color-hover);
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: bold;
}
.tree-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 4px 8px;
    cursor: pointer;
}
#readme-menu-container {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--color-border-subtle);
}

/* EDITOR AREA (Main) */
main.workbench-editor {
    grid-area: editor;
    background-color: var(--color-editor-background) !important;
    padding: var(--space-6) !important;
    overflow-y: auto !important;
}

/* STATUS BAR */
.workbench-statusbar {
    grid-area: statusbar;
    background-color: var(--color-statusbar-background) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 0 10px !important;

    display: flex;
    align-items: center;

    justify-content: space-between; /* Para espaçar os itens do status bar */
    position: relative;
    z-index: 120;
}

/* Itens da Status Bar */
.workbench-statusbar > div {
    display: flex;
    align-items: center;

    gap: 8px; /* Espaçamento entre os itens da barra */
}

.workbench-statusbar > div > span,
.workbench-statusbar > div > button {
    display: flex;
    align-items: center;

    gap: 4px;
    color: var(--color-text-inverse) !important; /* Cor do texto no tema inverso (branco) */
    background: transparent;
    border: none;

    outline: none;

    padding: 0 8px; /* Ajustado para consistência */
    height: 22px; /* Altura padrão para itens do statusbar */
    border-radius: var(--border-radius-sm); /* Canto sutil */
    cursor: pointer;

    transition: background-color 0.2s ease;
    font-size: 12px !important; /* Tamanho da fonte padrão da statusbar */
    line-height: 1;
    white-space: nowrap; /* Garante que o texto não quebre */
}

.workbench-statusbar > div > span:hover,
.workbench-statusbar > div > button:hover,
.workbench-statusbar > div > span:focus-visible,
.workbench-statusbar > div > button:focus-visible {
    background-color: rgba(255, 255, 255, 0.14) !important; /* Efeito hover branco/20 */
    outline: none !important;
    box-shadow: none !important;

}

/* Removendo estilos conflitantes específicos do footer-chat-button */
.footer-chat-button {
    border: none !important;

    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important; /* Garante fundo transparente por padrão */
}

.footer-chat-button:hover,
.footer-chat-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.14) !important; /* Efeito hover branco/20 */
    border-color: transparent !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;

}
/* ==========================================================================

   4. UI COMPONENTS (O RESGATE DO ESTILO POLIDO - MIX)
   ========================================================================== */

/* DASHBOARD */
.dash-title {

    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--color-text-inverse);

}
.dash-icon-main { color: var(--color-focus); font-size: 24px; }
.dash-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.metric-card {
    background-color: var(--color-sidebar-background);

    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;

    gap: 8px;

    box-shadow: var(--shadow-sm);
}

.metric-label {
    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;

    gap: 6px;
}
.metric-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-inverse);
}
.value-approved { color: #10B981; } /* Verde */
.value-views { color: #3B82F6; } /* Azul */
.value-alert { color: #EF4444; } /* Vermelho */

/* TABELAS */
.table-wrapper {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin-bottom: 24px;
}
.table-default {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.table-default th {
    background-color: var(--color-hover);

    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-subtle);
}

.table-row {
    border-bottom: 1px solid var(--color-border-subtle);
    transition: background-color 0.2s;
    cursor: pointer;
}

.table-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}
.table-row td {
    padding: 16px;
    vertical-align: middle;
}
.id-badge {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    font-weight: 700;
}
.cell-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-inverse);
    margin-bottom: 4px;
}
.cell-subtitle {
    font-size: 11px;
    color: var(--color-text-muted);
}
.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.avatar-mini {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
}
.user-name {
    font-size: 13px;
    font-weight: 500;
}

/* BADGES DE STATUS */
.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}
.status-approved, .badge-green {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-review, .status-pendente_revisao, .badge-alert {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-draft {
    background-color: rgba(107, 114, 128, 0.1);
    color: #9CA3AF;
    border: 1px solid rgba(107, 114, 128, 0.2);
}
.badge-purple {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
.status-icon-approved { color: #10B981; font-size: 16px; }

/* ==========================================================================
   5. OVERLAY, DOCK E CHATBOT
   ========================================================================== */

/* OVERLAY ROOT (A mágica do z-index resolvido) */
#overlay-root {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Deixa os cliques passarem quando vazio */
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* Quando o JS injeta a classe, o fundo escuro aparece e bloqueia cliques */
#overlay-root.overlay-visible {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA: Remoção da "Caixa Dupla" no Overlay
   Substitua o bloco .kcs-active-overlay anterior por este:
   ========================================================================== */
.kcs-active-overlay {
    pointer-events: auto;
    width: 100%;
    max-width: 850px;
    max-height: 90vh;
    background: transparent !important; /* Remove o fundo duplo do contêiner pai */
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    margin: auto;
}

/* O fundo, a borda e a sombra real devem ficar APENAS na caixa interna */
.kcs-active-overlay .modal-box {
    background-color: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important; /* Canto mais técnico, menos arredondado */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important; /* Sombra de elevação elegante */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ==========================================================================
   CORREÇÃO 14: Polimento Pixel-Perfect de Formulários (VS Code Style)
   Adicione este bloco ao final do style.css
   ========================================================================== */
/* Labels mais compactas, técnicas e espaçamento milimétrico */
.form-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.05em;
}

/* Inputs com cantos precisos e focus-ring azul */
.form-input,
.form-textarea,
.form-select {
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 4px !important; /* Reduzindo o arredondamento */
    padding: 6px 10px !important;
    background-color: var(--color-editor-background);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); /* Profundidade sutil interna */
    transition: all 0.15s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-focus) !important;
    box-shadow: 0 0 0 1px var(--color-focus) !important; /* Anel de foco exato do VS Code */
}

/* Ajuste fino na área do Piloto Automático IA */
.alert-indigo {
    background-color: rgba(99, 102, 241, 0.04) !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
}

.badge-indigo {
    border-radius: 3px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
}

/* Refinamento da Toolbar do Editor (Semelhante a abas do painel) */
.editor-container {
    border-radius: 4px !important;
    border: 1px solid var(--color-border-subtle) !important;
}

.editor-toolbar {
    background-color: var(--color-sidebar-background) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    padding: 4px 8px !important;
}

.btn-tool {
    border-radius: 4px !important;
    height: 24px !important;
    width: 24px !important;
}

/* DOCK (Painel Inferior) */
#kcs-dock {
    grid-area: panel;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    background-color: var(--color-panel-background);
    z-index: 40;
    height: 0; /* Colapsado por padrão */
    border-top: 1px solid transparent;
    transition: height 0.1s ease-out;
}

/* Ativado via JavaScript quando houver abas */
#kcs-dock.dock-visible {
    height: 36px;
    border-top-color: var(--color-border);
}

/* Estilo das Abas (Tabs Minimizadas) */
.dock-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    height: 35px;
    background-color: var(--color-editor-background);
    border-right: 1px solid var(--color-border);
    border-top: 1px solid transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.7;
    flex-shrink: 0;
}
.dock-tab:hover {
    opacity: 1;
    background-color: var(--color-hover);
}
.dock-tab:last-child {
    border-top: 1px solid var(--color-focus);
    opacity: 1;
    color: var(--color-text-primary);
}
.dock-tab-title {
    font-size: 11px;
    font-family: var(--font-family-mono);
    text-transform: uppercase;
    padding-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dock-tab-actions {
    display: flex;
    gap: 4px;
    padding-right: 8px;
}
.dock-tab-actions button {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px;
}
.dock-tab-actions .btn-close:hover {
    color: #ff5f56;
}

/* CHATBOT IA NO RODAPÉ */
.footer-chat-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 42px;
    height: 36px;
    padding: 0 10px;
    border-radius: 999px;
    border: none !important; /* Removido para integrar o botão à barra */
    background: transparent; /* Alterado para transparente */
    color: #f8fafc;
    font-size: 0.9rem;
    line-height: 1;
    transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}
.footer-chat-button:hover,
.footer-chat-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.14) !important; /* Corrigido para semi-transparente como UTF-8 */
    border-color: transparent !important;
    transform: none !important; /* Removido deslocamento */
    outline: none !important;
    box-shadow: none !important;
}
.footer-chat-button i {
    font-size: 1.05rem;
}
.footer-chat-button-text {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
}
.footer-chat-badge {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f97316;
    display: inline-flex;
}

#chatbot-container {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

.chatbot-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 49;
    pointer-events: none !important;
}
.chatbot-overlay.active {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
}

/* ==========================================================================
   CHATBOT PANEL (FIX DE ENCAIXE E RESPONSIVIDADE)
   ========================================================================== */
#chatbot-panel.chatbot-panel {
    position: fixed !important;
    right: 0 !important;
    top: 48px !important; /* Respeita a altura do Header */
    bottom: 22px !important; /* Respeita a altura do Footer */
    width: var(--chatbot-width) !important;
    max-width: 100% !important;
    height: calc(100vh - 70px) !important; /* 100% da tela menos 48px(topo) e 22px(baixo) */
    display: flex;
    flex-direction: column;
    z-index: 80 !important;
    background-color: var(--color-sidebar-background) !important;
    border-left: 1px solid var(--color-border) !important;
    color: var(--color-text-primary);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15) !important;
    pointer-events: auto;
}

#chatbot-panel.chatbot-panel.active {
    transform: translateX(0) !important;
}

/* Protege o Header e o Footer para nunca serem cobertos pelas sombras do chat */
header.workbench-titlebar {
    position: relative;
    z-index: 100 !important;
}
.workbench-statusbar {
    position: relative;
    z-index: 100 !important;
}

/* Empurra o layout para o lado esquerdo sem encavalar */
body.chatbot-open .workbench-titlebar,
body.chatbot-open .workbench-editor {
    padding-right: calc(var(--chatbot-width) + 16px) !important;
    box-sizing: border-box;
    transition: padding-right 180ms ease;
}

/* Mágica: Evita o esmagamento do Dashboard (Transforma 6 colunas em 3) */
body.chatbot-open .dash-saas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.chatbot-open .dash-saas-section-grid,
body.chatbot-open .dash-tables-row {
    grid-template-columns: 1fr !important;
}

/* Responsividade para Celulares (Volta a ocupar 100% cobrindo tudo) */
@media (max-width: 900px) {
    body.chatbot-open .workbench-titlebar,
    body.chatbot-open .workbench-editor {
        padding-right: 16px !important;
    }
    #chatbot-panel.chatbot-panel {
        width: 100vw !important;
        border-left: none !important;
    }
}

.chatbot-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem 0.5rem; /* Ajuste para ter mais padding vertical em cima e menos embaixo */
    border-bottom: 1px solid var(--color-border) !important; /* Forçado com !important */
    background: var(--color-sidebar-background) !important; /* Forçado com !important */
}
.chatbot-panel-header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
}
.chatbot-panel-header button {
    width: 28px; /* Reduzido o tamanho dos botões do header */
    height: 28px; /* Reduzido o tamanho dos botões do header */
    border-radius: var(--border-radius-sm); /* Canto suave */
    color: var(--color-text-secondary);
    background: transparent;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Ajuste o tamanho do ícone */
}
.chatbot-panel-header button:hover {
    background: var(--color-hover) !important; /* Forçado com !important */
    color: var(--color-text-primary) !important;
}

#chatbot-messages,
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
    overflow-x: hidden;
}

.chatbot-input-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--color-border);
    background: inherit;
    flex-shrink: 0;
    min-width: 0;
width: 100%;
box-sizing: border-box;
}

.chatbot-input-area input {
    height: 40px;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-editor-background);
    color: var(--color-text-primary);
    outline: none;
}

#chatbot-form,
#chatbot-input {
    min-width: 0;
}

.chatbot-input-area input:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 1px rgba(0, 143, 241, 0.16);
}

.chatbot-send {
    width: 40px !important;
    height: 40px;
    min-width: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 8px;
    background: var(--color-focus);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.chatbot-send:hover {
    background: rgba(0, 143, 241, 0.9);
}

/* Estilização dos Smart Prompts */
.chat-smart-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.btn-smart-prompt {
    background-color: var(--color-sidebar-background) !important;
    color: var(--color-text-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: var(--border-radius-md) !important;
    border: 1px solid var(--color-border) !important;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: none !important;
    outline: none !important;
}
.btn-smart-prompt:hover {
    background-color: var(--color-hover) !important;
}

/* Estilo do Avatar do Bot */
.chat-bot-avatar {
    width: 28px; /* Reduzido o tamanho do avatar */
    height: 28px; /* Reduzido o tamanho do avatar */
    border-radius: var(--border-radius-sm) !important; /* Canto mais técnico */
    background-color: var(--color-info-bg) !important; /* Cor de fundo baseada no tema */
    color: var(--color-info-text) !important; /* Cor do ícone baseada no tema */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-md); /* Tamanho do ícone */
}

/* Balões de Mensagem */
.chat-user-bubble {
    background-color: var(--color-focus) !important;
    color: var(--color-text-inverse) !important;
    font-size: var(--font-size-sm) !important;
    padding: 8px 16px !important;
    border-radius: 16px 16px 2px 16px !important;
    max-width: 85%;
    line-height: 1.4;
    word-break: break-word;
    box-shadow: var(--shadow-xs);
}

.chat-bot-bubble {
    background-color: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    padding: 12px !important;
    border-radius: 16px 16px 16px 2px !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text-primary) !important;
    line-height: 1.5;
    box-shadow: var(--shadow-xs);
}

/* Indicador de Digitação */
.chat-typing-indicator {
    display: flex;
    gap: 8px;
    padding: 8px;
    color: var(--color-focus); /* Mantém a cor de foco para o indicador */
    font-size: 20px; /* Reduzido o tamanho */
    animation: pulseChat 1.5s infinite;
}

/* Feedback de Resposta */
.btn-chat-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted) !important;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
}
.btn-chat-feedback:hover {
    background-color: var(--color-hover) !important;
    color: var(--color-text-primary) !important;
}
.btn-chat-feedback.useful:hover { color: var(--color-success-text) !important; }
.btn-chat-feedback.not-useful:hover { color: var(--color-warning-text) !important; }

.chat-feedback-saved {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted) !important;
    background-color: var(--color-sidebar-background) !important;
    padding: 4px 12px !important;
    border-radius: var(--border-radius-md) !important;
    border: 1px solid var(--color-border) !important;
}

@media (max-width: 640px) {
    .footer-chat-button-text {
        display: none;
    }
    .chatbot-panel {
        width: 100%;
    }
    /* Ajuste para botões do header em telas pequenas */
    .chatbot-panel-header button {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ==========================================================================
   6. SCROLLBARS E RESPONSIVIDADE
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(121, 121, 121, 0.4) !important;
    border: 2px solid var(--color-editor-background);
    border-radius: 6px !important;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 100, 100, 0.7) !important;
}
.workbench-sidebar ::-webkit-scrollbar-thumb {
    border-color: var(--color-sidebar-background) !important;
}
#chatbot-messages::-webkit-scrollbar-thumb { /* Scrollbar do painel de mensagens */
    border-color: var(--color-sidebar-background) !important;
}

@media screen and (max-width: 1024px) {
    .workbench-grid {
        grid-template-areas:
            "titlebar titlebar"
            "sidebar editor"
            "sidebar panel"
            "statusbar statusbar";
        grid-template-columns: 220px 1fr;
    }
    .workbench-activitybar {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .workbench-grid {
        grid-template-areas:
            "titlebar"
            "editor"
            "panel"
            "statusbar";
        grid-template-rows: 48px 1fr auto 22px;
        grid-template-columns: 1fr;
    }
    #sidebar.workbench-sidebar {
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        bottom: 22px !important;
        width: 280px !important;
        z-index: 100 !important;
        border-right: 1px solid var(--color-border) !important;
        box-shadow: var(--shadow-md) !important;
    }
    #kcs-dock {
        border-top: 1px solid var(--color-border) !important;
    }
}

/* ==========================================================================
   7. EXCEÇÕES LEGADAS (LOGIN E TOUR)
   ========================================================================== */
.login-page-bg {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background-color: #0c0e11 !important;
    background-image:
        radial-gradient(circle at 12% 12%, rgba(56, 161, 255, 0.1), transparent 20%),
        radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.06), transparent 16%),
        radial-gradient(circle at 50% 95%, rgba(59, 130, 246, 0.05), transparent 30%),
        linear-gradient(180deg, #0c0e11 0%, #121419 50%, #0a0d10 100%);
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-page-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}

.login-page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.06), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.04), transparent 20%);
    pointer-events: none;
}

.login-container {
    position: relative;
    background: linear-gradient(135deg, rgba(25, 28, 36, 0.98) 0%, rgba(20, 23, 30, 0.95) 100%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 18px !important;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(24px) !important;
    min-width: 360px;
}

.login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.login-text-primary {
    color: #f8fafc !important;
    font-weight: 600 !important;
}

.login-text-secondary {
    color: rgba(226, 232, 240, 0.65) !important;
}

.login-text-muted {
    color: rgba(148, 163, 184, 0.7) !important;
}

.login-border-subtle {
    border-color: rgba(255,255,255,0.12) !important;
}

#login-screen {
    z-index: 9999 !important;
    background-color: transparent !important;
    background-image: none !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#login-screen .login-container {
    padding: 2.5rem 2.5rem !important;
    width: 100%;
    max-width: 420px;
}

#login-screen #login-form input {
    background-color: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    color: #f8fafc !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

#login-screen #login-form input:focus {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#login-screen #login-form input::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

#login-screen #login-form button {
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-transform: capitalize;
}

#login-screen #login-form #btn-email-login {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25) !important;
}

#login-screen #login-form #btn-email-login:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.35) !important;
}

#login-screen #login-form #btn-email-register {
    background-color: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #f8fafc !important;
}

#login-screen #login-form #btn-email-register:hover {
    background-color: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
    transform: translateY(-2px) !important;
}

#login-screen #login-form #btn-google-login {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    font-weight: 600 !important;
}

#login-screen #login-form #btn-google-login:hover {
    background-color: #f9fafb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15) !important;
}

#login-screen #login-form #btn-microsoft-login {
    background-color: #2f2f2f !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    font-weight: 600 !important;
}

#login-screen #login-form #btn-microsoft-login:hover {
    background-color: #3f3f3f !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.25) !important;
}

#login-screen .login-action-note {
    color: rgba(255,255,255,0.55) !important;
    font-size: 11px !important;
}
.kcs-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid currentColor;
    margin-top: 4px;
}
.shepherd-element {
    background: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-md) !important;
}
.shepherd-arrow:before {
    background: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
}
.shepherd-title { color: var(--color-text-primary) !important; }
.shepherd-text { color: var(--color-text-secondary) !important; }
.shepherd-header { border-bottom: 1px solid var(--color-border) !important; }

/* ==========================================================================
   EDITOR UI COMPONENTS (SEMANTIC CLASSES)
   ========================================================================== */

/* Tela de Bloqueio SRE */
.editor-lock-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 20px;
    text-align: center;
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--border-radius-xl);
    color: #EF4444;
}

.lock-icon-large { font-size: 48px; margin-bottom: 16px; }
.lock-title { font-size: 18px; font-weight: 700; }
.lock-message { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; }

/* Estados de Drag & Drop */
.editor-drag-active {
    outline: 2px dashed var(--color-focus) !important;
    background-color: rgba(0, 127, 212, 0.05) !important;
}

/* Loader de IA dentro dos botões */
.btn-ia .spinner-icon {
    margin-right: 8px;
    animation: spin 1s linear infinite;
}

/* Imagens em processo de Upload */
.img-uploading {
    border: 2px dashed var(--color-focus) !important;
    opacity: 0.6;
    filter: grayscale(1);
}

/* Fallback de botões e opacidade */
.u-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   CHATBOT UI COMPONENTS (SEMANTIC CLASSES)
   ========================================================================== */

/* Botões de Link da IA */
.kcs-link-button {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
    background-color: var(--color-focus); color: #ffffff !important;
    border-radius: var(--border-radius-md); text-decoration: none; font-weight: 600;
    font-size: 13px; margin: 12px 0 8px 0; transition: all 0.2s ease; border: none; cursor: pointer;
    box-shadow: var(--shadow-sm); width: fit-content;
}
.kcs-link-button:hover { background-color: var(--color-selection); transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Saudação da IA */
.chat-greet-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--color-text-inverse); }
.chat-greet-subtitle { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 12px; }
.chat-greet-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; margin-top: 12px; }
.chat-smart-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn-smart-prompt { background-color: var(--color-sidebar-background); color: var(--color-text-primary); font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.2s; }
.btn-smart-prompt:hover { background-color: var(--color-hover); }

/* Balões de Mensagem */
.chat-user-bubble-wrapper { display: flex; justify-content: flex-end; animation: fadeInChat 0.3s ease; margin-bottom: 12px; }
.chat-user-bubble { background-color: var(--color-focus); color: #ffffff; font-size: 13px; padding: 8px 16px; border-radius: 16px 16px 2px 16px; max-width: 85%; line-height: 1.4; word-break: break-word; }

.chat-bot-row { display: flex; gap: 12px; animation: fadeInChat 0.3s ease; width: 100%; margin-bottom: 12px; }
.chat-bot-avatar { width: 32px; height: 32px; border-radius: 8px; background-color: rgba(0, 127, 212, 0.1); color: var(--color-focus); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-bot-bubble-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 85%; }
.chat-bot-bubble { background-color: var(--color-sidebar-background); border: 1px solid var(--color-border); padding: 12px; border-radius: 16px 16px 16px 2px; font-size: 13px; color: var(--color-text-primary); line-height: 1.5; box-shadow: var(--shadow-xs); overflow-wrap: anywhere; word-break: break-word; }

.chat-related-procedures { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-related-procedures h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 0; }
.chat-related-empty { margin: 0; font-size: 12px; color: var(--color-text-secondary); }
.chat-procedure-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--color-editor-background); max-width: 100%; overflow: hidden; }
.chat-procedure-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.chat-procedure-code { font-size: 11px; font-weight: 700; color: var(--color-focus); }
.chat-procedure-visibility { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.chat-procedure-visibility.public { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.chat-procedure-visibility.private { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.chat-procedure-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--color-text-primary); overflow-wrap: anywhere; }
.chat-procedure-preview, .chat-procedure-scope { margin: 0; font-size: 12px; color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* Feedback de Resposta */
.chat-feedback-container { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; width: 100%; padding-right: 4px; }
.btn-chat-feedback { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); background: transparent; border: none; cursor: pointer; transition: color 0.2s; }
.btn-chat-feedback.useful:hover { color: #10B981; }
.btn-chat-feedback.not-useful:hover { color: #EF4444; }
.chat-feedback-saved { font-size: 11px; font-weight: 700; color: var(--color-text-muted); background-color: var(--color-sidebar-background); padding: 4px 12px; border-radius: 4px; border: 1px solid var(--color-border); }

/* Digitação */
.chat-typing-indicator { display: flex; gap: 8px; padding: 8px; color: var(--color-focus); font-size: 24px; animation: pulseChat 1.5s infinite; }

@keyframes fadeInChat { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseChat { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ==========================================================================
   AJUSTES DE POLIMENTO FINAL (UX / UI FEEDBACK)
   ========================================================================== */

/* 1. CORREÇÃO DE OPACIDADE E DESTAQUE (Título e Plano - Imagem 1) */
header.workbench-titlebar .text-sm.font-bold {
    color: var(--color-text-inverse) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    letter-spacing: 0.5px !important;
}

.kcs-plan-badge {
    opacity: 1 !important;
    font-weight: 800 !important;
    border-width: 1.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.kcs-plan-badge.badge-enterprise,
.kcs-plan-badge.badge-unlimited {
    border-color: #f97316 !important; /* Laranja Sólido */
    color: #f97316 !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* 2. MENU DE PERFIL NA ACTIVITY BAR (Imagens 2 e 3) */
@media screen and (min-width: 1025px) {
    /* Esconde o botão do topo (A Activity Bar fará o disparo) */
    #btn-profile {
        display: none !important;
    }

    /* Desprende o dropdown do header e ancora ao lado da Activity Bar */
    #profile-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 56px !important; /* Altura exata para ficar ao lado do ícone de Conta */
        left: 56px !important;   /* Largura da Activity Bar + respiro */
        right: auto !important;
        width: 240px !important;
        z-index: 9999 !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: var(--shadow-md) !important;
        transform-origin: bottom left !important;
    }
}

/* 3. CABEÇALHO DE VISUALIZAÇÃO (Cards vs Tabelas - Imagens 4 e 5) */
.view-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.view-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--color-text-inverse) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.5px !important;
}

.view-title i {
    color: var(--color-text-secondary) !important;
    font-size: 16px !important;
}

.view-toggles {
    display: flex !important;
    background-color: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    padding: 3px !important;
    gap: 4px !important;
}

.view-toggle-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.view-toggle-btn:hover {
    color: var(--color-text-primary) !important;
}

.view-toggle-btn.active-view {
    background-color: var(--color-hover) !important;
    color: var(--color-focus) !important;
    box-shadow: var(--shadow-xs) !important;
}

/* ==========================================================================
   CORREÇÃO 1: Transparência e Posicionamento (Modal e Chatbot)
   ========================================================================== */
/* Força a aplicação das variáveis de cor nos fundos, substituindo o Tailwind */
.bg-surface, #chatbot-window, .modal-box {
    background-color: var(--color-editor-background) !important;
}

.bg-bg-main {
    background-color: var(--color-sidebar-background) !important;
}

/* Centralização exata do modal no Overlay e fundo sólido */
#overlay-root {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* ==========================================================================
   CORREÇÃO 2: Interação na Sidebar (Activity Bar)
   ========================================================================== */
/* Eleva a barra de atividades acima do fluxo bloqueado e reativa os cliques */
.workbench-activitybar {
    grid-area: activitybar;
    background-color: var(--color-activitybar-background) !important;
    border-right: 1px solid var(--color-border) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding-top: 8px;
    padding-bottom: 8px;
    z-index: 200 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   CORREÇÃO 3: Elementos Cortados e Responsividade
   ========================================================================== */
/* Container da tabela fluído no eixo X, bloqueando estouro da tela */
.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    margin-bottom: 24px;
    display: block;
}

/* Grid de cards auto-ajustável sem forçar a largura do pai */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px;
    width: 100%;
}

.article-card {
    min-width: 0; /* Propriedade mágica para evitar estouro em Flex/Grid */
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

/* ==========================================================================
   CORREÇÃO 4: Alinhamento da Marca (KCS Hub UNLIMITED)
   ========================================================================== */
header.workbench-titlebar .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important; /* Alinha o selo rente ao logo à esquerda */
}
/* Tipografia técnica refinada inspirada na Status Bar do VS Code */
.kcs-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px !important;
    font-weight: 800 !important;
    font-family: var(--font-family-mono);
    text-transform: uppercase;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    border: 1px solid currentColor !important;
    margin-top: 2px !important;
    line-height: 1 !important;
    letter-spacing: 0.05em;
}
/* ==========================================================================
   CORREÇÃO 5: Isolamento da Tela de Login + BARREIRA DE AUTENTICAÇÃO
   ========================================================================== */
/* BARREIRA ABSOLUTA: Por padrão tudo é invisível até autenticação decidir */
#app-screen,
#login-screen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: visibility 0.2s ease, opacity 0.3s ease !important;
}

body.auth-checking #loading-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.auth-unauthenticated #login-screen {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.auth-unauthenticated #app-screen,
body.auth-authenticated #login-screen,
body.auth-authenticated #loading-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.auth-authenticated #app-screen {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   CORREÇÃO 6: Hierarquia de Modais e Activity Bar
   ========================================================================== */
/* Garante que qualquer modal abra ACIMA da Activity Bar, mas ABAIXO do Login */
#overlay-root {
    z-index: 9000 !important;
    pointer-events: none !important;
}

#overlay-root.visible {
    pointer-events: auto !important;
}
/* ==========================================================================
   CORREÇÃO 7: Cores do Header e Fontes do Chatbot (Light/Dark Mode)
   ========================================================================== */
/* O texto KCS Hub deve inverter de cor dependendo do tema, não ficar sempre branco */
header.workbench-titlebar .text-sm.font-bold {
    color: var(--color-text-primary) !important;
}
/* Força a cor primária no Chatbot para ser legível no modo claro */
.chat-greet-title,
.chat-greet-subtitle,
.chat-greet-label,
#chatbot-header-name span,
#chatbot-input,
.chat-bot-bubble {
    color: var(--color-text-primary) !important;
}
/* ==========================================================================
   CORREÇÃO 8: Restauração do Layout de Artigos e Tabelas (ATUALIZADA)
   ========================================================================== */
/* Garante o layout em bloco para não quebrar a tabela, mas respeita a classe
   .hidden para que a tela desapareça corretamente ao abrir o Dashboard */
#articles-grid:not(.hidden) {
    display: block !important;
}

/* ==========================================================================
   CORREÇÃO 9: Padronização de Formulários (Design System VS Code)
   ========================================================================== */
/* Define as cores e as bordas de inputs e textareas dinamicamente para os temas */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    background-color: var(--color-editor-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 8px 12px;
    border-radius: var(--border-radius-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-focus);
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group {
    margin-bottom: 16px;
}

/* Utilitários estruturais de formulário que o JS utiliza */
.form-row-split {
    display: flex;
    gap: 16px;
}
.form-row-split .form-group {
    flex: 1;
}

.form-row-multi {
    display: flex;
    gap: 16px;
}
.form-row-multi .form-group {
    flex: 1;
}

/* ==========================================================================
   CORREÇÃO 10: Botões Globais (Footer e Ações)
   ========================================================================== */
.btn-primary, .btn-secondary, .btn-neutral {
    padding: 8px 16px;
    border-radius: var(--border-radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--color-focus) !important;
    color: #ffffff !important;
}
.btn-primary:hover {
    background-color: var(--color-selection) !important;
}

.btn-secondary {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
.btn-secondary:hover {
    background-color: var(--color-hover) !important;
}

.btn-neutral {
    background-color: var(--color-hover) !important;
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-primary) !important;
}
.btn-neutral:hover {
    background-color: var(--color-border) !important;
}

/* ==========================================================================
   CORREÇÃO 11: Header Controls (Min, Max, Close)
   ========================================================================== */
.modal-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-icon {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.btn-icon:hover {
    background-color: var(--color-hover);
    color: var(--color-text-primary);
}
.btn-icon.btn-close:hover {
    background-color: #e81123; /* Vermelho característico de fechar aba do VS Code */
    color: white;
}

/* ==========================================================================
   CORREÇÃO 12: Toolbar do Editor e Área de Texto (Rich Text)
   ========================================================================== */
.editor-container {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: var(--color-editor-background);
    display: flex;
    flex-direction: column;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-sidebar-background);
    border-bottom: 1px solid var(--color-border);
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.toolbar-actions-left, .toolbar-actions-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-tool {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-primary);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: 14px;
}
.btn-tool:hover {
    background-color: var(--color-hover);
    border-color: var(--color-border-subtle);
}

.toolbar-divider {
    width: 1px;
    height: 16px;
    background-color: var(--color-border);
    margin: 0 4px;
}

/* Botões da IA na Toolbar */
.btn-ia {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-ia:hover {
    background-color: rgba(139, 92, 246, 0.2);
}

.editor-content {
    min-height: 180px;
    padding: 12px;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    outline: none; /* <-- Mata a borda preta grossa do navegador */
    overflow-y: auto;
}
.editor-content:focus {
    background-color: rgba(0, 127, 212, 0.02);
}

/* ==========================================================================
   CORREÇÃO 13: Metadados e Caixa de Alerta (Piloto Automático)
   ========================================================================== */
.form-row-metadata {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-subtle);
}
.meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.meta-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 700;
}
.meta-value {
    font-size: 13px;
    color: var(--color-text-primary);
    font-weight: 600;
}
.id-highlight {
    color: var(--color-focus);
    font-family: var(--font-family-mono);
}

.alert-box {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius-md);
    margin-bottom: 16px;
    align-items: flex-start;
}
.alert-indigo {
    background-color: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
}
.alert-indigo .alert-icon {
    color: #6366f1;
    font-size: 20px;
    margin-top: 2px;
}
.alert-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.alert-text {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.badge-indigo {
    background-color: #6366f1;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* ==========================================================================
   CORREÇÃO 15: Restauração do Layout Clássico (KCS Hub)
   ========================================================================== */

/* 1. Header e Controles de Janela (Alinhados à Direita) */
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
}

.modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
}

.modal-controls {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.modal-controls .btn-icon {
    font-size: 16px !important; /* Ícones dos controles de janela mais nítidos */
}

/* 2. Bloco de Metadados (Caixa Contornada e Divisória) */
.form-row-metadata {
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    margin-bottom: 20px !important;
    padding: 12px 20px !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 8px !important; /* Arredondamento clássico */
}

.meta-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
}

.meta-divider {
    border-left: 1px solid var(--color-border-subtle) !important;
    padding-left: 32px !important;
}

.meta-label {
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted) !important;
    font-weight: 600 !important;
}

.meta-value {
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
    font-weight: 500 !important;
}

.id-highlight {
    color: var(--color-focus) !important;
    font-weight: 600 !important;
}

/* 3. Alerta Piloto Automático KCS */
.alert-indigo {
    background-color: rgba(99, 102, 241, 0.05) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    align-items: center !important;
}

.alert-title {
    text-transform: uppercase !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #4f46e5 !important;
    margin-bottom: 2px !important;
}

/* 4. Labels (Restaurando o texto Normal, sem uppercase forçado) */
.form-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e0e0e0 !important;
    text-transform: none !important; /* Reverte o uppercase */
    margin-bottom: 8px !important;
    letter-spacing: normal !important;
    display: block;
}

/* Estilo para asterisco de campo obrigatório */
.form-group label.form-label::after {
    content: attr(data-required);
    color: #ff6b6b;
    margin-left: 2px;
}

/* 5. Contorno e Arredondamento dos Inputs */
.form-input,
.form-textarea,
.form-select {
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 8px !important; /* Cantos mais suaves como na imagem referência */
    padding: 10px 14px !important;
    background-color: var(--color-editor-background) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    color: var(--color-text-primary) !important;
}

/* Placeholder com cor suave e sem itálico */
.form-input::placeholder,
.form-textarea::placeholder,
.form-select::placeholder {
    color: #6b7280 !important;
    font-style: normal !important;
    opacity: 1 !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-focus) !important;
    box-shadow: 0 0 0 1px var(--color-focus) !important;
}

/* ==========================================================================
   CORREÇÃO 16: Transparência do Modal de Visualização (View Modal)
   ========================================================================== */
/* Aplica o fundo sólido e as sombras também aos modais gerados dinamicamente pelo JS */
.kcs-active-overlay .modal-content-box {
    background-color: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-content-box .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* ==========================================================================
   CORREÇÃO 17: Contraste da Tabela (Light/Dark Mode)
   ========================================================================== */
/* Garante que o texto principal da tabela inverta corretamente a cor nos temas */
.cell-title {
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

/* Conserta o hover da tabela que estava usando branco transparente no modo claro */
.table-row:hover {
    background-color: var(--color-hover) !important;
}

/* ==========================================================================
   CORREÇÃO 18: Estilização do Rodapé de Paginação
   ========================================================================== */
.pagination-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid var(--color-border-subtle);
    margin-top: 16px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.pagination-info strong {
    color: var(--color-text-primary);
}

.pagination-controls {
    display: flex;
    gap: 8px;
}

.btn-pagination {
    background-color: var(--color-editor-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-pagination:hover:not([disabled]) {
    background-color: var(--color-hover);
    border-color: var(--color-border-subtle);
}

.btn-pagination[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: transparent;
}

/* ==========================================================================
   CORREÇÃO 19: Estilização Interna do Visualizador de Artigos
   ========================================================================== */
.view-main-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.view-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tag-badge {
    background-color: var(--color-hover);
    color: var(--color-text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid var(--color-border-subtle);
    letter-spacing: 0.5px;
}

.field-group {
    margin-bottom: 16px;
    background-color: var(--color-editor-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    overflow: hidden;
}

.field-header {
    background-color: var(--color-sidebar-background);
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.field-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.field-content {
    padding: 16px;
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.view-footer-actions {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    margin-top: 24px;
    border-top: 1px solid var(--color-border-subtle);
}

.btn-interaction {
    background: var(--color-editor-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.btn-interaction:hover {
    background-color: var(--color-hover);
}

/* ==========================================================================
   CORREÇÃO 20: Grid 2x2 e Estilo Clássico dos Cards de Visualização
   ========================================================================== */

/* 1. Layout em Grid (2 colunas lado a lado) */
.view-content-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

/* Responsividade: Volta para 1 coluna em telas menores */
@media screen and (max-width: 768px) {
    .view-content-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2. Caixas de Conteúdo (Sintoma, Causa, Ambiente, Solução) */
.field-group {
    background-color: var(--color-hover) !important; /* Fundo cinza super claro no tema Light */
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important; /* O espaçamento agora é controlado pelo 'gap' do grid */
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
}

/* Título das Caixas (Sem linha divisória, fundo transparente) */
.field-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 16px 16px 8px 16px !important;
}

.field-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--color-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Texto interno */
.field-content {
    padding: 0 16px 16px 16px !important;
    font-size: 13px !important;
    color: var(--color-text-primary) !important;
    line-height: 1.5 !important;
}

/* 3. Título Principal do Artigo */
.view-main-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--color-text-primary) !important;
    margin-bottom: 12px !important;
}

/* 4. Estilização das Tags (Formato de Pílula) */
.view-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tag-badge {
    background-color: var(--color-hover) !important;
    color: var(--color-text-secondary) !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 12px !important; /* Deixa a tag bem arredondada (pill) */
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important; /* Força minúscula como na imagem */
}

/* Cores dinâmicas para tags específicas */
.tag-category {
    background-color: rgba(99, 102, 241, 0.1) !important; /* Fundo Indigo claro */
    color: #4f46e5 !important; /* Texto Indigo */
}

.tag-private {
    background-color: rgba(239, 68, 68, 0.1) !important; /* Fundo Vermelho claro */
    color: #ef4444 !important; /* Texto Vermelho */
}

.tag-public {
    background-color: rgba(16, 185, 129, 0.1) !important; /* Fundo Verde claro */
    color: #10b981 !important; /* Texto Verde */
}

/* 5. Cores dos Ícones de Tópico (Exatamente como no print) */
.icon-red { color: #ef4444 !important; }
.icon-blue { color: #3b82f6 !important; }
.icon-yellow { color: #eab308 !important; }
.icon-green { color: #10b981 !important; }

/* ==========================================================================
   CORREÇÃO 21: Alinhamento da Marca (Header)
   ========================================================================== */
header.workbench-titlebar .flex-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    line-height: 1 !important;
    gap: 4px !important; /* Respiro exato entre o título e o badge */
}

/* ==========================================================================
   CORREÇÃO 22: Refino da Sidebar (Estilo Árvore de Arquivos VS Code)
   ========================================================================== */
/* Separação clara entre as seções (Categorias, SQL, etc) */
.sidebar-section-title {
    margin-top: 16px !important;
    padding: 8px 16px 4px 16px !important;
}

/* O primeiro título da sidebar não precisa de margem extra no topo */
.workbench-sidebar .sidebar-section-title:first-child {
    margin-top: 0 !important;
}

/* Item de menu idêntico a um arquivo na Explorer Tree do VS Code */
.sidebar-item {
    padding: 4px 16px 4px 24px !important; /* Reduz padding vertical e indenta à esquerda */
    margin: 0 !important; /* Remove margem lateral do estilo botão */
    border-radius: 0 !important; /* Bordas retas, sem arredondamento excessivo */
    width: 100% !important;
    min-height: 28px !important; /* Altura padrão compacta */
}

/* ==========================================================================
   CORREÇÃO 23: Usabilidade da Activity Bar (Z-index e Pointer Events)
   ========================================================================== */
/* Eleva a barra de atividades completa e seu rodapé para não serem engolidos pela sidebar */
.workbench-activitybar {
    position: relative !important;
    z-index: 300 !important;
    pointer-events: auto !important;
}

.activitybar-bottom {
    position: relative !important;
    z-index: 300 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   CORREÇÃO 24: Alinhamento de Itens (Visão Geral e Base) - Estilo VS Code
   ========================================================================== */
/* Força o alinhamento total à esquerda e ajusta o gap do ícone */
.sidebar-item {
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: 13px !important;
    padding: 4px 16px 4px 20px !important; /* Indentação padrão da raiz */
    border-radius: 0 !important; /* Sem bordas arredondadas no menu lateral */
    min-height: 28px !important;
}

/* O texto empurra o badge de contagem para o final da linha */
.sidebar-item-label {
    flex: 1 !important;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item i {
    font-size: 16px !important;
    width: 16px;
    display: flex;
    justify-content: center;
    color: var(--color-text-secondary);
}

/* Estado "Selecionado" idêntico à cor de seleção do VS Code */
.sidebar-item.active {
    background-color: var(--color-selection) !important;
    color: var(--color-text-inverse) !important;
}
.sidebar-item.active i {
    color: var(--color-text-inverse) !important;
}

/* ==========================================================================
   CORREÇÃO 25: Títulos de Seção (Semelhante a "EXPLORER", "OUTLINE")
   ========================================================================== */
.sidebar-section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    background-color: transparent !important;
    padding: 4px 8px 4px 16px !important;
    margin-top: 10px !important; /* Separa as sessões */
    cursor: default;
}

/* ==========================================================================
   CORREÇÃO 26: Árvore de Diretórios (Categorias Collapsible VS Code)
   ========================================================================== */
/* Remove a margem injetada pelo JS para que o Hover ocupe a linha toda */
.tree-details {
    margin-left: 0 !important;
}

/* Container do título da pasta */
.tree-summary {
    display: flex !important;
    align-items: center !important;
    padding: 4px 16px 4px 20px !important;
    cursor: pointer;
    list-style: none !important; /* Oculta a seta padrão do HTML */
    font-size: 13px !important;
    color: var(--color-text-secondary);
    transition: background 0.1s;
}

.tree-summary::-webkit-details-marker {
    display: none;
}

.tree-summary:hover, .tree-article:hover {
    background-color: var(--color-hover) !important;
    color: var(--color-text-primary);
}

/* MÁGICA: Move a seta (▶) do final do HTML para o INÍCIO usando Flex Order */
.tree-indicator {
    order: -1 !important;
    font-size: 10px !important;
    margin-right: 6px;
    transition: transform 0.1s ease-in-out;
    color: var(--color-text-muted);
}

/* Rotaciona a seta quando a pasta (details) estiver aberta */
details[open] > .tree-summary .tree-indicator {
    transform: rotate(90deg);
}

.tree-summary-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Linha vertical de indentação (VS Code Indent Guide) */
.tree-children {
    margin-left: 26px; /* Alinha a linha guia exatamente no centro da pasta pai */
    padding-left: 8px;
    border-left: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
}

/* Estilo do arquivo final (Artigo KCS) na árvore */
.tree-article {
    display: flex !important;
    align-items: center !important;
    padding: 4px 16px 4px 8px !important;
    font-size: 13px !important;
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: none;
    gap: 6px;
}

/* Ícone de arquivo dentro da pasta (Simulando um arquivo TS/JS no VS Code) */
.tree-article i {
    font-size: 15px;
    color: var(--color-focus);
}

.tree-article-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   CORREÇÃO 27: Painéis Recolhíveis Principais (Sidebar Sections)
   ========================================================================== */
.sidebar-section-group {
    margin-bottom: 2px;
}

/* Transformando os títulos de sessão em elementos clicáveis */
summary.sidebar-section-title {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important; /* Muda de texto selecionável para "Mãozinha" */
    list-style: none !important;
    user-select: none;
}

/* Garante o alinhamento da Engrenagem (Painel de Categorias) */
.sidebar-title-flex {
    justify-content: space-between !important;
}

/* Oculta seta nativa do navegador para o <details> */
summary.sidebar-section-title::-webkit-details-marker {
    display: none !important;
}

/* Seta (Chevron) idêntica à árvore do VS Code */
.section-indicator {
    font-size: 9px !important;
    color: var(--color-text-muted);
    transition: transform 0.15s ease-in-out;
    display: inline-block;
}

/* Rotaciona a seta para baixo quando a sessão está expandida (open) */
details[open] > summary .section-indicator {
    transform: rotate(90deg);
}

.section-children {
    padding-bottom: 8px; /* Respiro antes do próximo bloco */
}

/* ==========================================================================
   CORREÇÃO 28: Interatividade da Activity Bar (Rodapé)
   ========================================================================== */
/* Eleva a barra inteira e os botões acima de qualquer "camada fantasma" da Sidebar */
.workbench-activitybar,
.activitybar-bottom {
    position: relative !important;
    z-index: 9990 !important;
    pointer-events: auto !important;
}

.activitybar-btn {
    position: relative !important;
    z-index: 9999 !important; /* Garante que o botão seja o elemento mais alto para o clique */
}

/* ==========================================================================
   CORREÇÃO 29: Menu de Perfil Ancora na Activity Bar
   ========================================================================== */
/* Faz com que o dropdown do perfil abra no canto inferior esquerdo, ao lado da conta */
@media screen and (min-width: 1025px) {
    #profile-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 50px !important; /* Altura exata para alinhar com o ícone de Conta */
        left: 48px !important;   /* Largura exata da Activity Bar */
        right: auto !important;
        z-index: 10000 !important; /* Acima de tudo para não ser cortado */
        transform-origin: bottom left !important;
    }
}

/* ==========================================================================
   CORREÇÃO 30: Menus de Contexto do VS Code (Activity Bar)
   ========================================================================== */
.vscode-context-menu {
    position: fixed;
    bottom: 56px; /* Fita exatamente acima dos ícones inferiores */
    left: 56px;   /* Fita rente à Activity Bar */
    width: 240px;
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 10000;
    padding: 6px 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
}

.vscode-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vscode-context-menu li {
    padding: 6px 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: none; /* VS Code não tem fade no hover, é instantâneo */
}

/* O fundo azul focado do VS Code */
.vscode-context-menu li:hover:not(.menu-info):not(.menu-separator) {
    background-color: var(--color-focus);
    color: #ffffff;
}

/* Linha separadora milimétrica */
.vscode-context-menu .menu-separator {
    height: 1px;
    background-color: var(--color-border-subtle);
    margin: 6px 12px;
    padding: 0;
    cursor: default;
}

/* Bloco não clicável com as informações do usuário */
.vscode-context-menu .menu-info {
    cursor: default;
    padding: 10px 20px;
    display: block;
}

/* ==========================================================================
   CORREÇÃO 31: Harmonização do Tema Claro (VS Code Light+)
   ========================================================================== */
html.light {
    /* Harmoniza a Activity Bar com a Titlebar/Sidebar */
    --color-activitybar-background: #f3f3f3 !important;
    --color-titlebar-background: #f3f3f3 !important;
    --color-border: #cccccc !important;
}

/* Ajusta a cor dos ícones da Activity Bar no Modo Claro para dar contraste */
html.light .activitybar-btn {
    color: #616161 !important;
}
html.light .activitybar-btn:hover {
    color: #3b3b3b !important;
}
html.light .activitybar-btn.active {
    color: #007fd4 !important;
}

/* ==========================================================================
   CORREÇÃO 32: Alinhamento Milimétrico da Barra de Pesquisa (Header)
   ========================================================================== */
/* Força os elementos do cabeçalho a se alinharem pela esquerda,
   respeitando o cálculo de 292px da Logo para cravar com a Sidebar */
header.workbench-titlebar {
    justify-content: flex-start !important;
}

/* Opcional: Garante que o contêiner de busca não encolha demais em telas normais */
.workbench-titlebar .max-w-3xl {
    max-width: 768px !important;
    width: 100%;
}

/* ==========================================================================
   CORREÇÃO 33: Botões de Ação de Barra de Ferramentas (VS Code Style)
   ========================================================================== */
/* Remove o arredondamento excessivo e padroniza a altura com o input */
#btn-new-article, #btn-new-sql {
    border-radius: 2px !important; /* Quase reto, padrão VS Code */
    height: 28px !important;       /* Alinhado com a altura do input */
    padding: 0 12px !important;
    font-size: 12px !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

/* Botão KCS (Primário do Sistema) */
#btn-new-article {
    background-color: var(--color-focus) !important;
    color: #ffffff !important;
}
#btn-new-article:hover {
    background-color: #007fd4cc !important;
}

/* Botão SQL (Integrado ao Painel) */
#btn-new-sql {
    background-color: var(--color-active-item) !important;
    color: var(--color-text-primary) !important;
}
#btn-new-sql:hover {
    background-color: var(--color-hover) !important;
}

/* Ajuste do Input de Pesquisa para combinar */
#search-input {
    border-radius: 2px !important;
    height: 28px !important;
    border: 1px solid var(--color-border) !important;
}

/* ==========================================================================
   CORREÇÃO 34: IDENTIDADE VISUAL PREMIUM (KCS HUB LOGO)
   ========================================================================== */

/* Container clicável e com feedback tátil */
.workbench-brand-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.workbench-brand-container:hover {
    background-color: var(--color-hover);
}

.workbench-brand-container:active {
    transform: scale(0.98);
}

/* O novo Ícone: Bloco com Gradiente (Estilo VS Code / Vercel) */
.brand-logo-box {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #007fd4 0%, #3b82f6 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 127, 212, 0.4);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.brand-logo-box i {
    color: #ffffff !important;
    font-size: 16px;
}

.workbench-brand-container:hover .brand-logo-box {
    box-shadow: 0 4px 12px rgba(0, 127, 212, 0.6); /* Sombra mais vibrante */
}

/* Tipografia Mista (Grosso + Fino) */
.brand-text-group {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-family: var(--font-family-base);
}

.brand-text-kcs {
    font-weight: 900;
    color: var(--color-text-inverse); /* Branco no escuro, Preto no claro */
}

.brand-text-hub {
    font-weight: 300;
    color: var(--color-text-secondary); /* Tom mais sutil para contraste */
}

/* ==========================================================================
   CORREÇÃO 35: Dashboard de Governança (Cards, Tabelas e Badges)
   ========================================================================== */

/* 1. Títulos de Seção do Dashboard (Linha divisória estilo VS Code) */
.dash-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-primary) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-top: 24px;
    margin-bottom: 16px;
}

/* 2. Grid para dividir as tabelas de Ranking lado a lado */
.dash-tables-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media screen and (max-width: 1024px) {
    .dash-tables-row { grid-template-columns: 1fr; }
}

/* 3. Cabeçalho das Tabelas (Alinhamento do Título + Botão de Copiar) */
.widget-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.widget-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* Cores padronizadas para os títulos das tabelas */
.header-red { color: #f87171; }
.header-purple { color: #a78bfa; }
.header-green { color: #34d399; }
.header-blue { color: #60a5fa; }

/* Botão de Copiar Tabela minimalista */
.copy-btn {
    background: transparent;
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-secondary);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}
.copy-btn:hover {
    background: var(--color-hover);
    color: var(--color-text-primary);
}

/* 4. Correção do Empilhamento nas Linhas de Usuário (Rankings) */
.user-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
}

.rank-number {
    font-size: 11px;
    color: var(--color-text-muted);
    font-family: var(--font-family-mono);
    font-weight: 700;
    width: 20px; /* Largura fixa para alinhar os avatares */
}

/* Alinha a contagem para a extrema direita da célula */
.stat-cell {
    text-align: right !important;
    vertical-align: middle !important;
    padding-right: 24px !important;
}

/* 5. Alinhamentos Auxiliares de Tabela */
.col-center { text-align: center !important; }
.col-right { text-align: right !important; }

.title-cell-truncate {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 12px 16px !important;
}

/* 6. Badges (Pílulas Sólidas, substituindo bordas feias) */
.badge-alert, .badge-purple, .badge-green, .badge-neutral {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    border: none !important; /* Remove o contorno do sistema antigo */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
}

.badge-alert { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge-purple { background-color: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.badge-green { background-color: rgba(16, 185, 129, 0.15); color: #10b981; }
.badge-neutral { background-color: var(--color-hover); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle) !important; }

/* 7. Botão de Ação "Revisar" (Fila Crítica) */
.btn-review {
    background-color: var(--color-focus);
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-review:hover {
    background-color: var(--color-selection);
}

/* 8. Textos informativos e Estados Vazios (Empty States) */
.info-box {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-sidebar-background);
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid var(--color-border-subtle);
}

.empty-cell {
    text-align: center !important;
    padding: 32px !important;
    color: var(--color-text-muted) !important;
    font-size: 12px;
    font-style: italic;
}
.empty-cell-success {
    text-align: center !important;
    padding: 32px !important;
    color: #10b981 !important;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   CORREÇÃO 36: Contraste dos Números do Dashboard no Modo Claro
   ========================================================================== */
/* Garante que os números base adaptem a cor de acordo com o tema (Light/Dark) */
.metric-card .metric-value {
    color: var(--color-text-primary);
}

/* Reforça as cores de destaque para não serem sobrescritas pela regra acima */
.metric-card .value-approved {
    color: #10B981 !important;
}
.metric-card .value-views {
    color: #3B82F6 !important;
}
.metric-card .value-alert {
    color: #EF4444 !important;
}

/* ==========================================================================
   CORREÇÃO 37: Painel de Procedimentos (Cards, Tabela e Filtros)
   ========================================================================== */

/* 1. Estilo VS Code para os Dropdowns de Filtro */
.vscode-select {
    background-color: var(--color-sidebar-background);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-subtle);
    border-radius: 3px;
    padding: 4px 24px 4px 8px;
    font-size: 12px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px auto;
    cursor: pointer;
    transition: border-color 0.2s;
    height: 28px;
}

.vscode-select:focus, .vscode-select:hover {
    border-color: var(--color-focus);
    outline: none;
}

/* 2. Refinamento Visual dos Cards (Grid View) */
#articles-grid.view-cards > div {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

#articles-grid.view-cards > div:hover {
    border-color: var(--color-focus) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Fix do ID ocupando tela inteira no Card */
/* TODO: verificar uso das classes utilitárias de cor herdadas de protótipos antigos (.bg-*, .border-*). */
#articles-grid.view-cards .bg-blue-900\/20 {
    width: fit-content !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Espaçamento das Ações (Editar/Excluir) no final do Card */
#articles-grid.view-cards .flex.gap-2.mt-4 {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px dashed var(--color-border-subtle);
    justify-content: flex-end;
}

/* 3. Força as Pílulas Sólidas (Badges) na Tabela de Procedimentos */
#articles-grid table .border-green-500,
#articles-grid table .text-green-500 {
    border: none !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

#articles-grid table .border-orange-500,
#articles-grid table .text-orange-500 {
    border: none !important;
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
}

/* ==========================================================================
   CORREÇÃO 38: Fundo dos Cards no Modo Escuro
   ========================================================================== */
/* Substitui o branco ofuscante pela cor de superfície correta do VS Code */
.content-grid > div {
    background-color: var(--color-sidebar-background) !important;
    border-color: var(--color-border-subtle) !important;
}

/* Garante que o título fique com alto contraste (Branco no Dark, Preto no Light) */
.content-grid > div h3 {
    color: var(--color-text-inverse) !important;
}

/* Garante que o texto de resumo fique com cinza de leitura agradável */
.content-grid > div p {
    color: var(--color-text-secondary) !important;
}

/* Escurece as tags "cinzas" (ex: "teste 4000") que também estavam claras demais */
html.dark .content-grid > div .bg-gray-100 {
    background-color: var(--color-editor-background) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

/* Efeito de Hover sofisticado respeitando o tema */
.content-grid > div:hover {
    border-color: var(--color-focus) !important;
    background-color: var(--color-hover) !important;
}

/* ==========================================================================
   TAB MANAGER: Estilo VS Code (Abas Superiores)
   ========================================================================== */
#workbench-tabs-bar {
    height: 35px;
    background-color: var(--color-sidebar-background);
}
#workbench-tabs-bar::-webkit-scrollbar { height: 2px; }

.editor-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 16px;
    background-color: var(--color-sidebar-background);
    color: var(--color-text-secondary);
    border-right: 1px solid var(--color-border);
    border-top: 1px solid transparent;
    cursor: pointer;
    min-width: 140px;
    max-width: 220px;
    transition: background 0.1s;
}

.editor-tab:hover {
    background-color: var(--color-hover);
}

.editor-tab.active {
    background-color: var(--color-editor-background);
    color: var(--color-text-primary);
    border-top: 1px solid var(--color-focus);
}

.editor-tab-title {
    flex: 1;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Controles da Aba (Escondidos por padrão, revelados no hover/active) */
.editor-tab-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.1s;
}
.editor-tab:hover .editor-tab-actions,
.editor-tab.active .editor-tab-actions {
    opacity: 1;
}

.editor-tab-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.editor-tab-btn:hover {
    background-color: var(--color-active-item);
    color: var(--color-text-primary);
}

/* MÁGICA DO DIRTY STATE (Não salvo) */
.editor-tab.is-dirty .btn-close-tab i { display: none; }
.editor-tab.is-dirty .btn-close-tab::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-text-primary); /* Bolinha do VS Code */
}
/* Se o usuário passar o mouse no botão, troca a bolinha pelo 'X' para fechar */
.editor-tab.is-dirty .btn-close-tab:hover i { display: block; }
.editor-tab.is-dirty .btn-close-tab:hover::after { display: none; }

/* Paineis de Conteúdo */
.tab-content-panel {
    display: none; /* Mantém o DOM vivo, mas invisível */
    position: absolute;
    inset: 0;
    overflow-y: auto;
    background-color: var(--color-editor-background);
}
.tab-content-panel.active {
    display: block;
    z-index: 10;
}

/* Alterações 21/04 */

/* ==========================================================================
   KCS HUB - DESIGN SYSTEM FOUNDATION (SEMANTIC CLASSES)
   ========================================================================== */

/* ==========================================================================
   1. SUPERFÍCIES
   Controlam a cor de fundo e a elevação (z-index visual) para Light/Dark Mode
   ========================================================================== */

/* Superfície base (Fundo da tela principal, áreas vazias) */
.kcs-surface-base {
    background-color: var(--color-editor-background);
    color: var(--color-text-primary);
}

/* Superfície nível 1 (Sidebars, Cards, Painéis encaixados) */
.kcs-surface-elevated {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-primary);
}

/* Superfície flutuante (Dropdowns, Menus de Contexto, Modais Livres) */
.kcs-surface-floating {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    color: var(--color-text-primary);
}

/* ==========================================================================
   2. MODAIS E DIALOGS
   Containers sobrepostos ao overlay escuro
   ========================================================================== */

/* Base compartilhada para todos os modais */
/* TODO: verificar uso da família legada .kcs-modal-* após consolidação para .modal-* */
.kcs-modal-base {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Modais pequenos (Alertas, Confirmações, Prompts) */
.kcs-modal-dialog {
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
}

/* Modais grandes (Editor KCS, SQL, Painel Administrativo) */
.kcs-modal-panel {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

/* Modal de Histórico de Versões */
.kcs-modal-history {
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   3. CARDS
   Superfícies iteráveis para exibição de conteúdo nas Grids
   ========================================================================== */

/* Estrutura base de Cards */
.kcs-card-base {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Cards interativos (Grid de Artigos KCS e Itens Operacionais) */
.kcs-card-content {
    cursor: pointer;
}
.kcs-card-content:hover {
    border-color: var(--color-focus);
    background-color: var(--color-hover);
    box-shadow: var(--shadow-sm);
}

/* Cards estáticos de métricas (KPIs do Dashboard) */
.kcs-card-metric {
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary);
}

/* Containers amplos que englobam Tabelas ou Listas (Widgets) */
.kcs-card-widget {
    overflow: hidden;
    padding: 0; /* Padding interno é delegado aos elementos filhos */
}

/* ==========================================================================
   4. TABELAS
   Apresentação de dados tabulares (Fila de Revisão, Administração SaaS)
   ========================================================================== */

/* Wrapper que engloba a tabela para lidar com bordas e overflow (scroll X) */
.kcs-table-wrapper {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-xl);
    overflow-x: auto;
    width: 100%;
}

/* Reset semântico e aplicação de cor base na estrutura da tabela */
.kcs-table-base {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    color: var(--color-text-primary);
}

/* ==========================================================================
   5. BADGES E TAGS
   Indicadores visuais de status, IDs e Categorias
   ========================================================================== */

/* Base estrutural da pílula */
.kcs-badge-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-xl); /* Formato Pílula */
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

/* Identificadores sistêmicos (ex: #KCS-123456) */
.kcs-badge-id {
    font-family: var(--font-family-mono);
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: none;
}

/* Tags dinâmicas e Categorias */
.kcs-badge-tag {
    text-transform: lowercase;
    background-color: var(--color-editor-background);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* Semântica: Sucesso / Aprovado */
.kcs-badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: none;
}

/* Semântica: Alerta / Revisão Pendente / Reportado */
.kcs-badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: none;
}

/* Semântica: Neutro / Rascunho */
.kcs-badge-neutral {
    background-color: var(--color-editor-background);
    color: var(--color-text-muted);
    border-color: var(--color-border-subtle);
}

/* ==========================================================================
   6. CAMPOS DE LEITURA E FORMULÁRIO
   Inputs e blocos de visualização de conteúdo (VS Code Style)
   ========================================================================== */

/* Blocos de leitura do Visualizador de Artigos (Sintoma, Causa, Solução) */
.kcs-view-field-box {
    background-color: var(--color-hover);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary);
    overflow: hidden;
}

/* Inputs, Selects e Textareas interativos */
.kcs-form-input {
    width: 100%;
    background-color: var(--color-editor-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: var(--border-radius-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kcs-form-input:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 1px var(--color-focus);
}

/* ==========================================================================
   7. CHATBOT (IA ASSISTANT)
   Componentes das mensagens (RAG Local)
   ========================================================================== */

/* Balão do Usuário: Alinhado à direita, cor de destaque */
/* TODO: verificar uso da família legada .kcs-chat-bubble-* após migração para .chat-* */
.kcs-chat-bubble-user {
    background-color: var(--color-focus);
    color: var(--color-text-inverse);
    border-radius: 16px 16px 2px 16px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    word-break: break-word;
    box-shadow: var(--shadow-xs);
}

/* Balão da IA (Nissei Sensei): Alinhado à esquerda, cor de superfície limpa */
.kcs-chat-bubble-bot {
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 16px 16px 16px 2px;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   CORREÇÃO RÁPIDA: CONTRASTE DE TÍTULOS E ALINHAMENTO DE TABELAS
   ========================================================================== */

/* 1. Restaura a cor do texto para Dinâmico (Preto no Claro, Branco no Escuro) */
.view-title,
.dash-title,
.content-grid > div h3,
.modal-title,
.metric-value:not(.value-approved):not(.value-views):not(.value-alert) {
    color: var(--color-text-primary) !important;
}

/* 2. Restaura o layout, espaçamento e cabeçalho das Tabelas Semânticas */
.kcs-table-base th {
    background-color: var(--color-hover) !important;
    padding: 12px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
}

.kcs-table-base td {
    padding: 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    color: var(--color-text-primary) !important;
}

.kcs-table-base tbody tr {
    transition: background-color 0.2s ease !important;
}

.kcs-table-base tbody tr:hover {
    background-color: var(--color-hover) !important;
}

/* ==========================================================================
   CORREÇÃO DE CACHE: FORÇAR CONTRASTE EM STYLES INLINE (MODO CLARO)
   ========================================================================== */
/* Se o JavaScript em cache tentar forçar a cor 'inverse' (branco) no Modo Claro,
   o CSS intercepta a declaração inline e força a cor escura correta. */
html.light [style*="color: var(--color-text-inverse)"] {
    color: var(--color-text-primary) !important;
}

/* Aproveitando para clarear os textos "mutados" que ficaram invisíveis (ex: "Nenhum convite") */
html.light [style*="color: var(--color-text-muted)"] {
    color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   CORREÇÃO RÁPIDA: FUNDO DOS MODAIS (REMOVENDO TRANSPARENCIA)
   ========================================================================== */
/* Garante que todos os tipos de modais puxem a cor de fundo sólida correta */
.kcs-modal-dialog,
.kcs-modal-panel,
.kcs-modal-history {
    background-color: var(--color-sidebar-background) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
/* ==========================================================================
   MENTION SYSTEM: SQL Reference Chips & Sidebar Panel
   ========================================================================== */

/* Mention Dropdown */
.mention-dropdown {
    position: absolute;
    background-color: var(--color-sidebar-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    max-height: 250px;
    overflow-y: auto;
    width: 300px;
    z-index: 10000; /* Increased z-index to ensure it's above modals */
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.mention-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background-color 0.1s;
}

.mention-item:hover, .mention-item.selected {
    background-color: var(--color-focus);
    color: var(--color-text-inverse);
}

.mention-item-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.mention-item-description {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.mention-item:hover .mention-item-description, .mention-item.selected .mention-item-description {
    color: var(--color-text-inverse);
}

.mention-empty {
    padding: 12px;
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
}

/* SQL Mention Chip in Editor */
.sql-mention-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin: 0 2px;
    background-color: rgba(99, 102, 241, 0.15); /* Indigo light */
    color: #8B5CF6; /* Indigo primary */
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.sql-mention-chip:hover {
    background-color: rgba(99, 102, 241, 0.25);
    border-color: #8B5CF6;
}

/* SQL Detail Panel */
.sql-detail-panel {
    position: fixed;
    top: 48px; /* Below titlebar */
    right: 0;
    bottom: 22px; /* Above statusbar */
    width: 0;
    background-color: var(--color-editor-background);
    border-left: 1px solid var(--color-border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
    z-index: 9000;
    transition: width 0.2s ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sql-detail-panel.active {
    width: 400px; /* Standard width when active */
}

@media screen and (max-width: 768px) {
    .sql-detail-panel.active {
        width: 100%;
    }
    /* Ensures the main editor content is pushed off-screen when panel is open */
    body.sql-panel-open main.workbench-editor {
        margin-right: 100%;
    }
}

.sql-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
    background-color: var(--color-sidebar-background);
    color: var(--color-text-primary);
}

.sql-panel-header h3 {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.sql-panel-close-btn {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}
.sql-panel-close-btn:hover {
    color: var(--color-text-primary);
}

.sql-panel-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.sql-panel-section {
    margin-bottom: 16px;
}

.sql-panel-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.sql-panel-section p {
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.sql-panel-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-sidebar-background); /* Darker background for header */
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    padding: 8px 12px;
    margin-top: 8px;
    color: var(--color-text-secondary);
    position: relative; /* Needed for absolute positioning of copy button */
}

.sql-panel-code-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sql-panel-code-title i { color: var(--color-focus); }

.sql-panel-code-container {
    background-color: var(--color-editor-background);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    overflow-y: auto; /* Changed to auto for both x and y */
    padding: 10px;
    max-height: 400px; /* Limit height to enable vertical scroll */
}

.sql-panel-code-container pre {
    margin: 0;
}

.sql-panel-code-container code {
    font-family: var(--font-family-mono);
    font-size: 12px;
    line-height: 1.4;
    color: #e0e0e0; /* Default code color for dark theme */
    display: block; /* Ensure code block takes full width */
}

/* Syntax Highlighting (Basic - Refined for SQL Server) */
.sql-keyword { color: #569cd6; font-weight: 600; } /* Blue for keywords */
.sql-function { color: #dcdcaa; } /* Yellow for functions */
.sql-string { color: #ce9178; } /* Orange for strings */
.sql-comment { color: #6a9955; font-style: italic; } /* Green for comments */
.sql-operator { color: #c586c0; } /* Purple for operators */
.sql-number { color: #b5cea8; } /* Light green for numbers */
.sql-variable { color: #9cdcfe; } /* Light blue for variables */

/* Also support with language-sql parent class */
.language-sql .sql-keyword { color: #569cd6; font-weight: 600; } /* Blue for keywords */
.language-sql .sql-function { color: #dcdcaa; } /* Yellow for functions */
.language-sql .sql-string { color: #ce9178; } /* Orange for strings */
.language-sql .sql-comment { color: #6a9955; font-style: italic; } /* Green for comments */
.language-sql .sql-operator { color: #c586c0; } /* Purple for operators */
.language-sql .sql-number { color: #b5cea8; } /* Light green for numbers */
.language-sql .sql-variable { color: #9cdcfe; } /* Light blue for variables */

.btn-copy-code {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: 16px; /* Icon size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s;
    position: absolute; /* Position absolutely within the header */
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 10; /* Ensure it's above other elements if any */
}
.btn-copy-code:hover {
    background-color: var(--color-hover);
    color: var(--color-text-primary);
}

body.sql-panel-open {
    overflow: hidden; /* Prevent body scroll when panel is open */
}

body.sql-panel-open .workbench-grid {
    grid-template-columns: 48px 260px 1fr 400px; /* Adjust grid to make space for panel */
}

body.sql-panel-open .workbench-activitybar,
body.sql-panel-open .workbench-sidebar,
body.sql-panel-open .workbench-editor {
    transition: margin-right 0.2s ease-out; /* Smooth transition for shifting content */
}

html.light .sql-mention-chip {
    background-color: rgba(99, 102, 241, 0.08); /* Light mode color */
    color: #4f46e5;
    border-color: rgba(99, 102, 241, 0.2);
}
html.light .sql-mention-chip:hover {
    background-color: rgba(99, 102, 241, 0.15);
    border-color: #4f46e5;
}

html.light .sql-panel-code-container code {
    color: #3b3b3b; /* Darker code for light theme */
}

/* Refined Light Theme SQL Syntax Highlighting */
html.light .language-sql .sql-keyword { color: #0000ff; }
html.light .language-sql .sql-function { color: #8f0000; }
html.light .language-sql .sql-string { color: #a31515; }
html.light .language-sql .sql-comment { color: #008000; }
html.light .language-sql .sql-operator { color: #800080; }
html.light .language-sql .sql-number { color: #2a2a2a; }
html.light .language-sql .sql-variable { color: #0070c1; }

.kcs-image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.kcs-image-preview-shell {
    position: relative;
    max-width: min(1100px, 96vw);
    max-height: 92vh;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    padding: 16px;
}

.kcs-image-preview-img {
    max-width: 100%;
    max-height: 82vh;
    display: block;
    border-radius: 12px;
    object-fit: contain;
}

.kcs-image-preview-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #0f172a;
    color: #e5e7eb;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.ocr-inserted-text {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    border-radius: 10px;
}

.tool-ocr {
    color: var(--primary, #6366f1);
}

.kcs-image-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.kcs-image-preview-shell {
    position: relative;
    max-width: min(1200px, 96vw);
    max-height: 92vh;
    padding: 16px;
    border-radius: 18px;
    background: rgba(20, 20, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.kcs-image-preview-img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 12px;
}

.kcs-image-preview-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #111827;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
}

body.kcs-lightbox-open {
    overflow: hidden;
}

.kcs-published-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
}

.kcs-published-lightbox-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    cursor: zoom-out !important;
}

.kcs-published-lightbox-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 94vw !important;
    max-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    border-radius: 18px !important;
    background: rgba(17, 24, 39, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.65) !important;
    overflow: visible !important;
}

.kcs-published-lightbox-img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: min(760px, 80vw) !important;
    max-width: calc(94vw - 60px) !important;
    max-height: calc(90vh - 60px) !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    user-select: none !important;
}

.kcs-published-lightbox-close {
    position: absolute !important;
    top: -18px !important;
    right: -18px !important;
    z-index: 5 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: #111827 !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

.kcs-published-lightbox-close:hover {
    background: #1f2937 !important;
}

.proc-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    margin: 0 2px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    font-weight: 600;
    font-size: 0.92em;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.proc-mention-chip:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.55);
}

.mention-type-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.14);
    color: var(--color-text-muted);
}

.mention-procedure-preview {
    max-height: 360px;
    overflow: auto;
    padding: 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.25);
    border: 1px solid var(--color-border-subtle);
}

input[data-action="toggle-sector-feature"] {
    width: 16px;
    height: 16px;
    accent-color: #06b6d4;
    cursor: pointer;
}
   
/* Dashboard period/access alignment */
.dashboard-period-control {
    margin-left: auto;
    min-width: 220px;
    max-width: 256px;
    width: min(24vw, 256px);
}
.dashboard-period-control .dash-period-range-input {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-editor-background) 88%, #000 12%);
    color: var(--color-text-primary);
}
.dashboard-period-control .dash-period-range-input:focus {
    outline: none;
    border-color: var(--color-focus);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-focus) 30%, transparent);
}
.dash-content-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dash-content-row .dash-saas-subtitle {
    margin-right: auto;
}
.dash-content-row .dash-inline-access {
    margin-left: auto;
    text-align: right;
}
@media (max-width: 768px) {
    .dash-content-row .dash-inline-access {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }
    .dashboard-period-control {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
}


/* ==========================================================================
   FLATPICKR CALENDAR - VS CODE THEME INTEGRATION
   ========================================================================== */

.flatpickr-calendar {
    font-family: var(--font-family-base) !important;
    background-color: var(--color-sidebar-background) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--color-text-primary) !important;
    width: 270px !important;
    padding: 8px !important;
    margin-top: 4px !important; /* Espaço entre o input e o calendário */
}

/* Oculta as setinhas feias de "balão" do calendário */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    display: none !important;
}

.flatpickr-months {
    background: transparent !important;
    padding: 4px 0 8px 0 !important;
}

.flatpickr-month {
    color: var(--color-text-primary) !important;
    fill: var(--color-text-primary) !important;
    height: 28px !important;
}

.flatpickr-current-month {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
}

.flatpickr-current-month .numInputWrapper {
    width: 6ch !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    padding: 4px !important;
    color: var(--color-text-secondary) !important;
    fill: var(--color-text-secondary) !important;
    border-radius: var(--border-radius-sm) !important;
    transition: background-color 0.2s !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background-color: var(--color-hover) !important;
    color: var(--color-text-primary) !important;
    fill: var(--color-text-primary) !important;
}

.flatpickr-weekday {
    color: var(--color-text-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.flatpickr-days {
    width: 100% !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    padding-top: 8px !important;
}

.flatpickr-day {
    color: var(--color-text-primary) !important;
    border-radius: var(--border-radius-sm) !important; /* Mais quadrado, padrão VS Code */
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 12px !important;
    margin: 1px 0 !important;
    transition: background-color 0.1s, border-color 0.1s !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus {
    background-color: var(--color-hover) !important;
    border-color: transparent !important;
    color: var(--color-text-primary) !important;
}

/* Dias Selecionados (Extremos do Range) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background-color: var(--color-focus) !important;
    border-color: var(--color-focus) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Dias no Meio do Range */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange {
    background-color: rgba(0, 127, 212, 0.1) !important; /* Cor de seleção translúcida */
    border-color: transparent !important;
    box-shadow: none !important;
}

.flatpickr-day.today {
    border-color: var(--color-focus) !important;
}

/* Ajuste no modo claro para a seleção ter contraste */
html.light .flatpickr-day.inRange {
    background-color: rgba(0, 144, 241, 0.15) !important;
}


/* ==========================================================================
   POLIMENTO PREMIUM SAAS: CABEÇALHO DO DASHBOARD
   ========================================================================== */

/* 1. Remove a borda curta que ficava apenas no texto do título */
.dash-title {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Aplica a linha de ponta a ponta no contêiner superior */
.dash-saas-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    
    /* A mágica da linha estendida */
    border-bottom: 1px solid var(--color-border-subtle) !important;
    padding-bottom: 16px !important; 
    margin-bottom: 16px !important; 
}

/* Remove a borda dupla do wrapper pai (caso exista) para ficar limpo */
.dash-saas-header-wrapper {
    border-bottom: none !important;
}

/* ==========================================================================
   POLIMENTO PREMIUM SAAS: ANIMAÇÃO DO CALENDÁRIO
   ========================================================================== */

.flatpickr-calendar {
    /* Força a remoção de qualquer scale/zoom residual */
    transform: none !important; 
    
    /* Sombra de elevação elegante e bordas refinadas */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--color-border-subtle) !important;
}

/* Animação de entrada fluida (abre deslizando sutilmente para baixo) */
.flatpickr-calendar.open {
    animation: saasDropdownIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

@keyframes saasDropdownIn {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FIX DEFINITIVO: ENCAIXE DO CHATBOT NO WORKBENCH E CORES
   ========================================================================== */

/* 1. Força o painel do Chatbot a respeitar as margens exatas do VS Code */
#chatbot-panel {
    position: fixed !important;
    top: 48px !important; /* Exatamente abaixo da barra do título */
    bottom: 22px !important; /* Exatamente acima do rodapé */
    right: 0 !important;
    height: calc(100vh - 70px) !important; /* Mata a regra nativa de 100vh */
    
    /* Integração Perfeita de Cores do Tema */
    background-color: var(--color-sidebar-background) !important;
    border-left: 1px solid var(--color-border) !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    z-index: 80 !important;
}

/* 2. PROTEÇÃO MÁXIMA: Garante que o Header e o Footer NUNCA sejam cobertos */
header.workbench-titlebar,
.workbench-statusbar {
    position: relative !important;
    z-index: 100 !important;
}

/* 3. Estiliza a área de digitação para não destoar das cores do seu painel */
.chatbot-input-area {
    background-color: var(--color-sidebar-background) !important;
    border-top: 1px solid var(--color-border) !important;
}
.chatbot-input-area input {
    background-color: var(--color-editor-background) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* 4. Empurra o conteúdo sem esmagar o layout */
body.chatbot-open main.workbench-editor {
    margin-right: 0 !important; 
    padding-right: calc(var(--chatbot-width) + 24px) !important; 
}
body.chatbot-open header.workbench-titlebar {
    padding-right: calc(var(--chatbot-width) + 16px) !important;
}

/* 5. A MÁGICA: Reorganiza os gráficos do Dashboard de 6 para 3 colunas ao abrir o chat */
body.chatbot-open .dash-saas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ==========================================================================
   FIX RÁPIDO: BOTÕES SOCIAIS E INPUT DO CHATBOT
   ========================================================================== */

/* 1. Impede a quebra de linha dos botões Curtir/Comentar */
.btn-interaction {
    white-space: nowrap !important; /* Proíbe o texto de pular linha */
    flex-shrink: 0 !important; /* Impede o botão de ser esmagado */
}

/* Permite que a barra de ações jogue os itens para baixo se a tela ficar muito apertada */
.view-footer-actions {
    flex-wrap: wrap !important;
    gap: 16px !important;
}

/* 2. Força o Input do Chatbot a preencher todo o espaço disponível na barra */
.chatbot-input-area {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#chatbot-input {
    flex: 1 1 auto !important; /* Força o crescimento máximo */
    width: 100% !important;
    min-width: 0 !important; /* Hack mágico do Flexbox para inputs não travarem */
}

/* ==========================================================================
   FEATURE PREMIUM: RESIZE E COLAPSO DA SIDEBAR (VS CODE STYLE)
   ========================================================================== */
:root {
    /* Variável dinâmica controlada pelo JS. Largura inicial: 260px */
    --sidebar-width: 260px; 
}

/* O grid principal agora respira com a variável */
.workbench-grid {
    grid-template-columns: 48px var(--sidebar-width) 1fr !important;
    transition: grid-template-columns 0s; /* Instantâneo ao arrastar para não ter lag */
}

/* A barra invisível para o usuário puxar com o mouse */
.sidebar-resizer {
    position: absolute;
    top: 0;
    right: -2px; /* Metade para dentro, metade para fora da borda */
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 100;
    background-color: transparent;
    transition: background-color 0.2s ease;
    transition-delay: 0.1s; /* Pequeno atraso para não piscar à toa */
}

/* Fica com a bordinha azul ao passar o mouse ou arrastar (IDÊNTICO ao VS Code) */
.sidebar-resizer:hover,
body.is-resizing .sidebar-resizer {
    background-color: var(--color-focus);
}

/* Impede o usuário de selecionar texto acidentalmente enquanto arrasta */
body.is-resizing {
    user-select: none;
    cursor: col-resize !important;
}

/* Regras de quando a barra for ocultada (Colapsada) */
body.sidebar-collapsed .workbench-grid {
    --sidebar-width: 0px !important;
    transition: grid-template-columns 0.2s ease; /* Transição suave apenas no clique do botão */
}

body.sidebar-collapsed #sidebar.workbench-sidebar {
    overflow: hidden !important;
    opacity: 0 !important;
    border-right: none !important;
    visibility: hidden !important;
    padding: 0 !important;
    transition: opacity 0.1s ease;
}

/* O alinhamento perfeito do Logo e Barra de Pesquisa acompanhando o resize */
.workbench-brand-container {
    width: calc(48px + var(--sidebar-width) - 16px) !important;
    min-width: calc(48px + var(--sidebar-width) - 16px) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box;
    transition: width 0s;
}

header.workbench-titlebar .max-w-3xl {
    margin-left: 16px !important;
}

body.sidebar-collapsed .workbench-brand-container {
    width: 48px !important;
    min-width: 48px !important;
    padding: 4px;
    justify-content: center;
    transition: width 0.2s ease;
}

body.sidebar-collapsed .brand-text-group {
    display: none !important; /* Esconde o "KCS Hub" e deixa só o ícone Hexágono */
}

/* ==========================================================================
   FEATURE: COLAPSO DA SIDEBAR (MODO FOCO / VS CODE STYLE)
   ========================================================================== */

/* Remove a largura da coluna da Sidebar no Grid */
body.sidebar-collapsed .workbench-grid {
    grid-template-columns: 48px 0 1fr !important;
    transition: grid-template-columns 0.2s ease;
}

/* Esconde o conteúdo da Sidebar */
body.sidebar-collapsed #sidebar.workbench-sidebar {
    overflow: hidden !important;
    opacity: 0 !important;
    border-right: none !important;
    visibility: hidden !important;
    padding: 0 !important;
    transition: opacity 0.1s ease;
}

/* Opcional e elegante: Encolhe a Logo do topo para a barra de pesquisa usar o espaço ganho */
body.sidebar-collapsed .workbench-brand-container {
    width: 48px !important;
    min-width: 48px !important;
    padding: 4px;
    justify-content: center;
}
body.sidebar-collapsed .brand-text-group {
    display: none !important; /* Esconde a escrita "KCS Hub", deixa só o ícone Hexágono */
}

/* ==========================================================================
   FIX: ESTILIZAÇÃO PREMIUM DO MARKDOWN (README E VISUALIZADOR)
   ========================================================================== */
.markdown-body {
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.6;
    padding: 16px;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    color: var(--color-text-inverse);
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: 8px;
}

.markdown-body h1 { font-size: 24px; }
.markdown-body h2 { font-size: 20px; }
.markdown-body h3 { font-size: 16px; border-bottom: none; }

.markdown-body p { margin-bottom: 16px; }

.markdown-body ul, .markdown-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.markdown-body li { margin-bottom: 6px; }

/* Tabelas Premium */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background-color: var(--color-editor-background);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.markdown-body th {
    background-color: var(--color-sidebar-background);
    padding: 12px;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}

.markdown-body td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Código Inline */
.markdown-body code {
    background-color: rgba(99, 102, 241, 0.15);
    color: #8b5cf6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-family-mono);
    font-size: 12px;
}

/* Efeito de Vidro (Glassmorphism) e Background para o Login */
.login-container {
    background: rgba(20, 23, 30, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Animação suave de entrada */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Deixa os botões sociais com brilho sutil no hover */
#btn-google-login:hover, #btn-microsoft-login:hover {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   LOGIN PREMIUM SAAS - VISUAL UPGRADE
   ========================================================================== */

/* Fundo com profundidade (Vercel Style) */
.login-page-bg {
    background-color: #0c0e11 !important;
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(0, 127, 212, 0.15), transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(0, 127, 212, 0.05), transparent 30%) !important;
}

/* Card de Login em Vidro */
.login-container {
    background: rgba(23, 23, 26, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Inputs Refinados */
.login-input-custom {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.2s ease !important;
}

.login-input-custom:focus {
    border-color: var(--color-focus) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0 0 4px rgba(0, 127, 212, 0.1) !important;
}

/* SSO Buttons (Google/Microsoft) */
.btn-sso-premium {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    transition: all 0.2s !important;
}

.btn-sso-premium:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px);
}


/* ==========================================================================
   MICRO-INTERAÇÕES: LOGO (HOVER)
   ========================================================================== */

/* Garante que a transição seja suave */
.brand-logo-box {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Efeito ao passar o mouse na barra do KCS Hub no sistema */
.workbench-brand-container:hover .brand-logo-box {
    transform: scale(1.08) translateY(-1px); /* Aumenta 8% e sobe um pouquinho (flutua) */
    box-shadow: 0 8px 25px rgba(0, 127, 212, 0.6) !important; /* Glow azul intenso */
}

/* Pequeno brilho no ícone de dentro */
.workbench-brand-container:hover .brand-logo-box i {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   NOTIFICAÇÕES ESTILO VS CODE (TOASTS)
   ========================================================================== */

#toast-container {
    /* Garante que fique exatamente alinhado acima do botão de sino do footer */
    bottom: 35px !important; 
    right: 12px !important;
    top: auto !important;
}

/* O "Card" da notificação */
#toast-container > div {
    background-color: #252526 !important; /* Cinza escuro clássico do VS Code */
    color: #cccccc !important;
    border: 1px solid #454545 !important;
    border-radius: 3px !important; /* Bordas levemente pontiagudas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    padding: 12px 16px !important;
    font-family: var(--font-family-base) !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Esconde qualquer fundo colorido (vermelho, verde) que o JavaScript tente forçar */
#toast-container > div[class*="bg-"] {
    background-color: #252526 !important;
}

/* Ícones dentro da notificação */
#toast-container > div i {
    font-size: 16px !important;
}

/* =========================================================
   AS BORDAS LATERAIS DE SEVERIDADE (A Mágica do VS Code)
   ========================================================= */

/* SUCESSO (Verde) */
#toast-container > div.success, 
#toast-container > div:not(.error):not(.warning):not(.info):has(.ph-check-circle) {
    border-left: 4px solid #89d185 !important;
}
#toast-container > div.success i { color: #89d185 !important; }

/* ERRO (Vermelho) */
#toast-container > div.error, 
#toast-container > div.bg-red-500 {
    border-left: 4px solid #f14c4c !important;
}
#toast-container > div.error i, 
#toast-container > div.bg-red-500 i { color: #f14c4c !important; }

/* AVISO (Amarelo) */
#toast-container > div.warning, 
#toast-container > div.bg-yellow-500 {
    border-left: 4px solid #cca700 !important;
}
#toast-container > div.warning i, 
#toast-container > div.bg-yellow-500 i { color: #cca700 !important; }

/* INFO / DEFAULT (Azul) */
#toast-container > div.info, 
#toast-container > div.bg-blue-500 {
    border-left: 4px solid #3794ff !important;
}
#toast-container > div.info i, 
#toast-container > div.bg-blue-500 i { color: #3794ff !important; }


/* ==========================================================================
   FIX ESTRUTURAL DEFINITIVO: CHATBOT LAYOUT (FLEXBOX)
   ========================================================================== */

/* 1. O Painel principal TEM que ser uma coluna flexível e não pode vazar */
#chatbot-panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* 2. A MÁGICA: min-height: 0 avisa o navegador que essa área pode encolher 
   para caber na tela, forçando a barra de rolagem a aparecer em vez de empurrar o input */
#chatbot-messages {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important; 
    padding-bottom: 10px !important;
}

/* 3. O formulário vira uma rocha: não cresce, NÃO ENCOLHE (0 0 auto) */
#chatbot-form {
    flex: 0 0 auto !important; 
    display: flex !important;
    align-items: flex-end !important; /* Se o texto tiver várias linhas, o botão fica alinhado por baixo */
    padding: 12px 16px !important;
    min-height: 64px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid var(--color-border-subtle) !important;
    background-color: var(--color-sidebar-background, #1e1e1e) !important;
}

/* 4. O Input ganha altura mínima intocável */
#chatbot-input {
    flex: 1 1 auto !important;
    min-height: 40px !important;
    height: 40px; /* Será sobrescrito pelo JS se o texto crescer, mas nunca será menor que 40px */
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    margin-right: 8px !important;
}

/* 5. Botão de enviar fixo e quadrado */
.chatbot-send {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}


/* ================================
   MOBILE RESPONSIVE FIX - KCS HUB
================================ */

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .sidebar-desktop {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        max-width: 85vw;
        height: 100dvh;
        z-index: 999;
        transition: left 0.25s ease;
    }

    .sidebar-desktop.active,
    .sidebar-desktop.open,
    body.sidebar-open .sidebar-desktop {
        left: 0;
    }

    main,
    .main-content,
    #main-content,
    .content-wrapper,
    .app-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 12px !important;
        overflow-x: hidden;
    }

    header,
    .topbar,
    .app-header {
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .sidebar-mobile-toggle {
        display: flex !important;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 1000;
    }

    .right-sidebar,
    .side-actions,
    .desktop-only {
        display: none !important;
    }

    .chatbot-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* =========================================================
   MOBILE DEFINITIVO - KCS HUB
   Corrige desktop espremido no celular
========================================================= */

html,
body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body.auth-authenticated #app-screen,
.workbench-grid {
    min-height: 100dvh !important;
}

@media screen and (max-width: 768px) {
    :root {
        --sidebar-width: 0px !important;
        --chatbot-width: 100vw !important;
    }

    body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body.auth-authenticated #app-screen,
    .workbench-grid {
        display: grid !important;
        grid-template-areas:
            "titlebar"
            "editor"
            "panel"
            "statusbar" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 48px minmax(0, 1fr) auto 22px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .workbench-activitybar {
        display: none !important;
    }

    #sidebar.workbench-sidebar {
        position: fixed !important;
        top: 48px !important;
        left: -280px !important;
        bottom: 22px !important;
        width: 280px !important;
        max-width: 84vw !important;
        height: calc(100dvh - 70px) !important;
        z-index: 9500 !important;
        transform: none !important;
        transition: left 0.22s ease !important;
        box-shadow: var(--shadow-md) !important;
        overflow-y: auto !important;
    }

    body.sidebar-open #sidebar.workbench-sidebar,
    #sidebar.workbench-sidebar.open,
    #sidebar.workbench-sidebar.active {
        left: 0 !important;
    }

    main.workbench-editor {
        grid-area: editor !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    header.workbench-titlebar {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding: 0 10px !important;
        overflow: hidden !important;
    }

    .workbench-brand-container {
        width: auto !important;
        min-width: 0 !important;
        max-width: 45vw !important;
        flex-shrink: 1 !important;
    }

    header.workbench-titlebar .max-w-3xl {
        margin-left: 8px !important;
        min-width: 0 !important;
        max-width: 42vw !important;
    }

    .dash-metrics,
    .dash-saas-grid,
    .dash-saas-section-grid,
    .dash-tables-row,
    .content-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 12px !important;
    }

    .metric-card,
    .article-card,
    .dashboard-card,
    .glass-card,
    .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    .table-default {
        min-width: 680px !important;
    }

    .workbench-statusbar {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    #chatbot-panel.chatbot-panel {
        top: 48px !important;
        bottom: 22px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - 70px) !important;
        border-left: none !important;
    }

    body.chatbot-open .workbench-titlebar,
    body.chatbot-open .workbench-editor {
        padding-right: 12px !important;
    }
}