:root {
    /* Brand Colors */
    --color-slate: #1e293b;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #dbeafe;

    /* Status Colors */
    --color-success: #4CAF50;
    --color-success-hover: #059669;
    --color-success-light: #dcfce7;
    --color-warning: #FF9800;
    --color-warning-hover: #f57c00;
    --color-warning-light: #fef3c7;
    --color-warning-alt: #ffc107;
    --color-danger: #f44336;
    --color-danger-hover: #dc2626;
    --color-danger-light: #fee2e2;
    --color-danger-dark: #c62828;
    --color-info: #2196F3;
    --color-accent: #9333ea;

    /* Gray Scale */
    --color-text: #0f172a;
    --color-text-dark: #333;
    --color-text-light: #555;
    --color-text-secondary: #666;
    --color-text-muted: #9ca3af;
    --color-border: #e2e8f0;
    --color-border-light: #ddd;
    --color-border-dark: #dee2e6;
    --color-bg: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-hover: #f1f5f9;
    --color-bg-light: #f5f5f5;
    --color-bg-muted: #f0f0f0;
    --color-bg-input: #f9f9f9;

    /* Nav Colors */
    --color-nav-bg: #1e293b;
    --color-nav-border: #334155;
    --color-nav-text: #94a3b8;
    --color-nav-text-hover: #e2e8f0;

    /* Alert/Status Backgrounds */
    --color-alert-warning-bg: #fff3cd;
    --color-alert-warning-text: #856404;
    --color-alert-danger-bg: #f8d7da;
    --color-alert-danger-text: #721c24;
    --color-alert-success-bg: #d4edda;
    --color-alert-success-text: #155724;
    --color-alert-info-bg: #e3f2fd;

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --container-padding: 2.5rem;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
}

/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Accessibility: focus-visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default outline for mouse users (focus-visible handles keyboard) */
:focus:not(:focus-visible) {
    outline: none;
}

/* Keyboard accessibility for clickable table rows */
tr[tabindex="0"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Skip-to-content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 1000;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: var(--color-bg);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius-md) 0;
}

.skip-to-content:focus {
    top: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--color-slate);
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header and Navigation */
header {
    background-color: var(--color-slate);
    color: white;
    padding: 0;
    border-bottom: 1px solid var(--color-nav-border);
}

.main-nav {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 2rem;
}

.nav-brand a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    padding: 1rem 0;
    margin-right: 2rem;
    display: block;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 0;
    justify-self: center;
}

.nav-links a {
    color: var(--color-nav-text);
    text-decoration: none;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s, border-color 0.2s;
    border-bottom: 2px solid transparent;
    display: block;
}

.nav-links a:hover {
    color: var(--color-nav-text-hover);
    border-bottom-color: var(--color-nav-text);
}

.nav-links a.active {
    color: var(--color-nav-text-hover);
    border-bottom-color: var(--color-primary);
    background: none;
}

/* Nav Utility Zone (right side: tools + user) */
.nav-utility {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--color-nav-border);
}

/* Nav Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-nav-text);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    padding: 1rem 1.25rem;
    line-height: inherit;
    transition: color 0.2s;
}

.nav-dropdown-trigger:hover {
    color: var(--color-nav-text-hover);
}

/* Icon-based triggers in utility zone */
.nav-icon-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.75rem;
}

.nav-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.nav-chevron {
    flex-shrink: 0;
    opacity: 0.6;
}

.nav-icon-trigger:hover .nav-icon,
.nav-icon-trigger:hover .nav-chevron {
    opacity: 1;
}

.nav-user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--color-slate);
    border: 1px solid var(--color-nav-border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    list-style: none;
    min-width: 180px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu a {
    padding: 0.75rem 1.25rem;
    border-bottom: none;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: var(--color-nav-border);
    border-bottom-color: transparent;
}

.nav-dropdown-menu a.active {
    border-bottom-color: transparent;
    color: var(--color-primary);
    border-left: 2px solid var(--color-primary);
    padding-left: calc(1.25rem - 2px);
}

/* Main content */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem var(--container-padding);
    flex: 1;
}

main {
    background-color: transparent;
}

/* ============================================================
   Mobile Navigation
   ============================================================ */

/* Hamburger toggle button — hidden on desktop */
.hamburger-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-nav-text-hover);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    z-index: 10;
}

/* Mobile menu panel — slides from right like existing drawer */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--color-nav-bg);
    z-index: 1100;
    transition: right var(--transition-normal) ease-in-out;
    overflow-y: auto;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-nav-border);
}

.mobile-menu-header .nav-brand a {
    margin-right: 0;
    padding: 0;
    font-size: 1.25rem;
}

.mobile-menu-close {
    background: none;
    border: none;
    color: var(--color-nav-text-hover);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
}

.mobile-menu-links {
    list-style: none;
    padding: 0.5rem 0;
}

.mobile-menu-links li {
    border-bottom: 1px solid var(--color-nav-border);
}

.mobile-menu-links a,
.mobile-menu-links button {
    display: block;
    width: 100%;
    padding: 0.875rem 1.25rem;
    color: var(--color-nav-text);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color var(--transition-fast), background var(--transition-fast);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    min-height: 44px;  /* Touch target */
}

.mobile-menu-links a:hover,
.mobile-menu-links a.active,
.mobile-menu-links button:hover {
    color: var(--color-nav-text-hover);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-menu-links a.active {
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1.25rem - 3px);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--color-nav-border);
    margin: 0.5rem 0;
}

/* Mobile menu backdrop (reuses drawer-overlay pattern) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal) ease-in-out, visibility var(--transition-normal) ease-in-out;
    z-index: 1099;
}

.mobile-menu-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* Footer */
footer {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    text-align: center;
    padding: 1.25rem;
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

/* Typography */
h1, h2, h3 {
    margin-bottom: 1rem;
    color: var(--color-text);
    letter-spacing: -0.025em;
}

h1 {
    font-size: 1.75rem;
    font-weight: 700;
}

h2 {
    font-size: 1.35rem;
    font-weight: 600;
}

/* Utility classes */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

.spinner-sm {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

/* Import Page Styles */
.imports-page {
    max-width: 960px;
}

.upload-section, .history-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

/* Upload Form */
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.file-input-wrapper {
    position: relative;
}

.file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 2px dashed var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

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

.file-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.file-text {
    font-weight: 500;
}

.file-hint {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.selected-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.file-tag {
    padding: 0.25rem 0.5rem;
    background: var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
}

/* File staging area with remove buttons */
.selected-files:not(:empty) {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.file-staging-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

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

.file-staging-info {
    display: flex;
    flex: 1;
    gap: 0.75rem;
    align-items: center;
}

.file-staging-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-slate);
}

.file-staging-size {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.file-staging-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.file-staging-remove:hover {
    color: var(--color-danger);
}

/* Results */
.upload-results {
    margin-top: 1rem;
}

.result-item {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    border-left: 4px solid;
}

.result-item.success {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

.result-item.error {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
}

.result-item.duplicate {
    background: var(--color-warning-light);
    border-color: var(--color-warning-alt);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.filename {
    font-weight: 500;
}

.status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge.success {
    background: var(--color-success);
    color: white;
}

.status-badge.failed {
    background: var(--color-danger);
    color: white;
}

.status-badge.duplicate {
    background: var(--color-warning);
    color: white;
}

.status-badge.skipped {
    background: var(--color-text-muted);
    color: white;
}

.status-badge.superseded {
    background: var(--color-text-muted);
    color: white;
}

.status-badge.deleted {
    background: var(--color-text-muted);
    color: white;
}

.error-list, .warning-list {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.error-list h4, .warning-list h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
}

/* Summary Card */
.summary-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.summary-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.summary-card-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.summary-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.summary-icon.success {
    color: var(--color-success);
}

.summary-icon.partial {
    color: var(--color-warning);
}

.summary-icon.error {
    color: var(--color-danger);
}

.summary-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.summary-count-item {
    text-align: center;
    padding: 0.75rem;
}

.summary-count-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-slate);
}

.summary-count-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* Classification Result */
.classification-result {
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.classification-result.success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
}

.classification-result.partial {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
}

.classification-result.error {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
}

.classification-status-pending {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--color-alert-info-bg);
    border-radius: 4px;
    color: var(--color-primary);
    font-style: italic;
}

.classification-status-pending p {
    margin: 0;
}

.error-list ul, .warning-list ul {
    margin: 0;
    padding-left: 1.5rem;
}

.error-item {
    color: var(--color-danger-dark);
}

.warning-item {
    color: var(--color-warning-hover);
}

.duplicate-action {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--color-warning-light);
    border-radius: 4px;
}

.reimport-all-form {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.reimport-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-sm);
}

.reimport-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.reimport-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reimport-label span {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.reimport-file-input {
    padding: 0.5rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background: white;
}

/* History */
.history-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.history-table th:nth-child(1) { width: auto; }    /* Arquivo */
.history-table th:nth-child(2) { width: 130px; }   /* Data */
.history-table th:nth-child(3) { width: 90px; }    /* Registros */
.history-table th:nth-child(4) { width: 100px; }   /* Status */
.history-table th:nth-child(5) { width: 140px; }   /* Classificação */
.history-table th:nth-child(6) { width: 170px; }   /* Ações */

.history-table td.filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-table td.actions { white-space: nowrap; overflow: visible; }

.history-table th,
.history-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.history-table th {
    font-weight: 600;
    background: var(--color-bg-light);
}

.history-row:hover {
    background: var(--color-bg-input);
}

.error-tooltip {
    cursor: help;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.pagination .btn.htmx-request {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}

.page-info {
    color: var(--color-text-secondary);
}

.no-history, .no-results {
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

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

.btn-secondary:hover:not(:disabled) {
    background: var(--color-border-dark);
}

.btn-warning {
    background: var(--color-warning);
    color: white;
}

.btn-warning:hover:not(:disabled) {
    background: var(--color-warning-hover);
}

.btn-export {
    background: var(--color-primary);
    color: var(--color-bg);
    border: 1px solid var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-block;
    transition: background-color 0.2s;
}

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

.btn-export-secondary {
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border-light);
}

.btn-export-secondary:hover {
    background: var(--color-border-light);
}

.export-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-text {
    background: transparent;
    color: var(--color-primary);
}

.btn-text:hover {
    background: rgba(25, 118, 210, 0.1);
}

.btn-text.active {
    font-weight: 600;
    text-decoration: underline;
}

.loading {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Customer Page Styles */
.customers-page {
    /* Full container width for data tables */
}

.filter-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* Filter Form */
.filter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group-wide {
    grid-column: span 2;
}

.filter-group label {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="number"],
.filter-group input[type="date"] {
    padding: 0.5rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
}

.filter-group select:focus,
.filter-group input[type="text"]:focus,
.filter-group input[type="number"]:focus,
.filter-group input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-actions .htmx-indicator {
    margin-left: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Filter collapsible toggle for mobile */
.filter-toggle-btn {
    display: none;  /* Hidden on desktop */
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    margin-bottom: 0.75rem;
    min-height: 44px;
}

.filter-toggle-btn svg {
    transition: transform var(--transition-fast);
    vertical-align: middle;
    margin-left: 0.5rem;
}

.filter-toggle-btn.open svg {
    transform: rotate(180deg);
}


/* Tom Select overrides to match project styling */
.filter-group .ts-wrapper .ts-control {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    min-height: unset;
}

.filter-group .ts-wrapper .ts-control:focus,
.filter-group .ts-wrapper.focus .ts-control {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

/* Issue 5 — TomSelect inside .form-group (settings create form) */
.settings-page .form-group .ts-wrapper .ts-control {
    padding: var(--spacing-sm);
}

/* Issue 1 — multi-select manager picker in settings form */
.settings-page .form-group .ts-wrapper.multi .ts-control {
    padding: var(--spacing-sm);
    min-height: 38px;
}

.filter-group .ts-wrapper .ts-dropdown {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Active Filters */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--color-bg-input);
    border-radius: 4px;
}

.active-filters-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-right: 0.5rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-alert-info-bg);
    border-radius: 16px;
    font-size: 0.85rem;
    color: var(--color-primary);
}

.filter-chip .remove-filter {
    margin-left: 0.25rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

.filter-chip .remove-filter:hover {
    color: var(--color-primary-hover);
}

.clear-all-filters {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    text-decoration: underline;
    margin-left: auto;
}

/* Phase 83 Plan 07 — Manager inline-edit cell + admin-only chip */
.editable-cell {
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.editable-cell:hover {
    color: var(--color-primary-hover);
}

.filter-chip-group {
    display: inline-flex;
    margin-right: 0.5rem;
}

.filter-chip.active {
    background: var(--color-primary);
    color: var(--color-bg-card);
}

.filter-chip.active:hover {
    background: var(--color-primary-hover);
}

/* Issue 4 — checkbox filter group (Phase 86 CLEAN-04) */
.filter-group--checkbox {
    align-self: flex-end;
    padding-bottom: var(--spacing-xs);
}

.filter-group--checkbox .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.filter-group--checkbox input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.clear-all-filters:hover {
    color: var(--color-text-dark);
}

/* Results Bar */
.results-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.results-count {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Customer Table / Data Table
   Base table class. .customer-table and .data-table are aliases.
   .activity-table extends this with column widths. */
.customer-table,
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Table scroll wrapper for mobile horizontal scrolling */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Scroll hint: subtle shadow on right edge when content overflows */
.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.06));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

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

.customer-table th,
.customer-table td,
.data-table th,
.data-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-bg-hover);
}

.customer-table th,
.data-table th {
    font-weight: 600;
    background: var(--color-bg-secondary);
    color: var(--color-text-light);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}

/* Sortable column headers */
.sort-header {
    color: var(--color-text-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    user-select: none;
}

.sort-header:hover {
    color: var(--color-primary);
}

.sort-header.active {
    color: var(--color-primary);
    font-weight: 700;
}

.customer-table tbody tr,
.data-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s;
}

.customer-table tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--color-bg-secondary);
}

.customer-name {
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.customer-name:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.customer-pn {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Customer List - Multi-value cells and group rows */
.multi-value {
    font-size: 0.9em;
    color: var(--color-text-light);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-count {
    font-weight: 600;
}

.pn-preview {
    color: var(--color-text-muted);
    font-size: 0.85em;
    margin-left: 4px;
}

.group-row {
    cursor: pointer;
}

/* Classification Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-A {
    background: var(--color-success);
    color: white;
}

.badge-B {
    background: var(--color-primary);
    color: white;
}

.badge-C {
    background: var(--color-warning);
    color: white;
}

.badge-ativo {
    background: var(--color-success);
    color: white;
}

.badge-caindo {
    background: var(--color-warning);
    color: white;
}

.badge-inativo {
    background: var(--color-danger);
    color: white;
}

.badge-novo {
    background: var(--color-text-muted);
    color: white;
}

.badge-empty {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.badge-success {
    background: var(--color-success);
    color: white;
}

.badge-danger {
    background: var(--color-danger);
    color: white;
}

.badge-warning {
    background: var(--color-warning-alt);
    color: var(--color-text-dark);
}

/* Multimarca warning badge */
.badge-multimarca {
    background-color: var(--color-warning, #ff9800);
    color: var(--color-bg, #fff);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-weight: 600;
}

/* Customer Detail Page Styles */
.customer-detail-page {
    max-width: 960px;
}

/* Back Link */
.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

/* Classification Hero - Prominent per CONTEXT.md */
.classification-hero {
    background: var(--color-bg-secondary);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
    border: 1px solid var(--color-border);
}

.classification-hero h1 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.classification-hero .customer-pn {
    color: var(--color-text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* Large Classification Badges */
.classification-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.badge-size,
.badge-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

/* Large badges in hero/classification sections */
.classification-badges .badge-size,
.classification-badges .badge-status {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    border-radius: 8px;
}

/* Quadra Values Display */
.quadra-values {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.quadra-item {
    text-align: center;
}

.quadra-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.quadra-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Secondary quadra item (Quinta Quadra) */
.quadra-item-secondary .quadra-label {
    font-size: 0.75rem;
}

.quadra-item-secondary .quadra-value {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Customer Info Section */
.customer-info {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.info-grid dt {
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.info-grid dd {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
}

/* History Sections */
.classification-history,
.activity-history {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

/* Activity section header (customer detail & list page) */
.section-header-bar h2 {
    margin-bottom: 0;
}

/* Large Button */
.btn-large {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* Activity Status Badges */
.status-badge.status-pending {
    background: var(--color-text-muted);
    color: white;
}

.status-badge.status-approved {
    background: var(--color-primary);
    color: white;
}

.status-badge.status-completed {
    background: var(--color-success);
    color: white;
}

.status-badge.status-rejected {
    background: var(--color-danger);
    color: white;
}

/* New workflow status badges (slugified CSS classes) */
.status-badge.status-aguardando-aprovacao {
    background: var(--color-warning);
    color: white;
}

.status-badge.status-aguardando-execucao {
    background: var(--color-info);
    color: white;
}

.status-badge.status-concluida {
    background: var(--color-success);
    color: white;
}

.status-badge.status-rejeitada {
    background: var(--color-danger);
    color: white;
}

/* Action buttons in activity rows — rectangular, bordered, clear hover */
/* Visually distinct from pill-shaped status badges */
.actions-cell .action-btn {
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s, border-color 0.15s;
}

.action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Outline variant for destructive actions (Rejeitar) */
.btn-outline-danger {
    background: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-outline-danger:hover {
    background: var(--color-danger);
    color: white;
}

/* Outline variant for reopen (Reabrir) */
.btn-outline-warning {
    background: transparent;
    color: var(--color-warning-hover, #f57c00);
    border-color: var(--color-warning);
}

.btn-outline-warning:hover {
    background: var(--color-warning);
    color: white;
}

/* Inline value input for approval action */
.action-value-input {
    flex: 1 1 100%;
    min-width: 0;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Rejection reason textarea toggle */
.rejection-reason-container {
    display: none;
    flex: 1 1 100%;
    width: 100%;
    margin-top: 0.5rem;
}

.rejection-reason-container.visible {
    display: block;
}

.rejection-reason-textarea {
    width: 100%;
    min-height: 60px;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0.25rem;
}

/* Customer Drawer Styles */
.drawer {
    position: fixed;
    top: 0;
    right: -600px;
    width: 600px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 8px rgba(0,0,0,0.15);
    transition: right 0.3s ease-in-out;
    z-index: 1001;
    overflow-y: auto;
}

.drawer.open {
    right: 0;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1000;
}

.drawer-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.drawer-header h2 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--color-text);
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

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

.drawer-content {
    padding: 1.5rem;
}

.customer-drawer-pn {
    color: var(--color-text-secondary);
    font-family: 'Courier New', monospace;
    margin-bottom: 1.5rem;
}

.drawer-classification-badges {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.drawer-classification-badges .badge-size,
.drawer-classification-badges .badge-status {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.drawer-quadra-values {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

/* Drawer ROI metrics */
.drawer-roi-metrics {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
}
.roi-metric-item { display: flex; flex-direction: column; gap: 0.15rem; }
.roi-metric-label { font-size: 0.7rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.roi-metric-value { font-size: 0.875rem; font-weight: 600; }

.drawer-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.drawer-section:last-of-type {
    border-bottom: none;
}

.drawer-section h3 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--color-text);
}

.drawer-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.drawer-section-header h3 {
    margin: 0;
}

.drawer-info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem 1.5rem;
}

.drawer-info-grid dt {
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.drawer-info-grid dd {
    margin: 0;
    color: var(--color-text);
}

.drawer-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.drawer-history-table th {
    text-align: left;
    padding: 0.5rem;
    background: var(--color-bg-light);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.drawer-history-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.drawer-history-table tbody tr:last-child td {
    border-bottom: none;
}

.drawer-product-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.product-summary-label {
    color: var(--color-text-secondary);
}

.product-summary-value {
    color: var(--color-text);
}

.gap-notice {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.gap-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gap-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-alert-warning-bg);
    border: 1px solid var(--color-warning-alt);
    border-radius: 1rem;
    font-size: 0.875rem;
    color: var(--color-alert-warning-text);
}

.drawer-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Drawer collapsible (details/summary) */
.drawer-collapsible summary {
    cursor: pointer;
    list-style: none;
}

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

.drawer-collapsible summary::before {
    content: '\25B6';
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

.drawer-collapsible[open] summary::before {
    content: '\25BC';
}

.drawer-collapsible-header h3 {
    display: inline;
}

/* Contextual Help Tooltips */
[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--color-text-secondary);
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: var(--color-slate);
    color: var(--color-bg);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    border-radius: var(--radius-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 100;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    opacity: 1;
}

/* Arrow pointing down from tooltip */
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border: 5px solid transparent;
    border-top-color: var(--color-slate);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
    opacity: 1;
}

/* Responsive drawer for smaller screens */
@media (max-width: 768px) {
    .drawer {
        width: 100%;
        right: -100%;
    }
}

/* Activity Form Styles */
.activity-form-page {
    max-width: 640px;
}

/* Page/section header pattern. .page-title-bar and .section-header-bar are aliases — prefer .page-header */
.page-header,
.page-title-bar,
.section-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.activity-form {
    background: white;
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

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

/* Form Validation States */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: var(--color-danger);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-light);
}

.field-error-message {
    display: none;
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.form-group.has-error .field-error-message {
    display: block;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.form-errors {
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.form-errors p {
    margin-bottom: 0.5rem;
    color: var(--color-danger-dark);
}

.form-errors ul {
    margin: 0;
    padding-left: 1.5rem;
}

.form-errors li {
    color: var(--color-danger-dark);
}

.field-error input,
.field-error textarea {
    border-color: var(--color-danger);
}

/* Customer Search Field */
.customer-search-field {
    position: relative;
}

.customer-search-field input[type="text"] {
    width: 100%;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--color-border-light);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 100;
}

.customer-result {
    padding: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid var(--color-bg-muted);
}

.customer-result:last-child {
    border-bottom: none;
}

.customer-result:hover {
    background: var(--color-bg-light);
}

.customer-result strong {
    display: block;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.customer-result .customer-pn {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.no-results {
    padding: 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Selected Customer Display */
.selected-customer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-alert-info-bg);
    border: 1px solid var(--color-info);
    border-radius: 4px;
}

.selected-customer .customer-name {
    font-weight: 500;
    color: var(--color-primary);
}

.chip-remove {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    line-height: 1;
    transition: color 0.2s;
}

.chip-remove:hover {
    color: var(--color-primary-hover);
}

/* Pre-selected Customer Display */
.selected-customer-display {
    padding: 0.75rem;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

.selected-customer-display .customer-name {
    font-weight: 500;
    color: var(--color-text);
    margin-right: 0.5rem;
}

.selected-customer-display .customer-pn {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Activity List Page Styles */
.activities-page {
    /* No max-width — uses full container (1200px) for 7-column table + action buttons */
}

/* Page header with title + action button */
.page-title-bar h1 {
    margin-bottom: 0;
}

/* Activity table specifics */
.activity-table {
    table-layout: fixed;
}

.activity-table th:nth-child(1) { width: 150px; } /* Status + comment icon */
.activity-table th:nth-child(2) { width: auto; }   /* Cliente */
.activity-table th:nth-child(3) { width: 140px; }  /* Tipo */
.activity-table th:nth-child(4) { width: 120px; }  /* Solicitante */
.activity-table th:nth-child(5) { width: 105px; }  /* Data */
.activity-table th:nth-child(6) { width: 130px; }  /* Valor */
.activity-table th:nth-child(7) { width: 280px; }  /* Acoes */

.activity-table td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-table td:first-child {
    overflow: hidden;
}

/* Group badge + comment indicator inline so they stay within the Status cell
   while the cell keeps table vertical-align: middle (avoids top-aligning the
   badge in tall rows, which display:flex on the td would cause). */
.status-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.status-comment-indicator {
    display: inline-flex;
    opacity: 0.7;
}

.activity-table td.actions-cell {
    overflow: visible;
}

.activity-table tbody tr.activity-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s;
}

.activity-table tbody tr.activity-row-clickable:hover {
    background: var(--color-primary-light);
}

/* Date input styling consolidated into main filter-group rules above (lines 632-646) */

/* Small action buttons */
.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    white-space: nowrap;
}

.btn-sm:hover {
    transform: translateY(-1px);
}

.btn-sm:active {
    transform: translateY(0);
}

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

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

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

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

/* Actions cell layout */
.actions-cell {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.actions-cell .terminal-state {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Payment display and editing */
.payment-value {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.payment-placeholder {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.payment-input-inline {
    width: 110px;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

.payment-input-inline:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
}

.text-muted {
    color: var(--color-text-muted);
}

/* Phase 84 D-09: Guided empty state for gerente with no covered customers.
   Distinct from generic "nenhum resultado" — signals an admin assignment gap. */
.customer-empty-book {
    text-align: center;
    padding: 2rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--color-warning, #f59e0b), transparent 92%);
    margin-top: 1rem;
}

.customer-empty-book__message {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Empty state component (reusable) */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-secondary);
}

.empty-state-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.empty-state-message {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.empty-state .btn {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* Activity Detail Panel */
.activity-detail-panel {
    padding: 1.25rem 1.5rem 1rem;
    background: var(--color-bg-secondary);
    border-left: 3px solid var(--color-primary);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2.5rem;
    margin: 0;
}

.activity-detail-section h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-nav-text);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.detail-comments-textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 90px;
    background-color: var(--color-bg);
    color: var(--color-slate);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.detail-comments-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.detail-meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.detail-meta-item label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-nav-text);
    font-weight: 600;
}

.detail-meta-item span {
    color: var(--color-slate);
    font-size: 0.9rem;
}

.detail-meta-item .payment-input-inline {
    margin-top: 0.15rem;
}

.detail-save-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
}


/* Toast Notifications */
#notifications {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Dashboard / Home Page Styles */
.dashboard-page {
    max-width: 1200px;
    padding: 2rem;
}

.dashboard-page .page-header {
    margin-bottom: 2rem;
}

.dashboard-page h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.dashboard-page .subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
}

/* Dashboard Hero — Matrix Section */
.dashboard-hero {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dashboard-hero h2 {
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.dashboard-hero .section-subtitle {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Revenue Summary Metrics */
.revenue-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.revenue-metric-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.revenue-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.revenue-metric-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* Info Tooltip */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.info-tooltip-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.info-tooltip:hover .info-tooltip-icon {
    background: var(--color-primary);
    color: white;
}

/* Base icon class for SVG macro icons */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.info-tooltip-text {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-slate);
    color: white;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.info-tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-slate);
}

.info-tooltip:hover .info-tooltip-text {
    opacity: 1;
    visibility: visible;
}

.revenue-metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Supplementary Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.chart-card h3 {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 1rem;
}

/* Dashboard Activity Feed */
.recent-activity-feed {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.activity-feed-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

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

.activity-feed-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.activity-feed-type {
    color: var(--color-text);
}

.activity-feed-date {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.activity-feed-details {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
}

.activity-feed-entity {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-feed-requester {
    flex-shrink: 0;
}

.activity-feed-item-clickable {
    cursor: pointer;
}

.activity-feed-item-clickable:hover {
    background-color: var(--color-bg-hover);
}

/* Revenue metric card variants */
.revenue-metric-card--alert {
    background-color: rgba(220, 53, 69, 0.08);
    border-left: 3px solid var(--color-danger);
}

.revenue-metric-card--alert .revenue-metric-value {
    color: var(--color-danger);
}

.revenue-metric-card--positive {
    background-color: rgba(40, 167, 69, 0.08);
    border-left: 3px solid var(--color-success);
}

/* Trend indicators */
.trend-indicator {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    font-weight: 600;
}

.trend-up {
    color: var(--color-success);
}

.trend-down {
    color: var(--color-danger);
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .revenue-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .revenue-metrics {
        grid-template-columns: 1fr;
    }
}

/* Summary Cards Grid (legacy - used by kpi_cards.html partial) */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .summary-cards {
        grid-template-columns: 1fr;
    }
}

.summary-card {
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.summary-label {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    opacity: 0.9;
}

.summary-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* KPI Section */
.kpi-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.kpi-section:last-child {
    border-bottom: none;
}

.kpi-section h2 {
    font-size: 1.1rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Classification Status (Phase 08) */
.classification-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}

.classification-badge.completed {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
}

.classification-badge.failed {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
}

.classification-badge.partial {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
}

.classification-badge.processing {
    background: var(--color-alert-info-bg);
    color: var(--color-info);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.classification-count {
    font-weight: normal;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Utility Classes */
.text-right {
    text-align: right !important;
}

/* Date and Amount Range Groups */
.date-range-group,
.amount-range-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-group input,
.amount-range-group input {
    flex: 1;
}

.range-separator {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Business Metrics Grid for Group Detail Page */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric-card {
    background: var(--color-bg-secondary);
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
}

.metric-label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

.metric-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
}

.metric-warning {
    color: var(--color-danger-hover);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    margin: 0;
}

/* Ver Todos navigation links/buttons in section headers */
.ver-todos-link {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-primary);
    text-decoration: none;
    margin-left: 0.75rem;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.ver-todos-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ========================================
   Chart Infrastructure
   ======================================== */

.chart-container {
    position: relative;
    width: 100%;
}

.chart-container-sm {
    height: 250px;
}

.chart-container-md {
    height: 350px;
}

.chart-container-lg {
    height: 450px;
}

.chart-container canvas {
    max-width: 100%;
}

/* ========================================
   Settings Page Styles
   ======================================== */

.settings-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.settings-page .page-header {
    margin-bottom: 2rem;
}

.settings-page .page-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: var(--color-slate);
}

.settings-page .page-header .subtitle {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* Tab Navigation */
.settings-page .tab-navigation {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border-dark);
    margin-bottom: 0;
}

.settings-page .tab-btn {
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.settings-page .tab-btn:hover {
    color: var(--color-text-dark);
    background: var(--color-bg-secondary);
}

.settings-page .tab-btn.selected {
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-border-dark);
    border-bottom-color: var(--color-bg);
    font-weight: 600;
}

.settings-page .tab-content {
    padding-top: 1.5rem;
}

.settings-page .settings-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

.settings-page .settings-section h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: var(--color-text-dark);
    border-bottom: 2px solid var(--color-bg-muted);
    padding-bottom: 0.75rem;
}

/* Settings subsection (nested within settings-section) */
.settings-subsection {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.settings-subsection h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

/* F-05: inline bulk-import status container (SKU tab and analogs) */
.bulk-import-status:not(:empty) {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.bulk-import-status .import-summary {
    margin: 0 0 var(--spacing-sm) 0;
    font-weight: 500;
}

.bulk-import-status .import-summary:last-child {
    margin-bottom: 0;
}

.bulk-import-status .import-changes {
    margin: 0;
    padding-left: var(--spacing-lg);
}

/* Bulk import result styles */
.import-summary {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

.import-changes {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-family: monospace;
    max-height: 300px;
    overflow-y: auto;
}

.import-changes li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border-light);
}

/* Exclusion mode toggle — mirrors .sku-mode-toggle */
.exclusion-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-dark);
}

.exclusion-mode-toggle .tab-btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: color 0.15s, background 0.15s;
}

.exclusion-mode-toggle .tab-btn:hover {
    color: var(--color-text-dark);
    background: var(--color-bg-secondary);
}

.exclusion-mode-toggle .tab-btn.selected {
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-border-dark);
    border-bottom-color: var(--color-bg);
    font-weight: 600;
}

/* Bulk exclusion import */
.bulk-exclusion-textarea {
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
}

.bulk-exclusion-type-select {
    margin-bottom: var(--spacing-sm);
}

.bulk-exclusion-submit {
    margin-top: var(--spacing-sm);
}

.bulk-exclusion-result {
    margin-top: var(--spacing-md);
}

.bulk-exclusion-reset {
    margin-top: var(--spacing-sm);
}

.bulk-exclusion-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.bulk-exclusion-confirm {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.bulk-exclusion-confirm-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* Exclusion search bar — mirrors .sku-search-bar */
.exclusion-search-bar {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    max-width: 400px;
}

.exclusion-search-bar input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Settings-specific form elements */
.settings-page .field-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.settings-page .field-note {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0.5rem 0 1rem;
}

.settings-page .warning-box {
    background: var(--color-alert-warning-bg);
    border-left: 4px solid var(--color-warning-alt);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-alert-warning-text);
}

.settings-page .success-message {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.settings-page .error-message {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* History Table (Import History) */
.settings-page .history-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

.settings-page .history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    table-layout: fixed;
}

.settings-page .history-table thead {
    background: var(--color-bg-secondary);
}

.settings-page .history-table th {
    text-align: left;
    padding: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border-dark);
}

.settings-page .history-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border-dark);
}

.settings-page .history-row.failed {
    background: var(--color-danger-light);
}

.settings-page .history-row.superseded {
    opacity: 0.6;
}

.settings-page .status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
}

.settings-page .status-badge.success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
}

.settings-page .status-badge.failed {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
}

.settings-page .status-badge.superseded {
    background: var(--color-border);
    color: var(--color-text-dark);
}

.settings-page .classification-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.settings-page .classification-badge.processing {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
}

.settings-page .classification-badge.completed {
    background: var(--color-alert-info-bg);
    color: var(--color-info);
}

.settings-page .classification-badge.failed {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
}

.settings-page .classification-badge.partial {
    background: var(--color-warning-light);
    color: var(--color-alert-warning-text);
}

.settings-page .classification-count {
    font-size: 0.75rem;
    opacity: 0.8;
}

.settings-page .error-tooltip {
    cursor: help;
    margin-left: 0.5rem;
    color: var(--color-danger);
}

.settings-page .actions {
    display: flex;
    gap: 0.5rem;
    width: 180px;
    white-space: nowrap;
}

.settings-page .reimport-form-row {
    background: var(--color-bg-secondary);
}

.settings-page .reimport-form-container {
    padding: 1rem;
}

.settings-page .reimport-note {
    margin: 0 0 1rem 0;
    padding: 0.75rem;
    background: var(--color-alert-warning-bg);
    border-left: 3px solid var(--color-warning-alt);
    border-radius: 4px;
}

.settings-page .reimport-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.settings-page .reimport-form .file-input {
    flex: 1;
}

.settings-page .error-detail-row {
    background-color: var(--color-bg);
}

.settings-page .pagination {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}

.settings-page .page-info {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.settings-page .no-history {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Settings-specific button overrides */
.settings-page .btn-text {
    background: transparent;
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
}

.settings-page .btn-text:hover {
    background: var(--color-bg-muted);
}

.settings-page .btn-text.active {
    background: var(--color-primary-light);
    color: var(--color-primary-hover);
    font-weight: 600;
}

.settings-page .text-muted {
    color: var(--color-text-muted);
}

/* Upload Results */
.settings-page #upload-results {
    margin-top: 1.5rem;
}

.settings-page .upload-results {
    padding: 1rem;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-border-dark);
}

.settings-page .results-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-dark);
}

.settings-page .summary-item {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
}

.settings-page .summary-item.success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
}

.settings-page .summary-item.failed {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
}

.settings-page .result-item {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 4px;
    border-left: 4px solid;
}

.settings-page .result-item.success {
    background: var(--color-alert-success-bg);
    border-color: var(--color-success);
}

.settings-page .result-item.error {
    background: var(--color-alert-danger-bg);
    border-color: var(--color-danger);
}

.settings-page .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.settings-page .filename {
    font-weight: 600;
}

.settings-page .result-detail {
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.settings-page .error-list,
.settings-page .warning-list {
    margin-top: 0.5rem;
}

.settings-page .error-list h4,
.settings-page .warning-list h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.settings-page .error-list ul,
.settings-page .warning-list ul {
    margin: 0;
    padding-left: 1.5rem;
}

.settings-page .error-item,
.settings-page .warning-item {
    font-size: 0.875rem;
}

.settings-page .duplicate-action {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* Danger Zone (GitHub-style) */
.settings-page .danger-zone {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    border: 2px solid var(--color-danger);
    border-radius: 8px;
}

.settings-page .danger-zone h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: var(--color-danger);
    border-bottom: 2px solid var(--color-alert-danger-bg);
    padding-bottom: 0.75rem;
}

.settings-page .danger-zone .confirm-group {
    margin: 1.25rem 0;
}

.settings-page .danger-zone .confirm-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text-dark);
}

.settings-page .danger-zone .confirm-group input[type="text"] {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.9375rem;
}

.settings-page .danger-zone .config-checkbox {
    margin: 1rem 0;
}

.settings-page .danger-zone .config-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--color-text-dark);
}

.settings-page .table-description {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-style: italic;
}

.settings-page .danger-zone .backup-reminder {
    margin: 0 0 1.25rem 0;
    padding: 0.75rem 1rem;
    background: var(--color-alert-warning-bg);
    border-left: 3px solid var(--color-warning-alt);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--color-text-dark);
}

.settings-page .danger-zone .backup-reminder a {
    color: var(--color-primary);
    font-weight: 600;
}

.settings-page .btn-danger {
    background: var(--color-danger);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.settings-page .btn-danger:hover:not(:disabled) {
    background: var(--color-danger-hover);
}

.settings-page .btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Restore Zone (amber/yellow warning style) */
.settings-page .restore-zone {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: var(--color-bg);
    border: 2px solid var(--color-warning-alt);
    border-radius: 8px;
}

.settings-page .restore-zone h2 {
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    color: var(--color-alert-warning-text);
    border-bottom: 2px solid var(--color-alert-warning-bg);
    padding-bottom: 0.75rem;
}

.settings-page .restore-zone .confirm-group {
    margin: 1.25rem 0;
}

.settings-page .restore-zone .confirm-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text-dark);
}

.settings-page .restore-zone .confirm-group input[type="text"] {
    width: 100%;
    max-width: 300px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.9375rem;
}

.settings-page .restore-zone .restore-file-input {
    display: block;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.9375rem;
    max-width: 400px;
}

/* Restore Preview */
.settings-page .restore-preview-content {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
}

.settings-page .restore-preview-content h3 {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    color: var(--color-text-dark);
}

.settings-page .table-selection {
    margin-bottom: 1.25rem;
}

.settings-page .table-row,
.settings-page .select-all-row {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-light);
}

.settings-page .select-all-row {
    background: var(--color-bg-muted);
    border-radius: 4px 4px 0 0;
    margin-bottom: 0;
}

.settings-page .table-row:last-child {
    border-bottom: none;
}

.settings-page .table-row label,
.settings-page .select-all-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9375rem;
}

.settings-page .table-name {
    font-family: monospace;
    font-size: 0.875rem;
}

.settings-page .table-count {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

/* Restore Result */
.settings-page #restore-result {
    margin-top: 1rem;
}

.settings-page .restore-error-details {
    margin-top: 0.75rem;
}

.settings-page .restore-error-details summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.settings-page .restore-error-details pre {
    margin: 0.5rem 0 0 0;
    padding: 0.75rem;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Backup Card */
.settings-page .backup-description {
    margin: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.settings-page .backup-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Settings Tab Partials - Exclusions, SKU, Suggestions */
.settings-page .exclusion-add-form,
.settings-page .sku-add-form,
.settings-page .suggestion-add-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.settings-page .exclusion-add-form select,
.settings-page .exclusion-add-form input[type="text"],
.settings-page .sku-add-form input[type="text"],
.settings-page .suggestion-add-form input[type="text"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.875rem;
}

.settings-page .exclusion-add-form select {
    min-width: 120px;
}

.settings-page .exclusion-add-form input[type="text"],
.settings-page .sku-add-form input[type="text"] {
    min-width: 200px;
}

.settings-page .suggestion-add-form input[type="text"] {
    min-width: 250px;
}

.settings-page .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}

.settings-page .config-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    table-layout: fixed;
}

.settings-page .config-table th {
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border-dark);
    background: var(--color-bg-secondary);
}

.settings-page .config-table th:nth-child(1) { width: 12%; }
.settings-page .config-table th:nth-child(2) { width: auto; }
.settings-page .config-table th:nth-child(3) { width: 10%; }
.settings-page .config-table th:nth-child(4) { width: 15%; }
.settings-page .config-table th:nth-child(5) { width: 150px; }

/* SKU tab segmented toggle */
.sku-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-border-dark);
}

.sku-mode-toggle .tab-btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.sku-mode-toggle .tab-btn:hover {
    color: var(--color-text-dark);
    background: var(--color-bg-secondary);
}

.sku-mode-toggle .tab-btn.selected {
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-border-dark);
    border-bottom-color: var(--color-bg);
    font-weight: 600;
}

/* SKU search bar */
.sku-search-bar {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    max-width: 400px;
}

.sku-search-bar input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    font-size: 0.875rem;
}

.settings-page .config-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-border-dark);
}

.settings-page .config-table td.actions {
    display: table-cell;
    white-space: nowrap;
}

.settings-page .badge-active {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
}

.settings-page .badge-inactive {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--color-border);
    color: var(--color-text-dark);
}

.settings-page .unmapped-warning {
    background: var(--color-alert-warning-bg);
    border-left: 4px solid var(--color-warning-alt);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-alert-warning-text);
}

/* KPI Views */
.kpi-page { padding: 1rem 0; overflow: hidden; }
.kpi-page h1 { margin-bottom: 0.25rem; }

/* KPI loading overlay */
.kpi-tab-wrapper { position: relative; min-height: 200px; }

.kpi-loading-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-bg-surface, #fff);
    z-index: 10;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6rem;
}
.kpi-loading-overlay.htmx-indicator { display: none; }
.htmx-request .kpi-loading-overlay.htmx-indicator,
.htmx-request.kpi-loading-overlay.htmx-indicator { display: flex; }

.kpi-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: kpi-spin 0.7s linear infinite;
}

@keyframes kpi-spin {
    to { transform: rotate(360deg); }
}

.page-subtitle { color: var(--color-text-muted); margin-bottom: 1.5rem; font-size: 0.95rem; }

.kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.kpi-actions { display: flex; gap: 0.5rem; }
.kpi-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }

/* KPI Tab Navigation */
.kpi-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
}

.kpi-tabs .tab-btn {
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.kpi-tabs .tab-btn:hover {
    color: var(--color-text);
    background: var(--color-bg-hover);
}

.kpi-tabs .tab-btn.selected {
    color: var(--color-primary);
    background: var(--color-bg);
    border-color: var(--color-border);
    border-bottom-color: var(--color-bg);
    font-weight: 600;
}

/* Mobile tab scroll */
@media (max-width: 768px) {
    .kpi-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;  /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }
    .kpi-tabs::-webkit-scrollbar {
        display: none;  /* Chrome/Safari */
    }
    .kpi-tabs .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Date filter */
.kpi-date-filter { margin-bottom: 1.5rem; }
.date-filter-form { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.filter-presets { display: flex; gap: 0.5rem; }
.preset-btn.active { background: var(--color-primary); color: white; }
.filter-custom { display: flex; align-items: center; gap: 0.5rem; }
.filter-custom input[type="date"] { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.875rem; }
.filter-custom label { font-size: 0.875rem; color: var(--color-text-muted); }

/* Cross-tab table */
.crosstab-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 1rem; }
.crosstab-table th, .crosstab-table td { padding: 0.5rem 0.75rem; text-align: center; border: 1px solid var(--color-border); }
.crosstab-table th { background: var(--color-bg-secondary); font-weight: 600; white-space: nowrap; }
.crosstab-table td a { text-decoration: none; color: var(--color-primary); font-weight: 500; }
.crosstab-table td a:hover { text-decoration: underline; }
.crosstab-table .cell-zero { color: var(--color-text-muted); }
.crosstab-table .row-total, .crosstab-table .col-total { font-weight: 600; background: var(--color-bg-secondary); }
.crosstab-table .grand-total { font-weight: 700; background: var(--color-bg-secondary); }
.crosstab-table tbody tr:hover { background-color: var(--color-bg-hover); }

/* Pipeline table */
.pipeline-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.pipeline-table th, .pipeline-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); }
.pipeline-table th { background: var(--color-bg-secondary); font-weight: 600; }
.pipeline-table .clickable-row { cursor: pointer; }
.pipeline-table .clickable-row:hover { background-color: var(--color-bg-hover); }
.pipeline-table .status-pendente { color: var(--color-warning); }
.pipeline-table .status-aprovada { color: var(--color-primary); }
.pipeline-table .status-concluida { color: var(--color-success); }
.pipeline-table .totals-row { font-weight: 600; background: var(--color-bg-secondary); }

/* Spend table */
.spend-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.spend-table th, .spend-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); }
.spend-table th { background: var(--color-bg-secondary); font-weight: 600; }
.spend-table .totals-row { font-weight: 600; background: var(--color-bg-secondary); }
.spend-table td.currency { text-align: right; }

/* Proposal pipeline table (Resultados tab) */
.proposal-pipeline-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.proposal-pipeline-table th, .proposal-pipeline-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); }
.proposal-pipeline-table th { background: var(--color-bg-secondary); font-weight: 600; }
.proposal-pipeline-table .totals-row { font-weight: 600; background: var(--color-bg-secondary); }
.proposal-pipeline-table td.text-right { text-align: right; }

/* Dimension switcher */
.dimension-switcher { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.dimension-tabs { display: flex; gap: 0; }
.dimension-tab { padding: 0.5rem 1rem; border: 1px solid var(--color-border); background: var(--color-bg); font-size: 0.875rem; cursor: pointer; transition: all 0.15s; }
.dimension-tab:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dimension-tab:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dimension-tab:not(:first-child) { border-left: none; }
.dimension-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.dimension-tab:hover:not(.active) { background: var(--color-bg-hover); }

/* Rejeitada note */
.kpi-note { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.5rem; font-style: italic; }

/* ROI Column (compact) */
.roi-cell { white-space: nowrap; font-size: 0.85rem; line-height: 1.6; }
.roi-total { display: block; font-weight: 500; }
.roi-pcts { display: block; font-size: 0.75rem; color: var(--color-text-muted); }
.roi-pcts abbr { text-decoration: none; cursor: help; border-bottom: 1px dotted var(--color-text-light); }
.customer-table .multi-value { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Effectiveness table */
.effectiveness-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-top: 0.5rem; }
.effectiveness-table th, .effectiveness-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); }
.effectiveness-table th { background: var(--color-bg-secondary); font-weight: 600; white-space: nowrap; }
.effectiveness-table .totals-row { font-weight: 600; background: var(--color-bg-secondary); }
.positive { color: var(--color-success); }
.negative { color: var(--color-danger); }

/* Manager ranking table */
.manager-ranking-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.manager-ranking-table th, .manager-ranking-table td { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); }
.manager-ranking-table th { background: var(--color-bg-secondary); font-weight: 600; }
.manager-row { cursor: pointer; }
.manager-row:hover { background-color: var(--color-bg-hover); }
.expand-cell { text-align: center; width: 30px; }
.expand-arrow { font-size: 0.75rem; color: var(--color-text-light); }
.details-cell { padding: 0 !important; background: var(--color-bg-secondary); }

/* Sortable table headers */
.sortable-header { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-header:hover { background: var(--color-bg-hover); }
.sort-arrow { font-size: 0.7rem; color: var(--color-text-light); }

/* Team summary row */
.team-summary-row td { font-weight: 600; background: var(--color-bg-secondary); border-top: 2px solid var(--color-border); }

/* Visual separator for billing columns */
.billing-separator { border-left: 2px solid var(--color-border) !important; }

/* Metric color coding */
.metric-good { color: var(--color-success); }
.metric-warning { color: var(--color-warning); }
.metric-bad { color: var(--color-danger); }

/* Customer breakdown (nested table inside manager drill-down) */
.customer-breakdown-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0; }
.customer-breakdown-table th, .customer-breakdown-table td { padding: 0.4rem 0.75rem; border: 1px solid var(--color-border); }
.customer-breakdown-table th { background: var(--color-bg); font-weight: 500; font-size: 0.8rem; }
.drill-down-row { cursor: pointer; }
.drill-down-row:hover { background-color: var(--color-bg-hover); }

/* Timeline chart */
.timeline-chart-container { position: relative; height: 300px; width: 100%; }

/* Section titles within KPI pages */
.section-title { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; color: var(--color-text); }

/* Date context label above summary cards */
.kpi-date-context {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

/* Resumo cards */
.resumo-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    min-width: 0;
}

.resumo-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
}

.resumo-card-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.resumo-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
}

.resumo-card-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Charts grid */
.resumo-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    min-width: 0;
}

.resumo-chart-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem;
    min-width: 0;
    overflow: hidden;
}

.resumo-chart-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.resumo-chart-card canvas {
    max-height: 300px;
}

/* Responsive: stack cards on small screens */
@media (max-width: 768px) {
    .resumo-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .resumo-charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Nav loading indicator */
.nav-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 9999;
    animation: nav-loading-progress 1.5s ease-out forwards;
    pointer-events: none;
}

@keyframes nav-loading-progress {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 85%; }
}

.nav-links a.nav-loading {
    pointer-events: none;
    opacity: 0.7;
}

.nav-links a.nav-loading::after {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.4em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: nav-spinner 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes nav-spinner {
    to { transform: rotate(360deg); }
}

/* Activity detail loading spinner */
.activity-detail-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--color-text-secondary);
    gap: 0.5rem;
}

.activity-detail-loading::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: nav-spinner 0.6s linear infinite;
}

/* ========================================
   Smart Table - Column Visibility Picker
   ======================================== */

.smart-table-container {
    position: relative;
}

.smart-table-picker-wrapper {
    position: relative;
    z-index: 10;
}

.smart-table-picker-trigger {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.smart-table-picker-trigger:hover {
    color: var(--color-text);
    border-color: var(--color-primary);
}

.smart-table-picker-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    min-width: 200px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.smart-table-picker-dropdown.open {
    display: block;
}

.smart-table-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.smart-table-picker-dropdown label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.smart-table-picker-dropdown label:hover {
    color: var(--color-primary);
}

.smart-table-picker-reset {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    display: none;
}

.smart-table-picker-reset.visible {
    display: block;
}

.smart-table-picker-reset button {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.smart-table-picker-reset button:hover {
    color: var(--color-primary);
}

/* --- KPI Page: Extracted Inline Styles --- */

/* Tab badge (notification count on tab buttons) */
.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.35rem;
    line-height: 1;
}
.tab-badge--warning {
    background: var(--color-warning);
    color: white;
}
.tab-badge--danger {
    background: var(--color-danger);
    color: white;
}

/* KPI content section wrapper (replaces atividades-section) */
.kpi-content-section {
    margin-bottom: 2rem;
}

/* KPI section separator */
.kpi-section-separator {
    margin: 2.5rem 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

/* Crosstab table scroll wrapper */
.crosstab-scroll-wrapper {
    overflow-x: auto;
}

/* Resumo card: clickable interactive variant */
.resumo-card--clickable {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.resumo-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Resumo card: last chart spans full width in 2-col grid */
.resumo-charts-grid .resumo-chart-card:last-child {
    grid-column: 1 / -1;
}

/* Resumo card: warning/danger state */
.resumo-card--warning {
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid var(--color-warning);
}
.resumo-card--warning .resumo-card-value {
    color: var(--color-warning);
}
.resumo-card--danger {
    background: rgba(220, 53, 69, 0.08);
    border-left: 3px solid var(--color-danger);
}
.resumo-card--danger .resumo-card-value {
    color: var(--color-danger);
}

/* Compact empty state (checkmark style for "all good" messages) */
.compact-empty {
    padding: 1rem 1.25rem;
    background: rgba(40, 167, 69, 0.06);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.compact-empty-icon {
    color: var(--color-success);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* Movimentacao section */
.movimentacao-section {
    margin-bottom: 3rem;
}

/* Unified movement summary header (downgrade count, saldo, upgrade count) */
.movement-summary-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
.movement-metric {
    text-align: center;
    min-width: 100px;
}
.movement-metric__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}
.movement-metric__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.movement-metric--downgrade .movement-metric__value {
    color: var(--color-danger);
}
.movement-metric--upgrade .movement-metric__value {
    color: var(--color-success);
}
.movement-metric--saldo .movement-metric__value {
    color: var(--color-text-secondary);
}
.movement-metric--saldo.movement-metric--positive .movement-metric__value {
    color: var(--color-success);
}
.movement-metric--saldo.movement-metric--negative .movement-metric__value {
    color: var(--color-danger);
}
.movement-saldo-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Movement table */
.movement-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.movement-table th {
    background: var(--color-bg-secondary);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--text-secondary);
}
.movement-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.movement-row {
    cursor: pointer;
    transition: background-color 0.15s;
}
.movement-row:hover {
    background: var(--bg-hover);
}
.movement-row--downgrade {
    border-left: 3px solid var(--color-danger);
    background: rgba(220, 53, 69, 0.04);
}
.movement-row--upgrade {
    border-left: 3px solid var(--color-success);
    background: rgba(40, 167, 69, 0.04);
}
.movement-badge-up {
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.9rem;
}
.movement-badge-down {
    color: var(--color-danger);
    font-weight: 600;
    font-size: 0.9rem;
}
.movement-arrow {
    color: var(--text-secondary);
    padding: 0 0.5rem;
    text-align: center;
}

/* Status text badges (Ativo / Caindo / Inativo) */
.status-text {
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    display: inline-block;
}
.status-ativo {
    color: var(--color-success);
    background: rgba(40, 167, 69, 0.1);
}
.status-caindo {
    color: var(--color-warning);
    background: rgba(255, 193, 7, 0.1);
}
.status-inativo {
    color: var(--color-danger);
    background: rgba(220, 53, 69, 0.1);
}

/* Text utility colors (KPI context) */
.text-success {
    color: var(--color-success);
    font-weight: 600;
}
.text-danger {
    color: var(--color-danger);
    font-weight: 600;
}

/* At-risk section */
.at-risk-section {
    margin-top: 2rem;
}
.at-risk-count-badge {
    background: var(--color-danger);
    color: white;
    border-radius: 50%;
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* At-risk table */
.at-risk-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.at-risk-table th {
    background: var(--color-bg-secondary);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--text-secondary);
}
.at-risk-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.at-risk-table .text-right {
    text-align: right;
}
.at-risk-row {
    cursor: pointer;
    transition: background-color 0.15s;
}
.at-risk-row:hover {
    background: var(--bg-hover);
}
.at-risk-row .btn {
    pointer-events: auto;
}

/* Scrollable movement container */
.movement-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.movement-scroll-container .movement-table {
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.movement-scroll-container .movement-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-secondary);
}

/* Movement subsections within unified Movimentação */
.movement-section {
    margin-bottom: 1.5rem;
    padding-left: 0.75rem;
    border-radius: var(--radius-sm);
}
.movement-section--downgrade {
    border-left: 4px solid var(--color-danger);
}
.movement-section--upgrade {
    border-left: 4px solid var(--color-success);
}

/* Ver todos link container (bottom of truncated tables) */
.ver-todos-link-container {
    text-align: right;
    margin-top: 0.75rem;
    padding-right: 0.25rem;
}
.ver-todos-link-container .ver-todos-link {
    font-size: 0.85rem;
}

/* Load more button inside table tbody */
.load-more-row td {
    text-align: center;
    padding: 0.75rem;
    border-bottom: none;
}
.load-more-btn {
    font-size: 0.85rem !important;
    margin-left: 0 !important;
}
.load-more-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}
.htmx-request .load-more-label {
    display: none;
}
.load-more-spinner {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Category filter chips */
.category-chips {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.chip--active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.chip--active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Scrollable at-risk container (mirrors .proposals-scroll-container) */
.at-risk-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.at-risk-scroll-container .at-risk-table {
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.at-risk-scroll-container .at-risk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-bg-secondary);
}

/* Scrollable proposals container */
.proposals-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.proposals-scroll-container .stale-proposals-table {
    box-shadow: none;
}
.proposals-scroll-container .stale-proposals-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Stale proposals table */
.stale-proposals-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.stale-proposals-table th {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--text-secondary);
}
.stale-proposals-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.stale-proposals-table .text-right {
    text-align: right;
}

/* Stale row styling */
.stale-row {
    cursor: pointer;
    transition: background-color 0.15s;
}
.stale-row:hover {
    background: var(--bg-hover) !important;
}
.stale-warning {
    background: rgba(255, 193, 7, 0.06);
}
.stale-danger {
    background: rgba(220, 53, 69, 0.06);
}

/* Stale badge (days count on proposal rows) */
.stale-badge {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}
.stale-badge--normal {
    color: var(--text-secondary);
}
.stale-badge--warning {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
}
.stale-badge--danger {
    background: rgba(220, 53, 69, 0.15);
    color: var(--color-danger);
}

/* Acompanhamento summary section */
.acompanhamento-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.acomp-card {
    padding: 1.25rem;
    border-radius: var(--radius-md);
    text-align: center;
    border-left: 4px solid;
}
.acomp-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.acomp-card-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.acomp-card--danger {
    background: rgba(220, 53, 69, 0.08);
    border-left-color: var(--color-danger);
}
.acomp-card--danger .acomp-card-value {
    color: var(--color-danger);
}
.acomp-card--warning {
    background: rgba(255, 193, 7, 0.08);
    border-left-color: var(--color-warning);
}
.acomp-card--warning .acomp-card-value {
    color: #856404;
}
.acomp-card--orange {
    background: rgba(253, 126, 20, 0.08);
    border-left-color: #fd7e14;
}
.acomp-card--orange .acomp-card-value {
    color: #c35a00;
}

/* Comparison delta sub-line on summary cards */
.card-delta {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    justify-content: center;
}
.card-delta--good {
    color: var(--color-success);
}
.card-delta--bad {
    color: var(--color-danger);
}

/* Faturamento tab summary grid — 4 cards in one row */
.faturamento-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
    .faturamento-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .faturamento-summary {
        grid-template-columns: 1fr;
    }
}

/* Faturamento risk card variant */
.faturamento-card--risk {
    border-left: 4px solid var(--color-danger);
    background: color-mix(in srgb, var(--color-danger), transparent 95%);
}

/* Faturamento chart layout helpers */
.faturamento-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.faturamento-chart-header .section-title {
    margin-bottom: 0;
}
.faturamento-chart-container {
    position: relative;
    height: 320px;
}

/* Delta value display inside faturamento cards */
.faturamento-delta-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Stale critical tier (red — third tier added in Plan 01) */
.stale-critical {
    background: rgba(220, 53, 69, 0.06);
}
.stale-badge--critical {
    background: rgba(220, 53, 69, 0.15);
    color: var(--color-danger);
}

/* Attention alert banner (Resumo tab) — rendered as <a> tag */
a.attention-alert {
    display: block;
    text-decoration: none;
    color: inherit;
}
.attention-alert {
    border-left: 4px solid var(--color-warning);
    background: rgba(255, 193, 7, 0.10);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    transition: background 0.15s;
    cursor: pointer;
}
.attention-alert:hover {
    background: rgba(255, 193, 7, 0.18);
}

/* Info context banner (Resultados tab causation disclaimer) */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-alert-info-bg);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}
.info-banner-icon {
    flex-shrink: 0;
    color: var(--color-info);
    margin-top: 0.125rem;
}
.info-banner-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-light);
}
.info-banner-text strong {
    color: var(--color-text);
}

/* Proposal suggestion link in activity completion notification */
.notification-action-link {
    display: block;
    margin-top: 0.25rem;
    color: inherit;
    text-decoration: underline;
    opacity: 0.85;
    font-size: 0.85rem;
}
.notification-action-link:hover {
    opacity: 1;
}

/* ==========================================================================
   Error Pages
   ========================================================================== */

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.error-content {
    max-width: 600px;
    text-align: center;
}

.error-code {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.error-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.error-reference {
    background: var(--color-bg-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.error-reference strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.error-reference code {
    display: inline-block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: var(--color-text);
    letter-spacing: 0.5px;
    user-select: all;
}

.error-help {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.error-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .error-code {
        font-size: 5rem;
    }

    .error-title {
        font-size: 1.5rem;
    }

    .error-message {
        font-size: 1rem;
    }

    .error-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg-secondary);
    margin: 0;
    padding: 1rem;
}

.login-container {
    width: 100%;
    max-width: 400px;
}

.login-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 2.5rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 0.75rem;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.login-error {
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: 0.375rem;
    margin-bottom: 0;
}

.login-remember {
    display: flex;
    align-items: center;
}

.login-remember .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.login-submit {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

/* Navbar logout button (inside dropdown) */
.nav-dropdown-logout-btn {
    background: none;
    border: none;
    color: var(--color-nav-text-hover);
    cursor: pointer;
    font-size: inherit;
    padding: 0.75rem 1.25rem;
    text-align: left;
    width: 100%;
    white-space: nowrap;
}

.nav-dropdown-logout-btn:hover {
    background: var(--color-nav-border);
    color: var(--color-danger);
}

.nav-logout-form {
    margin: 0;
    padding: 0;
}

.nav-user-dropdown {
    margin-left: 0;
}

/* --- Account Settings --- */

/* Generic card container (white panel with border) */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

/* Alert messages (success/error feedback) */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-success {
    background: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    border: 1px solid var(--color-success);
}

.alert-error {
    background: var(--color-alert-danger-bg);
    color: var(--color-alert-danger-text);
    border: 1px solid var(--color-danger);
}

/* Action link below alert messages (replaces inline style="margin-top: 1rem;") */
.alert-action {
    margin-top: 1rem;
}

.account-sections {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.account-sections .card h2 {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

/* Password field wrapper with toggle */
.password-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field-wrapper input {
    flex: 1;
    padding-right: 2.5rem;
}

.password-toggle {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0.25rem;
    display: flex;
    align-items: center;
}

.password-toggle:hover {
    color: var(--color-text);
}

/* Password strength rules */
.password-rules {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
    font-size: 0.875rem;
}

.password-rules li {
    padding: 0.25rem 0;
}

.password-rules li::before {
    margin-right: 0.375rem;
}

.rule-pass {
    color: var(--color-success);
}

.rule-pass::before {
    content: "\2713";
}

.rule-fail {
    color: var(--color-text-muted);
}

.rule-fail::before {
    content: "\2717";
}

/* Nav dropdown link (for non-logout items like Minha Conta) */
.nav-dropdown-link {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--color-nav-text-hover);
    text-decoration: none;
    white-space: nowrap;
}

.nav-dropdown-link:hover {
    background: var(--color-nav-border);
    color: var(--color-nav-text-hover);
}

/* Read-only account info value */
.account-info-value {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* Read-only field styling */
.account-readonly-field {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* Helper text under form fields */
.form-helper {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* Forgot password instructions text */
.forgot-instructions {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* Forgot/back link below login card */
.login-forgot {
    text-align: center;
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.login-forgot a {
    color: var(--color-primary);
    text-decoration: none;
}

.login-forgot a:hover {
    text-decoration: underline;
}

/* Reset password heading */
.reset-heading {
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

/* ============================================================
   Processos Page — Job monitoring UI
   ============================================================ */

/* Page header with polling indicator */
.processos-page__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.processos-page__header h1 {
    margin: 0;
}

/* Polling indicator: pulsing dot with label */
.polling-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.polling-indicator::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
    animation: polling-pulse 1.5s infinite;
    flex-shrink: 0;
}

@keyframes polling-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Empty state */
.processos-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.processos-empty a {
    color: var(--color-primary);
    text-decoration: none;
}

.processos-empty a:hover {
    text-decoration: underline;
}

/* Job Card — base */
.job-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: box-shadow var(--transition-fast);
}

.job-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Status-based left border colors */
.job-card--queued {
    border-left-color: var(--color-text-muted);
}

.job-card--processing {
    border-left-color: var(--color-primary);
    animation: job-pulse 2s infinite;
}

.job-card--completed {
    border-left-color: var(--color-success);
}

.job-card--failed {
    border-left-color: var(--color-danger);
}

.job-card--partial {
    border-left-color: var(--color-warning);
}

/* Highlight animation: brief yellow flash for newly created job */
.job-card--highlight {
    animation: job-highlight 2.5s ease-out;
}

@keyframes job-highlight {
    0% { background-color: var(--color-warning-light); }
    100% { background-color: var(--color-bg); }
}

/* Processing card: pulsing left border */
@keyframes job-pulse {
    0%, 100% { border-left-color: var(--color-primary); }
    50% { border-left-color: var(--color-primary-light); }
}

/* Job card header: filename + timestamp */
.job-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.job-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.job-card__type {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.job-card__filename {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    word-break: break-all;
}

.job-card__retry-badge {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.job-card__timestamp {
    flex-shrink: 0;
}

.job-card__date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Job card body: status row, progress, stats */
.job-card__body {
    margin-bottom: 0.75rem;
}

.job-card__status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.job-card__icon {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1;
}

.job-card__icon--success {
    color: var(--color-success);
}

.job-card__icon--error {
    color: var(--color-danger);
}

.job-card__icon--warning {
    color: var(--color-warning);
}

.job-card__status-label {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.job-card__stats {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
}

.job-card__error-summary {
    font-size: 0.875rem;
    color: var(--color-danger);
    margin: 0.25rem 0 0;
    font-family: monospace;
    background: var(--color-danger-light);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
}

.job-card__retry-error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    margin: 0;
}

/* Progress bar */
.job-progress {
    height: 6px;
    background: var(--color-bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.5rem 0 0.25rem;
}

.job-progress__bar {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
    min-width: 4px;
}

.job-progress__label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Job card footer: action buttons */
.job-card__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* Job detail accordion content */
.job-detail {
    /* Container is initially empty; filled by HTMX */
}

.job-detail__content {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 1rem 1.25rem;
    margin-top: -1px;
}

.job-detail__stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.job-detail__stats dt {
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.job-detail__stats dd {
    color: var(--color-text);
    margin: 0;
}

.job-detail__section-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.35rem;
}

.job-detail__warning-list {
    font-size: 0.875rem;
    color: var(--color-text-light);
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.job-detail__timing {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
}

.job-detail__link {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.job-detail__link a {
    color: var(--color-primary);
    text-decoration: none;
}

.job-detail__link a:hover {
    text-decoration: underline;
}

.job-detail__error {
    margin-bottom: 0.5rem;
}

.job-detail__error-text {
    font-size: 0.8125rem;
    font-family: "Courier New", Courier, monospace;
    background: var(--color-danger-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* Notification toasts (OOB swap into #notifications) */
.notification {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    animation: notification-slide-in 0.3s ease-out;
}

@keyframes notification-slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notification--success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    color: var(--color-text);
}

.notification--error {
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    color: var(--color-text);
}

.notification__icon {
    font-weight: 700;
    flex-shrink: 0;
}

.notification__text {
    flex: 1;
}

.notification__text a {
    color: var(--color-primary);
    text-decoration: none;
}

.notification__text a:hover {
    text-decoration: underline;
}

.notification__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-muted);
    padding: 0 0.2rem;
    line-height: 1;
    flex-shrink: 0;
}

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

/* Nav badge for active job count */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-danger);
    color: var(--color-bg);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* Retry button: outlined warning style */
.job-retry-btn {
    background: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.job-retry-btn:hover {
    background: var(--color-danger-light);
}

/* Job type badges — colored pill per job type */
.job-card__type--importacao {
    background: var(--color-alert-info-bg);
    color: var(--color-info);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.job-card__type--import {
    background: var(--color-alert-info-bg);
    color: var(--color-info);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.job-card__type--classificacao {
    background: var(--color-alert-warning-bg);
    color: var(--color-warning-hover);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.job-card__type--mapeamento_sku {
    background: var(--color-alert-success-bg);
    color: var(--color-success-hover);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* Provenance link for child jobs */
.job-card__provenance {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.job-card__parent-link {
    color: var(--color-primary);
    text-decoration: underline;
}

.job-card__parent-link:hover {
    color: var(--color-primary-hover);
}

/* Info ribbon with tooltip on job cards */
.job-card__info-ribbon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0.75rem;
    cursor: help;
    border-bottom: none;
}

.job-card__info-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-primary);
    opacity: 0.7;
}

.job-card__info-ribbon:hover .job-card__info-icon {
    opacity: 1;
}

.job-card__info-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Filter tabs for job type filtering */
.processos-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.processos-filter {
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.processos-filter:hover {
    background: var(--color-bg-hover);
    color: var(--color-text);
}

.processos-filter--active {
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}

.processos-filter--active:hover {
    background: var(--color-primary-hover);
    color: var(--color-bg);
}

/* Pagination controls */
.processos-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
}

.processos-pagination__info {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Section headers for active/history grouping */
.processos-section__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0 0.6rem;
}

.processos-section__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.processos-section__dot--active {
    background: var(--color-primary);
    animation: dot-pulse 2s infinite;
}

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

.processos-section__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.processos-section__label--muted {
    color: var(--color-text-muted);
}

.processos-section__count {
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    line-height: 1.3;
}

.processos-divider {
    border-top: 1px solid var(--color-border);
    margin: 0.75rem 0;
}

/* ============================================================
   Ferramentas Nav Dropdown (Plan 01-04)
   ============================================================ */

/* Active state: highlight Ferramentas trigger when on a child route */
.nav-ferramentas-dropdown.active .nav-ferramentas-trigger {
    color: var(--color-nav-text-hover);
}

.nav-ferramentas-dropdown.active .nav-icon {
    color: var(--color-primary);
    opacity: 1;
}

/* Ferramentas badge — shows active job count inside the trigger button */
.ferramentas-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary);
    color: var(--color-bg);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9px;
    vertical-align: middle;
    margin-left: 0.25rem;
    line-height: 1;
}

/* Hide badge when empty (no active jobs) */
.ferramentas-badge:empty {
    display: none;
}

/* ============================================================
   Toast Notification System (Plan 01-04)
   ============================================================ */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 360px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--color-bg);
    border-left: 4px solid var(--color-text-muted);
    animation: toast-slide-in 0.3s ease;
}

@keyframes toast-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast--success {
    border-left-color: var(--color-success);
}

.toast--error {
    border-left-color: var(--color-danger);
}

.toast__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toast__icon {
    font-weight: 700;
    flex-shrink: 0;
}

.toast__message {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.4;
}

.toast__link {
    font-size: 0.8rem;
    color: var(--color-primary);
    text-decoration: none;
}

.toast__link:hover {
    text-decoration: underline;
}

.toast__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-text-muted);
    padding: 0 0.2rem;
    line-height: 1;
    flex-shrink: 0;
    align-self: flex-start;
}

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

/* ============================================================
   File Preview (Plan 01-04)
   ============================================================ */

.file-preview {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

/* Upload form dedup option (moved from inline style in upload_form.html) */
.dedup-option {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.dedup-option .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.dedup-option .checkbox-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.help-text {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
    margin-left: 1.6rem;
    line-height: 1.4;
}

.import-warning {
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    border-left: 4px solid;
    margin-top: 1rem;
}

.import-warning--duplicate {
    background: var(--color-alert-warning-bg);
    border-left-color: var(--color-warning);
    color: var(--color-alert-warning-text);
}

.import-warning--processing {
    background: var(--color-alert-info-bg);
    border-left-color: var(--color-primary);
    color: var(--color-text-primary);
}

.import-warning--error {
    background: var(--color-alert-danger-bg);
    border-left-color: var(--color-danger);
    color: var(--color-alert-danger-text);
}

.import-warning__message {
    margin: 0 0 0.5rem;
}

.import-warning__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Import results: dedup count variants */
.dedup-count.new { color: var(--color-success); font-weight: 600; }
.dedup-count.updated { color: var(--color-primary); font-weight: 600; }
.dedup-count.unchanged { color: var(--color-text-muted); }
.dedup-count.skipped { color: var(--color-warning); font-weight: 600; }

/* Classification settings: reclassify prompt and spinner */
.reclassify-prompt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-info-bg, #e3f2fd);
    border: 1px solid var(--color-info, #2196F3);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.reclassify-prompt span {
    flex: 1;
    font-weight: 500;
}

.reclass-spinner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary);
    border-radius: 6px;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

.reclass-spinner .spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.stale-indicator {
    border-color: var(--color-warning);
    background: var(--color-warning-bg, #fff3e0);
}

/* ============================================================
   Change Detection UI (Phase 69-03)
   ============================================================ */

/* Job card: changes detected section */
.job-card__changes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.job-card__changes-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

.job-card__changes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.job-card__change-item {
    font-size: 0.8125rem;
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.job-card__no-changes {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    font-style: italic;
}

/* Shared before/after value display */
.change-old {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.change-new {
    font-weight: 600;
    color: var(--color-text);
}

/* Change history in entity drawer */
.change-history__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.change-history__item {
    font-size: 0.8125rem;
    padding: 0.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
}

.change-history__item:last-child {
    border-bottom: none;
}

.change-history__date {
    color: var(--color-text-muted);
    min-width: 80px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Name changed indicator on customer list */
.name-changed-indicator {
    color: var(--color-info);
    margin-left: 0.25rem;
    cursor: help;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* ============================================================
   Responsive: Tablet / Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Spacing tokens adjust for mobile */
    :root {
        --container-padding: 1rem;
    }

    /* Nav: hide desktop links + utility, show hamburger */
    .nav-links {
        display: none;
    }

    .nav-utility {
        display: none;
    }

    .hamburger-toggle {
        display: flex;
        align-items: center;
    }

    .main-nav {
        grid-template-columns: 1fr auto;
        padding: 0 1rem;
    }

    /* Container padding via token — already applied via var() */

    /* Page headers stack vertically */
    .page-header,
    .page-title-bar,
    .section-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Export / action buttons go full-width */
    .page-header .btn,
    .page-title-bar .btn,
    .page-title-bar .export-buttons,
    .page-title-bar > div:last-child {
        width: 100%;
    }

    .export-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .export-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* Tables: ensure minimum widths for scrollability */
    .customer-table,
    .data-table,
    .activity-table {
        min-width: 700px;
    }

    /* Filter: show toggle button, collapse form content */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .filter-collapsible {
        display: none;
    }

    .filter-collapsible.open {
        display: block;
    }

    /* Filter actions go full-width */
    .filter-actions {
        flex-direction: column;
    }

    .filter-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Filter grid wide items don't span 2 cols on mobile */
    .filter-group-wide {
        grid-column: span 1;
    }

    /* Form actions stack and go full-width */
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        text-align: center;
    }

    /* Activity detail panel: stack from 2-col to 1-col */
    .activity-detail-panel {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Date and amount range groups stack */
    .date-range-group,
    .amount-range-group {
        flex-direction: column;
        gap: 0.5rem;
    }

    .date-range-group .range-separator,
    .amount-range-group .range-separator {
        display: none;
    }

    /* table-scroll-wrapper .has-overflow toggled via JS in base.html */

    /* Drawer internals: quadra and ROI stack vertically */
    .drawer-quadra-values {
        flex-direction: column;
        gap: 1rem;
    }

    .drawer-roi-metrics {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Page-level quadra values (group detail, customer detail) */
    .quadra-values {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    /* KPI header: stack title + actions */
    .kpi-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-actions {
        width: 100%;
    }

    .kpi-actions .btn {
        flex: 1;
        text-align: center;
    }

    /* KPI controls: stack date filter + presets */
    .kpi-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .date-filter-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-presets {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-presets .btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .filter-custom {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .filter-custom input[type="date"] {
        flex: 1;
        min-width: 120px;
    }

    /* Chart containers: taller aspect ratio on mobile */
    .chart-container-lg {
        min-height: 280px;
    }

    .chart-container-md {
        min-height: 220px;
    }

    /* Activity feed: stack meta and details vertically on small screens */
    .activity-feed-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /* Drawer footer button full-width */
    .drawer-footer .btn {
        width: 100%;
        text-align: center;
    }

    /* Touch targets: ensure 44px minimum on interactive elements */
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm {
        min-height: 36px;
    }

    /* Pagination buttons touch-friendly */
    .pagination .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }

    /* Badge touch targets in drawer */
    .drawer-classification-badges .badge-size,
    .drawer-classification-badges .badge-status {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    /* Drawer section header stacks when needed */
    .drawer-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Classification hero section responsive */
    .classification-hero {
        padding: 1.5rem 1rem;
    }

    .classification-badges {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Responsive: Small Phone (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    :root {
        --container-padding: 0.75rem;
    }

    .main-nav {
        padding: 0 0.75rem;
    }

    .nav-brand a {
        font-size: 1.25rem;
    }

    /* Activity feed even more compact */
    .activity-feed-meta {
        font-size: 0.8rem;
    }

    .activity-feed-details {
        font-size: 0.8rem;
    }

    /* KPI resumo cards go 1-col */
    .resumo-cards {
        grid-template-columns: 1fr;
    }

    /* Revenue metric value smaller */
    .revenue-metric-value {
        font-size: 1.25rem;
    }

    /* Quadra values smaller padding */
    .drawer-quadra-values {
        padding: 0.75rem;
    }
}

/* ============================================================
   Empty State CTAs — KPI tabs
   ============================================================ */

/* Orange warning variant: "never created" empty state */
.empty-state-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    gap: 0.75rem;
}
.empty-state-cta--warning {
    background: color-mix(in srgb, var(--color-warning), transparent 92%);
    border: 1px solid color-mix(in srgb, var(--color-warning), transparent 70%);
    border-radius: var(--radius-md, 8px);
}
.empty-state-cta-icon {
    color: var(--color-warning);
}
.empty-state-cta-message {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.empty-state-cta-context {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Green calm variant: "exists but filtered out" empty state */
.empty-state-period {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 2rem;
    text-align: center;
    background: color-mix(in srgb, var(--color-success), transparent 95%);
    border: 1px solid color-mix(in srgb, var(--color-success), transparent 80%);
    border-radius: var(--radius-md, 8px);
    color: var(--color-success);
}
.empty-state-period-icon {
    color: var(--color-success);
}
.empty-state-period p {
    margin: 0;
    font-weight: 500;
}

/* Chart empty state inside chart card */
.chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 0.75rem;
    color: var(--color-text-muted);
}
.chart-empty-state p {
    margin: 0;
}

/* Disabled export button */
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto; /* Allow hover for tooltip */
}
.btn--disabled:hover {
    opacity: 0.5;
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
    header,
    footer,
    .hamburger-toggle,
    .mobile-menu,
    .mobile-menu-overlay,
    .drawer,
    .drawer-overlay,
    .toast-container,
    .skip-to-content,
    .nav-loading-bar,
    .filter-section,
    .pagination,
    .export-buttons,
    .btn-export,
    .btn-primary {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
    }

    a {
        text-decoration: none;
        color: #000;
    }
}

/* Phase 79 — Atividades title-bar actions */
.atividades-title-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.atividades-actions-menu {
    position: relative;
}

.atividades-actions-menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.25rem;
    user-select: none;
}

.atividades-actions-menu > summary::-webkit-details-marker {
    display: none;
}

.atividades-actions-menu > summary:hover {
    background: var(--color-bg-secondary);
}

.atividades-actions-menu[open] > summary {
    background: var(--color-bg-secondary);
    border-color: var(--color-primary);
}

.atividades-actions-menu__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 14rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 0.25rem 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.atividades-actions-menu__item {
    background: none;
    border: none;
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    display: block;
    width: 100%;
}

.atividades-actions-menu__item:hover,
.atividades-actions-menu__item:focus {
    background: var(--color-bg-secondary);
    outline: none;
}

/* Phase 79 — Activity import drawer form/result */
.activity-import-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.activity-import-form-controls {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.activity-import-file-input {
    flex: 1 1 auto;
    min-width: 14rem;
}

.activity-import-format-help {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}

.activity-import-format-help summary {
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}

.activity-import-result {
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.activity-import-result .import-summary {
    flex: 1 1 100%;
    margin: 0 0 var(--spacing-sm) 0;
}

.activity-import-result .import-error-details {
    flex: 1 1 100%;
    margin: 0 0 var(--spacing-sm) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
}

.activity-import-result .import-error-details summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.activity-import-result .import-error-list {
    margin: var(--spacing-sm) 0 0 0;
    padding-left: var(--spacing-lg);
    list-style: disc;
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.activity-import-result .import-error-list li {
    margin: var(--spacing-xs) 0;
}

/* ============================================================
   Phase 85 — User Management UI
   ============================================================ */

/* Role badges — extend .badge base class (padding/weight/font-size inherited) */
.badge-role-admin {
    background: var(--color-primary);
    color: white;
}

.badge-role-gerente {
    background: var(--color-success-hover);
    color: white;
}

.badge-role-marketing {
    background: var(--color-accent);   /* #9333ea — confirmed in :root */
    color: white;
}

/* "Gerente inativo" inline owner badge — extends .badge base for padding (0.25rem 0.5rem) */
.badge-gerente-inativo {
    background: var(--color-warning-light);    /* #fef3c7 */
    color: var(--color-warning-hover);         /* #f57c00 */
    border: 1px solid var(--color-warning);    /* #FF9800 */
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
    white-space: nowrap;
    /* padding, font-size, font-weight, border-radius, display inherited from .badge */
}

/* Role-change confirmation modal overlay */
.usuario-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: overlay-fade-in var(--transition-fast) ease;
}

@keyframes overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.usuario-modal__content {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.usuario-modal__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.usuario-modal__scope-impact {
    background: var(--color-alert-warning-bg);
    color: var(--color-alert-warning-text);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);   /* 8px / 16px — multiples of 4 */
    font-size: var(--font-size-sm);
    margin: var(--spacing-md) 0;
    line-height: 1.5;
}

.usuario-modal__footer {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
}

/* Copyable reset link block */
.reset-link-block {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);   /* 8px / 16px — multiples of 4 */
    margin: var(--spacing-sm) 0 var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.reset-link-block__code {
    font-family: monospace;
    font-size: var(--font-size-sm);
    word-break: break-all;
    color: var(--color-text-dark);
    flex: 1;
    min-width: 0;
}

/* Per-user drilldown panel */
.usuario-drilldown {
    padding: var(--spacing-md) var(--spacing-lg);   /* 16px / 24px — multiples of 4 */
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.usuario-drilldown__heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.usuario-drilldown__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.usuario-drilldown__empty {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) 0;   /* 16px — multiple of 4 */
}

/* WR-07: warning paragraph in drilldown (replaces inline style) */
.usuario-drilldown__warning {
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
}

/* Sub-view toggle (Lista / Sem gerente ativo) — mirrors .exclusion-mode-toggle */
.usuario-view-toggle {
    display: flex;
    gap: 0;
    margin-bottom: var(--spacing-md);
}

/* Issue 2 — Users table 6-column override (Phase 86 CLEAN-04) */
.settings-page .config-table.users-table th:nth-child(1) { width: 20%; }   /* Usuário */
.settings-page .config-table.users-table th:nth-child(2) { width: 25%; }   /* E-mail */
.settings-page .config-table.users-table th:nth-child(3) { width: 10%; }   /* Papel */
.settings-page .config-table.users-table th:nth-child(4) { width: 12%; }   /* Último acesso */
.settings-page .config-table.users-table th:nth-child(5) { width: 8%; }    /* Status */
.settings-page .config-table.users-table th:nth-child(6) { width: auto; }  /* Ações */

/* Issue 7 — Users tab class extractions (Phase 86 CLEAN-04) */
.users-table__username { font-weight: 500; }
.users-table__display-name { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.users-table__never { color: var(--color-text-muted); }
.users-table__actions { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; }
.users-table__empty-cell {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--spacing-lg);
}
.users-table__create-section { margin-top: var(--spacing-lg); }
.users-table__reatribuir-btn { margin-top: var(--spacing-xs); }

/* Issue 8 — collapsible create-user form (Phase 86 CLEAN-04) */
.create-user-details > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    margin-bottom: var(--spacing-md);
}

.create-user-details > summary::-webkit-details-marker { display: none; }

.create-user-details[open] > summary { margin-bottom: var(--spacing-md); }