/* === Buttons (Outlined Style) === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    border: 1.5px solid;
    background: var(--surface);
    line-height: 1.4;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    border-color: var(--primary, #2d3a8c);
    background: var(--primary, #2d3a8c);
}
.btn-primary:hover {
    background: var(--primary-dark, #1a1f36);
    border-color: var(--primary-dark, #1a1f36);
    color: #fff;
}

.btn-blue {
    color: #fff;
    border-color: var(--accent, #4f5dff);
    background: var(--accent, #4f5dff);
}
.btn-blue:hover {
    background: #3d4ae6;
    border-color: #3d4ae6;
    color: #fff;
}

.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

.btn-warning {
    color: var(--warning);
    border-color: var(--warning);
}
.btn-warning:hover {
    background: var(--warning);
    color: #fff;
}

.btn-secondary {
    color: var(--text-secondary);
    border-color: var(--border);
}
.btn-secondary:hover {
    background: var(--bg);
    color: var(--text);
}

.btn-sm {
    padding: 5px 10px;
    font-size: 0.78rem;
}

/* === Cards === */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
}

.card-body {
    padding: 20px;
}

/* === Tables === */
.table-wrapper {
    overflow-x: auto;
    position: relative;
}

.table-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.table-wrapper.has-scroll::after {
    opacity: 1;
}

.table-wrapper.scrolled-end::after {
    opacity: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: var(--bg);
    border-bottom: 2px solid var(--border);
}

td {
    padding: 10px 14px;
    font-size: 0.87rem;
    border-bottom: 1px solid var(--border);
}

tr:nth-child(even) td {
    background: #FAFBFC;
}

tr:hover td {
    background: #F7FAFC;
}

/* === Forms === */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(25,118,210,0.1);
}

select.form-control {
    appearance: auto;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.helptext {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.errorlist li {
    font-size: 0.8rem;
    color: var(--danger);
}

/* === Badges === */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 12px;
    white-space: nowrap;
}

.badge-aberto { background: #EBF5FB; color: #4f5dff; }
.badge-em_analise { background: #FFF8E1; color: #BF5600; }
.badge-aguardando_cliente { background: #FFF3E0; color: #C43E00; }
.badge-aguardando_matriz { background: #EDE7F6; color: #4527A0; }
.badge-aguardando_n1 { background: #FCE4EC; color: #AD1457; }
.badge-em_desenvolvimento { background: #E8F5E9; color: #2E7D32; }
.badge-resolvido { background: #E0F2F1; color: #00695C; }
.badge-encerrado { background: #F3E5F5; color: #6A1B9A; }
.badge-cancelado { background: #FFEBEE; color: #C62828; }
.badge-unificado { background: #EDE7F6; color: #4527A0; }

.badge-baixa { background: #E8F5E9; color: #2E7D32; }
.badge-media { background: #FFF8E1; color: #BF5600; }
.badge-alta { background: #FFF3E0; color: #C43E00; }
.badge-critica { background: #FFEBEE; color: #C62828; }

/* === Pagination === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
    list-style: none;
}

.pagination a, .pagination span {
    padding: 6px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
}

.pagination a:hover {
    background: var(--bg);
    text-decoration: none;
}

.pagination .current {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}

/* === Timeline === */
.timeline {
    position: relative;
    padding-left: 24px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding-bottom: 16px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-blue);
    border: 2px solid var(--surface);
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.timeline-content {
    font-size: 0.85rem;
    margin-top: 2px;
}

/* === Alerts / Messages === */
.messages {
    list-style: none;
    padding: 0;
    margin-bottom: 16px;
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-success { background: #F0FFF4; border: 1px solid #C6F6D5; color: #22543D; }
.alert-error { background: #FFF5F5; border: 1px solid #FED7D7; color: #742A2A; }
.alert-warning { background: #FFFAF0; border: 1px solid #FEEBC8; color: #7B341E; }
.alert-info { background: #EBF8FF; border: 1px solid #BEE3F8; color: #2A4365; }

.alert-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: inherit;
    opacity: 0.6;
    padding: 0 4px;
}

/* === Scope Tabs === */
.scope-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
}

.scope-tab {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.scope-tab:hover {
    color: var(--text);
    text-decoration: none;
}

.scope-tab.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

/* === Filters Bar === */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.filters-bar .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 140px;
}

.filters-bar .form-control {
    padding: 6px 10px;
    font-size: 0.82rem;
}

/* === Detail Grid === */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 24px;
}

.detail-item label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 2px;
}

.detail-item span, .detail-item p {
    font-size: 0.9rem;
    color: var(--text);
}

/* === Empty state === */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.empty-state p {
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.empty-state-container,
.empty-state-td {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-secondary);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: block;
    opacity: 0.4;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 4px;
}

.empty-state-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
}

.empty-state-container .btn,
.empty-state-td .btn {
    margin-top: 4px;
}

/* === Preview Modal === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-container,
.modal-box {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text);
}

.modal-body {
    padding: 20px;
    overflow: auto;
    flex: 1;
    min-height: 300px;
}

/* Centralizar apenas para preview de imagens */
.modal-container .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Form modals: conteúdo alinhado ao topo, fluxo normal */
.modal-box .modal-body {
    display: block;
}

.modal-body img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/* Zoom controls */
.preview-zoom-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary, #f7f8fa);
}

.preview-zoom-label {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 42px;
    text-align: center;
    color: var(--text-secondary);
}

.preview-zoom-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.preview-zoom-wrapper img {
    transform-origin: center center;
    transition: transform 0.1s ease-out;
    user-select: none;
    -webkit-user-select: none;
}

.modal-body iframe {
    width: 100%;
    height: 70vh;
    border: none;
}

.modal-body video {
    max-width: 100%;
    max-height: 70vh;
}

/* === Notification Badge === */
.topbar-notif {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    margin-right: 12px;
}

.topbar-notif:hover {
    color: var(--text);
}

.notif-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #E53E3E;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.sidebar-notif-badge {
    position: static;
    margin-left: auto;
}

.sidebar-count-badge {
    position: static;
    margin-left: auto;
    background: var(--primary-blue, #4f5dff);
    font-size: 0.65rem;
}

.sidebar-count-badge.badge-warning {
    background: var(--warning, #DD6B20);
}

.sidebar-sub-link {
    padding-left: 40px !important;
    font-size: 0.85rem;
    opacity: 0.85;
}

/* === Notification List === */
.notificacao-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.notificacao-item:last-child {
    border-bottom: none;
}

.notificacao-nao-lida {
    background: #EBF8FF;
}

.notificacao-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notificacao-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.notificacao-nao-lida .notificacao-icon {
    color: var(--primary-blue);
}

.notificacao-mensagem {
    font-size: 0.87rem;
    margin: 0;
}

.notificacao-mensagem a {
    color: var(--text);
    text-decoration: none;
}

.notificacao-mensagem a:hover {
    text-decoration: underline;
}

.notificacao-nao-lida .notificacao-mensagem {
    font-weight: 600;
}

.notificacao-data {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* === SLA Indicators === */
.sla-indicators {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sla-indicator {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    border: 1px solid;
    min-width: 180px;
}

.sla-indicator .sla-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sla-ok {
    background: #F0FFF4;
    border-color: #C6F6D5;
    color: #22543D;
}

.sla-warning {
    background: #FFFAF0;
    border-color: #FEEBC8;
    color: #7B341E;
}

.sla-breached {
    background: #FFF5F5;
    border-color: #FED7D7;
    color: #742A2A;
}

.sla-label {
    font-weight: 600;
}

.sla-status {
    font-weight: 400;
}

/* === SLA Progress Bar === */
.sla-progress {
    width: 100%;
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}

.sla-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    max-width: 100%;
}

.sla-ok .sla-progress-fill, .sla-progress-fill.fill-ok { background: #48BB78; }
.sla-warning .sla-progress-fill, .sla-progress-fill.fill-warning { background: #ECC94B; }
.sla-breached .sla-progress-fill, .sla-progress-fill.fill-breached { background: #F56565; }

/* === SLA Dots (list view) === */
.sla-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sla-dot-ok { background: #48BB78; }
.sla-dot-warning { background: #ECC94B; }
.sla-dot-breached { background: #F56565; animation: sla-pulse 1.5s infinite; }

@keyframes sla-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* === Risco SLA Badge === */
.risco-sla-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: help;
}
.risco-sla-baixo { background: #C6F6D5; color: #22543D; }
.risco-sla-medio { background: #FEFCBF; color: #744210; }
.risco-sla-alto { background: #FEEBC8; color: #7B341E; }
.risco-sla-critico { background: #FED7D7; color: #822727; animation: sla-pulse 1.5s infinite; }

/* Risco SLA dot (list view) */
.risco-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}
.risco-dot-baixo { background: #48BB78; }
.risco-dot-medio { background: #ECC94B; }
.risco-dot-alto { background: #ED8936; }
.risco-dot-critico { background: #F56565; animation: sla-pulse 1.5s infinite; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* === Bulk Actions Bar === */
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #EBF5FB;
    border: 1px solid #BEE3F8;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4f5dff;
}

.bulk-preview {
    font-size: 0.78rem;
    font-weight: 400;
    color: #2A4365;
    font-style: italic;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === Quick-Add Button === */
.btn-quick-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--accent, #4f5dff);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent, #4f5dff);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 6px;
    line-height: 1;
    vertical-align: middle;
    transition: all 0.15s;
}

.btn-quick-add:hover {
    background: var(--accent, #4f5dff);
    color: #fff;
}

/* === Quick-Edit Button === */
.btn-quick-edit {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--primary);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    transition: all 0.15s;
    padding: 0;
}
.btn-quick-edit svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn-quick-edit.visible { display: inline-flex; }
.btn-quick-edit:hover {
    background: var(--primary);
    color: #fff;
}

/* === Timer Button === */
.timer-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.timer-btn svg {
    flex-shrink: 0;
}

/* Timer Cronômetro Visual */
.timer-cronometro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 8px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.timer-cronometro.timer-running {
    background: #E6FFFA;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.timer-cronometro.timer-paused {
    background: #F7FAFC;
    color: #718096;
    border: 1px solid #E2E8F0;
}

.timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    animation: timerPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* === Datepicker === */
.dp-wrapper {
    position: relative;
    display: inline-block;
}

.dp-popup {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    width: 340px;
    overflow: hidden;
    font-size: 0.82rem;
}

.dp-popup.dp-open {
    display: flex;
}

.dp-shortcuts {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 10px;
    border-right: 1px solid var(--border, #E2E8F0);
    min-width: 130px;
    background: var(--bg, #f4f5f7);
}

.dp-shortcut {
    background: none;
    border: none;
    padding: 7px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #718096);
    cursor: pointer;
    border-radius: 8px;
    text-align: left;
    white-space: nowrap;
    transition: all 0.15s;
}

.dp-shortcut:hover {
    background: var(--accent, #4f5dff);
    color: #fff;
}

.dp-calendar {
    flex: 1;
    padding: 14px;
}

.dp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dp-month-label {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text, #1A202C);
}

.dp-nav-btn {
    background: none;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-secondary, #718096);
    transition: all 0.15s;
}

.dp-nav-btn:hover {
    background: var(--hover-bg, #f1f3f5);
    border-color: var(--accent, #4f5dff);
    color: var(--accent, #4f5dff);
}

.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 6px;
}

.dp-weekdays span {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 0;
}

.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.dp-day {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text, #1A202C);
    transition: all 0.15s;
}

.dp-day:hover:not(.dp-empty) {
    background: rgba(79, 93, 255, 0.08);
    color: var(--accent, #4f5dff);
}

.dp-day.dp-empty {
    cursor: default;
}

.dp-day.dp-today {
    font-weight: 700;
    background: rgba(79, 93, 255, 0.08);
    color: var(--accent, #4f5dff);
}

.dp-day.dp-selected {
    background: var(--accent, #4f5dff);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(79, 93, 255, 0.3);
}

.dp-day.dp-selected.dp-today {
    background: var(--accent, #4f5dff);
    color: #fff;
}

@media (max-width: 480px) {
    .dp-popup {
        width: 260px;
        flex-direction: column;
    }
    .dp-shortcuts {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border, #E2E8F0);
        min-width: 0;
        padding: 8px;
    }
}

/* === Acessibilidade Badge (sidebar) === */
.acess-badge {
    position: static;
    margin-left: auto;
    background: #E53E3E;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    line-height: 1;
    animation: acess-pulse 2s infinite;
}

@keyframes acess-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,62,62,0.4); }
    50% { opacity: 0.85; box-shadow: 0 0 0 6px rgba(229,62,62,0); }
}

/* === Paste Preview === */
.paste-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.paste-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* === Searchable Select === */
.searchable-select-wrapper {
    position: relative;
}

.searchable-select-input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.searchable-select-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(25,118,210,0.1);
}

.searchable-select-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    display: none;
}

.searchable-select-clear:hover {
    color: var(--text);
}

.searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.searchable-select-option {
    padding: 8px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.1s;
}

.searchable-select-option:hover,
.searchable-select-option.highlighted {
    background: #F7FAFC;
}

.searchable-select-option.selected {
    background: #EBF5FB;
    font-weight: 600;
}

.searchable-select-empty {
    padding: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

.filters-bar .searchable-select-input {
    padding: 6px 28px 6px 10px;
    font-size: 0.82rem;
}

/* === Respostas Rapidas Dropdown === */
.respostas-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    margin-bottom: 4px;
}

.respostas-dropdown.dropdown-fixed {
    position: fixed;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.respostas-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border);
}

.respostas-dropdown-item:last-child {
    border-bottom: none;
}

.respostas-dropdown-item:hover,
.respostas-dropdown-item.highlighted {
    background: #F7FAFC;
}

.respostas-dropdown-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.respostas-dropdown-preview {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.respostas-dropdown-empty {
    padding: 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr; }
    .filters-bar { flex-direction: column; }
    .filters-bar .form-group { min-width: 100%; }
    .detail-grid { grid-template-columns: 1fr; }
    .hide-mobile { display: none !important; }
    th, td { padding: 8px 10px; font-size: 0.82rem; }

    /* Prevent iOS zoom on input focus */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Touch-friendly targets */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 8px 12px;
    }

    /* SLA indicators stack */
    .sla-indicators {
        flex-direction: column;
    }

    .sla-indicator {
        min-width: 0;
        width: 100%;
    }

    /* Scope tabs horizontal scroll */
    .scope-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .scope-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Bulk bar stacked */
    .bulk-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bulk-bar .form-control {
        width: 100% !important;
        min-height: 40px;
    }

    .bulk-preview {
        width: 100%;
        white-space: normal;
    }

    /* Form actions stack on narrow screens */
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Modals wider on tablet */
    .modal-container,
    .modal-box {
        width: 95%;
        margin: 0 auto;
    }

    /* Timeline adjustments */
    .timeline {
        padding-left: 18px;
    }

    /* Card body spacing */
    .card-body {
        padding: 14px;
    }

    .card-header {
        padding: 12px 14px;
    }

    /* Action buttons wrap */
    .card-body.flex {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .hide-mobile-sm { display: none !important; }
    th, td { padding: 6px 8px; font-size: 0.78rem; }

    /* Full-screen modals on small mobile */
    .modal-overlay {
        align-items: stretch;
    }

    .modal-container,
    .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        margin: 0;
    }

    .modal-body {
        min-height: 0;
        flex: 1;
        padding: 16px;
    }

    .modal-header {
        padding: 12px 16px;
    }

    /* Global search adjustments */
    .gsearch-overlay {
        padding-top: 0;
        align-items: stretch;
    }

    .gsearch-container {
        max-width: 100%;
        border-radius: 0;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .gsearch-results {
        flex: 1;
        max-height: none;
    }

    /* Keyboard shortcuts help adjustments */
    .kbhelp-overlay {
        padding-top: 0;
        align-items: stretch;
    }

    .kbhelp-box {
        max-width: 100%;
        border-radius: 0;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .kbhelp-body {
        flex: 1;
        max-height: none;
    }

    /* Badges slightly larger for readability */
    .badge {
        font-size: 0.72rem;
        padding: 4px 8px;
    }

    /* Pagination larger touch targets */
    .pagination a, .pagination span {
        padding: 8px 14px;
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Timer area stacked */
    .timer-cronometro {
        font-size: 0.82rem;
        padding: 4px 8px;
    }

    /* Card header with timer — stack on small screens */
    .card-header.flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Acesso remoto panel */
    .acesso-panel {
        max-width: 100%;
    }

    .acesso-field-value {
        font-size: 0.78rem;
    }

    .acesso-field-value input[type="password"],
    .acesso-field-value input[type="text"] {
        max-width: 80px;
        font-size: 0.78rem !important;
    }
}

/* === Chamado Form Layout (form + sidebar) === */
.chamado-form-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.chamado-form-main {
    flex: 1;
    min-width: 0;
}

.chamado-form-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--topbar-height) + 24px);
}

/* === Acesso Remoto Panel === */
.acesso-panel {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-width: 720px;
}

.acesso-panel-header {
    padding: 14px 16px;
    background: linear-gradient(135deg, #1a202c, #2d3748);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.3px;
}

.acesso-panel-header svg {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

.acesso-panel-body {
    padding: 0;
}

.acesso-block {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.acesso-block:last-child {
    border-bottom: none;
}

.acesso-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.acesso-block-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acesso-block-icon svg {
    width: 18px;
    height: 18px;
}

.acesso-block-icon.icon-ts {
    background: #EBF5FB;
    color: #4f5dff;
}

.acesso-block-icon.icon-anydesk {
    background: #FFEBEE;
    color: #C62828;
}

.acesso-block-icon.icon-dc {
    background: #E8F5E9;
    color: #2E7D32;
}

.acesso-block-icon.icon-user {
    background: #EDE7F6;
    color: #4527A0;
}

.acesso-block-icon.icon-img {
    background: #F7FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acesso-block-icon.icon-img img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.acesso-block-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
}

.acesso-field {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.83rem;
}

.acesso-field-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 38px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.acesso-field-value {
    flex: 1;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.84rem;
    color: var(--text);
    word-break: break-all;
}

.acesso-field-value input[type="password"],
.acesso-field-value input[type="text"] {
    border: none;
    background: transparent;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.84rem;
    color: var(--text);
    padding: 0;
    width: 100%;
    max-width: 100px;
    outline: none;
}

.acesso-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 5px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.acesso-btn:hover {
    background: var(--bg);
    color: var(--text);
    border-color: #CBD5E0;
}

.acesso-btn svg {
    width: 12px;
    height: 12px;
}

.acesso-connect-row {
    justify-content: flex-end;
    padding: 6px 0 2px;
}

.acesso-connect-btn {
    background: #EBF5FB;
    color: #4f5dff;
    border-color: #90CAF9;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 4px 10px;
    gap: 4px;
}

.acesso-connect-btn:hover {
    background: #4f5dff;
    color: #fff;
    border-color: #4f5dff;
}

.acesso-obs {
    padding: 10px 16px;
    background: #FFFAF0;
    font-size: 0.8rem;
    color: #7B341E;
    border-top: 1px solid #FEEBC8;
}

.acesso-obs strong {
    font-weight: 700;
}

.acesso-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.83rem;
}

.acesso-empty svg {
    width: 36px;
    height: 36px;
    opacity: 0.3;
    margin-bottom: 8px;
}

@media (max-width: 1024px) {
    .chamado-form-layout {
        flex-direction: column;
    }
    .chamado-form-sidebar {
        width: 100%;
        position: static;
    }
}

/* === Chamado Detail — Hero + Info Layout === */
.chamado-hero {
    padding: 24px;
}

.chamado-hero-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px 0;
    line-height: 1.35;
}

.chamado-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.chamado-hero-desc {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

/* Content boxes (replace inline styles) */
.chamado-content-box {
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-top: 16px;
}

.chamado-content-box label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.chamado-content-box p {
    white-space: pre-wrap;
    margin: 0;
}

.chamado-content-box--warning {
    background: #FFFAF0;
    border: 1px solid #FEEBC8;
}
.chamado-content-box--warning label { color: var(--text-secondary); }

.chamado-content-box--success {
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
}
.chamado-content-box--success label { color: #22543D; }

.chamado-content-box--danger {
    background: #FFF5F5;
    border: 1px solid #FED7D7;
}
.chamado-content-box--danger label { color: var(--danger); }

.chamado-content-box--devolucao {
    background: #FFFFF0;
    border: 1px solid #ECC94B;
}
.chamado-content-box--devolucao label { color: #975A16; }

/* Info layout — 2 column grid */
.chamado-info-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

/* Sections inside info cards */
.info-card-section {
    padding: 16px 20px;
}

.info-card-section + .info-card-section {
    border-top: 1px solid var(--border);
}

.info-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.info-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.info-section-icon--pessoas { background: #EBF4FF; color: #4f5dff; }
.info-section-icon--classificacao { background: #F0FFF4; color: #38A169; }
.info-section-icon--relacionados { background: #EBF8FF; color: #3182CE; }
.info-section-icon--datas { background: #FAF5FF; color: #805AD5; }
.info-section-icon--sla { background: #FFF5F5; color: #E53E3E; }

.info-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.info-section-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.info-section-grid .detail-item label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 2px;
}

.info-section-grid .detail-item span {
    font-size: 0.87rem;
    color: var(--text);
}

/* Contact row (telefone, whatsapp, email) */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
}

.contact-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.contact-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.contact-item a {
    color: var(--primary-blue);
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* SLA list inside info card */
.info-sla-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-sla-list .sla-indicator {
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .chamado-info-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .info-section-grid {
        grid-template-columns: 1fr;
    }
    .chamado-hero {
        padding: 16px;
    }
}

/* === Dark Mode Overrides === */
[data-theme="dark"] .badge-aberto { background: #1E3A5F; color: #60A5FA; }
[data-theme="dark"] .badge-em_analise { background: #422006; color: #FBB35A; }
[data-theme="dark"] .badge-aguardando_cliente { background: #431407; color: #FB923C; }
[data-theme="dark"] .badge-aguardando_matriz { background: #2E1065; color: #A78BFA; }
[data-theme="dark"] .badge-aguardando_n1 { background: #4A0E23; color: #F48FB1; }
[data-theme="dark"] .badge-em_desenvolvimento { background: #14532D; color: #4ADE80; }
[data-theme="dark"] .badge-resolvido { background: #134E4A; color: #2DD4BF; }
[data-theme="dark"] .badge-encerrado { background: #3B0764; color: #C084FC; }
[data-theme="dark"] .badge-cancelado { background: #450A0A; color: #FCA5A5; }
[data-theme="dark"] .badge-unificado { background: #1A0533; color: #B39DDB; }

[data-theme="dark"] .badge-baixa { background: #14532D; color: #4ADE80; }
[data-theme="dark"] .badge-media { background: #422006; color: #FBB35A; }
[data-theme="dark"] .badge-alta { background: #431407; color: #FB923C; }
[data-theme="dark"] .badge-critica { background: #450A0A; color: #FCA5A5; }

[data-theme="dark"] .alert-success { background: #14532D; border-color: #166534; color: #86EFAC; }
[data-theme="dark"] .alert-error { background: #450A0A; border-color: #7F1D1D; color: #FCA5A5; }
[data-theme="dark"] .alert-warning { background: #422006; border-color: #713F12; color: #FDE68A; }
[data-theme="dark"] .alert-info { background: #1E3A5F; border-color: #1E40AF; color: #93C5FD; }

[data-theme="dark"] .sla-ok { background: #14532D; border-color: #166534; color: #86EFAC; }
[data-theme="dark"] .sla-warning { background: #422006; border-color: #713F12; color: #FDE68A; }
[data-theme="dark"] .sla-breached { background: #450A0A; border-color: #7F1D1D; color: #FCA5A5; }

[data-theme="dark"] .bulk-bar { background: #1E3A5F; border-color: #1E40AF; color: #60A5FA; }
[data-theme="dark"] .bulk-preview { color: #93C5FD; }

[data-theme="dark"] .filters-bar { background: var(--surface); border-color: var(--border); }

[data-theme="dark"] .dp-popup { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dp-shortcuts { background: var(--bg); border-right-color: var(--border); }
[data-theme="dark"] .dp-shortcut:hover { background: var(--primary-blue); }
[data-theme="dark"] .dp-day:hover:not(.dp-empty) { background: #374151; }

[data-theme="dark"] .notificacao-nao-lida { background: #1E3A5F; }

[data-theme="dark"] .gsearch-container { background: var(--surface); }
[data-theme="dark"] .gsearch-item:hover,
[data-theme="dark"] .gsearch-item.active { background: var(--hover-bg); }
[data-theme="dark"] .gsearch-kbd { background: var(--border); color: var(--text-secondary); }

[data-theme="dark"] .kbhelp-box { background: var(--surface); }
[data-theme="dark"] .kbhelp-key { background: var(--bg); border-color: var(--border); }

[data-theme="dark"] .acesso-panel-header { background: linear-gradient(135deg, #0F172A, #1E293B); }
[data-theme="dark"] .acesso-obs { background: #422006; border-top-color: #713F12; color: #FDE68A; }

[data-theme="dark"] .searchable-select-input { background: var(--input-bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .searchable-select-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .searchable-select-option:hover,
[data-theme="dark"] .searchable-select-option.highlighted { background: var(--hover-bg); }

[data-theme="dark"] .respostas-dropdown { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .respostas-dropdown-item:hover,
[data-theme="dark"] .respostas-dropdown-item.highlighted { background: var(--hover-bg); }

[data-theme="dark"] .chamado-content-box--warning { background: #422006; border-color: #713F12; }
[data-theme="dark"] .chamado-content-box--warning label { color: #FDE68A; }
[data-theme="dark"] .chamado-content-box--success { background: #14532D; border-color: #166534; }
[data-theme="dark"] .chamado-content-box--success label { color: #86EFAC; }
[data-theme="dark"] .chamado-content-box--danger { background: #450A0A; border-color: #7F1D1D; }
[data-theme="dark"] .chamado-content-box--danger label { color: #FCA5A5; }
[data-theme="dark"] .chamado-content-box--devolucao { background: #422006; border-color: #713F12; }
[data-theme="dark"] .chamado-content-box--devolucao label { color: #FDE68A; }

[data-theme="dark"] .info-section-icon--pessoas { background: #1E3A5F; color: #60A5FA; }
[data-theme="dark"] .info-section-icon--classificacao { background: #14532D; color: #4ADE80; }
[data-theme="dark"] .info-section-icon--relacionados { background: #1E3A5F; color: #60A5FA; }
[data-theme="dark"] .info-section-icon--datas { background: #2E1065; color: #A78BFA; }
[data-theme="dark"] .info-section-icon--sla { background: #450A0A; color: #FCA5A5; }

/* Dark mode toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    width: 36px;
    height: 36px;
}

.theme-toggle:hover {
    border-color: var(--primary-blue);
    color: var(--text);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-icon-dark,
[data-theme="dark"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: block;
}

/* === Misc === */
.text-muted { color: var(--text-secondary); }
.text-sm { font-size: 0.82rem; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.gap-1 { gap: 8px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* === Global Search Modal === */
.topbar-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.82rem;
    transition: all 0.15s;
}
.topbar-search-btn:hover { border-color: var(--primary-blue); color: var(--text); }
.topbar-search-hint { font-size: 0.7rem; opacity: 0.6; }
@media (max-width: 480px) { .topbar-search-hint { display: none; } }

.gsearch-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 120px);
}
.gsearch-container {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    margin: 0 16px;
}
.gsearch-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.gsearch-input-wrap svg { flex-shrink: 0; color: var(--text-secondary); }
.gsearch-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--text);
}
.gsearch-kbd {
    font-size: 0.68rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--border);
    color: var(--text-secondary);
    font-family: inherit;
}
.gsearch-results {
    max-height: 360px;
    overflow-y: auto;
}
.gsearch-results:empty { display: none; }
.gsearch-group-label {
    padding: 8px 16px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.gsearch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: background 0.1s;
}
.gsearch-item:hover, .gsearch-item.active {
    background: var(--hover-bg, #F1F5F9);
    text-decoration: none;
}
.gsearch-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
}
.gsearch-item-icon.type-chamado { background: #EBF5FB; color: #2B6CB0; }
.gsearch-item-icon.type-cliente { background: #F0FFF4; color: #276749; }
.gsearch-item-icon.type-artigo { background: #FEFCBF; color: #975A16; }
.gsearch-item-icon.type-usuario { background: #FAF5FF; color: #6B46C1; }
.gsearch-item-icon.type-cmd { background: #F0FFF4; color: #276749; font-weight: 700; }
.gsearch-item-text { flex: 1; min-width: 0; }
.gsearch-item-label {
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gsearch-item-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.gsearch-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

/* === Progressive Disclosure (advanced fields) === */
.advanced-fields {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
}

.advanced-fields.advanced-open {
    max-height: 600px;
    opacity: 1;
}

.progressive-toggle {
    margin: 4px 0 12px;
}

.btn-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    width: 100%;
    justify-content: center;
}

.btn-advanced-toggle:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: #F7FAFC;
}

.advanced-chevron {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.advanced-open ~ .progressive-toggle .advanced-chevron,
.btn-advanced-toggle.active .advanced-chevron {
    transform: rotate(180deg);
}

/* === Keyboard Shortcuts Help Modal === */
.kbhelp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(15vh, 100px);
}

.kbhelp-box {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    margin: 0 16px;
}

.kbhelp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.95rem;
}

.kbhelp-body {
    padding: 12px 20px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.kbhelp-scope {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 12px 0 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.kbhelp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.kbhelp-desc {
    font-size: 0.85rem;
    color: var(--text);
}

.kbhelp-key {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 1px 0 var(--border);
}

/* === Artigos Relacionados Card === */
.artigos-rel-list { display: flex; flex-direction: column; gap: 8px; }
.artigo-rel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.artigo-rel-item:last-child { border-bottom: none; }
.artigo-rel-link {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--primary-blue);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artigo-rel-link:hover { text-decoration: underline; }
.artigo-rel-tags {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.artigo-usar-btn { flex-shrink: 0; font-size: 0.75rem !important; padding: 2px 8px !important; }
@media (max-width: 600px) {
    .artigo-rel-item { flex-wrap: wrap; }
    .artigo-rel-tags { display: none; }
}

/* === Alerta Cadastro Incompleto === */
.alerta-cadastro {
    margin-top: 8px;
    padding: 12px 14px;
    background: #FFFBEB;
    border: 1px solid #F59E0B;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: #92400E;
}
.alerta-cadastro-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #D97706;
}
.alerta-cadastro-header strong {
    color: #92400E;
}
.alerta-cadastro-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.alerta-cadastro-footer {
    margin-top: 8px;
    border-top: 1px solid #F59E0B;
    padding-top: 8px;
}

[data-theme="dark"] .alerta-cadastro {
    background: #422006;
    border-color: #B45309;
    color: #FDE68A;
}
[data-theme="dark"] .alerta-cadastro-header {
    color: #FBBF24;
}
[data-theme="dark"] .alerta-cadastro-header strong {
    color: #FDE68A;
}
[data-theme="dark"] .alerta-cadastro-footer {
    border-top-color: #B45309;
}

/* === Health Score === */
.health-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
}
.health-badge-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}
.health-green { background: #48BB78; }
.health-yellow { background: #ECC94B; color: #744210; }
.health-red { background: #F56565; }

.health-component {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.health-component > span:first-child {
    width: 100px;
    flex-shrink: 0;
}
.health-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.health-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.health-bar-fill.bar-green { background: #48BB78; }
.health-bar-fill.bar-yellow { background: #ECC94B; }
.health-bar-fill.bar-red { background: #F56565; }
.health-pct {
    width: 36px;
    text-align: right;
    font-weight: 600;
    font-size: 0.72rem;
}

/* === Customer Health === */
.health-alert-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(229,62,62,0.06);
    border: 1px solid rgba(229,62,62,0.2);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius);
    margin-bottom: 12px;
    color: var(--danger);
    font-size: 0.88rem;
}

.health-alert-banner strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.health-alert-banner span {
    font-size: 0.82rem;
    opacity: 0.85;
}

.health-trend-container {
    max-width: 100%;
    overflow: hidden;
}

.health-resumo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* === Skeleton Loading === */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}

.skeleton-text-sm {
    height: 10px;
    margin-bottom: 6px;
    width: 60%;
}

.skeleton-kpi {
    height: 110px;
    border-radius: var(--radius);
}

.skeleton-chart {
    height: 240px;
    border-radius: var(--radius);
}

.skeleton-row {
    height: 44px;
    margin-bottom: 4px;
}

/* Badge pulse animation */
.badge-pulse {
    animation: badgePulse 0.6s ease;
}

@keyframes badgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* === Enhanced Empty States === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-state-illustration {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.85;
}

.empty-state-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    max-width: 360px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.empty-state-positive {
    color: var(--success);
    font-weight: 600;
}

.empty-state-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/* === Filter Chips === */
.filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--hover-bg);
    color: var(--text);
    text-decoration: none;
    border-color: var(--text-secondary);
}

.filter-chip.active {
    background: var(--primary-blue);
    color: #fff;
    border-color: var(--primary-blue);
}

.filter-chip.active:hover {
    background: #1565C0;
    color: #fff;
}

.filter-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.filter-chip.active .filter-chip-dot {
    background: #fff !important;
}

.filter-chip-saved {
    background: none;
    border-style: dashed;
}

.filter-chip-saved-item {
    border-style: dashed;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    gap: 4px;
}

.filter-chip-saved-item:hover {
    border-style: solid;
}

.filter-chip-saved-item.active {
    border-style: solid;
}

.saved-chip-delete {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.5;
    margin-left: 2px;
}

.saved-chip-delete:hover {
    opacity: 1;
    color: var(--danger);
}

.filter-chips-divider {
    color: var(--border);
    font-size: 0.9rem;
    margin: 0 2px;
    user-select: none;
}

/* Active Filters Bar */
.active-filters-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(25,118,210,0.06);
    border: 1px solid rgba(25,118,210,0.15);
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 0.82rem;
}

.active-filters-count {
    font-weight: 600;
    color: var(--primary-blue);
}

/* Saved Filters Dropdown */
/* Bulk Bar Sticky Bottom */
.bulk-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
}

@media (max-width: 768px) {
    .filter-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

/* === View Mode Toggle === */
.view-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-left: 8px;
}

.view-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    background: var(--surface);
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.view-mode-btn:not(:last-child) {
    border-right: 1px solid var(--border);
}

.view-mode-btn:hover {
    background: var(--hover-bg);
    color: var(--text);
}

.view-mode-btn.active {
    background: var(--primary-blue);
    color: #fff;
}

/* Cards Grid View */
.chamado-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.chamado-card-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chamado-card-item:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.chamado-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chamado-card-ticket {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-decoration: none;
}

.chamado-card-ticket:hover {
    text-decoration: underline;
}

.chamado-card-title a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    line-height: 1.4;
}

.chamado-card-title a:hover {
    color: var(--primary-blue);
}

.chamado-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.chamado-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Row Preview Tooltip */
.row-preview-tooltip {
    position: fixed;
    max-width: 320px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    pointer-events: none;
    font-size: 0.82rem;
}

.rpt-desc {
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 8px;
    word-break: break-word;
}

.rpt-meta {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .view-mode-toggle {
        display: none;
    }

    .chamado-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* === Detail Tabs === */
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-tab {
    padding: 10px 18px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.detail-tab:hover {
    color: var(--text);
    background: var(--hover-bg);
}

.detail-tab.active {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

.detail-tab-panel {
    display: none;
}

.detail-tab-panel.active {
    display: block;
    animation: fadeSlideUp 0.2s ease;
}

/* Sticky Header */
.chamado-sticky-header {
    position: sticky;
    top: var(--topbar-height, 48px);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.2s;
}

.chamado-sticky-header.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sticky-ticket {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--primary-blue);
    cursor: pointer;
}

.sticky-sla {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.sticky-sla.sla-ok { background: rgba(46,204,64,0.1); color: var(--success); }
.sticky-sla.sla-warning { background: rgba(221,107,32,0.1); color: var(--warning); }
.sticky-sla.sla-breached { background: rgba(229,62,62,0.1); color: var(--danger); }

.sticky-actions {
    margin-left: auto;
}

@media (max-width: 768px) {
    .detail-tab {
        padding: 8px 12px;
        font-size: 0.78rem;
    }
}