/* ===== Tower Header (page title bar) ===== */

.tower-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tower-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-main);
}

.tower-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ===== SpartaSite Layout — Authenticated Sidebar ===== */

.sparta-wrapper {
    font-family: 'Instrument Sans', sans-serif;
}

.sparta-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

.sparta-content {
    flex: 1;
    padding: 0;
    margin-left: 280px;
    transition: var(--transition);
    min-height: 100vh;
}

/* Sidebar */
.sidebar-left {
    width: 280px;
    background-color: #0f172a;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
}

.sparta-brand {
    padding: 40px 30px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sparta-brand h2 {
    font-size: 1.4rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: 2px;
    color: white !important;
}

.sparta-brand span {
    color: var(--accent-amber);
    font-size: 0.75rem;
    display: block;
    margin-top: 5px;
    opacity: 0.9;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Menu */
.sparta-menu {
    flex: 1;
    padding: 20px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sparta-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    margin: 0 15px;
    border-radius: 8px;
}

.sparta-menu-item:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.05);
}

.sparta-menu-item.active {
    color: white !important;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, rgba(245, 158, 11, 0.15) 100%);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}

.sparta-menu-item i {
    width: 25px;
    text-align: center;
    margin-right: 15px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.4) !important;
}

.sparta-menu-item:hover i,
.sparta-menu-item.active i {
    color: var(--accent-amber) !important;
}

/* RC Feedback Alerts */
.sparta-rc-alerts {
    padding: 12px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rc-alerts-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rc-alerts-title i {
    animation: rc-pulse 1.5s ease-in-out infinite;
}
@keyframes rc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.rc-alert-link {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #38bdf8;
    text-decoration: none;
    padding: 3px 0;
    transition: color 0.15s;
}
.rc-alert-link:hover {
    color: #f59e0b;
}

/* Footer */
.sparta-footer {
    padding: 20px 25px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sparta-user-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
}

.user-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-right: 12px;
    flex: 1;
}

.user-name {
    color: white !important;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}

.user-role {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem;
    margin-top: 3px;
}

.user-avatar {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.btn-theme-toggle-sparta {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6) !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    margin-right: auto;
}

.btn-theme-toggle-sparta:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-sizing: border-box;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    color: white !important;
    border-color: #ef4444;
}

/* Scrollbar */
.sidebar-left::-webkit-scrollbar {
    width: 4px;
}

.sidebar-left::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-left::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* ===== MenuOption Layout (Nested under Sparta) ===== */
.option-header {
    padding: 25px 40px;
    background-color: var(--bg-card);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

body.dark-mode .option-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.option-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 15px;
    letter-spacing: -0.5px;
}

.option-desc {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-main);
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0;
}

.option-toolbar {
    padding: 12px 40px;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.02);
    overflow-x: auto;
    transition: var(--transition);
}

body.dark-mode .option-toolbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.15);
}

.btn-toolbar {
    background: var(--bg-card);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-main);
    opacity: 0.7;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-toolbar:hover {
    opacity: 1;
    transform: translateY(-1px);
    background: var(--bg-card);
    border-color: var(--accent-amber);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.btn-toolbar.active {
    opacity: 1;
    background: var(--accent-amber);
    color: white;
    border-color: var(--accent-amber);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.option-content {
    padding: 0 24px;
}

/* ===== Dashboard Specific Styles (GeneralHome) ===== */
.dashboard-container {
    padding: 30px;
    animation: fadeIn 0.5s ease;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 25px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.premium-card {
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.dark-mode .premium-card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

.card-header {
    padding: 24px 24px 0;
    margin-bottom: 20px;
}

.card-body {
    padding: 0 24px 24px;
    flex: 1;
}

.card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main);
    opacity: 0.8;
    letter-spacing: 1.5px;
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
}

body.dark-mode .card-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Stats Column */
.stats-col {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.stat-item {
    padding: 30px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-value {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.4;
    margin-top: 5px;
}

/* Premium Table Styles */
.premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.premium-table thead tr {
    background: rgba(0, 0, 0, 0.02);
}

body.dark-mode .premium-table thead tr {
    background: rgba(255, 255, 255, 0.03);
}

.premium-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-main);
    opacity: 0.5;
    padding: 12px 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.premium-table th:first-child {
    border-radius: 10px 0 0 10px;
}

.premium-table th:last-child {
    border-radius: 0 10px 10px 0;
}

.premium-table tbody tr {
    background: rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .premium-table tbody tr {
    background: rgba(255, 255, 255, 0.04);
}

.premium-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateX(4px);
}

body.dark-mode .premium-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cat-name {
    font-weight: 700;
    color: var(--text-main);
}

.cat-desc {
    opacity: 0.6;
    font-size: 0.85rem;
}

.premium-table td {
    padding: 18px 20px;
    font-size: 0.9rem;
}

.premium-table td:first-child {
    border-radius: 12px 0 0 12px;
}

.premium-table td:last-child {
    border-radius: 0 12px 12px 0;
}

.badge-count {
    background: var(--accent-amber);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
}

.full-width-card {
    grid-column: 1 / -1;
}

/* ===== QuickGrid / Catalog CRUD Styles ===== */
.catalog-container {
    padding: 30px;
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.catalog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.btn-add-record {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #001F3F;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.btn-add-record:hover {
    transform: translateY(-2px);
    background: #003366;
    box-shadow: 0 6px 18px rgba(0, 31, 63, 0.35);
}

/* QuickGrid Theming */
.quickgrid-container {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .quickgrid-container {
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.2);
}

.quickgrid-container table {
    width: 100%;
    border-collapse: collapse;
}

.quickgrid-container thead th,
.quickgrid-container .quickgrid[theme=default] > thead > tr > th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-main);
    opacity: 0.5;
    padding: 14px 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

body.dark-mode .quickgrid-container thead th,
body.dark-mode .quickgrid-container .quickgrid[theme=default] > thead > tr > th,
body.dark-mode .quickgrid[theme=default] > thead > tr > th {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.05);
    color: #f8fafc !important;
}

body.dark-mode .quickgrid[theme=default] thead th *,
body.dark-mode .quickgrid-container thead th * {
    color: #f8fafc !important;
}

.quickgrid-container thead th:hover {
    opacity: 0.8;
}

.quickgrid-container tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

body.dark-mode .quickgrid-container tbody tr,
body.dark-mode .quickgrid[theme=default] > tbody > tr {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

.quickgrid-container tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

body.dark-mode .quickgrid-container tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.quickgrid-container tbody td,
.quickgrid-container .quickgrid[theme=default] > tbody > tr > td {
    padding: 6px 20px;
    font-size: 0.9rem;
    color: var(--text-main);
}

/* Actions column */
.grid-actions {
    display: flex;
    gap: 8px;
}

.btn-grid-edit,
.btn-grid-delete {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-grid-edit {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.btn-grid-edit:hover {
    background: rgba(59, 130, 246, 0.2);
}

.btn-grid-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-grid-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Edit/Create Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-panel,
.modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.modal-content.modal-sm {
    max-width: 380px;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark-mode .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-main);
    opacity: 0.4;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.modal-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-main);
    opacity: 0.6;
    margin-bottom: 6px;
    display: block;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-amber);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* Uppercase input */
input.allcaps,
textarea.allcaps {
    text-transform: uppercase;
}

.modal-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

body.dark-mode .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.btn-save {
    padding: 10px 28px;
    background: var(--accent-amber);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-cancel {
    padding: 10px 28px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-cancel:hover {
    opacity: 0.7;
}

.modal-box {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 32px;
    width: 90%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

.modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-main);
}

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

.btn-danger {
    padding: 10px 28px;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Toast Messages */
.toast-msg {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    z-index: 3000;
    animation: slideInRight 0.3s ease, fadeOut 0.4s ease 2.6s forwards;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Modal action buttons */
.btn-modal-save {
    padding: 10px 28px;
    background: var(--accent-amber);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-modal-cancel {
    padding: 10px 28px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.dark-mode .btn-modal-cancel {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-modal-cancel:hover { opacity: 0.7; }

.btn-modal-delete {
    padding: 10px 28px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-delete:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Toast notifications */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    z-index: 9000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease;
}

.toast-success {
    background: #10b981;
    color: white;
}

.toast-error {
    background: #ef4444;
    color: white;
}

/* Active flag checkbox in grid */
.grid-badge-active {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.grid-badge-active.yes {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.grid-badge-active.no {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* QuickGrid pagination theming */
.quickgrid-container .paginator {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.quickgrid-container nav {
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    gap: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .quickgrid-container nav {
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* ===== Warranty Dashboard ===== */

.warranty-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

.stat-card {
    padding: 30px 24px;
    position: relative;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.4;
    margin-top: 8px;
}

.chart-container {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.badge-approved {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.badge-rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-premium {
    background: var(--accent-amber);
    color: #000;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    color: #000;
    text-decoration: none;
}

/* ===== Settings Form ===== */

.settings-section-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 32px 0 14px 0;
    color: var(--accent-amber);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section-title:first-child {
    margin-top: 0;
}

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

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-group.full-width {
    grid-column: 1 / -1;
}

.settings-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.5;
}

.settings-input,
.settings-textarea {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.85rem;
    transition: var(--transition);
    color: inherit;
    font-family: inherit;
}

body.dark-mode .settings-input,
body.dark-mode .settings-textarea {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.settings-input:focus,
.settings-textarea:focus {
    outline: none;
    border-color: var(--accent-amber);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.settings-textarea {
    resize: vertical;
    min-height: 80px;
}

.settings-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
}

.btn-save-settings {
    background: var(--accent-amber);
    color: #000;
    border: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-save-settings:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.btn-save-settings:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== Filter Bar ===== */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid rgba(0, 0, 0, 0.04);
    align-items: flex-end;
}

body.dark-mode .filter-bar {
    border-color: rgba(255, 255, 255, 0.04);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.4;
}

.filter-select,
.filter-input {
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.8rem;
    color: inherit;
    font-family: inherit;
    min-width: 160px;
}

body.dark-mode .filter-select,
body.dark-mode .filter-input {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--accent-amber);
}

.btn-filter {
    background: var(--accent-amber);
    color: #000;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* ===== Requests Tabs ===== */
.requests-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    padding: 0 20px;
    background: var(--card-bg);
    flex-wrap: wrap;
}

body.dark-mode .requests-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.requests-tab {
    padding: 12px 20px;
    border: none;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dark-mode .requests-tab {
    color: rgba(255, 255, 255, 0.4);
}

.requests-tab:hover {
    color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .requests-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}

.requests-tab.active {
    color: #001F3F;
    border-bottom-color: #001F3F;
}

body.dark-mode .requests-tab.active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}

.requests-tab-count {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
}

body.dark-mode .requests-tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
}

.requests-tab.active .requests-tab-count {
    background: #001F3F;
    color: white;
}

body.dark-mode .requests-tab.active .requests-tab-count {
    background: #38bdf8;
    color: #0f172a;
}

.tab-count-alert {
    background: #ef4444 !important;
    color: #fff !important;
    animation: pulse-alert 2s ease-in-out infinite;
}

@keyframes pulse-alert {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ===== Request View (WarrantyRequestView) ===== */

.request-view-container {
    padding: 0 16px 32px;
    max-width: 1400px;
}

.rview-loading, .rview-not-found {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 40px;
    font-size: 0.9rem;
    opacity: 0.6;
}

.rview-header-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.rview-folio {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.rview-folio-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.4;
}

.rview-folio-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent-amber);
    font-family: 'Bricolage Grotesque', sans-serif;
}

.rview-warranty-type-tag {
    display: inline-block;
    background: #334155;
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 8px;
}
[data-theme="dark"] .rview-warranty-type-tag {
    background: #475569;
}

.rview-header-actions {
    margin-left: auto;
}

.btn-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-main);
    opacity: 0.5;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.2s;
}

.btn-back-link:hover {
    color: var(--accent-amber);
    border-color: var(--accent-amber);
    opacity: 1;
}

.rview-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .rview-info-grid { grid-template-columns: 1fr; }
}

.rview-card {
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.rview-card-full {
    grid-column: 1 / -1;
}

.rview-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    opacity: 0.8;
}

.rview-info-msg {
    font-size: 0.82rem;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    line-height: 1.4;
}

body.dark-mode .rview-info-msg {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}

.rview-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}

.rview-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rview-field-full {
    grid-column: 1 / -1;
}

.rview-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999999;
}

.rview-value {
    font-size: 0.82rem;
    font-weight: 500;
}

.rview-desc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

@media (max-width: 1100px) {
    .rview-desc-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .rview-desc-grid { grid-template-columns: 1fr; }
}

.rview-desc-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999999;
    margin-bottom: 4px;
}

.rview-desc-text {
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    background: var(--bg-page);
    border-radius: 6px;
    padding: 8px 10px;
    min-height: 60px;
}

.rview-road-rescue {
    border-color: rgba(245,158,11,0.25);
}

/* Parts tabs */
.rview-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.rview-tab {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.75rem;
    color: var(--text-main);
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s;
}

.rview-tab.active {
    background: rgba(245,158,11,0.15);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    font-weight: 700;
    opacity: 1;
}

.rview-tab:hover:not(.active) {
    opacity: 0.8;
}

/* Tables inside request view */
.rview-table-wrap {
    overflow-x: auto;
}

.rview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.rview-table th {
    text-align: left;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.45;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.rview-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-color);
}

.rview-table tr:hover td {
    background: var(--bg-page);
}

.rview-table .text-right { text-align: right; }
.rview-table .text-center { text-align: center; }
.rview-empty { opacity: 0.4; font-style: italic; }

body.dark-mode .rview-table th {
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .rview-table td {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .rview-table tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

/* Totals */
.rview-totals-card .rview-totals-grid {
    max-width: 420px;
    margin-left: auto;
}

.rview-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.83rem;
}

.rview-grand-total {
    font-weight: 800;
    font-size: 1rem;
    color: var(--accent-amber);
    border-top: 2px solid rgba(245,158,11,0.3);
    border-bottom: none;
    margin-top: 4px;
    padding-top: 10px;
}

/* Resolution & Revert cards */
.rview-resolution-card {
    border-color: rgba(56,189,248,0.2);
}

.rview-revert-card {
    border-color: rgba(245,158,11,0.15);
}

.rview-resolution-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rview-resolution-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rview-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s;
}

.rview-radio-label input[type="radio"] { display: none; }

.rview-radio-label.selected.approved {
    background: rgba(34,197,94,0.12);
    border-color: #22c55e;
    color: #22c55e;
    font-weight: 700;
}

.rview-radio-label.selected.rejected {
    background: rgba(239,68,68,0.12);
    border-color: #ef4444;
    color: #ef4444;
    font-weight: 700;
}

.rview-radio-label.selected.returned {
    background: rgba(245,158,11,0.12);
    border-color: #f59e0b;
    color: #f59e0b;
    font-weight: 700;
}

.rview-radio-label:hover:not(.selected) {
    border-color: var(--accent-amber);
    background: var(--bg-page);
}

.rview-textarea {
    width: 100%;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    padding: 10px 12px;
    font-size: 0.83rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.rview-textarea:focus {
    border-color: var(--accent-amber);
}

.rview-resolution-actions {
    display: flex;
    gap: 10px;
}

.btn-revert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: rgba(245,158,11,0.15);
    border: 1px solid var(--accent-amber);
    border-radius: 8px;
    color: var(--accent-amber);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-revert:hover:not(:disabled) {
    background: rgba(245,158,11,0.25);
}

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

/* File lists inside cards */
.rview-file-list {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-page);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.rview-file-list-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.6;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rview-file-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
}

.rview-file-link:hover {
    text-decoration: underline;
}

.rview-file-link-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
}

.rview-file-link-inline:hover {
    text-decoration: underline;
}

/* Evidence grid */
.rview-evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 700px) {
    .rview-evidence-grid { grid-template-columns: 1fr; }
}

.rview-evidence-cell {
    padding: 10px;
    background: var(--bg-page);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.rview-evidence-title {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 8px;
    opacity: 0.7;
}

.rview-evidence-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rview-evidence-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    text-decoration: none;
    color: var(--text-main);
}

.rview-evidence-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rview-evidence-thumb:hover {
    border-color: var(--accent-amber);
    box-shadow: 0 0 0 2px rgba(245,158,11,0.2);
}

/* ===== China Claim Detail — Legacy Form Layout ===== */
.claim-container {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 20px auto;
    color: #333;
    font-family: 'Poppins', 'Instrument Sans', sans-serif;
}

.claim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #001F3F;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.claim-header h2 {
    margin: 0;
    color: #001F3F;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.3rem;
}

.claim-section-title {
    background-color: #001F3F;
    color: white;
    padding: 8px 15px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.claim-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 1rem;
}

.claim-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.claim-form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.claim-spanish-label {
    font-style: italic;
    color: #888;
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.claim-form-control {
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.95rem;
    background-color: #F9F9F9;
    transition: border-color 0.2s;
    color: #333;
    outline: none;
    width: 100%;
}

.claim-form-control:focus {
    border-color: #003366;
    background-color: #fff;
}

.claim-form-control[readonly] {
    background-color: #eee;
    color: #555;
}

textarea.claim-form-control {
    resize: vertical;
}

.claim-table-wrap {
    overflow-x: auto;
}

.claim-parts-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.claim-parts-table th,
.claim-parts-table td {
    border: 1px solid #CCCCCC;
    padding: 10px;
    text-align: left;
    font-size: 0.9rem;
}

.claim-parts-table th {
    background-color: #f2f2f2;
    font-weight: 600;
}

/* Evidence gallery — grid of cards */
.claim-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 1rem;
}

.claim-evidence-card {
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.claim-evidence-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.claim-evidence-img-link {
    display: block;
    text-decoration: none;
}

.claim-evidence-video-placeholder {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #999;
    font-size: 2.5rem;
}

.claim-evidence-title {
    padding: 8px;
    font-size: 0.8rem;
    text-align: center;
    border-top: 1px solid #CCCCCC;
    background: #f8f8f8;
    font-weight: 500;
}

/* Action buttons footer — Red, Dotted, Navy, Green */
.claim-actions-footer {
    margin-top: 3rem;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
    flex-wrap: wrap;
}

.claim-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity 0.2s;
}

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

.claim-btn-danger {
    background: #dc3545;
    color: #fff;
}

.claim-btn-dotted {
    background: transparent;
    color: #6c757d;
    border: 1px dashed gray;
}

.claim-btn-primary {
    background: #001F3F;
    color: #fff;
}

.claim-btn-success {
    background: #28a745;
    color: #fff;
}

.claim-btn-secondary {
    background: #6c757d;
    color: #fff;
}

.claim-btn-info-sm {
    background: #17a2b8;
    color: #fff;
    padding: 4px 12px;
    font-size: 0.8rem;
    border-radius: 4px;
}

/* Image modal */
.claim-modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.claim-modal-content {
    display: block;
    max-width: 90%;
    max-height: 90%;
}

.claim-modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

@media (max-width: 700px) {
    .claim-form-row { flex-direction: column; gap: 10px; }
    .claim-container { padding: 1rem; }
    .claim-evidence-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
    .claim-container { box-shadow: none; margin: 0; padding: 0; }
    .claim-actions-footer { display: none; }
}

/* rview styles use CSS vars from daissy-core.css — auto light/dark */

/* ===== China Claims Tabs ===== */

.china-tabs {
    display: flex;
    gap: 4px;
    margin: 20px 0 0;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.china-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    color: var(--text-main);
    opacity: 0.45;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.china-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
    opacity: 1;
}

.china-tab:hover:not(.active) {
    opacity: 0.7;
}

.china-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    background: rgba(56,189,248,0.15);
    border-radius: 10px;
    padding: 0 5px;
    font-size: 0.65rem;
    color: #38bdf8;
    font-weight: 800;
}

/* badge-returned */
.badge-returned {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.3);
}

/* badge-draft — neutral gray */
.badge-draft {
    background: rgba(100,116,139,0.12);
    color: #64748b;
    border: 1px solid rgba(100,116,139,0.25);
}

/* badge-info — sky blue (scheduled, arrival, new, sent, deliver) */
.badge-info {
    background: rgba(56,189,248,0.12);
    color: #0ea5e9;
    border: 1px solid rgba(56,189,248,0.25);
}

/* badge-teal — inspection */
.badge-teal {
    background: rgba(20,184,166,0.12);
    color: #14b8a6;
    border: 1px solid rgba(20,184,166,0.25);
}

/* badge-indigo — parts identification, receive parts */
.badge-indigo {
    background: rgba(99,102,241,0.12);
    color: #6366f1;
    border: 1px solid rgba(99,102,241,0.25);
}

/* badge-purple — diagnostic */
.badge-purple {
    background: rgba(168,85,247,0.12);
    color: #a855f7;
    border: 1px solid rgba(168,85,247,0.25);
}

/* badge-sky — reverted (lighter variant) */
.badge-sky {
    background: rgba(14,165,233,0.12);
    color: #38bdf8;
    border: 1px solid rgba(14,165,233,0.25);
}

[data-theme="light"] .china-tab {
    color: rgba(15,23,42,0.4);
}

[data-theme="light"] .china-tab.active {
    color: #0ea5e9;
    border-bottom-color: #0ea5e9;
}

/* ===== Massive Upload ===== */
.massive-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
    animation: fadeInUp 0.4s ease;
}

.massive-card {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

body.dark-mode .massive-card {
    background: var(--bg-card);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.massive-header {
    border-bottom: 3px solid #001F3F;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
}

.massive-header i {
    color: #001F3F;
    font-size: 2rem;
}

.massive-header h2 {
    color: #001F3F;
    font-weight: 700;
    margin: 0;
    font-size: 1.3rem;
}

body.dark-mode .massive-header {
    border-bottom-color: var(--accent-amber);
}

body.dark-mode .massive-header i,
body.dark-mode .massive-header h2 {
    color: var(--text-main);
}

.massive-guidelines {
    background-color: #fffaf0;
    border-left: 5px solid #ed8936;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 4px;
}

body.dark-mode .massive-guidelines {
    background-color: rgba(237, 137, 54, 0.08);
    border-left-color: #f59e0b;
}

.massive-guidelines-title {
    font-weight: 700;
    color: #c05621;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

body.dark-mode .massive-guidelines-title {
    color: #f59e0b;
}

.massive-guidelines ul {
    margin: 0;
    padding-left: 20px;
    color: #744210;
    font-size: 0.9rem;
    line-height: 1.7;
}

body.dark-mode .massive-guidelines ul {
    color: rgba(255, 255, 255, 0.7);
}

.massive-sample-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.85rem;
}

.massive-sample-table th {
    background-color: #e2e8f0;
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #cbd5e0;
    font-weight: 700;
}

body.dark-mode .massive-sample-table th {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.massive-sample-table td {
    background-color: #fff;
    padding: 8px 12px;
    border: 1px solid #cbd5e0;
}

body.dark-mode .massive-sample-table td {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.massive-upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    background-color: #edf2f7;
    margin-bottom: 24px;
}

body.dark-mode .massive-upload-section {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.massive-upload-section .upload-icon {
    font-size: 2.5rem;
    color: #a0aec0;
}

body.dark-mode .massive-upload-section .upload-icon {
    color: rgba(255, 255, 255, 0.3);
}

.massive-upload-section .upload-hint {
    font-size: 0.8rem;
    color: #718096;
}

body.dark-mode .massive-upload-section .upload-hint {
    color: rgba(255, 255, 255, 0.4);
}

.massive-result {
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.massive-result.success {
    background-color: #f0fff4;
    border: 1px solid #c6f6d5;
    color: #2f855a;
}

body.dark-mode .massive-result.success {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.massive-result.error {
    background-color: #fff5f5;
    border: 1px solid #fed7d7;
    color: #c53030;
}

body.dark-mode .massive-result.error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.massive-result-icon {
    font-size: 1.5rem;
}

.massive-result-title {
    font-weight: 700;
}

/* ===== China Email Page ===== */
.china-email-form { display: flex; flex-direction: column; gap: 18px; }
.china-email-field { display: flex; flex-direction: column; gap: 6px; }
.china-email-field label { font-weight: 600; font-size: 0.85rem; }
.china-docx-card { background: var(--bg-page, #f8fafc); border: 2px dashed var(--border-color, #cbd5e0); border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 20px; }
.china-docx-icon { font-size: 2.5rem; color: #2b579a; }
.btn-send { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: #16a34a; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: 0.95rem; transition: background 0.2s; }
.btn-send:hover { background: #15803d; color: #fff; }

/* China Email Body: read-only preview with inline editable textarea */
.china-email-preview {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.china-email-preview table { max-width: 100%; }
.china-email-usertext-inline {
    padding: 0 35px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.china-email-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 2px dashed #cbd5e0;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: #fafbfc;
    resize: vertical;
    font-family: inherit;
}
.china-email-usertext-inline .china-email-textarea:focus {
    border-color: #f59e0b;
    outline: none;
    background: #fff;
}
body.dark-mode .china-email-preview {
    background: #1a1a2e;
    border-color: #334155;
}
body.dark-mode .china-email-usertext-inline .china-email-textarea {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

/* ===== China Email Log Viewer ===== */
.china-log-body { background: var(--bg-page, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 24px; min-height: 200px; overflow-x: auto; }

/* ===== Dealer Home Dashboard ===== */
.dlr-home-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px; max-width: 480px; }
.dlr-home-chart-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 24px; }
.dlr-home-chart-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 16px; }
[data-theme="dark"] .dlr-home-chart-card, .dark-mode .dlr-home-chart-card { background: var(--bg-card, #1e293b); border-color: var(--border-color, #334155); }

/* ===== Dealer Warranty Edit ===== */

.dealer-edit-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    animation: fadeInUp 0.4s ease;
}

.dealer-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.dealer-edit-grid-1col {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .dealer-edit-grid { grid-template-columns: 1fr; }
}

.dealer-edit-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dealer-edit-field-full {
    grid-column: 1 / -1;
}

.dealer-edit-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dealer-edit-input {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9rem;
    background: var(--bg-page, #fff);
    color: var(--text-main, #0f172a);
    transition: border-color 0.2s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.dealer-edit-input:focus {
    border-color: var(--accent-amber, #f59e0b);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

body.dark-mode .dealer-edit-input {
    background: var(--bg-card, #1e293b);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-main, #f8fafc);
}

textarea.dealer-edit-input {
    resize: vertical;
}

select.dealer-edit-input {
    appearance: auto;
}

.dealer-edit-add-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px;
    background: var(--bg-page, #f8fafc);
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 8px;
}

body.dark-mode .dealer-edit-add-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.dealer-edit-select-wide {
    min-width: 250px;
    flex: 1;
}

.dealer-edit-input-sm {
    width: 100px !important;
    min-width: 80px;
    flex: 0 0 auto;
}

.dealer-edit-calc {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-amber, #f59e0b);
    min-width: 80px;
    text-align: right;
}

.dealer-edit-btn-del {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.dealer-edit-btn-del:hover {
    background: rgba(239, 68, 68, 0.1);
}

.dealer-edit-btn-del:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dealer-edit-btn-del-sm {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.dealer-edit-evidence-thumb-wrap:hover .dealer-edit-btn-del-sm {
    opacity: 1;
}

/* PDI documentation info box */
.pdi-docs-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.pdi-docs-info-header {
    font-weight: 600;
    font-size: 0.92rem;
    color: #1e40af;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pdi-docs-info-list {
    margin: 0;
    padding-left: 22px;
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.7;
}
.pdi-docs-info-list li::marker { color: #3b82f6; }
[data-theme="dark"] .pdi-docs-info {
    background: #1e293b;
    border-color: #334155;
    border-left-color: #3b82f6;
}
[data-theme="dark"] .pdi-docs-info-header { color: #60a5fa; }
[data-theme="dark"] .pdi-docs-info-list { color: #cbd5e1; }

/* Evidence grid */
.dealer-edit-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .dealer-edit-evidence-grid { grid-template-columns: 1fr; }
}

.dealer-edit-evidence-cell {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    background: var(--bg-page, #f8fafc);
}

body.dark-mode .dealer-edit-evidence-cell {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.dealer-edit-evidence-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-bottom: 8px;
    line-height: 1.3;
}

.dealer-edit-evidence-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.dealer-edit-evidence-thumb-wrap {
    position: relative;
    width: 70px;
    height: 70px;
}

.dealer-edit-evidence-thumb-wrap .rview-evidence-thumb {
    width: 70px;
    height: 70px;
}

.dealer-edit-evidence-thumb-wrap .rview-evidence-thumb img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

.dealer-edit-evidence-upload {
    margin-top: 6px;
}

.dealer-edit-evidence-upload input[type="file"],
.dealer-edit-upload-row input[type="file"] {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

.dealer-edit-upload-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Autocomplete dropdown for part selection */
.dealer-autocomplete-wrap {
    position: relative;
}

.dealer-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dealer-autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.dealer-autocomplete-item:hover,
.dealer-autocomplete-item.active {
    background: #f0f9ff;
    color: #0369a1;
}

.dealer-autocomplete-item strong {
    color: #0f172a;
}

/* Dark mode overrides */
[data-theme="dark"] .dealer-autocomplete-dropdown {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .dealer-autocomplete-item {
    color: #e2e8f0;
    border-bottom-color: #334155;
}

[data-theme="dark"] .dealer-autocomplete-item:hover {
    background: #334155;
    color: #38bdf8;
}

[data-theme="dark"] .dealer-autocomplete-item strong {
    color: #f8fafc;
}

/* Client type tag in autocomplete dropdown */
.cal-client-type-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.cal-tag-dealer {
    background: #dbeafe;
    color: #1e40af;
}
.cal-tag-customer {
    background: #d1fae5;
    color: #065f46;
}
[data-theme="dark"] .cal-tag-dealer {
    background: #1e3a5f;
    color: #93c5fd;
}
[data-theme="dark"] .cal-tag-customer {
    background: #064e3b;
    color: #6ee7b7;
}


/* ===== Field Engineering Home ===== */
.fe-home-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 24px auto 0;
}
.fe-home-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 24px 28px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fe-home-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(245,158,11,0.12);
    transform: translateY(-2px);
}
.fe-home-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}
.fe-home-card-body {
    flex: 1;
    min-width: 0;
}
.fe-home-card-body h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.fe-home-card-body p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.4;
}
.fe-home-arrow {
    color: #cbd5e1;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: color 0.2s;
}
.fe-home-card:hover .fe-home-arrow {
    color: #f59e0b;
}
body.dark-mode .fe-home-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .fe-home-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 16px rgba(245,158,11,0.15);
}
body.dark-mode .fe-home-card-body h3 {
    color: #f1f5f9;
}
body.dark-mode .fe-home-card-body p {
    color: #94a3b8;
}
body.dark-mode .fe-home-arrow {
    color: #475569;
}

/* ===== Profile Page ===== */

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    width: 100%;
}

.profile-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.profile-card {
    padding: 24px !important;
}

.profile-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-main);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.profile-card-title i {
    color: #f59e0b;
    margin-right: 8px;
}

body.dark-mode .profile-card-title {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.profile-card-body {
    display: flex;
    flex-direction: column;
}

.profile-avatar-lg {
    width: 120px;
    height: 120px;
    min-width: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.profile-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

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

.profile-action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.profile-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.35);
}

body.dark-mode .profile-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

body.dark-mode .profile-btn:hover {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

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

.profile-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.profile-message {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 8px;
}

.profile-message.success {
    color: #065f46;
    background: rgba(16, 185, 129, 0.1);
}

.profile-message.error {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.1);
}

body.dark-mode .profile-message.success {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
}

body.dark-mode .profile-message.error {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

/* Section labels (used in activity + charts) */
.profile-section-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    margin-bottom: 12px;
}

.profile-section-label i {
    color: #f59e0b;
    margin-right: 6px;
}

/* Activity split */
.profile-activity-split {
    display: flex;
    gap: 24px;
}

.profile-activity-half {
    flex: 1;
    min-width: 0;
}

/* Tables */
.profile-table-wrap {
    background: rgba(0, 0, 0, 0.015);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

body.dark-mode .profile-table-wrap {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}

.profile-compact-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.profile-compact-table th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #64748b);
    padding: 8px 10px;
    border-bottom: 2px solid rgba(245, 158, 11, 0.2);
    text-align: left;
}

.profile-compact-table th i {
    color: #f59e0b;
    margin-right: 4px;
    font-size: 0.65rem;
}

body.dark-mode .profile-compact-table th {
    border-bottom-color: rgba(245, 158, 11, 0.15);
}

.profile-compact-table tbody tr {
    transition: background 0.15s ease;
}

.profile-compact-table tbody tr:hover {
    background: rgba(245, 158, 11, 0.04);
}

body.dark-mode .profile-compact-table tbody tr:hover {
    background: rgba(245, 158, 11, 0.06);
}

.profile-compact-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--text-main);
    font-size: 0.78rem;
}

body.dark-mode .profile-compact-table td {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.profile-date-cell {
    color: var(--text-secondary, #64748b);
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.75rem !important;
}

.profile-empty-cell {
    text-align: center;
    opacity: 0.5;
    padding: 16px !important;
}

.profile-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    margin-right: 6px;
}

.profile-count-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 2px 10px;
    border-radius: 12px;
}

body.dark-mode .profile-count-badge {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* Charts — stacked vertically */
.profile-charts-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.profile-chart-block {
    width: 100%;
}

@media (max-width: 1100px) {
    .profile-row-2col {
        grid-template-columns: 1fr;
    }
    .profile-form-grid {
        grid-template-columns: 1fr 1fr;
    }
    .profile-activity-split {
        flex-direction: column;
    }
}

/* ============================================================
   CALENDAR — Activity Calendar (.cal-*)
   ============================================================ */

/* -- Legend Strip -- */
.cal-legend-strip {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    flex-wrap: wrap;
    align-items: center;
}
.cal-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: #334155;
    transition: all 0.2s;
}
.cal-chip:hover {
    border-color: var(--chip-color, #3B82F6);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color, #3B82F6) 20%, transparent);
}
.cal-chip.active {
    border-color: var(--chip-color, #3B82F6);
    background: color-mix(in srgb, var(--chip-color, #3B82F6) 12%, white);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-color, #3B82F6) 25%, transparent);
}
.cal-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}
.cal-chip-initials {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
}
.cal-chip-label {
    white-space: nowrap;
}

/* -- Nav Bar -- */
.cal-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 6px;
}
.cal-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    color: #334155;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.cal-btn:hover {
    background: #e2e8f0;
}
.cal-month-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    padding: 0 8px;
    user-select: none;
}
.cal-month-input {
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.85rem;
}
.cal-today-btn {
    font-weight: 600;
    color: #3B82F6;
    border-color: #3B82F6;
    background: #eff6ff;
}
.cal-today-btn:hover {
    background: #dbeafe;
}
.cal-add-btn {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.cal-add-btn:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}
.cal-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* -- Calendar Grid -- */
.cal-grid-wrap {
    border: 3px solid #1e293b;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    margin: 24px 0;
}
.cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.cal-header-cell {
    padding: 10px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.05em;
}
.cal-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 110px;
}
.cal-cell {
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 4px 6px;
    position: relative;
    min-height: 100px;
    overflow: visible;
}
.cal-cell:last-child {
    border-right: none;
}
.cal-cell-out {
    background: #fafbfc;
}
.cal-cell-out .cal-day-number {
    opacity: 0.35;
}
.cal-cell-today {
    background: #eff6ff;
}
.cal-day-number {
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
}
.cal-today-circle {
    background: #3B82F6;
    color: #fff;
    border-radius: 50%;
}
.cal-cell-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    position: relative;
    overflow: visible;
}

/* -- Event Chips -- */
.cal-event-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ev-color, #3B82F6) 12%, white);
    border-left: 3px solid var(--ev-color, #3B82F6);
    cursor: pointer;
    font-size: 0.7rem;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s;
    min-height: 22px;
    margin: 3px 0;
    position: relative;
    z-index: 2;
}
.cal-event-chip:hover {
    background: color-mix(in srgb, var(--ev-color, #3B82F6) 22%, white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.cal-event-completed {
    border-left-color: #22c55e;
    background: color-mix(in srgb, #22c55e 8%, white);
}
.cal-event-overdue-warn { }  /* deprecated — overdue now uses dot indicator */
.cal-event-overdue-crit { }  /* deprecated — overdue now uses dot indicator */
@keyframes cal-pulse-red {
    0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 12px rgba(239, 68, 68, 0.45); }
}
.cal-check {
    color: #22c55e;
    font-size: 0.65rem;
}
.cal-chip-title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* -- Create/Edit Form -- */
.cal-create-form {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 12px 0;
    animation: cal-slide-in 0.25s ease-out;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
@keyframes cal-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.cal-create-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.cal-create-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.cal-create-body {
    padding: 16px 20px;
}
.cal-create-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #f1f5f9;
}
.cal-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}
.cal-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cal-form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cal-form-full {
    flex: 3;
}
.cal-form-input {
    padding: 8px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.cal-form-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
select.cal-form-input {
    cursor: pointer;
}
textarea.cal-form-input {
    resize: vertical;
    font-family: inherit;
}

/* -- Tasks Section -- */
.cal-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.cal-tasks-header span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
}
.cal-add-task-btn {
    background: none;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.cal-add-task-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
}
.cal-task-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.cal-task-row .cal-form-input {
    flex: 1;
}
.cal-remove-task-btn {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}
.cal-remove-task-btn:hover {
    background: #fef2f2;
}

/* -- Detail Panel (slide from right) -- */
.cal-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
}
.cal-detail-panel {
    width: 420px;
    max-width: 90vw;
    background: #fff;
    height: 100vh;
    overflow-y: auto;
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    animation: cal-slide-right 0.25s ease-out;
}
@keyframes cal-slide-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.cal-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 20px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.cal-detail-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
}
.cal-detail-body {
    padding: 20px;
}
.cal-detail-row {
    margin-bottom: 16px;
}
.cal-detail-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #334155;
}
.cal-detail-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.cal-detail-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 12px;
}
.cal-detail-client {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #334155;
    margin-bottom: 12px;
}
.cal-detail-overdue {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: #92400e;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-detail-desc {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.cal-detail-tasks-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.cal-detail-task-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #475569;
}
.cal-progress-bar {
    width: 60px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.cal-progress-fill {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
    transition: width 0.3s;
}
.cal-progress-text {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
    min-width: 30px;
}
.cal-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.cal-status-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    border: none;
}
.cal-status-progress {
    background: #dbeafe;
    color: #1d4ed8;
}
.cal-status-progress:hover {
    background: #bfdbfe;
}
.cal-status-complete {
    background: #dcfce7;
    color: #15803d;
}
.cal-status-complete:hover {
    background: #bbf7d0;
}
.cal-status-delete {
    background: #fef2f2;
    color: #dc2626;
}
.cal-status-delete:hover {
    background: #fee2e2;
}

/* -- Dark mode -- */
body.dark-mode .cal-chip {
    border-color: #334155;
    background: #1e293b;
    color: #e2e8f0;
}
body.dark-mode .cal-chip.active {
    background: color-mix(in srgb, var(--chip-color, #3B82F6) 20%, #1e293b);
}
body.dark-mode .cal-btn {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}
body.dark-mode .cal-btn:hover {
    background: #334155;
}
body.dark-mode .cal-month-label {
    color: #f8fafc;
}
body.dark-mode .cal-today-btn {
    background: rgba(59, 130, 246, 0.15);
}
body.dark-mode .cal-add-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
body.dark-mode .cal-add-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
body.dark-mode .cal-grid-wrap {
    border: 3px solid #e2e8f0;
    background: #0f172a;
}
body.dark-mode .cal-header-row {
    background: #1e293b;
    border-bottom-color: #334155;
}
body.dark-mode .cal-header-cell {
    color: #94a3b8;
}
body.dark-mode .cal-cell {
    border-color: #1e293b;
}
body.dark-mode .cal-cell-out {
    background: #0c1222;
}
body.dark-mode .cal-cell-today {
    background: rgba(59, 130, 246, 0.08);
}
body.dark-mode .cal-day-number {
    color: #e2e8f0;
}
body.dark-mode .cal-event-chip {
    background: color-mix(in srgb, var(--ev-color, #3B82F6) 18%, #1e293b);
    color: #e2e8f0;
}
body.dark-mode .cal-event-chip:hover {
    background: color-mix(in srgb, var(--ev-color, #3B82F6) 28%, #1e293b);
}
body.dark-mode .cal-event-completed {
    background: color-mix(in srgb, #22c55e 12%, #1e293b);
}
body.dark-mode .cal-create-form {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .cal-create-header {
    border-bottom-color: #334155;
}
body.dark-mode .cal-create-header h3 {
    color: #f8fafc;
}
body.dark-mode .cal-create-footer {
    border-top-color: #334155;
}
body.dark-mode .cal-form-group label {
    color: #94a3b8;
}
body.dark-mode .cal-form-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}
body.dark-mode .cal-form-input:focus {
    border-color: #f59e0b;
}
body.dark-mode .cal-tasks-header {
    border-top-color: #334155;
}
body.dark-mode .cal-tasks-header span {
    color: #e2e8f0;
}
body.dark-mode .cal-add-task-btn {
    border-color: #475569;
    color: #94a3b8;
}
body.dark-mode .cal-detail-panel {
    background: #1e293b;
}
body.dark-mode .cal-detail-header {
    border-bottom-color: #334155;
}
body.dark-mode .cal-detail-header h3 {
    color: #f8fafc;
}
body.dark-mode .cal-detail-avatar-wrap {
    color: #e2e8f0;
}
body.dark-mode .cal-detail-dates {
    color: #94a3b8;
}
body.dark-mode .cal-detail-client {
    color: #e2e8f0;
}
body.dark-mode .cal-detail-overdue {
    background: rgba(251, 191, 36, 0.12);
    border-color: #92400e;
    color: #fbbf24;
}
body.dark-mode .cal-detail-desc {
    color: #cbd5e1;
}
body.dark-mode .cal-detail-tasks-title {
    color: #e2e8f0;
    border-top-color: #334155;
}
body.dark-mode .cal-detail-task-row {
    color: #cbd5e1;
}
body.dark-mode .cal-progress-bar {
    background: #334155;
}
body.dark-mode .cal-detail-actions {
    border-top-color: #334155;
}
body.dark-mode .cal-status-progress {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}
body.dark-mode .cal-status-complete {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}
body.dark-mode .cal-status-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

/* -- Duration label -- */
.cal-duration-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3B82F6;
    white-space: nowrap;
    min-width: 55px;
}

/* -- Task row with description -- */
.cal-task-row-wrap {
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background: #fafbfc;
}
.cal-task-desc {
    margin-top: 6px;
    font-size: 0.8rem;
}

/* -- Quick Reference Section -- */
.cal-ref-section {
    margin-top: 24px;
    padding-bottom: 24px;
}
.cal-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cal-ref-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.cal-ref-card-wide {
    grid-column: span 2;
}
.cal-ref-card-title {
    padding: 12px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-ref-card-title i {
    color: #64748b;
}
.cal-ref-card-body {
    padding: 12px 16px;
}
.cal-ref-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: #334155;
}
.cal-ref-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cal-ref-hex {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
    font-family: monospace;
}
.cal-ref-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.8rem;
}
.cal-ref-config-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
}
.cal-ref-config-value {
    font-weight: 700;
    color: #0f172a;
}
.cal-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.cal-ref-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
}
.cal-ref-table td {
    padding: 8px 10px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}
.cal-ref-table tr:last-child td {
    border-bottom: none;
}
.cal-ref-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}
.cal-ref-count-ok {
    background: #dcfce7;
    color: #15803d;
}
.cal-ref-count-prog {
    background: #fef3c7;
    color: #92400e;
}
.cal-ref-count-sched {
    background: #dbeafe;
    color: #1d4ed8;
}
.cal-ref-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.cal-ref-status-count {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

/* -- Quick Reference dark mode -- */
body.dark-mode .cal-duration-label {
    color: #60a5fa;
}
body.dark-mode .cal-task-row-wrap {
    border-color: #334155;
    background: #0f172a;
}
body.dark-mode .cal-ref-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .cal-ref-card-title {
    color: #f8fafc;
    border-bottom-color: #334155;
}
body.dark-mode .cal-ref-card-title i {
    color: #94a3b8;
}
body.dark-mode .cal-ref-color-row {
    color: #e2e8f0;
}
body.dark-mode .cal-ref-config-label {
    color: #e2e8f0;
}
body.dark-mode .cal-ref-config-value {
    color: #f8fafc;
}
body.dark-mode .cal-ref-table th {
    color: #94a3b8;
    border-bottom-color: #334155;
}
body.dark-mode .cal-ref-table td {
    color: #e2e8f0;
    border-bottom-color: #334155;
}
body.dark-mode .cal-ref-status-count {
    color: #f8fafc;
}
body.dark-mode .cal-ref-count-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
body.dark-mode .cal-ref-count-prog {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
}
body.dark-mode .cal-ref-count-sched {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Calendar responsive */
@media (max-width: 768px) {
    .cal-form-row {
        flex-direction: column;
        gap: 10px;
    }
    .cal-detail-panel {
        width: 100vw;
    }
    .cal-cell {
        min-height: 70px;
        padding: 2px 3px;
    }
    .cal-event-chip {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
    .cal-chip-avatar,
    .cal-chip-initials {
        display: none;
    }
    .cal-legend-strip {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
    }
}

/* ── Calendar: View Toggle ── */
.cal-view-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    margin-left: 8px;
}
.cal-view-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    background: transparent;
    color: #64748b;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
}
.cal-view-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.cal-view-btn.active {
    background: #1e3a5f;
    color: #fff;
}
body.dark-mode .cal-view-toggle {
    border-color: #334155;
}
body.dark-mode .cal-view-btn {
    color: #94a3b8;
}
body.dark-mode .cal-view-btn:hover {
    background: #1e293b;
    color: #e2e8f0;
}
body.dark-mode .cal-view-btn.active {
    background: #f59e0b;
    color: #0f172a;
}

/* ── Calendar: Continuation bars (multi-day events) ── */
.cal-event-continue {
    height: 6px;
    border-radius: 3px;
    margin: 1px 0;
    opacity: 0.7;
    background: var(--ev-color, #3B82F6);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.cal-event-continue:hover {
    opacity: 1;
}

/* ── Calendar: Spanning layout (month + week) ── */
.cal-week-span-row .cal-cell {
    overflow: visible;
}
.cal-week-span-row .cal-cell-events {
    overflow: visible;
    position: relative;
}
.cal-event-spacer {
    height: 22px;
    margin: 3px 0;
    pointer-events: none;
    visibility: hidden;
}

/* ── Calendar: Overdue dot indicator ── */
.cal-overdue-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    cursor: help;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.cal-overdue-dot-lg {
    width: 12px;
    height: 12px;
}
.cal-overdue-warn {
    background: #d97706;
}
.cal-overdue-crit {
    background: #ef4444;
    animation: cal-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes cal-dot-pulse {
    0%, 100% { box-shadow: 0 0 3px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.7); }
}
body.dark-mode .cal-overdue-dot {
    border-color: rgba(0, 0, 0, 0.4);
}

/* ── Tooltip (JS-powered, appended to body) ── */
.sparta-tooltip {
    position: absolute;
    background: #1e293b;
    color: #f8fafc;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: pre-line;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    max-width: 240px;
}
.sparta-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1e293b;
}
.sparta-tooltip.visible { opacity: 1; }
body.dark-mode .sparta-tooltip {
    background: #f1f5f9;
    color: #0f172a;
}
body.dark-mode .sparta-tooltip::after {
    border-top-color: #f1f5f9;
}

/* ── Calendar: Holiday cells ── */
.cal-cell-holiday {
    background: #f1f5f9 !important;
}
.cal-cell-holiday .cal-day-number {
    position: relative;
    cursor: help;
    border-bottom: 1px dashed #94a3b8;
}
body.dark-mode .cal-cell-holiday {
    background: #1a2332 !important;
}

/* ── Calendar: Day View ── */
.cal-day-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
}
.cal-day-holiday-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #92400e;
}
body.dark-mode .cal-day-holiday-banner {
    background: #422006;
    color: #fde68a;
    border-left-color: #f59e0b;
}
.cal-day-empty {
    text-align: center;
    padding: 40px 0;
    color: #94a3b8;
    font-size: 0.9rem;
    font-style: italic;
}
.cal-day-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    gap: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-left: 4px solid var(--ev-color, #3B82F6);
}
.cal-day-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
body.dark-mode .cal-day-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .cal-day-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.cal-day-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 1;
}
.cal-day-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cal-day-card-left strong {
    font-size: 0.95rem;
    color: #1e293b;
}
body.dark-mode .cal-day-card-left strong {
    color: #f1f5f9;
}
.cal-day-card-dates {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
}
body.dark-mode .cal-day-card-dates {
    color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════
   TECHNICAL RESOURCES (Recursos Técnicos) — .tr-*
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page layout ─────────────────────────────────────────────────── */
.tr-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.tr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.tr-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px;
}
body.dark-mode .tr-title { color: #f8fafc; }
.tr-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}
body.dark-mode .tr-subtitle { color: #94a3b8; }

/* ── Upload button ───────────────────────────────────────────────── */
.tr-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}
.tr-btn-upload:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.4);
}
body.dark-mode .tr-btn-upload {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
body.dark-mode .tr-btn-upload:hover {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* ── Upload panel ────────────────────────────────────────────────── */
.tr-upload-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 28px;
    animation: trSlideDown 0.35s ease;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
body.dark-mode .tr-upload-panel {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
@keyframes trSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.tr-upload-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.dark-mode .tr-upload-title { color: #f8fafc; }
.tr-upload-title i { color: #f59e0b; }

/* ── Form elements ───────────────────────────────────────────────── */
.tr-form-section { margin-bottom: 20px; }
.tr-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f59e0b;
    margin-bottom: 10px;
}
.tr-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.tr-flex-1 { flex: 1; }
.tr-form-group { display: flex; flex-direction: column; }
.tr-input, .tr-textarea {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Instrument Sans', 'Inter', sans-serif;
}
body.dark-mode .tr-input, body.dark-mode .tr-textarea {
    background: #0f172a;
    border-color: rgba(255,255,255,0.1);
    color: #f1f5f9;
}
.tr-input:focus, .tr-textarea:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.tr-textarea { resize: vertical; min-height: 80px; }

/* ── Radio card selectors (category) ─────────────────────────────── */
.tr-radio-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tr-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    min-width: 140px;
    text-align: center;
    background: #ffffff;
}
body.dark-mode .tr-radio-card {
    border-color: rgba(255,255,255,0.08);
    background: #0f172a;
}
.tr-radio-card:hover {
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body.dark-mode .tr-radio-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tr-radio-card.selected {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.06);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
body.dark-mode .tr-radio-card.selected {
    background: rgba(245,158,11,0.1);
}
.tr-radio-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(56,189,248,0.1);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.tr-radio-card.selected .tr-radio-icon {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}
.tr-radio-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: #334155;
}
body.dark-mode .tr-radio-label { color: #cbd5e1; }
.tr-radio-card.selected .tr-radio-label { color: #f59e0b; }

/* ── Pill selectors (sub-type) ───────────────────────────────────── */
.tr-radio-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tr-pill {
    padding: 8px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: #475569;
    background: transparent;
}
body.dark-mode .tr-pill {
    border-color: rgba(255,255,255,0.1);
    color: #94a3b8;
}
.tr-pill:hover { border-color: #38bdf8; color: #38bdf8; }
.tr-pill.selected {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
    font-weight: 600;
}
body.dark-mode .tr-pill.selected {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
}

/* ── File drop area ──────────────────────────────────────────────── */
.tr-file-drop {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    background: #fafbfc;
}
body.dark-mode .tr-file-drop {
    border-color: rgba(255,255,255,0.1);
    background: rgba(15,23,42,0.5);
}
.tr-file-drop:hover {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.03);
}
.tr-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.tr-file-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.92rem;
    color: #475569;
    pointer-events: none;
}
body.dark-mode .tr-file-info { color: #94a3b8; }

/* ── Upload action buttons ───────────────────────────────────────── */
.tr-upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
body.dark-mode .tr-upload-actions { border-color: rgba(255,255,255,0.06); }
.tr-btn-cancel {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.88rem;
    cursor: pointer;
    transition: 0.2s;
}
body.dark-mode .tr-btn-cancel {
    border-color: rgba(255,255,255,0.1);
    color: #94a3b8;
}
.tr-btn-cancel:hover { border-color: #94a3b8; color: #334155; }
body.dark-mode .tr-btn-cancel:hover { color: #f1f5f9; }
.tr-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}
.tr-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16,185,129,0.4);
}
.tr-btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Search bar ──────────────────────────────────────────────────── */
.tr-search-bar {
    position: relative;
    margin-bottom: 12px;
}
.tr-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}
.tr-search-input {
    width: 100%;
    padding: 11px 40px 11px 40px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.92rem;
    color: #0f172a;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    box-sizing: border-box;
}
body.dark-mode .tr-search-input {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
    color: #f1f5f9;
}
.tr-search-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
.tr-search-input::placeholder { color: #94a3b8; }
body.dark-mode .tr-search-input::placeholder { color: #475569; }
.tr-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    transition: color 0.2s;
}
.tr-search-clear:hover { color: #ef4444; }

/* ── Filter tabs ─────────────────────────────────────────────────── */
.tr-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
}
body.dark-mode .tr-tabs {
    background: rgba(255,255,255,0.04);
}
.tr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}
body.dark-mode .tr-tab { color: #94a3b8; }
.tr-tab:hover { color: #0f172a; background: rgba(255,255,255,0.6); }
body.dark-mode .tr-tab:hover { color: #f1f5f9; background: rgba(255,255,255,0.06); }
.tr-tab.active {
    background: #ffffff;
    color: #0f172a;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body.dark-mode .tr-tab.active {
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.tr-tab-count {
    background: rgba(245,158,11,0.12);
    color: #d97706;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    min-width: 20px;
    text-align: center;
}
body.dark-mode .tr-tab-count {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}

/* ── Sub-type filter pills ───────────────────────────────────────── */
.tr-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding-left: 4px;
}
.tr-subtab {
    padding: 6px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 500;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s;
}
body.dark-mode .tr-subtab {
    border-color: rgba(255,255,255,0.08);
    color: #94a3b8;
}
.tr-subtab:hover { border-color: #38bdf8; color: #38bdf8; }
.tr-subtab.active {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #fff;
}

/* ── Document list ───────────────────────────────────────────────── */
.tr-doc-list {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
body.dark-mode .tr-doc-list {
    background: #1e293b;
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.tr-doc-item {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    gap: 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s;
}
body.dark-mode .tr-doc-item { border-color: rgba(255,255,255,0.04); }
.tr-doc-item:last-child { border-bottom: none; }
.tr-doc-item:hover { background: #f8fafc; }
body.dark-mode .tr-doc-item:hover { background: rgba(255,255,255,0.03); }

/* ── Doc icon ────────────────────────────────────────────────────── */
.tr-doc-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(56,189,248,0.1);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Doc content ─────────────────────────────────────────────────── */
.tr-doc-content { flex: 1; min-width: 0; }
.tr-doc-title {
    font-weight: 600;
    font-size: 1rem;
    color: #0f172a;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dark-mode .tr-doc-title { color: #f1f5f9; }
.tr-doc-desc {
    font-size: 0.88rem;
    color: #64748b;
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.dark-mode .tr-doc-desc { color: #94a3b8; }
.tr-doc-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: #94a3b8;
    flex-wrap: wrap;
}
body.dark-mode .tr-doc-meta { color: #64748b; }

/* ── Badges ──────────────────────────────────────────────────────── */
.tr-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tr-badge-category {
    background: rgba(245,158,11,0.12);
    color: #d97706;
}
body.dark-mode .tr-badge-category {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
}
.tr-badge-subtype {
    background: rgba(56,189,248,0.12);
    color: #0284c7;
}
body.dark-mode .tr-badge-subtype {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
}

/* ── Doc action buttons ──────────────────────────────────────────── */
.tr-doc-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.tr-btn-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: rgba(56,189,248,0.1);
    color: #0284c7;
    border: 1px solid rgba(56,189,248,0.2);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
}
body.dark-mode .tr-btn-view {
    background: rgba(56,189,248,0.1);
    color: #38bdf8;
    border-color: rgba(56,189,248,0.2);
}
.tr-btn-view:hover {
    background: #38bdf8;
    color: #fff;
    border-color: #38bdf8;
}
.tr-btn-edit {
    padding: 7px 10px;
    background: rgba(245,158,11,0.08);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: 0.2s;
}
body.dark-mode .tr-btn-edit {
    background: rgba(245,158,11,0.1);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.15);
}
.tr-btn-edit:hover {
    background: #f59e0b;
    color: #fff;
    border-color: #f59e0b;
}
.tr-btn-delete {
    padding: 7px 10px;
    background: rgba(239,68,68,0.06);
    color: #dc2626;
    border: 1px solid rgba(239,68,68,0.12);
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: 0.2s;
}
body.dark-mode .tr-btn-delete {
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border-color: rgba(239,68,68,0.15);
}
.tr-btn-delete:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.tr-empty {
    text-align: center;
    padding: 60px 24px;
    color: #94a3b8;
}
.tr-empty i {
    font-size: 3rem;
    opacity: 0.25;
    margin-bottom: 12px;
    display: block;
}
.tr-empty p {
    font-size: 1rem;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tr-header { flex-direction: column; }
    .tr-radio-cards { flex-direction: column; }
    .tr-radio-card { min-width: unset; flex-direction: row; padding: 14px 18px; }
    .tr-doc-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .tr-doc-actions { width: 100%; justify-content: flex-end; }
    .tr-form-row { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════════
   FIELD ENGINEER DASHBOARD (.fe-*)
   ═══════════════════════════════════════════════════════════════════ */

.fe-dashboard { padding: 12px 28px 28px; }
.fe-calendar-wrap { padding: 12px 28px 28px; }

/* ── Header ─────────────────────────────────────────────────────── */
.fe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 20px;
}
.fe-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}
body.dark-mode .fe-title { color: #f1f5f9; }
.fe-subtitle {
    font-size: 0.9rem;
    color: #64748b;
    margin-top: 2px;
}
body.dark-mode .fe-subtitle { color: #94a3b8; }

/* ── Stats Grid ─────────────────────────────────────────────────── */
.fe-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.fe-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
body.dark-mode .fe-stat-card {
    background: #1e293b;
    border-color: #334155;
}
.fe-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body.dark-mode .fe-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.fe-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 6px;
}
.fe-stat-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
}
body.dark-mode .fe-stat-value { color: #f1f5f9; }
.fe-stat-warn { color: #f59e0b !important; }
.fe-stat-danger { color: #ef4444 !important; }
.fe-stat-success { color: #10b981 !important; }

/* ── Main Grid (2 col) ──────────────────────────────────────────── */
.fe-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
}
.fe-grid-left, .fe-grid-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Card ────────────────────────────────────────────────────────── */
.fe-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
}
body.dark-mode .fe-card {
    background: #1e293b;
    border-color: #334155;
}
.fe-card-title {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.dark-mode .fe-card-title { color: #e2e8f0; }
.fe-card-title i { color: #f59e0b; }

/* ── Task Monitor ────────────────────────────────────────────────── */
.fe-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}
body.dark-mode .fe-task-row { border-bottom-color: #334155; }
.fe-task-row:last-child { border-bottom: none; }
.fe-task-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fe-task-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #38bdf8;
    flex-shrink: 0;
}
.fe-task-status-dot.overdue { background: #ef4444; }

/* ── Map List ────────────────────────────────────────────────────── */
.fe-map-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fe-map-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
body.dark-mode .fe-map-item {
    background: #0f172a;
    border-color: #334155;
}

/* ── Quick Links ─────────────────────────────────────────────────── */
.fe-quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fe-quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.2s;
}
body.dark-mode .fe-quick-link {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.fe-quick-link:hover {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.05);
    transform: translateX(4px);
}
.fe-quick-link i {
    font-size: 1.1rem;
    color: #f59e0b;
    width: 24px;
    text-align: center;
}

/* ── Upcoming Visits ─────────────────────────────────────────────── */
.fe-upcoming-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
body.dark-mode .fe-upcoming-item { border-bottom-color: #334155; }

/* FE Dashboard — Forum activity rows */
.fe-forum-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid #f1f5f9; text-decoration: none; color: inherit; transition: background 0.15s;
}
.fe-forum-row:last-child { border-bottom: none; }
.fe-forum-row:hover { background: #f8fafc; border-radius: 6px; padding-left: 6px; }
.fe-forum-info { flex: 1; min-width: 0; }
.fe-forum-title { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark-mode .fe-forum-row { border-bottom-color: #334155; color: #f8fafc; }
body.dark-mode .fe-forum-row:hover { background: rgba(56,189,248,0.06); }
.fe-upcoming-item:last-child { border-bottom: none; }
.fe-upcoming-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    background: rgba(245,158,11,0.1);
    border-radius: 8px;
    padding: 6px 10px;
}
.fe-upcoming-day {
    font-weight: 800;
    font-size: 1.1rem;
    color: #f59e0b;
    line-height: 1;
}
.fe-upcoming-month {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #94a3b8;
    font-weight: 600;
}

/* ── Empty mini ──────────────────────────────────────────────────── */
.fe-empty-mini {
    text-align: center;
    padding: 28px 16px;
    color: #94a3b8;
    font-size: 0.9rem;
}
.fe-empty-mini i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 6px;
    opacity: 0.25;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fe-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .fe-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .fe-stats-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   FIELD ENGINEERING — MANAGER DASHBOARD (.fe-mgr-*)
   ═══════════════════════════════════════════════════════════════════ */

.fe-mgr-dashboard { padding: 12px 28px 28px; }

/* ── Module Options Row ─────────────────────────────────────────── */
.fe-mgr-options {
    display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap;
}
.fe-mgr-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    background: white; border: 1px solid #e2e8f0; border-radius: 12px;
    text-decoration: none; color: #0f172a;
    transition: all 0.2s ease; flex: 1; min-width: 180px;
}
.fe-mgr-option:hover {
    border-color: #f59e0b; box-shadow: 0 4px 16px rgba(245,158,11,0.12);
    transform: translateY(-2px);
}
.fe-mgr-option i.opt-icon { font-size: 1.3rem; }
.fe-mgr-option .opt-label { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; flex: 1; }
.fe-mgr-option .opt-arrow { color: #94a3b8; font-size: 0.8rem; }

/* ── 2-Column Grid ──────────────────────────────────────────────── */
.fe-mgr-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-bottom: 20px; }
.fe-mgr-row-even { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.fe-mgr-full { margin-bottom: 20px; }

/* ── Card ───────────────────────────────────────────────────────── */
.fe-mgr-card {
    padding: 20px; background: white; border-radius: 14px;
    border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fe-mgr-card-title {
    font-weight: 700; color: #0f172a; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px; font-size: 0.95rem;
}
.fe-mgr-card-title i { color: #f59e0b; font-size: 1.1rem; }

/* ── Custom Map Pin ─────────────────────────────────────────────── */
.fe-map-pin-wrapper { background: transparent !important; border: none !important; }
.fe-map-pin-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 2px solid white;
    letter-spacing: 0.03em;
}

/* ── Activity List ──────────────────────────────────────────────── */
.fe-mgr-activity-list { max-height: 380px; overflow-y: auto; }
.fe-mgr-activity-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid #f1f5f9;
}
.fe-mgr-activity-row:last-child { border-bottom: none; }
.fe-mgr-eng-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.fe-mgr-activity-info { flex: 1; min-width: 0; }
.fe-mgr-activity-title {
    font-weight: 600; font-size: 0.85rem; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fe-mgr-activity-meta { font-size: 0.75rem; color: #64748b; }

/* ── Summary Matrix Table ───────────────────────────────────────── */
.fe-mgr-matrix { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fe-mgr-matrix th {
    padding: 10px 14px; text-align: left; font-weight: 700;
    color: #64748b; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid #e2e8f0;
}
.fe-mgr-matrix td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
.fe-mgr-matrix tr:last-child td { border-bottom: none; }
.fe-mgr-matrix .eng-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fe-mgr-matrix .count-cell { text-align: center; font-weight: 600; }
.fe-mgr-matrix .total-cell { text-align: center; font-weight: 800; color: #f59e0b; }
.fe-mgr-matrix tfoot td {
    padding: 10px 14px; font-weight: 800; border-top: 2px solid #e2e8f0;
}

/* ── Resource List ──────────────────────────────────────────────── */
.fe-mgr-resource-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.fe-mgr-resource-row:last-child { border-bottom: none; }
.fe-mgr-resource-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: #fef3c7; color: #f59e0b;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.fe-mgr-resource-info { flex: 1; min-width: 0; }
.fe-mgr-resource-title {
    font-weight: 600; font-size: 0.85rem; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fe-mgr-resource-meta { font-size: 0.75rem; color: #64748b; }
.fe-mgr-resource-link {
    color: #3b82f6; font-size: 0.8rem; text-decoration: none; font-weight: 600;
}
.fe-mgr-resource-link:hover { text-decoration: underline; }

/* ── Placeholder ────────────────────────────────────────────────── */
.fe-mgr-placeholder {
    text-align: center; padding: 40px 16px; color: #94a3b8; font-size: 0.95rem;
}
.fe-mgr-placeholder i { font-size: 2rem; display: block; margin-bottom: 10px; opacity: 0.3; }

/* ── Dark Mode ──────────────────────────────────────────────────── */
body.dark-mode .fe-mgr-option { background: #1e293b; border-color: #334155; color: #f8fafc; }
body.dark-mode .fe-mgr-option:hover { border-color: #f59e0b; }
body.dark-mode .fe-mgr-option .opt-arrow { color: #64748b; }
body.dark-mode .fe-mgr-card { background: #1e293b; border-color: #334155; }
body.dark-mode .fe-mgr-card-title { color: #f8fafc; }
body.dark-mode .fe-mgr-activity-title { color: #f8fafc; }
body.dark-mode .fe-mgr-activity-meta { color: #94a3b8; }
body.dark-mode .fe-mgr-activity-row { border-color: #334155; }
body.dark-mode .fe-mgr-matrix th { color: #94a3b8; border-color: #334155; }
body.dark-mode .fe-mgr-matrix td { border-color: #334155; color: #e2e8f0; }
body.dark-mode .fe-mgr-matrix tfoot td { border-color: #334155; }
body.dark-mode .fe-mgr-resource-row { border-color: #334155; }
body.dark-mode .fe-mgr-resource-icon { background: #2d2006; }
body.dark-mode .fe-mgr-resource-title { color: #f8fafc; }
body.dark-mode .fe-mgr-placeholder { color: #64748b; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .fe-mgr-row, .fe-mgr-row-even { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .fe-mgr-options { flex-direction: column; }
    .fe-mgr-option { min-width: auto; }
}

/* ===== Forum Module ============================================== */

/* Container & Stats */
.forum-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.forum-home-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.forum-stats-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.forum-stat-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 20px; text-align: center;
}
.forum-stat-icon { font-size: 1.4rem; color: #f59e0b; margin-bottom: 8px; }
.forum-stat-value { font-size: 1.8rem; font-weight: 800; color: #0f172a; }
.forum-stat-label { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* Category Blocks */
.forum-category {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px;
    overflow: hidden; margin-bottom: 20px;
}
.forum-category-strip { border-left: 4px solid #64748b; }
.forum-category-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0; font-weight: 700; font-size: 1.05rem; color: #0f172a;
}
.forum-category-icon { margin-right: 10px; font-size: 1.1rem; opacity: 0.7; }
.forum-category-info { display: flex; align-items: center; gap: 8px; }
.forum-category-stats { font-size: 0.8rem; color: #64748b; display: flex; gap: 16px; }
.forum-category-latest { font-size: 0.8rem; color: #64748b; text-align: right; }
.forum-category-latest .last-user { color: #38bdf8; font-weight: 600; }
.forum-category-name { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0; }
.forum-category-desc { font-size: 0.85rem; color: #64748b; margin: 4px 0 0 0; font-weight: 400; }
.forum-no-threads { padding: 16px 20px; font-size: 0.88rem; color: #94a3b8; font-style: italic; }
.forum-category-actions { padding: 10px 20px; border-top: 1px solid #e2e8f0; display: flex; gap: 12px; align-items: center; }

/* Subcategory List */
.forum-subcategory-list { }
.forum-subcategory-row {
    display: grid; grid-template-columns: 40px 1fr 160px;
    align-items: center; padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0; transition: background 0.15s;
}
.forum-subcategory-row:last-child { border-bottom: none; }
.forum-subcategory-row:hover { background: #f8fafc; }
.forum-subcategory-icon { font-size: 1.1rem; color: #94a3b8; text-align: center; }
.forum-subcategory-info { padding-right: 12px; }
.forum-subcategory-title {
    font-weight: 700; font-size: 0.95rem; color: #0f172a;
    text-decoration: none; display: block;
}
.forum-subcategory-title:hover { color: #f59e0b; }
.forum-subcategory-desc { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }
.forum-subcategory-stats { font-size: 0.8rem; color: #64748b; text-align: right; display: flex; gap: 14px; justify-content: flex-end; }

/* Thread List */
.forum-thread-list { }
.forum-thread-row {
    display: grid; grid-template-columns: 40px 1fr 120px 200px;
    align-items: center; padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0; transition: background 0.15s;
}
.forum-thread-row:last-child { border-bottom: none; }
.forum-thread-row:hover { background: #f8fafc; }
.forum-thread-row.unread .forum-thread-title { font-weight: 800; }
.forum-thread-row.pinned { background: rgba(245, 158, 11, 0.04); }
.forum-thread-row.pinned .forum-thread-title::before { content: "\f08d "; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #f59e0b; margin-right: 6px; font-size: 0.8rem; }
.forum-thread-icon { font-size: 1.2rem; color: #94a3b8; text-align: center; }
.forum-thread-main { padding-right: 12px; }
.forum-thread-title {
    font-weight: 600; font-size: 0.95rem; color: #0f172a;
    text-decoration: none; display: block;
}
.forum-thread-title:hover { color: #f59e0b; }
.forum-thread-meta { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; }
.forum-thread-stats { font-size: 0.8rem; color: #64748b; text-align: center; }
.forum-thread-last-post { font-size: 0.8rem; color: #64748b; text-align: right; line-height: 1.4; }
.forum-thread-last-post .last-user { color: #38bdf8; font-weight: 600; }

/* Post Container (thread detail) */
.forum-post-container {
    display: flex; background: white; border: 1px solid #e2e8f0;
    border-radius: 8px; margin-bottom: 16px;
}
.forum-post-container.first-post { border-radius: 0 0 8px 8px; margin-bottom: 24px; }
.forum-post-sidebar {
    width: 200px; padding: 20px; flex-shrink: 0; text-align: center;
    border-right: 1px solid #e2e8f0; background: #f8fafc;
}
.forum-post-avatar {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; background: #e2e8f0; color: #64748b;
    border: 2px solid #cbd5e1;
}
.forum-post-username { font-weight: 700; font-size: 0.9rem; color: #0f172a; display: block; }
.forum-post-jobtitle { font-size: 0.75rem; color: #94a3b8; display: block; margin-top: 2px; margin-bottom: 8px; }
.forum-post-userstats { font-size: 0.72rem; color: #94a3b8; text-align: left; }
.forum-post-content { flex: 1; padding: 20px; }
.forum-post-head {
    display: flex; justify-content: space-between;
    border-bottom: 1px solid #e2e8f0; padding-bottom: 8px; margin-bottom: 12px;
    font-size: 0.8rem; color: #94a3b8;
}
.forum-post-body { color: #334155; font-size: 0.92rem; line-height: 1.7; min-height: 80px; }
.forum-post-body p { margin-bottom: 0.75rem; }
.forum-post-footer {
    margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e8f0;
    display: flex; justify-content: flex-end; gap: 12px;
}
.forum-post-actions .action-link {
    font-size: 0.78rem; font-weight: 600; color: #64748b;
    cursor: pointer; transition: color 0.15s;
}
.forum-post-actions .action-link:hover { color: #f59e0b; }

/* Quick Reply */
.forum-quick-reply {
    background: #f1f5f9; padding: 20px; border-radius: 8px;
    border: 1px solid #e2e8f0; margin-top: 24px;
}
.forum-quick-reply h3 { font-size: 1rem; font-weight: 700; margin-bottom: 12px; color: #0f172a; }
.forum-quick-reply textarea {
    width: 100%; min-height: 120px; padding: 12px; border: 1px solid #e2e8f0;
    border-radius: 6px; font-size: 0.9rem; resize: vertical; background: white; color: #0f172a;
}
.forum-quick-reply textarea:focus { outline: none; border-color: #38bdf8; }

/* Acuerdo Card & Progress Bar */
.forum-acuerdo-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px 20px; margin-bottom: 16px;
}
.forum-acuerdo-card .acuerdo-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.forum-acuerdo-card .acuerdo-header strong { font-size: 0.9rem; }
.forum-acuerdo-card .acuerdo-header span { font-size: 0.85rem; font-weight: 800; }
.forum-acuerdo-card .acuerdo-controls {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.forum-acuerdo-card .acuerdo-controls input {
    width: 80px; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.85rem;
    background: white; color: #0f172a;
}
.forum-acuerdo-card .acuerdo-controls button {
    padding: 6px 14px; border-radius: 6px; background: #0f172a; color: white;
    border: none; cursor: pointer; font-size: 0.82rem; font-weight: 600;
}
.forum-acuerdo-card .acuerdo-controls button:hover { opacity: 0.85; }
.forum-acuerdo-bar {
    background: #e2e8f0; border-radius: 20px; height: 24px; overflow: hidden;
    margin: 12px 0; position: relative;
}
.forum-acuerdo-fill {
    height: 100%; border-radius: 20px; background: linear-gradient(90deg, #f59e0b, #38bdf8);
    transition: width 0.4s ease;
}
.forum-acuerdo-bar span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 0.75rem; font-weight: 700; color: #0f172a;
}

/* Visibility Badges */
.forum-vis-badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: 0.7rem; font-weight: 600; margin-right: 4px;
}
.forum-vis-sparta { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.forum-vis-dealer { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.forum-vis-public { background: rgba(16, 185, 129, 0.15); color: #10b981; }

/* Admin Panel */
.forum-admin-panel {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-top: 24px;
}
.forum-admin-panel-title { margin-bottom: 16px; color: #0f172a; }
.forum-admin-checkboxes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.forum-admin-check-label { display: flex; align-items: center; gap: 4px; font-size: 0.85rem; color: #0f172a; }
.forum-admin-dealer-list { max-height: 200px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; margin-bottom: 16px; }
.forum-admin-dealer-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; padding: 4px 0; color: #0f172a; }
.forum-admin-move-label { font-size: 0.82rem; font-weight: 600; color: #0f172a; }
.forum-admin-select { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 0.85rem; margin-left: 8px; background: white; color: #0f172a; }
.forum-icon-select {
    padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.88rem;
    background: white; color: #0f172a; cursor: pointer; min-width: 220px;
}

/* Admin Toolbar */
.forum-admin-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.forum-admin-toolbar .btn-forum {
    padding: 6px 14px; border-radius: 6px; font-size: 0.78rem; font-weight: 600;
    border: 1px solid #e2e8f0; background: white; color: #0f172a; cursor: pointer;
    transition: all 0.15s;
}
.forum-admin-toolbar .btn-forum:hover { border-color: #f59e0b; color: #f59e0b; }
.forum-admin-toolbar .btn-forum.btn-forum-primary { background: #0f172a; color: white; border-color: #0f172a; }
.forum-admin-toolbar .btn-forum.btn-forum-primary:hover { background: #1e293b; }
.forum-admin-toolbar .btn-forum.btn-forum-danger { color: #ef4444; border-color: #fca5a5; }
.forum-admin-toolbar .btn-forum.btn-forum-danger:hover { background: #fef2f2; }

/* Buttons */
.forum-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 6px; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid #e2e8f0;
    transition: all 0.15s; background: white; color: #0f172a;
}
.forum-btn:hover { border-color: #cbd5e1; }
.forum-btn-primary { background: #0f172a; color: white; border-color: #0f172a; }
.forum-btn-primary:hover { background: #1e293b; border-color: #1e293b; }
.forum-btn-secondary { background: white; color: #0f172a; border-color: #e2e8f0; }
.forum-btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.forum-btn-sm { padding: 5px 12px; font-size: 0.78rem; }
.forum-btn-link { background: none; border: none; color: #38bdf8; padding: 5px 8px; }
.forum-btn-link:hover { color: #0ea5e9; text-decoration: underline; }
.forum-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Breadcrumb */
.forum-breadcrumb {
    font-size: 0.85rem; color: #94a3b8; margin-bottom: 20px;
}
.forum-breadcrumb a { color: #38bdf8; text-decoration: none; margin: 0 6px; }
.forum-breadcrumb a:hover { text-decoration: underline; }
.forum-breadcrumb span { color: #0f172a; margin-left: 6px; }

/* Thread Header (thread detail page) */
.forum-thread-header {
    background: white; padding: 20px; border-radius: 8px 8px 0 0;
    border: 1px solid #e2e8f0; border-bottom: none;
}
.forum-thread-detail-title { font-size: 1.4rem; font-weight: 800; color: #0f172a; margin-bottom: 6px; }
.forum-thread-detail-meta { font-size: 0.82rem; color: #94a3b8; }

/* New Thread Form */
.forum-new-thread {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;
}
.forum-new-thread .form-group { margin-bottom: 16px; }
.forum-new-thread label { display: block; font-weight: 600; font-size: 0.85rem; color: #0f172a; margin-bottom: 6px; }
.forum-new-thread input[type="text"],
.forum-new-thread textarea,
.forum-new-thread select {
    width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 0.9rem; color: #0f172a; background: white;
}
.forum-new-thread input:focus, .forum-new-thread textarea:focus, .forum-new-thread select:focus {
    outline: none; border-color: #38bdf8;
}
.forum-new-thread textarea { min-height: 200px; resize: vertical; }

/* Form Elements */
.forum-form-card {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 24px;
}
.forum-form-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 20px; }
.forum-form-group { margin-bottom: 16px; }
.forum-field-label { display: block; font-weight: 600; font-size: 0.85rem; color: #0f172a; margin-bottom: 6px; }
.forum-field-input {
    width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 0.9rem; color: #0f172a; background: white; box-sizing: border-box;
}
.forum-field-input:focus { outline: none; border-color: #38bdf8; }
.forum-reply-textarea {
    width: 100%; min-height: 200px; padding: 12px 14px; border: 1px solid #e2e8f0;
    border-radius: 6px; font-size: 0.9rem; color: #0f172a; background: white;
    resize: vertical; box-sizing: border-box;
}
.forum-reply-textarea:focus { outline: none; border-color: #38bdf8; }
.forum-form-actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.forum-checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.forum-checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; color: #334155; cursor: pointer; }
.forum-checkbox-item input[type="checkbox"] { width: auto; cursor: pointer; }
.forum-dealer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }

/* Quote Box */
.forum-quote-box {
    background: #f1f5f9; border-left: 3px solid #38bdf8;
    padding: 8px 16px; margin: 12px 0; font-size: 0.88rem;
    color: #64748b; font-style: italic;
}

/* Category Admin */
.forum-cat-admin-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.forum-cat-admin-row:last-child { border-bottom: none; }
.forum-cat-admin-color {
    width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0;
}
.forum-cat-admin-name { flex: 1; font-weight: 600; font-size: 0.9rem; color: #0f172a; }
.forum-cat-admin-actions { display: flex; gap: 6px; }
.forum-cat-locked-badge {
    font-size: 0.7rem; background: #fef3c7; color: #92400e; padding: 2px 8px;
    border-radius: 10px; font-weight: 600;
}

/* Email Log table (reusable) */
.forum-email-log { width: 100%; font-size: 0.82rem; }
.forum-email-log th { text-align: left; padding: 8px 12px; color: #64748b; border-bottom: 2px solid #e2e8f0; font-weight: 600; }
.forum-email-log td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; color: #334155; }

/* ── Forum Dark Mode ─────────────────────────────────── */
body.dark-mode .forum-stat-card { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-stat-value { color: #f8fafc; }
body.dark-mode .forum-stat-label { color: #94a3b8; }
body.dark-mode .forum-category { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-category-header { background: rgba(15, 23, 42, 0.5); border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-thread-row { border-color: #334155; }
body.dark-mode .forum-thread-row:hover { background: #1e293b; }
body.dark-mode .forum-thread-row.pinned { background: rgba(245, 158, 11, 0.06); }
body.dark-mode .forum-thread-title { color: #f8fafc; }
body.dark-mode .forum-thread-icon { color: #64748b; }
body.dark-mode .forum-category-name { color: #f8fafc; }
body.dark-mode .forum-category-desc { color: #94a3b8; }
body.dark-mode .forum-category-actions { border-color: #334155; }
body.dark-mode .forum-no-threads { color: #64748b; }
body.dark-mode .forum-subcategory-row { border-color: #334155; }
body.dark-mode .forum-subcategory-row:hover { background: #1e293b; }
body.dark-mode .forum-subcategory-title { color: #f8fafc; }
body.dark-mode .forum-subcategory-icon { color: #64748b; }
body.dark-mode .forum-post-container { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-post-sidebar { background: rgba(15, 23, 42, 0.4); border-color: #334155; }
body.dark-mode .forum-post-avatar { background: #334155; color: #94a3b8; border-color: #475569; }
body.dark-mode .forum-post-username { color: #f8fafc; }
body.dark-mode .forum-post-head { border-color: #334155; }
body.dark-mode .forum-post-body { color: #cbd5e1; }
body.dark-mode .forum-post-footer { border-color: #334155; }
body.dark-mode .forum-quick-reply { background: #0f172a; border-color: #334155; }
body.dark-mode .forum-quick-reply h3 { color: #f8fafc; }
body.dark-mode .forum-quick-reply textarea { background: #1e293b; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-acuerdo-card { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-acuerdo-card .acuerdo-controls input { background: #0f172a; color: #f8fafc; border-color: #475569; }
body.dark-mode .forum-acuerdo-card .acuerdo-controls button { background: #f59e0b; color: #0f172a; }
body.dark-mode .forum-acuerdo-bar { background: #334155; }
body.dark-mode .forum-acuerdo-bar span { color: #f8fafc; }
body.dark-mode .forum-breadcrumb span { color: #f8fafc; }
body.dark-mode .forum-thread-header { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-thread-detail-title { color: #f8fafc; }
body.dark-mode .forum-new-thread { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-new-thread label { color: #f8fafc; }
body.dark-mode .forum-new-thread input, body.dark-mode .forum-new-thread textarea, body.dark-mode .forum-new-thread select { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-form-card { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-form-title { color: #f8fafc; }
body.dark-mode .forum-field-label { color: #f8fafc; }
body.dark-mode .forum-field-input { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-reply-textarea { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-checkbox-item { color: #cbd5e1; }
body.dark-mode .forum-quote-box { background: #0f172a; color: #94a3b8; }
body.dark-mode .forum-cat-admin-row { border-color: #334155; }
body.dark-mode .forum-cat-admin-name { color: #f8fafc; }
body.dark-mode .forum-btn { background: #1e293b; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-btn-primary { background: #f59e0b; color: white; border-color: #f59e0b; }
body.dark-mode .forum-btn-secondary { background: #1e293b; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-btn-link { background: none; border: none; color: #38bdf8; }
body.dark-mode .forum-admin-panel { background: #1e293b; border-color: #334155; }
body.dark-mode .forum-admin-panel-title { color: #f8fafc; }
body.dark-mode .forum-admin-check-label { color: #cbd5e1; }
body.dark-mode .forum-admin-dealer-list { border-color: #334155; }
body.dark-mode .forum-admin-dealer-item { color: #cbd5e1; }
body.dark-mode .forum-admin-move-label { color: #cbd5e1; }
body.dark-mode .forum-admin-select { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-icon-select { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-admin-toolbar .btn-forum { background: #1e293b; border-color: #334155; color: #f8fafc; }
body.dark-mode .forum-admin-toolbar .btn-forum:hover { border-color: #f59e0b; color: #f59e0b; }
body.dark-mode .forum-email-log th { color: #94a3b8; border-color: #334155; }
body.dark-mode .forum-email-log td { color: #cbd5e1; border-color: #334155; }

/* ── Forum Quote Preview (reply box) ──────────────────── */
.forum-quote-preview {
    border: 2px dashed #cbd5e1; border-radius: 8px; padding: 12px 16px;
    margin-bottom: 12px; background: #f8fafc;
}
.forum-quote-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; color: #64748b; margin-bottom: 6px;
}
.forum-quote-preview-header .quote-dismiss {
    cursor: pointer; color: #94a3b8; font-size: 1rem; padding: 2px 6px; border-radius: 4px;
}
.forum-quote-preview-header .quote-dismiss:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.forum-quote-preview-body {
    font-style: italic; color: #475569; font-size: 0.88rem; line-height: 1.5;
    max-height: 120px; overflow-y: auto;
}

/* Rendered blockquote inside posts */
.forum-post-body blockquote.forum-quote {
    border-left: 4px solid #f59e0b; background: #fffbeb; padding: 10px 14px;
    margin: 0 0 12px 0; border-radius: 0 6px 6px 0; font-size: 0.88rem;
    color: #92400e;
}

/* File attachment area in reply box */
.forum-attach-area {
    display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.forum-attach-area .attach-hint {
    font-size: 0.78rem; color: #94a3b8;
}
.forum-pending-files {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.forum-pending-file {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 4px 10px; font-size: 0.8rem; color: #334155;
}
.forum-pending-file i { color: #64748b; }
.forum-pending-file .remove-file {
    cursor: pointer; color: #94a3b8; margin-left: 4px; font-size: 0.85rem;
}
.forum-pending-file .remove-file:hover { color: #ef4444; }

/* Attachment chips on rendered posts */
.forum-post-attachments {
    border-top: 1px dashed #e2e8f0; padding-top: 10px; margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.forum-attachment-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 4px 12px; font-size: 0.8rem; color: #334155;
    text-decoration: none; transition: border-color 0.15s;
}
.forum-attachment-link:hover { border-color: #38bdf8; color: #0284c7; }
.forum-attachment-link i { color: #64748b; }

/* Cancel button */
.btn-forum-cancel {
    padding: 8px 20px; border-radius: 6px; background: transparent;
    color: #64748b; border: 1px solid #e2e8f0; cursor: pointer; font-weight: 600;
}
.btn-forum-cancel:hover { border-color: #94a3b8; color: #334155; }

/* ── Forum Quote/Attach Dark Mode ────────────────────── */
body.dark-mode .forum-quote-preview { border-color: #475569; background: #1e293b; }
body.dark-mode .forum-quote-preview-header { color: #94a3b8; }
body.dark-mode .forum-quote-preview-body { color: #94a3b8; }
body.dark-mode .forum-post-body blockquote.forum-quote { background: rgba(245,158,11,0.1); color: #fbbf24; border-color: #f59e0b; }
body.dark-mode .forum-pending-file { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-mode .forum-pending-file i { color: #94a3b8; }
body.dark-mode .forum-post-attachments { border-color: #334155; }
body.dark-mode .forum-attachment-link { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-mode .forum-attachment-link:hover { border-color: #38bdf8; color: #38bdf8; }
body.dark-mode .forum-attachment-link i { color: #94a3b8; }
body.dark-mode .btn-forum-cancel { color: #94a3b8; border-color: #334155; }
body.dark-mode .btn-forum-cancel:hover { border-color: #64748b; color: #f8fafc; }

/* ── Forum Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .forum-stats-row { grid-template-columns: repeat(2, 1fr); }
    .forum-thread-row { grid-template-columns: 1fr; gap: 4px; }
    .forum-subcategory-row { grid-template-columns: 1fr; gap: 4px; }
    .forum-thread-stats, .forum-thread-last-post { text-align: left; }
    .forum-post-container { flex-direction: column; }
    .forum-post-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; padding: 12px; }
    body.dark-mode .forum-post-sidebar { border-color: #334155; }
}

/* ══════════════════════════════════════════════════════
   ACTIVITY COMPLETION MODAL
   ══════════════════════════════════════════════════════ */

.cal-complete-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1100;
    display: flex; align-items: center; justify-content: center;
}
.cal-complete-modal {
    background: #fff; border-radius: 12px; width: 95%; max-width: 600px;
    max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cal-complete-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.cal-complete-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #0f172a; }
.cal-complete-header button {
    background: none; border: none; font-size: 1.2rem; color: #64748b; cursor: pointer;
}
.cal-complete-header button:hover { color: #0f172a; }
.cal-complete-body {
    padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px;
}
.cal-complete-textarea {
    width: 100%; min-height: 80px; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 10px 12px; font-size: 0.9rem; resize: vertical; font-family: inherit;
    transition: border-color 0.2s;
}
.cal-complete-textarea:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.cal-complete-section-title {
    font-size: 0.85rem; font-weight: 600; color: #475569; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 4px;
}
.cal-complete-tasks { display: flex; flex-direction: column; gap: 8px; }
.cal-complete-task-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
}
.cal-complete-task-row span { flex: 1; font-size: 0.9rem; color: #334155; }
.cal-complete-task-row input[type="number"] {
    width: 70px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 8px;
    font-size: 0.9rem; text-align: center;
}
.cal-complete-task-row input[type="number"]:focus { outline: none; border-color: #f59e0b; }
.cal-complete-agreements {
    display: flex; flex-direction: column; gap: 10px;
    border-left: 3px solid #f59e0b; padding-left: 14px;
}
.cal-complete-agreement-row {
    display: flex; flex-direction: column; gap: 6px; position: relative;
    padding: 10px 12px; background: #fffbeb; border-radius: 8px; border: 1px solid #fde68a;
}
.cal-complete-agreement-row input {
    border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; font-size: 0.9rem;
    font-family: inherit;
}
.cal-complete-agreement-row textarea {
    border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px; font-size: 0.85rem;
    min-height: 50px; resize: vertical; font-family: inherit;
}
.cal-complete-agreement-row input:focus,
.cal-complete-agreement-row textarea:focus { outline: none; border-color: #f59e0b; }
.cal-complete-agreement-remove {
    position: absolute; top: 6px; right: 8px; background: none; border: none;
    color: #94a3b8; cursor: pointer; font-size: 0.9rem;
}
.cal-complete-agreement-remove:hover { color: #ef4444; }
.cal-complete-add-agreement {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 8px;
    color: #b45309; font-size: 0.85rem; cursor: pointer; transition: background 0.2s;
}
.cal-complete-add-agreement:hover { background: #fef3c7; }
.cal-complete-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid #e2e8f0;
}
.cal-complete-footer .btn-cancel {
    padding: 8px 18px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    color: #475569; cursor: pointer; font-size: 0.9rem;
}
.cal-complete-footer .btn-cancel:hover { border-color: #94a3b8; }
.cal-complete-footer .btn-complete {
    padding: 8px 22px; border: none; border-radius: 8px; background: #0f172a;
    color: #fff; cursor: pointer; font-weight: 600; font-size: 0.9rem;
}
.cal-complete-footer .btn-complete:hover { background: #1e293b; }
.cal-complete-footer .btn-complete:disabled { opacity: 0.6; cursor: not-allowed; }
.cal-complete-error { color: #ef4444; font-size: 0.85rem; padding: 4px 0; }

/* Sidebar inline completion textarea */
.cal-detail-completion { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cal-detail-completion textarea {
    width: 100%; min-height: 60px; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 8px 10px; font-size: 0.85rem; resize: vertical; font-family: inherit;
}
.cal-detail-completion textarea:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.cal-detail-completion .cal-complete-error { margin: 0; }

/* ── Completion Modal Dark Mode ────────────────── */
body.dark-mode .cal-complete-modal { background: #1e293b; }
body.dark-mode .cal-complete-header { border-color: #334155; }
body.dark-mode .cal-complete-header h3 { color: #f8fafc; }
body.dark-mode .cal-complete-header button { color: #94a3b8; }
body.dark-mode .cal-complete-header button:hover { color: #f8fafc; }
body.dark-mode .cal-complete-textarea { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .cal-complete-textarea:focus { border-color: #f59e0b; }
body.dark-mode .cal-complete-section-title { color: #94a3b8; }
body.dark-mode .cal-complete-task-row { background: #0f172a; border-color: #334155; }
body.dark-mode .cal-complete-task-row span { color: #cbd5e1; }
body.dark-mode .cal-complete-task-row input[type="number"] { background: #1e293b; border-color: #334155; color: #f8fafc; }
body.dark-mode .cal-complete-agreement-row { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
body.dark-mode .cal-complete-agreement-row input { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .cal-complete-agreement-row textarea { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .cal-complete-add-agreement { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.4); color: #fbbf24; }
body.dark-mode .cal-complete-add-agreement:hover { background: rgba(245,158,11,0.15); }
body.dark-mode .cal-complete-footer { border-color: #334155; }
body.dark-mode .cal-complete-footer .btn-cancel { background: #0f172a; border-color: #334155; color: #cbd5e1; }
body.dark-mode .cal-complete-footer .btn-complete { background: #f59e0b; }
body.dark-mode .cal-complete-footer .btn-complete:hover { background: #d97706; }
body.dark-mode .cal-detail-completion textarea { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .cal-detail-completion textarea:focus { border-color: #f59e0b; }

/* ===== Dealer Detail Panel (Sub-Catalogs) ===== */

.dealer-detail-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.dealer-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.dealer-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e2e8f0;
    padding: 0 20px;
    background: #f8fafc;
}

.dealer-tab {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dealer-tab:hover {
    color: #0f172a;
}

.dealer-tab.active {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
}

.dealer-tab-content {
    padding: 16px 20px;
}

.dealer-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.dealer-sub-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.dealer-sub-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    vertical-align: middle;
}

.dealer-sub-table tbody tr:hover {
    background: #f8fafc;
}

.dealer-role-badge {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    margin: 1px 2px;
    letter-spacing: 0.3px;
}

.dealer-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 12px;
}

.dealer-role-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    cursor: pointer;
}

.dealer-role-check input[type="checkbox"] {
    width: auto;
}

.btn-grid-action {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.15s, color 0.15s;
}

.btn-grid-action:hover {
    background: #e2e8f0;
    color: #0f172a;
}

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

.dealer-info-box {
    background: rgba(56,189,248,0.06);
    border: 1.5px dashed #38bdf8;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.82rem;
    color: #0369a1;
    font-style: italic;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.dealer-info-box i {
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
    color: #38bdf8;
}

/* ── Dealer Detail Dark Mode ────────────────── */
body.dark-mode .dealer-detail-panel { background: #1e293b; border-color: #334155; }
body.dark-mode .dealer-detail-header { background: #0f172a; border-color: #334155; color: #f8fafc; }
body.dark-mode .dealer-tabs { background: #0f172a; border-color: #334155; }
body.dark-mode .dealer-tab { color: #94a3b8; }
body.dark-mode .dealer-tab:hover { color: #f8fafc; }
body.dark-mode .dealer-tab.active { color: #f59e0b; border-bottom-color: #f59e0b; }
body.dark-mode .dealer-tab-content { color: #f8fafc; }
body.dark-mode .dealer-sub-table th { color: #94a3b8; border-color: #334155; }
body.dark-mode .dealer-sub-table td { color: #cbd5e1; border-color: #1e293b; }
body.dark-mode .dealer-sub-table tbody tr:hover { background: #0f172a; }
body.dark-mode .dealer-role-badge { background: rgba(56,189,248,0.15); color: #38bdf8; }
body.dark-mode .btn-grid-action { background: #334155; border-color: #475569; color: #cbd5e1; }
body.dark-mode .btn-grid-action:hover { background: #475569; color: #f8fafc; }
body.dark-mode .dealer-info-box { background: rgba(56,189,248,0.08); border-color: rgba(56,189,248,0.4); color: #7dd3fc; }
body.dark-mode .dealer-info-box i { color: #38bdf8; }

/* ===== Reportes — Filter Row ===== */
.rpt-filter-row {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
}
.rpt-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
.rpt-filter-group label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; }
.rpt-filter-select, .rpt-filter-input {
    padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.88rem;
    background: #fff; color: #0f172a; transition: border-color 0.15s;
}
.rpt-filter-select:focus, .rpt-filter-input:focus { border-color: #f59e0b; outline: none; box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }
.rpt-filter-action { flex: 0 0 auto; min-width: auto; }
.rpt-filter-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; border: none; border-radius: 8px;
    background: #f59e0b; color: #fff; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: background 0.15s;
}
.rpt-filter-btn:hover { background: #d97706; }
.rpt-filter-btn:disabled { opacity: 0.6; cursor: not-allowed; }

body.dark-mode .rpt-filter-select, body.dark-mode .rpt-filter-input {
    background: #1e293b; border-color: #334155; color: #f1f5f9;
}
body.dark-mode .rpt-filter-group label { color: #94a3b8; }

/* ===== ApexCharts — Dark Mode Tooltip Fix ===== */
body.dark-mode .apexcharts-tooltip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .apexcharts-tooltip-title {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .apexcharts-tooltip-text-y-label,
body.dark-mode .apexcharts-tooltip-text-y-value {
    color: #f1f5f9 !important;
}
body.dark-mode .apexcharts-tooltip-marker {
    border-color: #334155 !important;
}
body.dark-mode .apexcharts-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .apexcharts-menu-item:hover {
    background: #334155 !important;
}
body.dark-mode .apexcharts-xaxistooltip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .apexcharts-xaxistooltip-text {
    color: #f1f5f9 !important;
}
body.dark-mode .apexcharts-xaxistooltip::before,
body.dark-mode .apexcharts-xaxistooltip::after {
    border-bottom-color: #1e293b !important;
}

/* ===== Sparta WH — Warehouse Inventory ===== */
.wh-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 16px; }
.wh-inline-msg { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; margin-bottom: 12px; }
.wh-inline-warn { background: rgba(245,158,11,0.08); color: #f59e0b; border: 1px solid rgba(245,158,11,0.18); }
.wh-inline-error { background: rgba(239,68,68,0.08); color: #ef4444; border: 1px solid rgba(239,68,68,0.18); }
.wh-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #64748b; cursor: pointer; white-space: nowrap; }
.wh-checkbox-label input[type="checkbox"] { accent-color: #0ea5e9; cursor: pointer; }
.wh-status-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.wh-status-info { font-size: 0.82rem; color: #64748b; display: flex; align-items: center; gap: 6px; }
.wh-status-info i { color: #38bdf8; }
.wh-refresh-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: none; border-radius: 8px;
    background: #0ea5e9; color: #fff; font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: background 0.15s;
}
.wh-refresh-btn:hover { background: #0284c7; }
.wh-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wh-parts-count { font-size: 0.8rem; color: #94a3b8; margin-top: 8px; }
.wh-qty-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 4px 10px;
    border-radius: 999px; background: #0d9488; color: #fff; font-weight: 700; font-size: 0.82rem;
}
.wh-sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.wh-sortable-th:hover { color: #38bdf8; }
.wh-sortable-th i { font-size: 0.68rem; margin-left: 4px; opacity: 0.7; }
.wh-sort-inactive { opacity: 0.25 !important; }
.wh-pager { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #e2e8f0; flex-wrap: wrap; gap: 8px; }
.wh-pager-info { font-size: 0.8rem; color: #64748b; }
.wh-pager-controls { display: flex; align-items: center; gap: 4px; }
.wh-pager-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #475569; font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
.wh-pager-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.wh-pager-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.wh-pager-label { font-size: 0.8rem; font-weight: 600; color: #475569; padding: 0 8px; }
.wh-pager-select { padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.8rem; color: #475569; background: #fff; cursor: pointer; margin-right: 8px; }
.wh-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; gap: 14px; color: #64748b; font-size: 0.88rem; }
.wh-spinner { width: 36px; height: 36px; border: 3.5px solid #e2e8f0; border-top-color: #38bdf8; border-radius: 50%; animation: wh-spin 0.7s linear infinite; }
@keyframes wh-spin { to { transform: rotate(360deg); } }
body.dark-mode .wh-loading { color: #94a3b8; }
body.dark-mode .wh-spinner { border-color: #334155; border-top-color: #38bdf8; }
.wh-placeholder { text-align: center; padding: 2rem; color: #94a3b8; }
.wh-placeholder i { font-size: 2rem; margin-bottom: 8px; display: block; }
.wh-part-number { font-weight: 700; font-size: 0.88rem; }
.wh-rank-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.wh-rank-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.wh-rank-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; }
.wh-rank-table tbody tr:hover { background: #f8fafc; }
.wh-rank-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #f1f5f9; font-weight: 700; font-size: 0.72rem; color: #475569; }

body.dark-mode .wh-status-info { color: #94a3b8; }
body.dark-mode .wh-inline-warn { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.22); }
body.dark-mode .wh-inline-error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.22); }
body.dark-mode .wh-checkbox-label { color: #94a3b8; }
body.dark-mode .wh-rank-table th { border-bottom-color: #334155; color: #94a3b8; }
body.dark-mode .wh-rank-table td { border-bottom-color: #1e293b; }
body.dark-mode .wh-rank-table tbody tr:hover { background: #0f172a; }
body.dark-mode .wh-rank-num { background: #334155; color: #cbd5e1; }
body.dark-mode .wh-qty-badge { background: #0f766e; }
body.dark-mode .wh-pager { border-top-color: #334155; }
body.dark-mode .wh-pager-info { color: #94a3b8; }
body.dark-mode .wh-pager-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark-mode .wh-pager-btn:hover:not(:disabled) { background: #334155; border-color: #475569; }
body.dark-mode .wh-pager-label { color: #cbd5e1; }
body.dark-mode .wh-pager-select { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark-mode .wh-sortable-th:hover { color: #38bdf8; }

/* ═══════════════════════════════════════════════════
   Training Matrix  (.matrix-*)
   ═══════════════════════════════════════════════════ */

.china-detail-container {
    width: 100%;
}

.matrix-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 0.8rem;
}

.matrix-table thead th {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #e2e8f0;
    padding: 6px 8px;
    white-space: nowrap;
    vertical-align: bottom;
}

.matrix-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

.matrix-table tbody tr:hover td {
    background: #eff6ff !important;
}

.matrix-table tbody td {
    border-bottom: 1px solid #e2e8f0;
    padding: 5px 8px;
    vertical-align: middle;
}

/* Sticky left columns */
.matrix-sticky {
    position: sticky;
    z-index: 2;
    background: #ffffff;
}
.matrix-sticky-0 { left: 0; min-width: 140px; max-width: 160px; }
.matrix-sticky-1 { left: 140px; min-width: 160px; max-width: 180px; }
.matrix-sticky-2 { left: 300px; min-width: 120px; max-width: 140px; border-right: 2px solid #e2e8f0; }

/* thead sticky cells need higher z-index */
.matrix-table thead .matrix-sticky {
    z-index: 3;
    background: #f1f5f9;
}

/* Rotated course header */
.matrix-course-th {
    min-width: 55px;
    max-width: 60px;
    padding: 4px 2px 8px 2px !important;
    vertical-align: bottom;
    text-align: center;
}

.matrix-course-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 0.7rem;
    max-height: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin: 0 auto;
}

/* Data cells */
.matrix-cell {
    text-align: center;
    min-width: 55px;
    padding: 4px !important;
    font-size: 0.8rem;
    font-weight: 600;
}

.matrix-cell-missing { background: #f1f5f9; }
.matrix-cell-passed { color: #16a34a; }

/* Aggregate columns */
.matrix-agg-th {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    text-align: center;
}

.matrix-agg-td {
    text-align: center;
    background: #f0f9ff;
    font-weight: 600;
    color: #0369a1;
    font-size: 0.8rem;
}

/* Footer row */
.matrix-footer-row {
    background: #f1f5f9 !important;
    font-weight: 700;
}

.matrix-footer-label {
    font-weight: 700;
    font-size: 0.75rem;
    color: #475569;
    letter-spacing: 0.04em;
}

.matrix-footer-cell {
    text-align: center;
    font-size: 0.78rem;
    color: #334155;
    padding: 6px 4px !important;
    border-top: 2px solid #e2e8f0;
}

/* Dark mode */
body.dark-mode .matrix-table thead th { background: #1e293b; color: #94a3b8; border-bottom-color: #334155; }
body.dark-mode .matrix-table tbody td { border-bottom-color: #1e293b; }
body.dark-mode .matrix-table tbody tr:nth-child(even) { background: #0f172a; }
body.dark-mode .matrix-table tbody tr:hover td { background: #1e293b !important; }
body.dark-mode .matrix-sticky { background: #0f172a; }
body.dark-mode .matrix-table thead .matrix-sticky { background: #1e293b; }
body.dark-mode .matrix-sticky-2 { border-right-color: #334155; }
body.dark-mode .matrix-agg-th { background: rgba(3,105,161,0.25) !important; color: #38bdf8 !important; }
body.dark-mode .matrix-agg-td { background: rgba(3,105,161,0.12); color: #38bdf8; }
body.dark-mode .matrix-footer-row { background: #1e293b !important; }
body.dark-mode .matrix-footer-label { color: #94a3b8; }
body.dark-mode .matrix-footer-cell { color: #cbd5e1; border-top-color: #334155; }
body.dark-mode .matrix-cell-missing { background: #1e293b; }
body.dark-mode .matrix-cell-passed { color: #4ade80; }

/* Dark mode inline background overrides for cells */
body.dark-mode .matrix-cell[style*="background:#dcfce7"] { background: rgba(34,197,94,0.15) !important; }
body.dark-mode .matrix-cell[style*="background:#f1f5f9"] { background: #1e293b !important; }

/* ── Results grouped view ── */
.results-toggle {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}
.results-toggle-btn {
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
.results-toggle-btn.active {
    background: #0369a1;
    color: #fff;
}
.results-toggle-btn:hover:not(.active) {
    background: #f1f5f9;
}

.results-group {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.results-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.results-group-header:hover {
    background: #f1f5f9;
}
.results-group-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
}
.results-group-dealer {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 500;
}
.results-attempt-row td {
    background: #f8fafc !important;
    border-bottom: 1px dashed #e2e8f0 !important;
}

/* Dark mode */
body.dark-mode .results-toggle {
    border-color: #334155;
}
body.dark-mode .results-toggle-btn {
    color: #94a3b8;
}
body.dark-mode .results-toggle-btn.active {
    background: #0369a1;
    color: #fff;
}
body.dark-mode .results-toggle-btn:hover:not(.active) {
    background: #1e293b;
}
body.dark-mode .results-group {
    border-color: #334155;
}
body.dark-mode .results-group-header {
    background: #1e293b;
}
body.dark-mode .results-group-header:hover {
    background: #0f172a;
}
body.dark-mode .results-group-name {
    color: #f1f5f9;
}
body.dark-mode .results-group-dealer {
    color: #64748b;
}
body.dark-mode .results-attempt-row td {
    background: #0f172a !important;
    border-bottom-color: #1e293b !important;
}

/* ===================================================
   Torre de Control — Road Rescue module
   =================================================== */
.twr-step-indicator { display: flex; gap: 0; margin-bottom: 1.5rem; border-radius: 8px; overflow: hidden; }
.twr-step { flex: 1; padding: 0.75rem 1rem; text-align: center; font-size: 0.85rem; font-weight: 600; background: var(--bg-muted, #e2e8f0); color: var(--text-muted, #64748b); transition: all 0.2s; }
.twr-step.active { background: #1e3a5f; color: #ffffff; }
.twr-step.completed { background: #38bdf8; color: #0f172a; }

.twr-action-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; padding-top: 1.5rem; }
.twr-action-card { background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 1.5rem; }
.twr-action-card h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; }
.twr-action-card .input-group { display: flex; gap: 0.5rem; }

.twr-info-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1rem; background: var(--bg-muted, #f1f5f9); border-radius: 8px; margin-bottom: 1.5rem; }
.twr-info-item label { display: block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted, #64748b); margin-bottom: 0.25rem; }
.twr-info-item span { font-size: 0.9rem; font-weight: 500; }

.twr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.twr-form-grid .full-width { grid-column: 1 / -1; }

.twr-center-list { display: flex; flex-direction: column; gap: 1rem; max-height: 60vh; overflow-y: auto; }
.twr-center-card { border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 1rem; cursor: pointer; transition: border-color 0.2s; }
.twr-center-card:hover, .twr-center-card.selected { border-color: var(--accent-amber, #f59e0b); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); }
.twr-center-name { font-weight: 700; font-size: 0.95rem; }
.twr-center-address { font-size: 0.8rem; color: var(--text-muted, #64748b); }
.twr-center-phone { font-size: 0.85rem; margin-top: 0.25rem; }

.twr-tech-table { width: 100%; font-size: 0.8rem; margin-top: 0.5rem; }
.twr-tech-table th { text-align: left; font-weight: 600; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); }
.twr-tech-table td { padding: 0.25rem 0.5rem; }

.twr-mobility-avanza { background: #dcfce7; color: #166534; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }
.twr-mobility-no-avanza { background: #fee2e2; color: #991b1b; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; }

.twr-mobility-picker { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0; }
.twr-mobility-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 200px; height: 130px; border: 2px solid var(--border-color, #e2e8f0); border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 0.95rem; transition: all 0.2s; }
.twr-mobility-option:first-child { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.twr-mobility-option:last-child { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.twr-mobility-option i { font-size: 2rem; }
.twr-mobility-option:hover { transform: scale(1.03); }
.twr-mobility-option.selected.avanza { border-color: #22c55e; background: #bbf7d0; color: #14532d; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }
.twr-mobility-option.selected.no-avanza { border-color: #ef4444; background: #fecaca; color: #7f1d1d; box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }
[data-theme="dark"] .twr-mobility-option:first-child { background: #14532d; color: #86efac; border-color: #22c55e; }
[data-theme="dark"] .twr-mobility-option:last-child { background: #450a0a; color: #fca5a5; border-color: #ef4444; }
[data-theme="dark"] .twr-mobility-option.selected.avanza { background: #166534; color: #bbf7d0; box-shadow: 0 0 0 3px rgba(34,197,94,0.3); }
[data-theme="dark"] .twr-mobility-option.selected.no-avanza { background: #7f1d1d; color: #fecaca; box-shadow: 0 0 0 3px rgba(239,68,68,0.3); }

.twr-feedback-timer { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border-radius: 8px; background: var(--bg-muted, #f1f5f9); margin-bottom: 1.5rem; }
.twr-feedback-timer.alert { background: #fef3c7; border: 1px solid #f59e0b; }

.twr-log-timeline { border-left: 2px solid var(--border-color, #e2e8f0); padding-left: 1.5rem; margin-left: 0.5rem; }
.twr-log-entry { position: relative; padding-bottom: 1rem; margin-bottom: 1rem; }
.twr-log-entry::before { content: ''; position: absolute; left: -1.75rem; top: 0.25rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-blue, #38bdf8); }
.twr-log-entry .log-time { font-size: 0.75rem; color: var(--text-muted, #64748b); }
.twr-log-entry .log-message { font-size: 0.85rem; margin-top: 0.25rem; }

.twr-map-split { display: grid; grid-template-columns: 1fr 350px; gap: 1.5rem; min-height: 400px; padding-top: 1.5rem; }
.twr-map-placeholder { background: var(--bg-muted, #f1f5f9); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: var(--text-muted, #64748b); border: 2px dashed var(--border-color, #cbd5e1); }

.twr-conclusion-options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.twr-conclusion-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; cursor: pointer; transition: border-color 0.2s; }
.twr-conclusion-option:hover, .twr-conclusion-option.selected { border-color: var(--accent-amber, #f59e0b); }
.twr-conclusion-suboptions { margin-left: 2rem; margin-top: 0.5rem; }

.twr-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; padding-top: 1.5rem; }
.twr-stat-card { background: var(--card-bg, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 1.25rem; text-align: center; }
.twr-stat-card .stat-value { font-size: 2rem; font-weight: 800; color: var(--accent-amber, #f59e0b); }
.twr-stat-card .stat-label { font-size: 0.8rem; color: var(--text-muted, #64748b); margin-top: 0.25rem; }
.btn-twr-action { background: #1e3a5f; color: #fff; border: none; border-radius: 6px; padding: 0.5rem 1.25rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.btn-twr-action:hover { background: #15304f; }
.btn-twr-action:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme="dark"] .btn-twr-action { background: #f59e0b; color: #0f172a; }
[data-theme="dark"] .btn-twr-action:hover { background: #d97706; }

.twr-action-bar { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border-color, #e2e8f0); margin-top: 1.5rem; }

/* Dark mode overrides */
body.dark-mode .twr-action-card { background: #1e293b; border-color: #334155; }
body.dark-mode .twr-info-panel { background: #1e293b; }
body.dark-mode .twr-center-card { background: #1e293b; border-color: #334155; }
body.dark-mode .twr-stat-card { background: #1e293b; border-color: #334155; }
body.dark-mode .twr-feedback-timer { background: #1e293b; }
body.dark-mode .twr-map-placeholder { background: #1e293b; border-color: #334155; }
body.dark-mode .twr-conclusion-option { border-color: #334155; }
body.dark-mode .twr-step { background: #334155; color: #94a3b8; }
body.dark-mode .twr-step.active { background: #f59e0b; color: #0f172a; }

@media (max-width: 900px) { .wh-layout { grid-template-columns: 1fr; } }

/* ==========================================================================
   TWR Maps & Step 2 Dealer+Personnel Enhancement
   ========================================================================== */

/* Step navigation — clickable completed steps */
.twr-step.completed.clickable { cursor: pointer; }
.twr-step.completed.clickable:hover { background: #7dd3fc; }

/* Step 1 — Vehicle map container */
.twr-step1-map-container { margin: 1rem 0 1.5rem; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); }
.twr-step1-map-container .leaflet-container { height: 300px; width: 100%; }
.twr-map-coords { font-size: 0.78rem; color: var(--text-muted, #64748b); padding: 0.5rem 0; display: flex; gap: 1.5rem; align-items: center; }
.twr-map-coords i { margin-right: 0.3rem; opacity: 0.5; }

/* Step 2 — Split layout: map (left) + dealer cards (right) */
.twr-step2-split { display: grid; grid-template-columns: 1fr 400px; gap: 1.5rem; margin-bottom: 1.5rem; min-height: 450px; }
@media (max-width: 900px) { .twr-step2-split { grid-template-columns: 1fr; } }
.twr-step2-split .twr-step2-map { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); min-height: 400px; }
.twr-step2-split .twr-step2-map .leaflet-container { height: 100%; width: 100%; min-height: 400px; }
.twr-step2-split .twr-step2-dealers { max-height: 550px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; }

/* Dealer cards */
.twr-dealer-card { border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 0.75rem 1rem; transition: all 0.2s; }
.twr-dealer-card:hover { border-color: var(--accent-blue, #38bdf8); }
.twr-dealer-card.highlighted { border-color: var(--accent-amber, #f59e0b); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2); background: rgba(245, 158, 11, 0.03); }
.twr-dealer-card .dealer-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.twr-dealer-card .dealer-header i { color: var(--accent-blue, #38bdf8); }
.twr-dealer-card .dealer-name { font-weight: 700; font-size: 0.9rem; }
.twr-distance-badge { margin-left: auto; display: inline-flex; align-items: baseline; gap: 0.25rem; white-space: nowrap; }
.twr-distance-label { font-size: 0.7rem; font-weight: 500; color: var(--text-muted, #64748b); }
.twr-distance-value { font-size: 0.88rem; font-weight: 700; color: #1e3a5f; }
.twr-dealer-card .dealer-location { font-size: 0.78rem; color: var(--text-muted, #64748b); margin-bottom: 0.5rem; }

/* Person row inside dealer card */
.twr-person-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.82rem; }
.twr-person-row .person-name { flex: 1; min-width: 0; }
.twr-person-row .person-phone-input { width: 130px; font-size: 0.8rem; padding: 0.2rem 0.4rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 4px; background: var(--card-bg, #fff); color: inherit; }
.twr-person-row .person-phone-input:focus { border-color: var(--accent-blue, #38bdf8); outline: none; }
.twr-person-available { background: #dcfce7; color: #166534; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; }
.twr-person-busy { background: #fee2e2; color: #991b1b; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 600; }

/* Add person inline form */
.twr-add-person-inline { display: flex; gap: 0.4rem; align-items: center; padding-top: 0.4rem; margin-top: 0.4rem; border-top: 1px dashed var(--border-color, #e2e8f0); }
.twr-add-person-inline input { font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 4px; background: var(--card-bg, #fff); color: inherit; }
.twr-add-person-inline input:first-child { flex: 1; }
.twr-add-person-inline input:nth-child(2) { width: 120px; }
.twr-add-person-inline input:nth-child(3) { width: 110px; }
.twr-add-person-inline button { font-size: 0.75rem; padding: 0.25rem 0.5rem; background: var(--accent-blue, #38bdf8); color: #0f172a; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.twr-add-person-inline button:hover { background: #7dd3fc; }

/* Map pin CSS (divIcon) */
.twr-map-pin-vehicle { background: #f59e0b; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #b45309; }
.twr-map-pin-dealer { background: #38bdf8; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #0284c7; color: #0f172a; font-weight: 700; font-size: 0.6rem; }

/* Viewing step banner */
.twr-viewing-banner { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 6px; margin-bottom: 1rem; font-size: 0.85rem; }
.twr-viewing-banner a { color: var(--accent-blue, #38bdf8); cursor: pointer; text-decoration: underline; font-weight: 600; }

/* Dark mode */
body.dark-mode .twr-step1-map-container,
body.dark-mode .twr-step2-split .twr-step2-map { border-color: #334155; }
body.dark-mode .twr-dealer-card { background: #1e293b; border-color: #334155; }
body.dark-mode .twr-dealer-card.highlighted { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
body.dark-mode .twr-distance-value { color: #f59e0b; }
body.dark-mode .twr-person-row .person-phone-input { background: #0f172a; border-color: #334155; }
body.dark-mode .twr-add-person-inline input { background: #0f172a; border-color: #334155; }
body.dark-mode .twr-person-available { background: #14532d; color: #86efac; }
body.dark-mode .twr-person-busy { background: #450a0a; color: #fca5a5; }
body.dark-mode .twr-viewing-banner { background: #1e293b; border-color: #334155; }
body.dark-mode .twr-step.completed.clickable:hover { background: #d97706; }

/* Fleet Map — Mapa de Unidades */
.twr-fleet-stats { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.twr-fleet-stat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; }
.twr-fleet-stat .dot-green { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; display: inline-block; }
.twr-fleet-stat .dot-red { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; display: inline-block; }
.twr-fleet-stat .dot-orange { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; display: inline-block; }
.twr-fleet-map-container { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); }
body.dark-mode .twr-fleet-map-container { border-color: #334155; }

/* Fleet Alert Modal — Seguimiento */
.fleet-alert-modal { max-width: 560px; }
.fleet-alert-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fleet-alert-field label { display: block; font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.15rem; }
.fleet-alert-field span { font-size: 0.9rem; font-weight: 500; }
.fleet-alert-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fleet-alert-form-field { display: flex; flex-direction: column; gap: 0.2rem; }
.fleet-alert-form-field label { font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
.fleet-alert-form-field input,
.fleet-alert-form-field textarea {
    padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border-color, #cbd5e1);
    background: var(--input-bg, #fff); color: var(--text-color, #0f172a); font-size: 0.85rem; font-family: inherit;
}
.fleet-alert-form-field textarea { resize: vertical; min-height: 60px; }
.fleet-alert-form-field input:disabled,
.fleet-alert-form-field textarea:disabled { opacity: 0.6; cursor: not-allowed; }
body.dark-mode .fleet-alert-form-field input,
body.dark-mode .fleet-alert-form-field textarea { background: #1e293b; border-color: #334155; color: #f8fafc; }
.fleet-alert-resolved-info { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 6px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
body.dark-mode .fleet-alert-resolved-info { background: #14532d33; border-color: #16a34a55; }

/* Seguimiento button inside Leaflet popup */
.fleet-seguimiento-btn {
    display: inline-block; margin-top: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 5px;
    background: #f59e0b; color: #fff; font-size: 0.78rem; font-weight: 600; border: none; cursor: pointer;
}
.fleet-seguimiento-btn:hover { background: #d97706; }

/* =======================================================
   AI Report — Field Engineering Weekly AI Summaries
   ======================================================= */
.ai-report-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.badge-ai {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.02em; white-space: nowrap;
}
.ai-report-generating {
    display: flex; align-items: center; gap: 12px; padding: 24px; justify-content: center;
    font-size: 0.9rem; opacity: 0.7;
}
.ai-spinner {
    width: 22px; height: 22px; border: 3px solid #e2e8f0; border-top-color: #8b5cf6;
    border-radius: 50%; animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Grid for detail page */
.ai-report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 768px) { .ai-report-grid { grid-template-columns: 1fr; } }

/* Individual report card */
.ai-report-card {
    background: #fff; border-radius: 16px; padding: 20px; border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: box-shadow 0.2s;
}
.ai-report-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ai-report-card-nodata { opacity: 0.55; }
body.dark-mode .ai-report-card { background: #1e293b; border-color: #334155; }
body.dark-mode .ai-report-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.ai-report-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ai-report-eng-avatar {
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 0.85rem; flex-shrink: 0;
}
.ai-report-eng-info { flex: 1; min-width: 0; }
.ai-report-eng-name { font-weight: 700; font-size: 0.95rem; }
.ai-report-summary { font-size: 0.88rem; line-height: 1.5; margin-bottom: 10px; color: #334155; }
body.dark-mode .ai-report-summary { color: #cbd5e1; }

.ai-report-keypoints { margin: 0; padding-left: 18px; font-size: 0.83rem; line-height: 1.6; color: #475569; }
body.dark-mode .ai-report-keypoints { color: #94a3b8; }
.ai-report-keypoints li { margin-bottom: 2px; }

.ai-report-footer { margin-top: 12px; font-size: 0.75rem; opacity: 0.5; display: flex; align-items: center; gap: 5px; }

/* Mini cards for dashboard */
.ai-report-mini-list { display: flex; flex-direction: column; gap: 6px; }
.ai-report-mini-card {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0; transition: background 0.15s;
}
.ai-report-mini-card:hover { background: #f1f5f9; }
body.dark-mode .ai-report-mini-card { background: #1e293b; border-color: #334155; }
body.dark-mode .ai-report-mini-card:hover { background: #283548; }

.ai-report-eng-avatar-sm {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 0.7rem; flex-shrink: 0;
}
.ai-report-mini-info { flex: 1; min-width: 0; overflow: hidden; }
.ai-report-mini-name { font-weight: 700; font-size: 0.82rem; }
.ai-report-mini-summary { font-size: 0.78rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Back link */
.btn-back-link {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #64748b;
    text-decoration: none; padding: 4px 0; white-space: nowrap;
}
.btn-back-link:hover { color: #f59e0b; }

/* Small action button for grid */
.btn-action-sm {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px;
    background: #f1f5f9; color: #334155; font-size: 0.78rem; text-decoration: none; border: 1px solid #e2e8f0;
    white-space: nowrap; transition: background 0.15s;
}
.btn-action-sm:hover { background: #e2e8f0; }
body.dark-mode .btn-action-sm { background: #1e293b; color: #cbd5e1; border-color: #334155; }
body.dark-mode .btn-action-sm:hover { background: #334155; }