/* ==========================================================================
   BEYOND BITS DESIGN SYSTEM — CONTROLE DE PLANO DE TESTES
   Redesign inspirado: dark premium, coper/gold accents, bold typography
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
    --cor-primaria: #3b6ff0;
    --cor-cinza-fundo: #eef0f4;
    --cor-texto-escuro: #1a1d26;
    --cor-texto-claro: #6b7280;
    --cor-botao-funcao: #ffffff;
    --cor-aviso: #e6a23c;
    --cor-status-aprovado: #22a06b;
    --cor-status-reprovado: #e5484d;
    --cor-status-invalido: #8e6ee6;
    --cor-botao-fluxo: #3b6ff0;
    --cor-ticket-btn: #e6a23c;
    --cor-ticket-analise: #4a7dd6;
    --log-color-default: #6b7280;
    --log-color-warn: #e6a23c;
    --log-color-error: #e5484d;
    --log-color-info: #4a7dd6;
    --priority-critical: #b3261e;
    --priority-high: #e5484d;
    --priority-medium: #e6a23c;
    --priority-low: #4a7dd6;

    --bb-bg: #eef0f4;
    --bb-surface: #ffffff;
    --bb-card: #ffffff;
    --bb-elevated: #f5f6f9;
    --bb-border: #e5e8ef;
    --bb-border-h: #d3d8e3;
    --bb-copper: #3b6ff0;
    --bb-copper-l: #6690f5;
    --bb-copper-d: #2a55c4;
    --bb-cream: #1a1d26;
    --bb-txt1: #1a1d26;
    --bb-txt2: #6b7280;
    --bb-txt3: #8b93a5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bb-bg);
    color: var(--bb-txt1);
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bb-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--bb-copper-d); }

.container {
    max-width: 98vw;
    margin: 0 auto;
    background: var(--bb-surface);
    border-radius: 14px;
    box-shadow: 0 0 60px rgba(59,111,240,0.03), 0 20px 60px rgba(25,35,60,0.12);
    height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s;
    border: 1px solid var(--bb-border);
}

.header {
    background: var(--bb-surface);
    color: var(--bb-cream);
    padding: 20px 30px;
    text-align: center;
    flex-shrink: 0;
    transition: background-color 0.3s;
    position: relative;
    border-bottom: 1px solid var(--bb-border);
}
.header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--bb-copper) 50%, transparent 100%);
    opacity: 0.6;
}

.header-logo { display: none; }
.header-text { margin-left: 0; margin-top: 0; }
.header h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.6rem;
    margin-bottom: 2px;
    letter-spacing: -0.3px;
    font-weight: 700;
    color: var(--bb-cream);
}
.header p {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--bb-copper);
}

.content-wrapper {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
}

.sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--bb-card);
    border-radius: 0;
    padding: 14px;
    border: none;
    border-right: 1px solid var(--bb-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    transition: background-color 0.3s, border-color 0.3s;
}
.sidebar .btn, .sidebar h3, .sidebar .sidebar-divider { flex-shrink: 0; }

.sidebar h2 {
    text-align: center;
    color: var(--bb-copper);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--bb-border);
    padding-bottom: 8px;
    transition: border-color 0.3s;
}

.sidebar h3 {
    text-align: left;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bb-copper-d);
    margin-top: 4px;
    margin-bottom: 0;
    padding-left: 2px;
    transition: color 0.3s;
}

.settings-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; }
.settings-item label { font-size: 0.9rem; color: var(--bb-txt2); cursor: pointer; transition: color 0.3s; }

.sidebar .btn {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--bb-elevated) !important;
    color: var(--bb-txt1) !important;
    border: 1px solid var(--bb-border) !important;
    font-size: 0.82rem;
    padding: 9px 12px;
    border-radius: 7px;
}
.sidebar .btn:hover {
    background: var(--bb-border) !important;
    border-color: var(--bb-copper-d) !important;
    color: var(--bb-copper-l) !important;
    transform: none;
    box-shadow: none;
}

.sidebar .sidebar-divider {
    border: none;
    border-top: 1px solid var(--bb-border);
    margin: 4px 0;
    transition: border-color 0.3s;
}

.main-content {
    padding: 24px;
    flex-grow: 1;
    min-width: 0;
    overflow-y: auto;
    position: relative;
    background: var(--bb-bg);
}

.controls-section { text-align: center; margin-bottom: 24px; padding: 16px; background: var(--bb-card); border-radius: 10px; border: 1px solid var(--bb-border); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; align-items: center; transition: background-color 0.3s, border-color 0.3s; }

.btn { color: var(--bb-txt1); border: 1px solid var(--bb-border); padding: 10px 20px; border-radius: 7px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: var(--bb-elevated); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,111,240,0.1); border-color: var(--bb-copper-d); color: var(--bb-copper-l); }

.btn-add { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; border: none; font-weight: 700; }
.btn-add:hover { box-shadow: 0 4px 20px rgba(59,111,240,0.25); color: #ffffff; }
.btn-warning { background: var(--bb-copper-d); color: var(--bb-cream); border: none; }
.btn-warning.active-filter { background: var(--cor-status-reprovado); color: white; }
.btn-remove { background: var(--bb-elevated); color: var(--bb-txt2); padding: 8px 15px; border-radius: 20px; font-size: 0.88rem; border: 1px solid var(--bb-border); cursor: pointer; }

.btn-email,
.btn-history,
.btn-import,
.btn-roadmap,
.btn-retest,
.btn-toggle-retests,
.btn-window-capture,
#manage-tickets-btn,
#retrospective-btn,
#analytics-btn,
#view-toggle-btn {
    background-color: var(--bb-elevated);
}
.btn-generate-ticket {
    background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l));
    color: #ffffff;
    width: 100%;
    margin-top: 15px;
    border: none;
    font-weight: 700;
}

.btn-record { background: var(--cor-ticket-analise); border: none; }
.btn-download { background: var(--cor-status-aprovado); border: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

.fixed-action-buttons {
    position: fixed; bottom: 36px; right: 36px;
    display: flex; flex-direction: column; gap: 12px; z-index: 1000;
}

.btn-action-discrete {
    width: 50px; height: 50px; padding: 0; border-radius: 50%;
    font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 20px rgba(25,35,60,0.12);
    border: 1px solid var(--bb-border);
    transition: all 0.2s ease-in-out;
}
.btn-action-discrete:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(59,111,240,0.15); border-color: var(--bb-copper-d); }
.btn-action-discrete.btn-add { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); border: none; color: #ffffff; }
.btn-action-discrete.btn-warning { background: var(--bb-elevated); color: var(--bb-txt1); }
.btn-action-discrete.btn-warning.active-filter { background: var(--cor-status-reprovado); color: white; }

#open-chat-btn { background: var(--bb-copper); color: #ffffff; border: none; }


/* ==========================================================================
   TEST CASE CARDS
   ========================================================================== */
.test-case-card { background: var(--bb-card); border-radius: 10px; margin-bottom: 20px; box-shadow: 0 2px 14px rgba(25,35,60,0.06); border: 1px solid var(--bb-border); position: relative; overflow: hidden; transition: background-color 0.3s, border-color 0.3s; }
.test-case-card:hover { border-color: var(--bb-border-h); }
.test-case-card.is-retest { border: 2px dashed var(--cor-ticket-analise); background-color: rgba(74,125,214,0.06); }
.test-case-card.indented-retest { margin-left: 30px; width: calc(100% - 30px); }

.test-case-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--bb-border); transition: background-color 0.3s, border-color 0.3s; }
.test-case-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--bb-txt1); transition: color 0.3s; letter-spacing: 0.3px; }
.retest-label { background-color: var(--cor-ticket-analise); color: white; padding: 3px 8px; border-radius: 5px; font-size: 0.8em; }

.resolution-progress-container { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background-color: rgba(20,30,60,0.02); border-bottom: 1px solid var(--bb-border); }
.resolution-progress-label { font-size: 0.85rem; font-weight: 600; color: var(--bb-txt2); white-space: nowrap; }
.resolution-progress-bar { width: 100px; height: 8px; background-color: var(--bb-border); border-radius: 6px; overflow: hidden; border: 1px solid var(--bb-border-h); }
.resolution-progress-bar-inner { height: 100%; background: linear-gradient(90deg, var(--cor-status-aprovado), #50d08a); width: 0%; transition: width 0.5s ease-in-out; border-radius: 6px; }

.test-case-body { padding: 20px; }
.form-group { margin-bottom: 15px; }
.form-label { display: block; margin-bottom: 6px; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bb-txt2); transition: color 0.3s; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 11px 14px; border: 1px solid var(--bb-border); border-radius: 7px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; background: var(--bb-bg); color: var(--bb-txt1); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--bb-copper); box-shadow: 0 0 0 3px rgba(59,111,240,0.12); background: var(--bb-card); }
.form-textarea { resize: vertical; min-height: 80px; }
.hidden-field { display: none; }

.planning-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; background-color: var(--bb-elevated); padding: 15px; border-radius: 10px; border: 1px solid var(--bb-border); margin-bottom: 20px; }

.form-group-with-icon { position: relative; }
.btn-ai-correct { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: transparent; border: none; color: var(--bb-copper); cursor: pointer; font-size: 1.5rem; padding: 5px; line-height: 1; opacity: 0.5; transition: opacity 0.2s; }
.form-group-with-icon:hover .btn-ai-correct { opacity: 1; }
.form-group-with-icon .form-input,
.form-group-with-icon .form-textarea { padding-right: 45px; }

.status-indicator { width: 4px; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px 0 0 4px; }
.status-indicator.approved { background: linear-gradient(180deg, var(--cor-status-aprovado), #2a9a60); }
.status-indicator.failed { background: linear-gradient(180deg, var(--cor-status-reprovado), #c03030); }
.status-indicator.invalid { background: linear-gradient(180deg, var(--cor-status-invalido), #7a4abf); }
.status-indicator.selecione-um-resultado { background-color: var(--bb-border-h); }

/* ==========================================================================
   DEV COMMENTS
   ========================================================================== */
.btn-toggle-dev-comment { background-color: var(--bb-elevated); padding: 8px 15px; cursor: pointer; margin-bottom: 15px; border: 1px solid var(--bb-border); font-size: 0.9rem; color: var(--bb-txt1); }

.dev-comment-section { background-color: var(--bb-elevated); padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--bb-border); }
.dev-comments-list { margin-bottom: 20px; }
.comment-entry { background-color: var(--bb-surface); padding: 15px; border-radius: 8px; margin-bottom: 15px; border: 1px solid var(--bb-border); }
.comment-author-dev { border-left: 3px solid var(--log-color-info); }
.comment-author-qa { border-left: 3px solid var(--cor-status-aprovado); }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comment-author { font-weight: bold; margin-right: 10px; padding: 2px 8px; border-radius: 4px; color: white; font-size: 0.85rem; }
.comment-author-dev .comment-author { background-color: var(--log-color-info); }
.comment-author-qa .comment-author { background-color: var(--cor-status-aprovado); }
.comment-timestamp { font-size: 0.85em; color: var(--bb-txt3); font-style: italic; }
.comment-text { color: var(--bb-txt2); white-space: pre-wrap; margin-bottom: 15px; }
.new-comment-area { border-top: 1px solid var(--bb-border); padding-top: 15px; }
.new-comment-area .form-label { color: var(--bb-copper); }
.new-comment-area .form-textarea { background-color: var(--bb-bg); color: var(--bb-txt1); border-color: var(--bb-border); }
.new-comment-area .btn { margin-top: 10px; font-size: 0.9rem; padding: 8px 15px; }
.btn-add-comment-dev { background-color: var(--log-color-info); border: none; }
.btn-add-comment-qa { background-color: var(--cor-status-aprovado); margin-left: 10px; border: none; }

.comment-count-badge { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; padding: 2px 8px; font-size: 0.75em; border-radius: 10px; margin-left: 8px; font-weight: bold; vertical-align: middle; }

/* ==========================================================================
   EVIDENCE SECTION
   ========================================================================== */
.evidence-section { background: var(--bb-elevated); padding: 20px; border-radius: 10px; border: 1px solid var(--bb-border); transition: background-color 0.3s, border-color 0.3s; }
.evidence-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.evidence-title { font-weight: bold; color: var(--bb-txt1); }
.card-record-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.card-record-controls button,
.evidence-section-header .btn-flowchart { background-color: var(--cor-ticket-analise); color: white; padding: 6px 12px; font-size: 0.85rem; border: none; border-radius: 6px; cursor: pointer; }
.card-record-controls .stop-record-btn { background-color: var(--cor-status-reprovado); }
.btn-flowchart { background-color: var(--bb-copper); }

.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
.evidence-upload { border: 2px dashed var(--bb-border-h); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--bb-txt3); transition: all 0.3s; }
.evidence-upload:hover { border-color: var(--bb-copper-d); background: rgba(59,111,240,0.04); }
.evidence-upload input[type="file"] { display: none; }

.dev-evidence-section { margin-top: 10px; }
.dev-evidence-title { color: var(--bb-copper); font-weight: bold; margin-bottom: 10px; font-size: 0.9em; }
.dev-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dev-evidence-upload { border: 2px dashed var(--bb-copper-d); border-radius: 8px; padding: 15px; text-align: center; cursor: pointer; color: var(--bb-copper); background-color: rgba(59,111,240,0.04); }
.dev-evidence-upload:hover { background-color: rgba(59,111,240,0.08); }

.evidence-preview-wrapper { position: relative; width: 100%; padding-top: 75%; overflow: hidden; border-radius: 8px; background-color: var(--bb-bg); transition: background-color 0.3s; }

.preview-media,
.preview-media svg { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; object-fit: contain; cursor: zoom-in; }
.remove-evidence-btn { position: absolute; top: 5px; right: 5px; background: rgba(229,72,77,0.9); color: white; border: none; border-radius: 50%; width: 25px; height: 25px; font-size: 1.2rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; }
.remove-evidence-btn:hover { background: var(--cor-status-reprovado); }

/* ==========================================================================
   SUMMARY
   ========================================================================== */
.summary-section { background: var(--bb-card); padding: 24px; border-radius: 12px; margin-top: 20px; border: 1px solid var(--bb-border); transition: background-color 0.3s, border-color 0.3s; }
.summary-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; text-align: center; margin-bottom: 20px; letter-spacing: -0.2px; color: var(--bb-cream); }
.summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat-card { background: var(--bb-elevated); padding: 20px; border-radius: 10px; text-align: center; box-shadow: none; border: 1px solid var(--bb-border); transition: all 0.3s; }
.stat-card:hover { border-color: var(--bb-border-h); transform: translateY(-2px); }
.stat-number { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.2rem; font-weight: 800; }
.stat-card:nth-child(1) .stat-number { color: var(--bb-copper); }
.stat-card:nth-child(2) .stat-number { color: var(--cor-status-aprovado); }
.stat-card:nth-child(3) .stat-number { color: var(--cor-status-reprovado); }
.stat-card:nth-child(4) .stat-number { color: var(--cor-status-invalido); }
.stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--bb-txt2); margin-top: 5px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s; }

.csv-input-section { margin-top: 10px; padding: 15px; border: 1px dashed var(--bb-border-h); border-radius: 10px; width: 100%; transition: border-color 0.3s; }
.csv-input-section p { font-size: 0.85rem; color: var(--bb-txt2); margin-bottom: 10px; transition: color 0.3s; }


/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18,22,34,0.45); z-index: 1000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.modal-content { background: var(--bb-card); padding: 28px; border-radius: 14px; width: 90%; max-width: 800px; box-shadow: 0 20px 60px rgba(25,35,60,0.14), 0 0 1px rgba(59,111,240,0.15); position: relative; transition: background-color 0.3s; border: 1px solid var(--bb-border); color: var(--bb-txt1); }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 2rem; cursor: pointer; color: var(--bb-txt3); transition: all 0.3s; }
.modal-close:hover { color: var(--cor-status-reprovado); transform: rotate(90deg); }
#email-output { width: 100%; height: 400px; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; background: var(--bb-bg); color: var(--bb-txt1); border: 1px solid var(--bb-border); border-radius: 8px; }
.modal-content button { background: var(--bb-elevated); margin-top: 15px; color: var(--bb-txt1); }

.media-content { background: transparent; box-shadow: none; width: auto; height: auto; max-width: 95vw; max-height: 95vh; padding: 0; display: flex; align-items: center; justify-content: center; border: none; }
#media-modal-player img, #media-modal-player video, #media-modal-player object { max-width: 95vw; max-height: 95vh; border-radius: 10px; display: block; object-fit: contain; }
.media-content .modal-close { color: white; text-shadow: 0 0 10px black; }

/* ==========================================================================
   CONSOLE LOG
   ========================================================================== */
.console-log-section { background: var(--bb-card); color: var(--bb-txt2); padding: 20px; border-radius: 10px; margin-top: 24px; font-family: 'IBM Plex Mono', monospace; border: 1px solid var(--bb-border); }
.console-log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid var(--bb-border); padding-bottom: 10px; }
.console-log-header h2 { color: var(--bb-copper); font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase; }
.btn-clear-logs { background: var(--cor-status-reprovado); padding: 6px 12px; font-size: 0.85rem; border: none; }
.log-output { max-height: 300px; overflow-y: auto; border: 1px solid var(--bb-border); padding: 12px; border-radius: 8px; background: #f6f7fa; }
.log-entry { padding: 4px 0; border-bottom: 1px dotted rgba(20,30,60,0.08); font-size: 0.82rem; }
.log-warn { color: var(--log-color-warn); }
.log-error { color: var(--log-color-error); font-weight: bold; }
.log-info { color: var(--log-color-info); }

/* ==========================================================================
   ROADMAP
   ========================================================================== */
.roadmap-modal-content { max-width: 1000px; height: 90vh; display: flex; flex-direction: column; }
.roadmap-output { flex-grow: 1; overflow-y: auto; padding: 15px; border: 1px solid var(--bb-border); border-radius: 10px; background-color: var(--bb-surface); display: flex; flex-direction: column; transition: background-color 0.3s, border-color 0.3s; }
.roadmap-container h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2em; color: var(--bb-copper); text-align: center; margin-bottom: 20px; letter-spacing: 0; }
.roadmap-container p { text-align: center; margin-bottom: 30px; color: var(--bb-txt2); transition: color 0.3s; }
.roadmap-charts { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--bb-border); transition: border-color 0.3s; }
.chart-container { background-color: var(--bb-card); padding: 15px; border-radius: 10px; box-shadow: none; width: 100%; max-width: 450px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--bb-border); transition: background-color 0.3s; }
.chart-container h3 { font-size: 1.1em; color: var(--bb-txt1); margin-bottom: 10px; text-align: center; transition: color 0.3s; }
.chart-container canvas { width: 100% !important; height: 100% !important; max-height: 250px; }
.roadmap-details { margin-top: 20px; }
.roadmap-type-section { background-color: var(--bb-elevated); border-radius: 10px; padding: 15px; margin-bottom: 20px; border: 1px solid var(--bb-border); transition: background-color 0.3s, border-color 0.3s; }
.roadmap-type-section h3 { font-size: 1.4em; color: var(--bb-txt1); margin-bottom: 15px; border-bottom: 1px solid var(--bb-border); padding-bottom: 10px; transition: color 0.3s, border-color 0.3s; }
.roadmap-subsection { margin-bottom: 15px; padding: 10px; border-radius: 8px; border-left: 4px solid; background: var(--bb-card); }
.roadmap-subsection.approved { border-color: var(--cor-status-aprovado); }
.roadmap-subsection.failed { border-color: var(--cor-status-reprovado); }
.roadmap-subsection.invalid { border-color: var(--cor-status-invalido); }
.roadmap-subsection.pending { border-color: var(--bb-copper); }
.roadmap-subsection h4 { font-size: 1.1em; margin-bottom: 10px; display: flex; align-items: center; color: var(--bb-txt1); }
.roadmap-subsection h4 .status-icon { font-size: 1.5em; margin-right: 8px; }
.roadmap-item { background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 8px; padding: 10px; margin-bottom: 8px; transition: background-color 0.3s, border-color 0.3s; }
.roadmap-item .item-id { font-weight: bold; color: var(--bb-copper); font-family: 'IBM Plex Mono', monospace; }
.roadmap-item .item-name { font-weight: 600; color: var(--bb-txt1); transition: color 0.3s; }
.roadmap-item .item-description,
.roadmap-item .item-failure { font-size: 0.9em; color: var(--bb-txt2); margin-top: 5px; display: block; transition: color 0.3s; }
.roadmap-highlight-section { background-color: rgba(59,111,240,0.06); border: 1px solid rgba(59,111,240,0.15); border-left: 4px solid var(--bb-copper); padding: 15px; border-radius: 10px; margin-bottom: 25px; text-align: center; transition: background-color 0.3s, border-color 0.3s; }
.roadmap-highlight-section h3 { color: var(--bb-copper-l); font-size: 1.3em; margin-bottom: 10px; transition: color 0.3s; }
.roadmap-highlight-section p { font-size: 1.05em; color: var(--bb-txt1); transition: color 0.3s; }
.roadmap-highlight-section .highlight-id { font-weight: bold; color: var(--bb-copper); }
.roadmap-highlight-section .highlight-item { font-style: italic; color: var(--bb-txt2); }
.roadmap-highlight-section .highlight-count { font-weight: bold; color: var(--cor-status-aprovado); font-size: 1.2em; }

@media (min-width: 768px) {
    .roadmap-charts { flex-direction: row; }
    .chart-container { width: calc(50% - 20px); }
}

/* ==========================================================================
   HISTORY & PROJECTS
   ========================================================================== */
.history-list-container { max-height: 50vh; overflow-y: auto; padding: 10px; border: 1px solid var(--bb-border); border-radius: 8px; margin-top: 15px; background: var(--bb-bg); }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--bb-elevated); border-radius: 8px; border: 1px solid var(--bb-border); margin-bottom: 10px; }
.history-item-info { display: flex; flex-direction: column; }
.history-item-info strong { font-size: 1.1rem; color: var(--bb-txt1); }
.history-item-info span { font-size: 0.85rem; color: var(--bb-txt2); margin-top: 4px; }
.history-item-actions .btn { margin-left: 10px; padding: 8px 15px; font-size: 0.9rem; }

.project-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--bb-elevated); border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--bb-border); cursor: pointer; word-wrap: break-word; text-align: left; font-size: 0.9em; }
.project-item:hover { background-color: var(--bb-border); }
.project-item-info { display: flex; flex-direction: column; }
.project-item-info strong { color: var(--bb-txt1); }
.project-item-info span { font-size: 0.85em; color: var(--bb-txt2); }
.project-item .btn-remove { background-color: var(--cor-status-reprovado); border: none; }

#initial-view-container { background: var(--bb-card); border: 1px solid var(--bb-border); border-radius: 12px; padding: 40px 20px; text-align: center; margin-bottom: 25px; transition: background-color 0.3s, border-color 0.3s; }
#initial-view-container h2 { color: var(--bb-copper); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; margin-bottom: 10px; }
#initial-view-container p { color: var(--bb-txt2); margin-bottom: 30px; transition: color 0.3s; }
#initial-project-list { max-height: none; text-align: left; }

.project-list-container { max-height: 50vh; overflow-y: auto; padding: 10px; border: 1px solid var(--bb-border); border-radius: 8px; margin-top: 15px; }

.btn-window-capture { background-color: var(--bb-elevated); color: var(--bb-txt1); padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; margin-left: 10px; border: 1px solid var(--bb-border); cursor: pointer; }

/* ==========================================================================
   BACKGROUND
   ========================================================================== */
.background-wallpaper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background-color: var(--bb-bg); transition: background-color 0.3s; }
.background-wallpaper svg { position: absolute; stroke: var(--bb-copper); stroke-width: 0.4; fill: none; opacity: 0.025; transform-origin: center center; }
.triangle-1 { width: 25vw; height: 25vw; top: -5vw; left: -5vw; transform: rotate(45deg); }
.triangle-2 { width: 40vw; height: 20vw; bottom: -5vw; left: 5vw; transform: rotate(-10deg); }
.triangle-3 { width: 20vw; height: 20vw; bottom: 2vw; right: -3vw; transform: rotate(15deg); }


/* ==========================================================================
   FLOWCHART
   ========================================================================== */
.flowchart-editor-content { max-width: 900px; width: 95%; height: 90vh; display: flex; flex-direction: column; }
.flowchart-editor-container { display: flex; flex-direction: column; flex-grow: 1; gap: 15px; margin-top: 15px; overflow: hidden; }
.flowchart-step { display: flex; flex-direction: column; }
.flowchart-step:nth-of-type(1) { flex-basis: 25%; }
.flowchart-step:nth-of-type(2) { flex-basis: 25%; }
.flowchart-step:nth-of-type(3) { flex-basis: 50%; min-height: 200px; }
.flowchart-step label { font-weight: 600; margin-bottom: 8px; color: var(--bb-txt2); }
#flowchart-description { min-height: 80px; resize: vertical; }
#generate-flowchart-btn { margin-top: 10px; align-self: flex-start; }
#flowchart-code { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; min-height: 80px; resize: vertical; }
.flowchart-editor-container textarea { width: 100%; border-radius: 8px; border: 1px solid var(--bb-border); padding: 10px; background: var(--bb-bg); color: var(--bb-txt1); }
#flowchart-preview { flex-grow: 1; border: 1px solid var(--bb-border); border-radius: 8px; background: var(--bb-elevated); padding: 10px; overflow: auto; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, border-color 0.3s; }
#flowchart-preview .error-text { color: var(--cor-status-reprovado); font-weight: bold; white-space: pre-wrap; padding: 10px; }

.modal-actions { margin-top: 20px; text-align: right; display: flex; justify-content: flex-end; gap: 10px; }

.flowchart-viewer-content { width: 90%; max-width: 900px; height: 85vh; display: flex; flex-direction: column; }
.flowchart-viewer-content h2 { text-align: center; margin-bottom: 20px; color: var(--bb-copper); flex-shrink: 0; }
#flowchart-viewer-output { flex-grow: 1; overflow: auto; background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 8px; padding: 15px; display: flex; align-items: center; justify-content: center; }
#flowchart-viewer-output svg { max-width: 100%; height: auto; }

/* ==========================================================================
   RECORDING
   ========================================================================== */
.recording-controls-floating { position: fixed; top: 20px; left: 20px; background-color: rgba(255,255,255,0.97); backdrop-filter: blur(12px); color: var(--bb-txt1); padding: 10px 15px; border-radius: 25px; box-shadow: 0 5px 20px rgba(25,35,60,0.12); z-index: 9999; display: flex; align-items: center; gap: 12px; cursor: move; font-family: 'Plus Jakarta Sans', sans-serif; user-select: none; border: 1px solid var(--bb-border); }
.recording-controls-floating .status-dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--cor-status-reprovado); animation: blink-animation 1.5s infinite; }
.recording-controls-floating.paused .status-dot { background-color: var(--bb-copper); animation: none; }
#rec-timer { font-weight: bold; font-size: 0.9rem; font-family: 'IBM Plex Mono', monospace; }
.recording-controls-floating button { background: transparent; border: 1px solid var(--bb-border-h); color: var(--bb-txt1); padding: 5px 10px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s; }
.recording-controls-floating button:hover { background-color: rgba(59,111,240,0.1); border-color: var(--bb-copper-d); }
@keyframes blink-animation { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* ==========================================================================
   VIDEO COMMENTER
   ========================================================================== */
#video-commenter-modal .modal-content { width: 95vw; height: 95vh; max-width: 1600px; padding: 0; overflow: hidden; }
.video-commenter-wrapper { display: flex; gap: 0; width: 100%; height: 100%; }
.video-commenter-main { flex: 3; display: flex; align-items: center; justify-content: center; background-color: #000; position: relative; overflow: hidden; }
.video-commenter-main video { width: 100%; max-height: 100%; border-radius: 0; z-index: 1; }
#video-drawing-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#video-drawing-canvas.active { pointer-events: auto; cursor: crosshair; }

.video-commenter-sidebar { flex: 1; min-width: 350px; background-color: var(--bb-card); border-left: 1px solid var(--bb-border); padding: 20px; display: flex; flex-direction: column; overflow: hidden; }
.commenter-header { padding-bottom: 15px; border-bottom: 1px solid var(--bb-border); }
#video-drawing-tools { display: flex; align-items: center; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.btn-tool { background-color: var(--bb-elevated); border: 1px solid var(--bb-border); color: var(--bb-txt1); width: 36px; height: 36px; padding: 0; border-radius: 8px; font-size: 1.2rem; cursor: pointer; transition: all 0.2s; }
.btn-tool:hover { background-color: var(--bb-border); border-color: var(--bb-copper-d); }
.btn-tool.active { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; border-color: var(--bb-copper); }
.color-palette { display: flex; gap: 5px; align-items: center; }
.color-palette .color-box { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s; }
.color-palette .color-box:hover { transform: scale(1.1); }
.color-palette .color-box.active { border-color: var(--bb-copper); transform: scale(1.1); }

.commenter-title { font-size: 1.3rem; font-weight: 700; color: var(--bb-txt1); margin-bottom: 5px; }
.commenter-author-date { font-size: 0.85rem; color: var(--bb-txt2); }

#comment-steps-list { list-style: none; padding: 20px 0; margin: 0; flex-grow: 1; overflow-y: auto; }
.comment-step-item { padding: 12px 5px; display: flex; justify-content: space-between; align-items: center; gap: 15px; border-bottom: 1px solid var(--bb-border); }
.comment-step-item:last-child { border-bottom: none; }
.comment-step-item.active-comment { background-color: rgba(59,111,240,0.06); border-radius: 6px; }
.comment-step-text { flex-grow: 1; font-size: 1rem; color: var(--bb-txt1); }
.comment-step-text .author { font-weight: bold; color: var(--bb-copper); font-size: 0.85em; display: block; margin-bottom: 4px; }
.comment-step-time { background-color: rgba(59,111,240,0.1); color: var(--bb-copper-l); font-weight: bold; padding: 5px 10px; border-radius: 12px; font-size: 0.85rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 0.2s; }
.comment-step-time:hover { background-color: rgba(59,111,240,0.18); }

#comment-reply-section { padding-top: 15px; border-top: 1px solid var(--bb-border); }
#new-comment-textarea { width: 100%; min-height: 60px; padding: 10px; border: 1px solid var(--bb-border); border-radius: 8px; resize: vertical; margin-bottom: 10px; background: var(--bb-bg); color: var(--bb-txt1); font-family: 'Plus Jakarta Sans', sans-serif; }
#add-comment-btn { width: 100%; background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; border: none; font-weight: 700; }
.btn-add-postit { background-color: var(--bb-copper); color: #ffffff; padding: 8px 12px; font-size: 0.9rem; border: none; border-radius: 5px; cursor: pointer; font-weight: 600; }

.post-it { position: absolute; background-color: #fffbe8; border: 1px solid var(--bb-copper-d); box-shadow: 3px 3px 12px rgba(25,35,60,0.10); font-family: 'Plus Jakarta Sans', sans-serif; cursor: move; display: flex; flex-direction: column; user-select: none; min-width: 100px; min-height: 100px; z-index: 3; border-radius: 4px; }
.post-it-header { width: 100%; padding: 2px; text-align: right; background-color: rgba(59,111,240,0.12); }
.remove-postit-btn { border: none; background: transparent; color: var(--bb-txt3); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.remove-postit-btn:hover { color: var(--cor-status-reprovado); }
.post-it-content { flex-grow: 1; padding: 8px; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; outline: none; color: var(--bb-txt1); }
.post-it-textarea { position: absolute; top: 25px; left: 0; width: 100%; height: calc(100% - 25px); border: none; background-color: transparent; resize: none; outline: none; font: inherit; padding: 8px; box-sizing: border-box; color: var(--bb-txt1); }
.post-it-resize-handle { position: absolute; bottom: 0; right: 0; width: 15px; height: 15px; cursor: se-resize; background: linear-gradient(135deg, transparent 50%, var(--bb-copper-d) 50%); }

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat-assistant-modal { position: fixed; bottom: 110px; right: 40px; width: 380px; height: 550px; z-index: 1001; display: none; flex-direction: column; transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
.chat-window { width: 100%; height: 100%; background: var(--bb-card); border-radius: 14px; box-shadow: 0 10px 40px rgba(25,35,60,0.12); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bb-border); transition: background-color 0.3s, border-color 0.3s; }
.chat-header { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.chat-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.chat-close-btn { background: none; border: none; color: #ffffff; font-size: 1.8rem; cursor: pointer; line-height: 1; }
.chat-messages { flex-grow: 1; padding: 15px; overflow-y: auto; background-color: var(--bb-bg); transition: background-color 0.3s; }
.chat-message { margin-bottom: 12px; padding: 10px 15px; border-radius: 16px; max-width: 85%; word-wrap: break-word; }
.user-message { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; margin-left: auto; border-bottom-right-radius: 4px; font-weight: 500; }
.assistant-message { background-color: var(--bb-elevated); color: var(--bb-txt1); margin-right: auto; border-bottom-left-radius: 4px; border: 1px solid var(--bb-border); transition: background-color 0.3s, color 0.3s; }
.assistant-message.thinking { font-style: italic; color: var(--bb-txt3); }
.chat-input-container { display: flex; padding: 15px; border-top: 1px solid var(--bb-border); background-color: var(--bb-card); flex-shrink: 0; transition: background-color 0.3s, border-color 0.3s; }
#chat-input { flex-grow: 1; border: 1px solid var(--bb-border); border-radius: 20px; padding: 10px 15px; font-size: 1rem; outline: none; background: var(--bb-bg); color: var(--bb-txt1); font-family: 'Plus Jakarta Sans', sans-serif; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
#chat-input:focus { border-color: var(--bb-copper); }
#chat-send-btn { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); color: #ffffff; border: none; border-radius: 20px; padding: 10px 20px; margin-left: 10px; font-weight: bold; cursor: pointer; }
#chat-send-btn:disabled { background: var(--bb-border); color: var(--bb-txt3); cursor: not-allowed; }


/* ==========================================================================
   KANBAN
   ========================================================================== */
#kanban-board-container { display: flex; gap: 12px; overflow-x: auto; padding: 10px 0; min-height: 600px; height: 100%; }
.kanban-column { flex: 1 0 280px; max-width: 300px; background-color: var(--bb-card); border-radius: 10px; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--bb-border); transition: background-color 0.3s; }
.kanban-column-header { padding: 14px; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bb-txt1); border-bottom: 2px solid var(--bb-border); text-align: center; flex-shrink: 0; transition: color 0.3s, border-color 0.3s; }
.kanban-cards-container { flex-grow: 1; padding: 10px; overflow-y: auto; min-height: 150px; transition: background-color 0.2s ease; }
.kanban-cards-container.drag-over { background-color: rgba(59,111,240,0.04); }
.kanban-card { background-color: var(--bb-elevated); border-radius: 8px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(25,35,60,0.05); cursor: grab; border-left: 4px solid; border-right: 3px solid transparent; transition: background-color 0.3s, border-color 0.2s; }
.kanban-card:active { cursor: grabbing; box-shadow: 0 5px 20px rgba(25,35,60,0.10); }
.kanban-card.overdue { border-right: 4px solid var(--cor-status-reprovado); box-shadow: 0 2px 12px rgba(229,72,77,0.15); }
.kanban-card.status-aprovado { border-left-color: var(--cor-status-aprovado); }
.kanban-card.status-reprovado { border-left-color: var(--cor-status-reprovado); }
.kanban-card.status-inválido { border-left-color: var(--cor-status-invalido); }
.kanban-card.status-pendente { border-left-color: var(--bb-copper); }
.kanban-card.status-selecione-um-resultado { border-left-color: var(--bb-txt3); }
.kanban-card-title { font-weight: 600; margin-bottom: 8px; color: var(--bb-txt1); transition: color 0.3s; }
.kanban-card-info { font-size: 0.85rem; color: var(--bb-txt2); display: flex; justify-content: space-between; transition: color 0.3s; border-bottom: 1px solid var(--bb-border); padding-bottom: 8px; margin-bottom: 8px; }
.kanban-card-details { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 0.8rem; color: var(--bb-txt2); }
.kanban-detail-item { background-color: var(--bb-bg); padding: 3px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.priority-tag { padding: 2px 8px; border-radius: 10px; color: white; font-weight: bold; font-size: 0.85em; }
.priority-tag.priority-n\/a, .priority-tag.priority-baixa { background-color: var(--bb-border-h); }
.priority-tag.priority-média { background-color: var(--priority-medium); color: #ffffff; }
.priority-tag.priority-alta { background-color: var(--priority-high); }
.priority-tag.priority-crítica { background-color: var(--priority-critical); }

/* ==========================================================================
   TICKET MANAGEMENT
   ========================================================================== */
#ticket-management-container { display: none; flex-direction: column; gap: 20px; }
.ticket-management-header { text-align: center; padding-bottom: 15px; border-bottom: 1px solid var(--bb-border); }
.ticket-management-header h2 { color: var(--bb-copper); font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; }
.ticket-management-header p { color: var(--bb-txt2); }
.ticket-filters { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }
.ticket-filters .form-select, .ticket-filters .form-input { max-width: 250px; }
.ticket-kanban-board { display: flex; gap: 12px; overflow-x: auto; padding: 10px 0; min-height: 600px; height: 100%; }
.ticket-kanban-column { flex: 1 0 300px; max-width: 320px; background-color: var(--bb-card); border-radius: 10px; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--bb-border); transition: background-color 0.3s; }
.ticket-kanban-header { padding: 14px; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bb-txt1); border-bottom: 3px solid; text-align: center; flex-shrink: 0; transition: color 0.3s, border-color 0.3s; }
.ticket-kanban-header.status-aberto { border-color: var(--cor-status-reprovado); }
.ticket-kanban-header.status-em-análise { border-color: var(--cor-ticket-analise); }
.ticket-kanban-header.status-em-desenvolvimento { border-color: var(--cor-status-invalido); }
.ticket-kanban-header.status-aguardando-qa { border-color: var(--bb-copper); }
.ticket-kanban-header.status-fechado { border-color: var(--cor-status-aprovado); }
.ticket-cards-container { flex-grow: 1; padding: 10px; overflow-y: auto; min-height: 150px; transition: background-color 0.2s ease; }
.ticket-cards-container.drag-over { background-color: rgba(59,111,240,0.03); }
.ticket-card { background-color: var(--bb-elevated); border-radius: 8px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(25,35,60,0.05); cursor: pointer; border-left: 4px solid; transition: all 0.3s; }
.ticket-card:active { cursor: grabbing; box-shadow: 0 5px 20px rgba(25,35,60,0.08); }
.ticket-card.status-aberto { border-left-color: var(--cor-status-reprovado); }
.ticket-card.status-em-análise { border-left-color: var(--cor-ticket-analise); }
.ticket-card.status-em-desenvolvimento { border-left-color: var(--cor-status-invalido); }
.ticket-card.status-aguardando-qa { border-left-color: var(--bb-copper); }
.ticket-card.status-fechado { border-left-color: var(--cor-status-aprovado); }
.ticket-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ticket-id { font-size: 0.8rem; font-weight: bold; color: var(--bb-copper); font-family: 'IBM Plex Mono', monospace; }
.ticket-priority-badge { font-size: 0.75rem; font-weight: bold; padding: 2px 8px; border-radius: 10px; color: white; }
.ticket-priority-badge.priority-crítico { background-color: var(--priority-critical); }
.ticket-priority-badge.priority-alta { background-color: var(--priority-high); }
.ticket-priority-badge.priority-média { background-color: var(--priority-medium); color: #ffffff; }
.ticket-priority-badge.priority-baixa { background-color: var(--priority-low); }
.ticket-card-title { font-weight: 600; margin-bottom: 10px; color: var(--bb-txt1); }
.ticket-card-footer { font-size: 0.85rem; color: var(--bb-txt2); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--bb-border); padding-top: 8px; margin-top: 8px; }
.ticket-origin { font-style: italic; }
.ticket-assignee { font-weight: bold; color: var(--bb-copper-l); }

.kanban-modal-content { width: 95vw; height: 95vh; max-width: none; display: flex; flex-direction: column; }
.kanban-modal-content h2 { text-align: center; margin-bottom: 20px; color: var(--bb-copper); flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; }
.kanban-board-container-fullscreen { display: flex; gap: 12px; overflow-x: auto; padding: 10px; flex-grow: 1; background-color: var(--bb-bg); border-radius: 8px; border: 1px solid var(--bb-border); transition: background-color 0.3s; }

/* ==========================================================================
   CONTROL PANEL
   ========================================================================== */
.control-panel-content { max-width: 800px; }
.control-panel-content h2 { text-align: center; color: var(--bb-copper); margin-bottom: 25px; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: 0; }
.panel-sections-wrapper { display: flex; gap: 20px; margin-bottom: 20px; }
.panel-section { background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 10px; padding: 20px; flex: 1; transition: background-color 0.3s, border-color 0.3s; }
.panel-section h3 { margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid var(--bb-border); padding-bottom: 10px; color: var(--bb-txt1); transition: color 0.3s, border-color 0.3s; }
.profile-details { display: flex; align-items: center; gap: 20px; }
.profile-picture { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bb-copper-d); cursor: pointer; }
.profile-info small { font-size: 0.8rem; color: var(--bb-txt3); transition: color 0.3s; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center; }
.stat-item .stat-value { font-size: 1.8rem; font-weight: bold; display: block; }
#cp-total-tests { color: var(--bb-copper); }
#cp-approved-tests { color: var(--cor-status-aprovado); }
#cp-failed-tests { color: var(--cor-status-reprovado); }
.stat-item .stat-title { font-size: 0.85rem; color: var(--bb-txt2); transition: color 0.3s; }

.settings-section { background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 10px; padding: 20px; transition: background-color 0.3s, border-color 0.3s; }
.settings-columns { display: flex; gap: 25px; }
.settings-column { flex: 1; }
.setting-toggle { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.setting-toggle label { font-weight: 500; font-size: 0.95rem; padding-right: 10px; color: var(--bb-txt1); }

/* Switch */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bb-border); transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: var(--bb-txt1); transition: .4s; }
input:checked + .slider { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); }
input:focus + .slider { box-shadow: 0 0 1px var(--bb-copper); }
input:checked + .slider:before { transform: translateX(22px); background-color: #ffffff; }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }


/* ==========================================================================
   DARK MODE — deeper darks since default is already dark
   ========================================================================== */
body.dark-mode { background: #0b0d13; color: #ddd; }
body.dark-mode .background-wallpaper { background-color: #0b0d13; }
body.dark-mode .container { background: #12141d; box-shadow: 0 20px 60px rgba(25,35,60,0.16); }
body.dark-mode .header { background: linear-gradient(135deg, #10121a, #141724, #171a26); }
body.dark-mode .sidebar { background: #161926; border-color: #262b3d; }
body.dark-mode .sidebar h2, body.dark-mode .sidebar h3 { color: var(--bb-copper-d); }
body.dark-mode .sidebar .sidebar-divider { border-color: #262b3d; }
body.dark-mode .sidebar .settings-item label { color: #999; }
body.dark-mode .main-content { color: #ddd; background: #0b0d13; }
body.dark-mode .controls-section,
body.dark-mode #initial-view-container { background: #161926; border-color: #262b3d; }
body.dark-mode .controls-section p,
body.dark-mode #initial-view-container p { color: #777; }
body.dark-mode .test-case-card { background: #171a26; border-color: #262b3d; }
body.dark-mode .test-case-card.is-retest { background-color: #0c1320; border-color: var(--cor-ticket-analise); }
body.dark-mode .test-case-header { border-color: #262b3d; }
body.dark-mode .test-case-title { color: #eee; }
body.dark-mode .form-label,
body.dark-mode .kanban-card-info,
body.dark-mode .roadmap-item .item-description,
body.dark-mode .roadmap-item .item-failure { color: #777; }
body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select { background: #10121a; border-color: #262b3d; color: #e6e8f0; }
body.dark-mode .evidence-section { background: #161926; border-color: #262b3d; }
body.dark-mode .evidence-upload { border-color: #333a52; color: #555; }
body.dark-mode .evidence-preview-wrapper { background-color: #10121a; }
body.dark-mode .summary-section { background: #161926; border-color: #262b3d; }
body.dark-mode .stat-card { background: #1a1e2b; border-color: #262b3d; }
body.dark-mode .stat-label { color: #777; }
body.dark-mode .modal-content { background: #1a1e2b; color: #ddd; border-color: #333a52; }
body.dark-mode .modal-close { color: #555; }
body.dark-mode #flowchart-preview,
body.dark-mode .roadmap-output { background-color: #10121a; border-color: #262b3d; }
body.dark-mode .roadmap-container p { color: #777; }
body.dark-mode .roadmap-charts { border-color: #262b3d; }
body.dark-mode .chart-container { background-color: #1a1e2b; border-color: #262b3d; }
body.dark-mode .chart-container h3 { color: #ddd; }
body.dark-mode .roadmap-type-section { background-color: #161926; border-color: #262b3d; }
body.dark-mode .roadmap-type-section h3 { color: #ddd; border-color: #333a52; }
body.dark-mode .roadmap-item { background-color: #222739; border-color: #262b3d; }
body.dark-mode .roadmap-item .item-name { color: #ddd; }
body.dark-mode .roadmap-highlight-section { background-color: rgba(59,111,240,0.04); border-color: var(--bb-copper-d); }
body.dark-mode .roadmap-highlight-section h3,
body.dark-mode .roadmap-highlight-section p { color: #ddd; }
body.dark-mode .project-item { background-color: #1a1e2b; border-color: #262b3d; }
body.dark-mode .project-item-info strong,
body.dark-mode .project-item-info span { color: #bbb; }
body.dark-mode .kanban-column { background-color: #161926; border-color: #262b3d; }
body.dark-mode .kanban-column-header { color: #ddd; border-color: #262b3d; }
body.dark-mode .kanban-card { background-color: #1a1e2b; color: #ddd; }
body.dark-mode .kanban-card-title { color: #ddd; }
body.dark-mode .chat-window { background: #161926; border-color: #262b3d; }
body.dark-mode .chat-messages { background-color: #0e1017; }
body.dark-mode .assistant-message { background-color: #1a1e2b; color: #ddd; }
body.dark-mode .chat-input-container { background-color: #161926; border-color: #262b3d; }
body.dark-mode #chat-input { background: #0e1017; border-color: #262b3d; color: #ddd; }
body.dark-mode .panel-section { background: #161926; border-color: #262b3d; }
body.dark-mode .panel-section h3 { border-color: #262b3d; }
body.dark-mode .profile-info small, body.dark-mode .stat-item .stat-title { color: #666; }
body.dark-mode .settings-section hr { border-color: #262b3d !important; }
body.dark-mode .ticket-management-header p { color: #777; }
body.dark-mode .ticket-kanban-column { background-color: #161926; border-color: #262b3d; }
body.dark-mode .ticket-kanban-header { color: #ddd; }
body.dark-mode .ticket-card { background-color: #1a1e2b; }
body.dark-mode .ticket-card-title { color: #ddd; }
body.dark-mode .ticket-card-footer { border-color: #262b3d; color: #777; }
body.dark-mode .resolution-progress-bar { background-color: #262b3d; border-color: #333a52; }
body.dark-mode .kanban-detail-item { background-color: #0e1017; color: #999; }

/* ==========================================================================
   EVIDENCE PASTE AREA
   ========================================================================== */
.evidence-paste-area { border: 2px dashed var(--bb-border-h); border-radius: 10px; padding: 20px; text-align: center; color: var(--bb-txt3); background-color: var(--bb-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; transition: background-color 0.3s, border-color 0.3s; }
.evidence-paste-area span { font-weight: bold; font-size: 0.9rem; }
body:not(.dark-mode) .evidence-grid:hover .evidence-paste-area { border-color: var(--bb-copper-d); background-color: rgba(59,111,240,0.02); }
body.dark-mode .evidence-paste-area { background-color: #10121a; border-color: #333a52; color: #555; }

.evidence-item-container { display: flex; flex-direction: column; gap: 8px; }
.evidence-description-input { width: 100%; padding: 6px 8px; font-size: 0.85rem; border: 1px solid var(--bb-border); border-radius: 6px; background-color: var(--bb-bg); color: var(--bb-txt1); transition: all 0.2s ease-in-out; font-family: 'Plus Jakarta Sans', sans-serif; }
.evidence-description-input:focus { outline: none; border-color: var(--bb-copper); box-shadow: 0 0 0 2px rgba(59,111,240,0.12); }
.evidence-description-tag { position: absolute; bottom: 5px; left: 5px; right: 5px; background-color: rgba(255,255,255,0.92); color: var(--bb-txt1); padding: 5px; font-size: 0.8rem; text-align: center; border-radius: 0 0 8px 8px; z-index: 5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dark-mode .evidence-description-input { background-color: #0e1017; border-color: #262b3d; color: #ddd; }

#ai-correction-modal .modal-content { max-height: 85vh; display: flex; flex-direction: column; }
.modal-body-scrollable { flex-grow: 1; overflow-y: auto; padding-right: 15px; margin-right: -15px; display: flex; flex-direction: column; }

/* ==========================================================================
   TAGS
   ========================================================================== */
.tags-section { margin-top: 20px; padding: 15px; background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 10px; transition: background-color 0.3s, border-color 0.3s; }
.tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tag-pill { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--bb-copper-d), var(--bb-copper)); color: #ffffff; padding: 4px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: 600; }
.remove-tag-btn { background: none; border: none; color: #ffffff; font-size: 1.2rem; margin-left: 5px; cursor: pointer; line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.remove-tag-btn:hover { opacity: 1; }
.tag-input { width: 100%; padding: 8px; border: 1px solid var(--bb-border); border-radius: 8px; background: var(--bb-bg); color: var(--bb-txt1); font-size: 0.95rem; font-family: 'Plus Jakarta Sans', sans-serif; }

.filter-section { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.filter-section label { font-weight: 600; color: var(--bb-txt2); font-size: 0.85rem; }

body.dark-mode .tags-section { background-color: #161926; border-color: #262b3d; }
body.dark-mode .tag-pill { background: var(--bb-copper); }
body.dark-mode .tag-input { background: #0e1017; border-color: #262b3d; color: #ddd; }
body.dark-mode .filter-section label { color: #777; }

/* ==========================================================================
   FILTER MODAL
   ========================================================================== */
.filter-modal-content { max-width: 900px; }
.filter-modal-content p { text-align: center; margin-bottom: 25px; color: var(--bb-txt2); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 20px; }
.filter-group { background: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 10px; padding: 20px; }
.filter-group h3 { margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bb-border); font-size: 1.1rem; color: var(--bb-copper); }
.filter-options { display: flex; flex-direction: column; gap: 10px; }
.filter-options label { display: flex; align-items: center; gap: 8px; font-size: 1rem; cursor: pointer; user-select: none; color: var(--bb-txt1); }
.filter-options input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--bb-copper); }
body.dark-mode .filter-modal-content p { color: #777; }
body.dark-mode .filter-group { background: #161926; border-color: #262b3d; }
body.dark-mode .filter-group h3 { border-color: #262b3d; }

/* ==========================================================================
   HISTORY ENTRIES
   ========================================================================== */
.btn-history-card { background: none; border: 1px solid var(--bb-border); color: var(--bb-txt2); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: all 0.2s ease; margin-right: 5px; }
.btn-history-card:hover { background-color: var(--bb-elevated); color: var(--bb-copper-l); border-color: var(--bb-copper-d); }
body.dark-mode .btn-history-card { border-color: #262b3d; color: #777; }
body.dark-mode .btn-history-card:hover { background-color: #1a1e2b; color: var(--bb-copper-l); }

.history-list-container { max-height: 60vh; overflow-y: auto; padding: 10px; border: 1px solid var(--bb-border); border-radius: 8px; }
.history-entry { display: flex; align-items: center; gap: 15px; padding: 12px; border-bottom: 1px solid var(--bb-border); }
.history-entry:last-child { border-bottom: none; }
.history-icon { font-size: 1.5rem; }
.history-details { flex-grow: 1; }
.history-text { font-size: 1rem; color: var(--bb-txt1); }
.history-text .status { font-weight: bold; padding: 4px 10px; border-radius: 15px; color: white !important; font-size: 0.9em; display: inline-block; line-height: 1.2; }
.history-text .status-approved { background-color: var(--cor-status-aprovado); }
.history-text .status-failed,
.history-text .status-reprovado { background-color: var(--cor-status-reprovado); }
.history-text .status-invalid { background-color: var(--cor-status-invalido); }
.history-text .status-pendente,
.history-text .status-selecione-um-resultado,
.history-text .status-criado { background-color: var(--bb-border-h); }
.history-meta { font-size: 0.85rem; color: var(--bb-txt3); margin-top: 4px; }
body.dark-mode .history-list-container { border-color: #262b3d; }
body.dark-mode .history-entry { border-color: #262b3d; }
body.dark-mode .history-text { color: #ddd; }
body.dark-mode .history-meta { color: #555; }


/* ==========================================================================
   TICKET DETAILS MODAL
   ========================================================================== */
#ticket-details-modal .modal-content { max-width: 1200px; width: 95%; height: 90vh; display: flex; flex-direction: column; }
#ticket-details-body { flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 20px; }
.ticket-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 10px; }
.ticket-details-section { background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; }
.ticket-details-section h3 { margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bb-border); font-size: 1.1rem; color: var(--bb-copper); }
.ticket-data-field { margin-bottom: 12px; }
.ticket-data-field label { font-weight: 600; color: var(--bb-txt2); display: block; margin-bottom: 4px; font-size: 0.85rem; }
.ticket-data-field .value { background-color: var(--bb-bg); padding: 10px; border-radius: 6px; font-size: 1rem; white-space: pre-wrap; word-wrap: break-word; min-height: 40px; color: var(--bb-txt1); border: 1px solid var(--bb-border); }
.ticket-data-field .form-select, .ticket-data-field .form-input { padding: 10px; }
#ticket-details-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; }
#ticket-details-evidence-grid .evidence-upload { display: none; }

.ticket-comment-section { background-color: var(--bb-bg); padding: 20px; border-radius: 10px; margin-top: 10px; border: 1px solid var(--bb-border); }
.ticket-comment-section h3 { margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bb-border); font-size: 1.1rem; color: var(--bb-txt2); }
.ticket-comments-list { margin-bottom: 20px; max-height: 250px; overflow-y: auto; padding-right: 10px; }
.ticket-comment-entry { background-color: var(--bb-elevated); padding: 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--bb-border); }
.ticket-comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.85rem; color: var(--bb-txt2); }
.ticket-comment-author { font-weight: bold; color: var(--bb-copper-l); }
.ticket-comment-text { font-size: 1rem; color: var(--bb-txt1); white-space: pre-wrap; }
.ticket-new-comment-area .form-textarea { margin-bottom: 10px; }

.generated-tickets-section { padding: 10px 20px; background-color: var(--bb-elevated); border-bottom: 1px solid var(--bb-border); }
.generated-tickets-section h4 { font-size: 0.85rem; color: var(--bb-txt2); margin-bottom: 10px; font-weight: 600; }
.tickets-list-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-list-item { padding: 4px 12px; border-radius: 15px; font-size: 0.85rem; font-weight: bold; cursor: pointer; transition: all 0.2s; color: white; text-decoration: none; }
.ticket-list-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(25,35,60,0.08); }
.ticket-list-item.status-aberto { background-color: var(--cor-status-reprovado); }
.ticket-list-item.status-em-análise { background-color: var(--cor-ticket-analise); }
.ticket-list-item.status-em-desenvolvimento { background-color: var(--cor-status-invalido); }
.ticket-list-item.status-aguardando-qa { background-color: var(--bb-copper); color: #ffffff; }
.ticket-list-item.status-fechado { background-color: var(--cor-status-aprovado); }

#ticket-generation-section .ticket-evidence-section { padding: 15px; margin-top: 15px; background: var(--bb-elevated); }
#ticket-generation-section .ticket-evidence-section .evidence-title { color: var(--bb-copper); }
#ticket-generation-section .ticket-evidence-section .evidence-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

body.dark-mode .ticket-details-section { background: #161926; border-color: #262b3d; }
body.dark-mode .ticket-details-section h3 { border-color: #262b3d; }
body.dark-mode .ticket-data-field .value { background-color: #0e1017; }
body.dark-mode .ticket-comment-section { background-color: #0e1017; border-color: #262b3d; }
body.dark-mode .ticket-comment-section h3 { color: #777; border-color: #262b3d; }
body.dark-mode .ticket-comment-entry { background-color: #1a1e2b; border-color: #262b3d; }
body.dark-mode .ticket-comment-text { color: #ddd; }
body.dark-mode .generated-tickets-section { background-color: #161926; border-color: #262b3d; }
body.dark-mode .generated-tickets-section h4 { color: #777; }

/* ==========================================================================
   TRAFFIC LIGHT & STATUS COLORS
   ========================================================================== */
.traffic-light-indicator { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; display: none; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.08); }
.traffic-light-indicator.status-danger { display: inline-block; background-color: var(--cor-status-reprovado); }
.traffic-light-indicator.status-warning { display: inline-block; background-color: var(--bb-copper); }
.traffic-light-indicator.status-success { display: inline-block; background-color: var(--cor-status-aprovado); }

.roadmap-subsection.em-andamento-dev { background-color: rgba(74,125,214,0.08); border-color: var(--cor-ticket-analise); }
.roadmap-subsection.pronto-para-qa { background-color: rgba(230,162,60,0.08); border-color: var(--bb-copper); }
.roadmap-subsection.falha-nova { background-color: rgba(229,72,77,0.08); border-color: var(--cor-status-reprovado); }

/* ==========================================================================
   CARD DETAILS MODAL
   ========================================================================== */
.card-details-modal-content { max-width: 950px; width: 90%; height: 90vh; display: flex; flex-direction: column; padding: 0; }
#card-details-modal-body { padding: 25px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.details-modal-header { border-bottom: 1px solid var(--bb-border); padding-bottom: 15px; margin-bottom: 10px; }
.details-modal-title { font-size: 1.6rem; padding: 8px; border-radius: 6px; border: 1px solid transparent; transition: all 0.2s; color: var(--bb-txt1); font-family: 'Plus Jakarta Sans', sans-serif; }
.details-modal-title:hover { background-color: var(--bb-elevated); border-color: var(--bb-border); }
.details-modal-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 25px; }
.details-modal-section h3 { font-size: 1rem; color: var(--bb-txt2); margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--bb-border); }
.details-modal-planning, .details-modal-status { background-color: var(--bb-elevated); padding: 15px; border-radius: 10px; border: 1px solid var(--bb-border); }
.details-modal-description textarea { min-height: 120px; }
.details-modal-comments .dev-comments-list { max-height: 300px; overflow-y: auto; padding: 10px; background-color: var(--bb-bg); border-radius: 8px; border: 1px solid var(--bb-border); }
#details-modal-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
#details-modal-tags-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#details-modal-tags-section .tag-input { width: 100%; }

body.dark-mode .card-details-modal-content { background: #12141d; }
body.dark-mode .details-modal-title:hover { background-color: #1a1e2b; border-color: #262b3d; }
body.dark-mode .details-modal-planning,
body.dark-mode .details-modal-status { background-color: #161926; border-color: #262b3d; }
body.dark-mode .details-modal-section h3,
body.dark-mode .details-modal-comments .dev-comments-list { border-color: #262b3d; }
body.dark-mode .details-modal-comments .dev-comments-list { background-color: #0e1017; }

/* ==========================================================================
   RETROSPECTIVE
   ========================================================================== */
.retrospective-modal-content { width: 95vw; max-width: 1600px; height: 90vh; display: flex; flex-direction: column; padding: 20px; }
.retrospective-container { flex-grow: 1; overflow: auto; border: 1px solid var(--bb-border); background-color: var(--bb-elevated); padding: 20px; border-radius: 10px; position: relative; }
body.dark-mode .retrospective-container { background-color: #10121a; border-color: #262b3d; }
#retrospective-timeline-lanes { position: relative; display: flex; flex-direction: column; gap: 30px; min-width: 100%; padding-bottom: 20px; }
.timeline-lane { display: flex; align-items: center; gap: 15px; min-height: 60px; position: relative; }
.lane-label { flex-shrink: 0; width: 150px; font-weight: bold; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; color: var(--bb-txt2); font-family: 'IBM Plex Mono', monospace; }
body.dark-mode .lane-label { color: #777; }
.lane-track { flex-grow: 1; height: 10px; background-color: var(--bb-border); border-radius: 6px; position: relative; }
body.dark-mode .lane-track { background-color: #262b3d; }
.timeline-bar-segment { position: absolute; height: 100%; opacity: 0; transition: opacity 0.4s ease-in; box-sizing: border-box; display: flex; align-items: center; }
.timeline-bar-segment.visible { opacity: 1; }
.segment-label { color: white; font-size: 11px; font-weight: bold; padding-left: 8px; text-shadow: 1px 1px 2px rgba(25,35,60,0.16); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.test-case-segment { top: -8px; height: 30px; border-radius: 5px; z-index: 1; }
.ticket-segment { top: 50%; transform: translateY(12px); height: 22px; z-index: 2; border-radius: 4px; box-shadow: 0 1px 4px rgba(25,35,60,0.08); }
.event-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; z-index: 3; cursor: pointer; font-size: 12px; text-align: center; line-height: 20px; color: white; opacity: 0; transition: opacity 0.3s ease-in 0.2s; border: 2px solid white; box-shadow: 0 1px 4px rgba(25,35,60,0.08); }
.event-marker.visible { opacity: 1; }
.event-marker.bottleneck { width: 26px; height: 26px; font-size: 15px; line-height: 26px; border-width: 2px; border-color: #fff; box-shadow: 0 0 12px 4px rgba(25,35,60,0.12); z-index: 4; }
.event-marker.bottleneck-instability { background-color: #8a2be2; }
.event-marker.bottleneck-cycletime { background-color: #FF8C00; }
.event-marker.bottleneck-criticality { background-color: #B22222; }
.event-marker:hover .event-tooltip { visibility: visible; opacity: 1; }
.event-tooltip { visibility: hidden; width: 180px; background-color: var(--bb-card); color: var(--bb-txt1); text-align: center; border-radius: 8px; padding: 8px; position: absolute; z-index: 5; bottom: 150%; left: 50%; margin-left: -90px; opacity: 0; transition: opacity 0.3s; font-size: 0.85rem; pointer-events: none; border: 1px solid var(--bb-border); box-shadow: 0 4px 16px rgba(25,35,60,0.10); }
.event-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--bb-card) transparent transparent transparent; }

.status-criado, .status-pendente, .status-selecione-um-resultado { background-color: var(--bb-border-h); }
.status-reprovado, .status-aberto, .status-falha-nova-aguardando-ticket { background-color: var(--cor-status-reprovado); }
.status-aprovado, .status-fechado, .status-aprovado-e-concluido { background-color: var(--cor-status-aprovado); }
.status-invalido { background-color: var(--cor-status-invalido); }
.status-em-analise, .status-em-andamento-dev { background-color: var(--cor-ticket-analise); }
.status-em-desenvolvimento { background-color: var(--cor-status-invalido); }
.status-aguardando-qa, .status-pronto-para-re-teste-qa { background-color: var(--bb-copper); color: #ffffff; }
.status-corrigido { background-color: #20c997; }

.retrospective-controls { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--bb-border); display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.retrospective-scrubber { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--bb-border); outline: none; border-radius: 4px; transition: opacity .2s; }
.retrospective-scrubber::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); cursor: pointer; border-radius: 50%; box-shadow: 0 0 6px rgba(59,111,240,0.3); }
.retrospective-scrubber::-moz-range-thumb { width: 18px; height: 18px; background: var(--bb-copper); cursor: pointer; border-radius: 50%; border: none; }
.retrospective-timer { font-family: 'IBM Plex Mono', monospace; font-weight: bold; background-color: var(--bb-elevated); padding: 5px 8px; border-radius: 6px; color: var(--bb-txt1); }
body.dark-mode .retrospective-timer { background-color: #161926; }
.retrospective-details-panel { margin-top: 10px; padding: 12px; background-color: rgba(59,111,240,0.05); border: 1px solid rgba(59,111,240,0.12); border-radius: 8px; min-height: 40px; font-size: 0.9rem; color: var(--bb-copper-l); }
body.dark-mode .retrospective-details-panel { background-color: rgba(59,111,240,0.03); border-color: rgba(59,111,240,0.08); color: var(--bb-copper); }
.retrospective-speed-label { color: var(--bb-txt2); font-size: 0.85rem; }


/* ==========================================================================
   ANALYTICS
   ========================================================================== */
.analytics-modal-content { max-width: 1200px; width: 90%; }
.analytics-subtitle { text-align: center; margin-top: -15px; margin-bottom: 25px; color: var(--bb-txt2); font-style: italic; }
.analytics-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.analytics-card { background-color: var(--bb-elevated); border: 1px solid var(--bb-border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; }
.analytics-card h3 { font-size: 1.1rem; color: var(--bb-copper); margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--bb-border); display: flex; align-items: center; gap: 10px; }
.analytics-list { list-style: none; padding: 0; margin: 0; }
.analytics-list-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--bb-border); font-size: 0.95rem; }
.analytics-list-item:last-child { border-bottom: none; }
.item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; color: var(--bb-txt1); }
.item-metric { font-weight: bold; white-space: nowrap; padding: 4px 10px; border-radius: 12px; font-size: 0.9em; }
.severity-high { color: #c22f36; background-color: rgba(229,72,77,0.12); border: 1px solid rgba(229,72,77,0.25); }
.severity-medium { color: var(--bb-copper-l); background-color: rgba(59,111,240,0.1); border: 1px solid rgba(59,111,240,0.2); }
.priority-summary-item { font-size: 1.1rem; padding: 10px; }
.priority-summary-item .count { font-size: 1.5rem; font-weight: bold; margin-right: 8px; }
.priority-critical .count { color: var(--priority-critical); }
.priority-alta .count { color: var(--priority-high); }

body.dark-mode .analytics-subtitle { color: #777; }
body.dark-mode .analytics-card { background-color: #1a1e2b; border-color: #262b3d; }
body.dark-mode .analytics-card h3 { border-color: #262b3d; }
body.dark-mode .analytics-list-item { border-color: #262b3d; }
body.dark-mode .severity-high { color: #ffc0c0; background-color: rgba(229,72,77,0.08); border-color: rgba(229,72,77,0.15); }
body.dark-mode .severity-medium { color: var(--bb-copper-l); background-color: rgba(59,111,240,0.06); border-color: rgba(59,111,240,0.12); }

/* ==========================================================================
   MACRO PROJECTS
   ========================================================================== */
.macro-project-item { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 15px; background-color: var(--bb-elevated); border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--bb-border); transition: all 0.2s ease; border-left: 4px solid var(--bb-copper); }
.macro-project-item:hover { background-color: var(--bb-border); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(25,35,60,0.08); border-left-color: var(--bb-copper-l); }
.macro-project-info { display: flex; flex-direction: column; }
.macro-project-info strong { font-size: 1.15rem; color: var(--bb-txt1); }
.macro-project-info span { font-size: 0.85rem; color: var(--bb-txt2); margin-top: 5px; }
.macro-project-actions .btn { margin-left: 10px; padding: 8px 15px; font-size: 0.9rem; }
.run-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--bb-elevated); border-radius: 8px; border: 1px solid var(--bb-border); margin-bottom: 10px; cursor: pointer; }
.run-item:hover { background-color: var(--bb-border); border-color: var(--bb-copper-d); }

body.dark-mode .macro-project-item { background-color: #1a1e2b; border-color: #262b3d; border-left-color: var(--bb-copper-d); }
body.dark-mode .macro-project-item:hover { background-color: #222739; }
body.dark-mode .macro-project-info strong { color: #ddd; }
body.dark-mode .macro-project-info span { color: #777; }
body.dark-mode .run-item { background-color: #1a1e2b; border-color: #262b3d; }
body.dark-mode .run-item:hover { background-color: #222739; }

#export-modal-content h3 { text-align: center; color: var(--bb-txt1); margin-bottom: 15px; }
body.dark-mode #export-modal-content h3 { color: #ddd; }
#export-modal .macro-project-item { cursor: pointer; }
.export-run-list { max-height: 40vh; overflow-y: auto; border: 1px solid var(--bb-border); border-radius: 8px; padding: 10px; margin: 20px 0; }
.export-run-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid var(--bb-border); }
.export-run-item:last-child { border-bottom: none; }
.export-run-item input[type="checkbox"] { width: 20px; height: 20px; margin-right: 15px; accent-color: var(--bb-copper); }
.export-run-item label { font-size: 1rem; cursor: pointer; color: var(--bb-txt1); }
body.dark-mode .export-run-list { border-color: #262b3d; }
body.dark-mode .export-run-item { border-color: #262b3d; }
body.dark-mode .export-run-item label { color: #ddd; }

/* Force sidebar button standard */
.sidebar .btn { background-color: var(--bb-elevated) !important; }

/* ==========================================================================
   REPO BACKUP CARDS
   ========================================================================== */
.repo-backup-card { border: 1px solid var(--bb-border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.25s; background: var(--bb-elevated); overflow: hidden; }
.repo-backup-card:hover { box-shadow: 0 4px 20px rgba(59,111,240,0.08); transform: translateY(-2px); border-color: var(--bb-copper-d); }
.repo-backup-card:active { transform: translateY(0); }
.repo-backup-card-top { display: flex; align-items: stretch; gap: 0; }
.repo-backup-card-left { background: linear-gradient(135deg, var(--bb-copper-d), var(--bb-copper)); display: flex; align-items: center; justify-content: center; padding: 0 14px; min-width: 48px; border-radius: 10px 0 0 10px; }
.repo-backup-card:hover .repo-backup-card-left { background: linear-gradient(135deg, var(--bb-copper), var(--bb-copper-l)); }
.repo-backup-number { color: #ffffff; font-weight: 700; font-size: 0.95em; white-space: nowrap; }
.repo-backup-card-body { flex: 1; padding: 14px 16px; }
.repo-backup-name { font-weight: 700; font-size: 1em; color: var(--bb-txt1); margin-bottom: 4px; }
.repo-backup-desc { font-size: 0.88em; color: var(--bb-txt2); margin-bottom: 8px; line-height: 1.4; }
.repo-backup-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78em; color: var(--bb-txt3); }
.repo-backup-file { font-family: 'IBM Plex Mono', monospace; background: var(--bb-bg); padding: 1px 6px; border-radius: 4px; color: var(--bb-txt2); }
body.dark-mode .repo-backup-file { background: #161926; color: #999; }
.repo-backup-card-action { display: flex; align-items: center; gap: 4px; padding: 0 12px; border-left: 1px solid var(--bb-border); }
.repo-backup-load-btn { color: var(--bb-copper); font-weight: 600; font-size: 0.85em; white-space: nowrap; }
.repo-backup-card:hover .repo-backup-load-btn { color: var(--bb-copper-l); }
body.dark-mode .repo-backup-card { background: #1a1e2b; border-color: #262b3d; }
body.dark-mode .repo-backup-card:hover { border-color: var(--bb-copper-d); box-shadow: 0 4px 16px rgba(25,35,60,0.10); }

.repo-backup-delete-btn { background: none; border: none; cursor: pointer; font-size: 1em; padding: 4px 6px; border-radius: 6px; opacity: 0.5; transition: opacity 0.2s, background 0.2s; line-height: 1; }
.repo-backup-card:hover .repo-backup-delete-btn { opacity: 1; }
.repo-backup-delete-btn:hover { background: rgba(229,72,77,0.15); opacity: 1; }

/* ==========================================================================
   BACKUP TABS & PROJECT GROUPS
   ========================================================================== */
.backups-tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 2px solid var(--bb-border); padding-bottom: 0; }
.backup-tab { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 8px 18px; font-size: 0.95em; font-weight: 600; color: var(--bb-txt2); cursor: pointer; border-radius: 6px 6px 0 0; transition: color 0.15s, border-color 0.15s; }
.backup-tab:hover { color: var(--bb-copper); }
.backup-tab.active { color: var(--bb-copper); border-bottom-color: var(--bb-copper); background: none; }
.backup-project-group { border: 1px solid var(--bb-border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.backup-project-header { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--bb-elevated); cursor: pointer; user-select: none; transition: background 0.15s; }
.backup-project-header:hover { background: rgba(59,111,240,0.06); }
body.dark-mode .backup-project-header { background: #1a1e2b; }
body.dark-mode .backup-project-header:hover { background: #222739; }
.backup-project-icon { font-size: 1.1em; }
.backup-project-name { font-weight: 700; font-size: 1em; flex: 1; color: var(--bb-txt1); }
.backup-project-count { font-size: 0.85em; background: var(--bb-copper); color: #ffffff; padding: 2px 12px; border-radius: 99px; font-weight: 600; }
.backup-project-toggle { font-size: 1em; color: var(--bb-txt2); transition: transform 0.2s; }
.backup-project-body { border-top: 1px solid var(--bb-border); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.backup-project-body .repo-backup-card { margin-bottom: 0; }

/* ==========================================================================
   OVERRIDE DUPLICATE :root FROM BOTTOM OF ORIGINAL CSS
   These selectors existed at line ~3255 in the original and must be
   redefined here so they don't revert the theme.
   ========================================================================== */
:root {
    --cor-primaria: #3b6ff0;
    --cor-primaria-hover: #6690f5;
    --cor-fundo: #eef0f4;
    --cor-fundo-card: #ffffff;
    --cor-texto-escuro: #1a1d26;
    --cor-texto-claro: #6b7280;
    --cor-texto-mutado: #8b93a5;
    --cor-botao-funcao: #ffffff;
    --cor-botao-fluxo: #3b6ff0;
    --cor-ticket-btn: #e6a23c;
    --cor-ticket-analise: #4a7dd6;
    --cor-aviso: #e6a23c;
    --cor-status-aprovado: #22a06b;
    --cor-status-reprovado: #e5484d;
    --cor-status-invalido: #8e6ee6;
    --log-color-default: #6b7280;
    --log-color-warn: #e6a23c;
    --log-color-error: #e5484d;
    --log-color-info: #4a7dd6;
    --priority-critical: #b3261e;
    --priority-high: #e5484d;
    --priority-medium: #e6a23c;
    --priority-low: #4a7dd6;
    --borda-raio: 10px;
    --borda-raio-sm: 7px;
    --sombra-suave: 0 2px 12px rgba(25,35,60,0.08);
    --sombra-flutuante: 0 8px 32px rgba(25,35,60,0.12);
    --transicao-padrao: all 0.2s ease;
    --color-text-primary: #1a1d26;
    --color-text-secondary: #6b7280;
    --color-border-tertiary: #e5e8ef;
    --color-background-primary: #ffffff;
    --color-background-secondary: #f5f6f9;
}

/* Override bottom-of-file selectors from original */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-escuro);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.btn, button {
    font-family: inherit;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--borda-raio-sm);
    border: 1px solid var(--bb-border);
    cursor: pointer;
    transition: var(--transicao-padrao);
    background-color: var(--cor-botao-funcao);
    color: var(--bb-txt1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:hover, button:hover { transform: translateY(-1px); box-shadow: var(--sombra-suave); filter: brightness(1.1); }
.btn:active, button:active { transform: translateY(0); }
.form-select, input[type="text"], input[type="number"], input[type="range"], input[type="date"], input[type="password"] {
    font-family: inherit;
    padding: 8px 12px;
    border-radius: var(--borda-raio-sm);
    border: 1px solid var(--bb-border);
    background-color: var(--bb-bg);
    color: var(--cor-texto-escuro);
    transition: var(--transicao-padrao);
    outline: none;
}
.form-select:focus, input[type="text"]:focus { border-color: var(--bb-copper); box-shadow: 0 0 0 3px rgba(59,111,240,0.12); background-color: var(--bb-card); }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(18,22,34,0.45); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: var(--cor-fundo-card); border-radius: var(--borda-raio); box-shadow: var(--sombra-flutuante); position: relative; border: 1px solid var(--bb-border); color: var(--bb-txt1); }
.modal-overlay.active { display: flex; }
.modal-close { position: absolute; top: 16px; right: 16px; font-size: 1.5rem; color: var(--bb-txt2); cursor: pointer; transition: var(--transicao-padrao); }
.modal-close:hover { color: var(--cor-status-reprovado); transform: rotate(90deg); }

.retrospective-controls { display: flex; align-items: center; gap: 16px; background: var(--cor-fundo-card); padding: 12px 20px; border-radius: var(--borda-raio); box-shadow: var(--sombra-suave); border: 1px solid var(--bb-border); }
.retrospective-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bb-txt2); }
.retrospective-scrubber { flex-grow: 1; cursor: pointer; }
.backup-project-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--cor-fundo-card); border: 1px solid var(--bb-border); border-radius: var(--borda-raio); cursor: pointer; transition: var(--transicao-padrao); }
.backup-project-header:hover { background: rgba(59,111,240,0.04); border-color: var(--bb-border-h); }
.backup-project-count { background: var(--bb-copper); color: #ffffff; padding: 2px 12px; border-radius: 99px; font-size: 0.85em; font-weight: 600; }
.analytics-subtitle { color: var(--bb-txt2); font-size: 0.9em; margin-bottom: 20px; }



/* ==========================================================================
   DARK THEME TOKENS (Modo Noturno)
   ========================================================================== */
body.dark-mode {
    --bb-bg: #0e1017; --bb-surface: #13151f; --bb-card: #171a26; --bb-elevated: #1e2231;
    --bb-border: #272c3e; --bb-border-h: #363d55;
    --bb-copper: #5c84f5; --bb-copper-l: #7d9df7; --bb-copper-d: #3b5fd0;
    --bb-cream: #e8eaf2; --bb-txt1: #e8eaf2; --bb-txt2: #98a0b3; --bb-txt3: #5f677c;
    --cor-fundo: #0e1017; --cor-fundo-card: #171a26; --cor-cinza-fundo: #0e1017;
    --cor-texto-escuro: #e8eaf2; --cor-texto-claro: #98a0b3; --cor-botao-funcao: #1e2231;
    --cor-primaria: #5c84f5;
    --color-text-primary: #e8eaf2; --color-text-secondary: #98a0b3;
    --color-border-tertiary: #272c3e; --color-background-primary: #171a26; --color-background-secondary: #1e2231;
}
body.dark-mode .modal-overlay { background: rgba(5,7,12,0.6); }


/* ==========================================================================
   MODAL SIZING — dimensionado por funcionalidade
   ========================================================================== */
/* Padrão: modais simples (email, salvar run, preview de gravação, anexar log) */
.modal-content { width: min(92vw, 620px); max-width: 620px; max-height: 92vh; overflow-y: auto; padding: 28px; }
/* Listas (projetos, runs, histórico) — um pouco mais largos */
#project-modal .modal-content, #load-run-modal .modal-content, #history-modal .modal-content { width: min(92vw, 700px); max-width: 700px; }
/* Painéis médios */
.control-panel-content { width: min(94vw, 820px); max-width: 820px; }
.filter-modal-content { width: min(94vw, 920px); max-width: 920px; }
/* Editores de fluxograma */
.flowchart-editor-content { width: min(95vw, 900px); max-width: 900px; height: 90vh; overflow: hidden; }
.flowchart-viewer-content { width: min(90vw, 900px); max-width: 900px; height: 85vh; overflow: hidden; }
/* Painéis largos com conteúdo denso */
.roadmap-modal-content { width: min(94vw, 1000px); max-width: 1000px; height: 90vh; overflow: hidden; }
.card-details-modal-content { width: min(90vw, 950px); max-width: 950px; height: 90vh; padding: 0; overflow: hidden; }
#ticket-details-modal .modal-content { width: min(95vw, 1200px); max-width: 1200px; height: 90vh; overflow: hidden; }
.analytics-modal-content { width: min(94vw, 1200px); max-width: 1200px; }
/* Telas quase cheias */
.retrospective-modal-content { width: 95vw; max-width: 1600px; height: 90vh; padding: 20px; overflow: hidden; }
.kanban-modal-content { width: 95vw; max-width: none; height: 95vh; overflow: hidden; }
#video-commenter-modal .modal-content { width: 95vw; max-width: 1600px; height: 95vh; padding: 0; overflow: hidden; }
/* Repositório (form denso / lista de backups) */
#publish-repo-modal .modal-content, #repo-backups-modal .modal-content { width: min(92vw, 780px); max-width: 780px; }
/* Visualizador de mídia: dimensiona pelo conteúdo */
.media-content { width: auto; max-width: 95vw; max-height: 95vh; padding: 0; overflow: visible; }

/* ==========================================================================
   TEMAS COMPLETOS  —  cole este bloco NO FINAL do style.css
   Ativados por  <html data-theme="...">  (o JS grava isso e salva no navegador).
   Cada tema redefine as variáveis de cor usadas no plano de testes E no portal.
   Temas: claro (padrão), escuro, sepia, terminal, oceano, roza.
   ========================================================================== */

/* Transição suave ao trocar de tema */
html { transition: background-color .2s ease, color .2s ease; }

/* -------------------------------------------------------------------------
   Mapa de variáveis por tema.
   Definimos um conjunto "canônico" e espelhamos nas variáveis legadas
   (--cor-*, --log-*) para o app antigo acompanhar.
   ------------------------------------------------------------------------- */

/* ====== ESCURO ====== */
html[data-theme="escuro"] {
    --bb-bg:#12141a;      --bb-surface:#1b1e26;   --bb-card:#1b1e26;
    --bb-elevated:#232732; --bb-border:#2c313d;   --bb-border-h:#3a4150;
    --bb-copper:#5b8def;  --bb-copper-l:#7ba3f5;  --bb-copper-d:#3f6fd6;
    --bb-txt1:#e8eaed;    --bb-txt2:#b3b9c5;      --bb-txt3:#828b9c;
    --cor-primaria:#5b8def; --cor-primaria-hover:#7ba3f5;
    --cor-fundo:#12141a;  --cor-cinza-fundo:#12141a; --cor-fundo-card:#1b1e26;
    --cor-texto-escuro:#e8eaed; --cor-texto-claro:#b3b9c5; --cor-texto-mutado:#828b9c;
    --cor-botao-funcao:#232732;
    --priority-critical:#ff6b6b; --priority-high:#ff8787; --priority-medium:#f6c453; --priority-low:#74a9ff;
    --cor-status-aprovado:#3ddc97; --cor-status-reprovado:#ff6b6b; --cor-status-invalido:#b28dff;
    color-scheme: dark;
}

/* ====== SEPIA ====== */
html[data-theme="sepia"] {
    --bb-bg:#f3e9d8;      --bb-surface:#faf3e6;   --bb-card:#faf3e6;
    --bb-elevated:#f0e5cf; --bb-border:#e0d2b6;   --bb-border-h:#cdbb96;
    --bb-copper:#a2703f;  --bb-copper-l:#c08a52;  --bb-copper-d:#7d5327;
    --bb-txt1:#3b2f1e;    --bb-txt2:#6b5a42;      --bb-txt3:#8a7960;
    --cor-primaria:#a2703f; --cor-primaria-hover:#c08a52;
    --cor-fundo:#f3e9d8;  --cor-cinza-fundo:#f3e9d8; --cor-fundo-card:#faf3e6;
    --cor-texto-escuro:#3b2f1e; --cor-texto-claro:#6b5a42; --cor-texto-mutado:#8a7960;
    --cor-botao-funcao:#faf3e6;
    --priority-critical:#a3341f; --priority-high:#c0532b; --priority-medium:#b1852f; --priority-low:#7d6b3f;
    --cor-status-aprovado:#5a7d3a; --cor-status-reprovado:#a3341f; --cor-status-invalido:#8a6a3a;
    color-scheme: light;
}

/* ====== TERMINAL (verde sobre preto) ====== */
html[data-theme="terminal"] {
    --bb-bg:#0a0f0a;      --bb-surface:#0f1710;   --bb-card:#0f1710;
    --bb-elevated:#14201a; --bb-border:#1d3320;   --bb-border-h:#2a4a2e;
    --bb-copper:#39ff14;  --bb-copper-l:#7bff5c;  --bb-copper-d:#22c40a;
    --bb-txt1:#c8ffc0;    --bb-txt2:#7fdc7a;      --bb-txt3:#4f9a54;
    --cor-primaria:#39ff14; --cor-primaria-hover:#7bff5c;
    --cor-fundo:#0a0f0a;  --cor-cinza-fundo:#0a0f0a; --cor-fundo-card:#0f1710;
    --cor-texto-escuro:#c8ffc0; --cor-texto-claro:#7fdc7a; --cor-texto-mutado:#4f9a54;
    --cor-botao-funcao:#14201a;
    --priority-critical:#ff5555; --priority-high:#ff9955; --priority-medium:#f6ff55; --priority-low:#55ffbb;
    --cor-status-aprovado:#39ff14; --cor-status-reprovado:#ff5555; --cor-status-invalido:#b28dff;
    color-scheme: dark;
}

/* ====== OCEANO (azul-petróleo escuro) ====== */
html[data-theme="oceano"] {
    --bb-bg:#0d1b26;      --bb-surface:#122735;   --bb-card:#122735;
    --bb-elevated:#173142; --bb-border:#1f3d50;   --bb-border-h:#2c5169;
    --bb-copper:#2bb5c9;  --bb-copper-l:#54cddf;  --bb-copper-d:#1a8fa3;
    --bb-txt1:#e2f1f5;    --bb-txt2:#9fc2cd;      --bb-txt3:#6f97a4;
    --cor-primaria:#2bb5c9; --cor-primaria-hover:#54cddf;
    --cor-fundo:#0d1b26;  --cor-cinza-fundo:#0d1b26; --cor-fundo-card:#122735;
    --cor-texto-escuro:#e2f1f5; --cor-texto-claro:#9fc2cd; --cor-texto-mutado:#6f97a4;
    --cor-botao-funcao:#173142;
    --priority-critical:#ff6b6b; --priority-high:#ff9f68; --priority-medium:#ffd166; --priority-low:#6fd3e0;
    --cor-status-aprovado:#3ddc97; --cor-status-reprovado:#ff6b6b; --cor-status-invalido:#b28dff;
    color-scheme: dark;
}

/* ====== ROZA (claro, acento magenta) ====== */
html[data-theme="roza"] {
    --bb-bg:#fbeff5;      --bb-surface:#ffffff;   --bb-card:#ffffff;
    --bb-elevated:#fbe6f0; --bb-border:#f0d3e2;   --bb-border-h:#e3b6cf;
    --bb-copper:#d6336c;  --bb-copper-l:#e85c8c;  --bb-copper-d:#a61e50;
    --bb-txt1:#3a1526;    --bb-txt2:#7a4a5f;      --bb-txt3:#a06d81;
    --cor-primaria:#d6336c; --cor-primaria-hover:#e85c8c;
    --cor-fundo:#fbeff5;  --cor-cinza-fundo:#fbeff5; --cor-fundo-card:#ffffff;
    --cor-texto-escuro:#3a1526; --cor-texto-claro:#7a4a5f; --cor-texto-mutado:#a06d81;
    --cor-botao-funcao:#ffffff;
    --priority-critical:#c1123e; --priority-high:#e5484d; --priority-medium:#e6a23c; --priority-low:#8e6ee6;
    --cor-status-aprovado:#22a06b; --cor-status-reprovado:#c1123e; --cor-status-invalido:#8e6ee6;
    color-scheme: light;
}

/* -------------------------------------------------------------------------
   Ajustes finos para os temas ESCUROS não deixarem nada "branco fixo".
   Aplicam-se a qualquer tema marcado como escuro.
   ------------------------------------------------------------------------- */
html[data-theme="escuro"] body,
html[data-theme="terminal"] body,
html[data-theme="oceano"] body {
    background: var(--bb-bg);
    color: var(--bb-txt1);
}

/* Campos de formulário nos temas escuros */
html[data-theme="escuro"] input,   html[data-theme="escuro"] select,   html[data-theme="escuro"] textarea,
html[data-theme="terminal"] input, html[data-theme="terminal"] select, html[data-theme="terminal"] textarea,
html[data-theme="oceano"] input,   html[data-theme="oceano"] select,   html[data-theme="oceano"] textarea {
    background: var(--bb-elevated);
    color: var(--bb-txt1);
    border-color: var(--bb-border);
}
html[data-theme="escuro"] input::placeholder,
html[data-theme="terminal"] input::placeholder,
html[data-theme="oceano"] input::placeholder { color: var(--bb-txt3); }

/* Barra de rolagem discreta nos temas escuros */
html[data-theme="escuro"] ::-webkit-scrollbar-thumb,
html[data-theme="terminal"] ::-webkit-scrollbar-thumb,
html[data-theme="oceano"] ::-webkit-scrollbar-thumb { background: var(--bb-border-h); border-radius: 6px; }


/* ==========================================================================
   TEMAS COMPLETOS  —  cole este bloco NO FINAL do style.css
   Ativados por <html data-theme="..."> (o JS grava isso e salva no navegador).
   Os temas ESCUROS reaproveitam o .dark-mode já existente do app (o JS adiciona
   a classe), então TODOS os módulos ficam escuros e legíveis; aqui só ajustamos
   a paleta/acento. Contraste calibrado: nada fica ilegível.
   ========================================================================== */

html { transition: background-color .2s ease, color .2s ease; }

/* =========================== TEMAS ESCUROS ================================
   Base: .dark-mode (aplicada pelo JS). Aqui definimos as variáveis --bb-*/--cor-*
   para o portal e as partes que usam variáveis. Fundos escuros + texto claro. */

html[data-theme="escuro"] {
    --bb-bg:#0b0d13; --bb-surface:#161926; --bb-card:#171a26; --bb-elevated:#1c2030;
    --bb-border:#262b3d; --bb-border-h:#333a50;
    --bb-copper:#5b8def; --bb-copper-l:#7ba3f5; --bb-copper-d:#3f6fd6;
    --bb-txt1:#e6e8f0; --bb-txt2:#aeb6c6; --bb-txt3:#8b93a5;
    --cor-primaria:#5b8def; --cor-primaria-hover:#7ba3f5;
    --cor-fundo:#0b0d13; --cor-cinza-fundo:#0b0d13; --cor-fundo-card:#161926;
    --cor-texto-escuro:#e6e8f0; --cor-texto-claro:#aeb6c6; --cor-texto-mutado:#8b93a5;
    color-scheme: dark;
}

html[data-theme="terminal"] {
    --bb-bg:#050a05; --bb-surface:#0d160d; --bb-card:#0f1a0f; --bb-elevated:#132013;
    --bb-border:#1e351e; --bb-border-h:#2b4a2b;
    --bb-copper:#39d91f; --bb-copper-l:#5cf03f; --bb-copper-d:#22a012;
    --bb-txt1:#d6ffcf; --bb-txt2:#8fd889; --bb-txt3:#5f9a5a;
    --cor-primaria:#39d91f; --cor-primaria-hover:#5cf03f;
    --cor-fundo:#050a05; --cor-cinza-fundo:#050a05; --cor-fundo-card:#0d160d;
    --cor-texto-escuro:#d6ffcf; --cor-texto-claro:#8fd889; --cor-texto-mutado:#5f9a5a;
    color-scheme: dark;
}

html[data-theme="oceano"] {
    --bb-bg:#08151d; --bb-surface:#0f2430; --bb-card:#123040; --bb-elevated:#163847;
    --bb-border:#1f4050; --bb-border-h:#2c5468;
    --bb-copper:#31c1d6; --bb-copper-l:#5cd7e8; --bb-copper-d:#1f9aad;
    --bb-txt1:#e2f1f5; --bb-txt2:#a6c6d0; --bb-txt3:#749aa6;
    --cor-primaria:#31c1d6; --cor-primaria-hover:#5cd7e8;
    --cor-fundo:#08151d; --cor-cinza-fundo:#08151d; --cor-fundo-card:#0f2430;
    --cor-texto-escuro:#e2f1f5; --cor-texto-claro:#a6c6d0; --cor-texto-mutado:#749aa6;
    color-scheme: dark;
}

/* Reforço para os temas escuros (texto/inputs sempre legíveis),
   inclusive onde o .dark-mode base não chega via variável. */
html[data-theme="escuro"] body,
html[data-theme="terminal"] body,
html[data-theme="oceano"] body { background: var(--bb-bg); color: var(--bb-txt1); }

html[data-theme="escuro"] input,   html[data-theme="escuro"] select,   html[data-theme="escuro"] textarea,
html[data-theme="terminal"] input, html[data-theme="terminal"] select, html[data-theme="terminal"] textarea,
html[data-theme="oceano"] input,   html[data-theme="oceano"] select,   html[data-theme="oceano"] textarea {
    background: var(--bb-elevated) !important; color: var(--bb-txt1) !important; border-color: var(--bb-border) !important;
}
html[data-theme="escuro"] ::placeholder,
html[data-theme="terminal"] ::placeholder,
html[data-theme="oceano"] ::placeholder { color: var(--bb-txt3) !important; }

html[data-theme="escuro"] ::-webkit-scrollbar-thumb,
html[data-theme="terminal"] ::-webkit-scrollbar-thumb,
html[data-theme="oceano"] ::-webkit-scrollbar-thumb { background: var(--bb-border-h); border-radius: 6px; }

/* =========================== TEMAS CLAROS ================================
   Base: layout claro padrão (sem .dark-mode). Texto escuro sobre fundo claro.
   Acentos escurecidos o suficiente para carregar texto branco nos botões. */

html[data-theme="sepia"] {
    --bb-bg:#f2e8d5; --bb-surface:#faf4e8; --bb-card:#faf4e8; --bb-elevated:#f0e5cf;
    --bb-border:#e0d2b6; --bb-border-h:#cdbb96;
    --bb-copper:#8a5a2e; --bb-copper-l:#a2703f; --bb-copper-d:#6e4522;
    --bb-txt1:#2f2415; --bb-txt2:#5c4a33; --bb-txt3:#7d6b52;
    --cor-primaria:#8a5a2e; --cor-primaria-hover:#a2703f;
    --cor-fundo:#f2e8d5; --cor-cinza-fundo:#f2e8d5; --cor-fundo-card:#faf4e8;
    --cor-texto-escuro:#2f2415; --cor-texto-claro:#5c4a33; --cor-texto-mutado:#7d6b52;
    color-scheme: light;
}

html[data-theme="roza"] {
    --bb-bg:#fbeef4; --bb-surface:#ffffff; --bb-card:#ffffff; --bb-elevated:#fbe6f0;
    --bb-border:#f0d3e2; --bb-border-h:#e3b6cf;
    --bb-copper:#c1123e; --bb-copper-l:#e0355f; --bb-copper-d:#9c0e31;
    --bb-txt1:#33101f; --bb-txt2:#6f3a4d; --bb-txt3:#98607a;
    --cor-primaria:#c1123e; --cor-primaria-hover:#e0355f;
    --cor-fundo:#fbeef4; --cor-cinza-fundo:#fbeef4; --cor-fundo-card:#ffffff;
    --cor-texto-escuro:#33101f; --cor-texto-claro:#6f3a4d; --cor-texto-mutado:#98607a;
    color-scheme: light;
}