body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.editor-container {
    max-width: 98%;
    margin: 0 auto;
    padding: 16px;
}

/* Silver Metallic Header - Sticky at top */
.editor-header {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 25%, #a8a8a8 50%, #d0d0d0 75%, #b8b8b8 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 200;
    overflow: hidden;
    transition: all 0.5s ease;
}

.editor-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s ease;
}

.editor-header:hover::before {
    left: 100%;
}

.editor-header:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.editor-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 35px;
    font-weight: 700;
    font-style: normal;
    color: #0f172a;
    margin: 0;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* Control Panel */
.control-panel {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 25%, #f8f8f8 50%, #ececec 75%, #f0f0f0 100%);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(230, 230, 230, 0.6) 100%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.03) 10px, rgba(0, 0, 0, 0.03) 20px);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 3px rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 100;
    overflow: visible;
}

.control-label {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Silver Metallic Tabs (Matte) */
.nav-tabs {
    border: none;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    background: #c0c0c0;
    color: #0f172a;
    border: none;
    border-radius: 8px 8px 0 0;
    margin-right: 4px;
    margin-bottom: 4px;
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 13px;
}

.nav-tabs .nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.nav-tabs .nav-link.active {
    background: #e8e8e8;
    color: #0f172a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-weight: 800;
    transform: translateY(-1px);
}

/* Grid Container */
.grid-container {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 16px;
}

/* Per-tab explanatory footer (currently Quality Control only) */
.department-footer {
    margin-top: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #64748b;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}

.department-footer-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #475569;
}

.department-footer-text {
    margin: 0 0 8px 0;
}

.department-footer-list {
    margin: 0;
    padding-left: 18px;
}

.department-footer-list li {
    margin-bottom: 6px;
}

.department-footer-list li:last-child {
    margin-bottom: 0;
}

.department-footer-list strong {
    color: #1e293b;
}

/* Formula block: reference detail, deliberately quieter than the note */
.department-footer-formulas {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #cbd5e1;
    font-size: 11.5px;
    color: #64748b;
}

.department-footer-formulas-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.department-footer-formula {
    margin-bottom: 2px;
    line-height: 1.5;
}

.department-footer-formula code {
    background: none;
    padding: 0;
    color: #475569;
    font-size: 11.5px;
}

.department-footer-formula code:first-child {
    font-weight: 700;
    color: #334155;
}

/* AG Grid custom styling */
.ag-theme-alpine {
    --ag-border-color: #e2e8f0;
    --ag-header-background-color: #f1f5f9;
    --ag-odd-row-background-color: #ffffff;
    --ag-row-hover-color: #f8fafc;
    --ag-selected-row-background-color: #e0e7ff;
    /* Suppress all highlight colors that appear when remote cell updates arrive */
    --ag-range-selection-background-color: transparent;
    --ag-range-selection-background-color-2: transparent;
    --ag-range-selection-background-color-3: transparent;
    --ag-range-selection-background-color-4: transparent;
    --ag-range-selection-border-color: transparent;
    --ag-value-change-value-highlight-background-color: transparent;
    --ag-value-change-delta-up-color: transparent;
    --ag-value-change-delta-down-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Column separators. The alpine theme draws only row lines, which on a wide
   grid of coloured cells leaves nothing to track a column by -- the eye slides
   sideways and you answer the wrong question. */
.ag-theme-alpine .ag-cell {
    border-right: 1px solid #cbd5e1 !important;
}

/* The pinned columns already end in a divider; a second line doubles it. */
.ag-theme-alpine .ag-pinned-left-cols-container .ag-cell:last-child {
    border-right: none !important;
}

.ag-theme-alpine .ag-header-cell {
    border-right: 1px solid #cbd5e1;
}

/* Kill AG Grid's native blue border and teal inset glow on focused cells.
   These are hardcoded in the alpine theme CSS, not driven by variables alone.
   The right border is restored so focusing a cell does not punch a gap in the
   column separators. */
.ag-theme-alpine .ag-cell-focus {
    border: 1px solid transparent !important;
    border-right: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* On cells that carry our user-color class, let our border through cleanly */
.ag-theme-alpine .ag-cell-own-cursor {
    box-shadow: inset 0 0 0 2px var(--active-user-color, #4285F4) !important;
    border: 1px solid var(--active-user-color, #4285F4) !important;
    outline: none !important;
}

.ag-header-cell-text {
    font-weight: 700;
    font-size: 12px;
    color: #0f172a;
    /* Wrap rather than ellipsis: question names carry the meaning, and a
       reviewer cannot answer a question they can only half read. */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    text-overflow: clip;
}

/* Let the wrapped text use the full cell height instead of one centred row. */
.ag-theme-alpine .ag-header-cell-label {
    align-items: flex-start;
    padding-top: 6px;
}

.ag-theme-alpine .ag-header-focused-column {
    background-color: #dbeafe !important;
    box-shadow: inset 0 -3px 0 #2563eb !important;
}

.ag-theme-alpine .ag-header-focused-column .ag-header-cell-text {
    color: #1d4ed8 !important;
}

.ag-cell {
    font-size: 13px;
}

.ag-theme-alpine .ag-cell-focused-tech-name {
    background-color: #dbeafe !important;
    color: #1e3a8a !important;
    font-weight: 800 !important;
    box-shadow: inset 4px 0 0 #2563eb !important;
}

/* Locked columns styling */
.locked-column {
    background-color: #f8fafc !important;
    font-weight: 600;
    color: #475569 !important;
}

.ag-theme-alpine .ag-cell.ag-cell-focused-tech-name,
.ag-theme-alpine .ag-cell.locked-column.ag-cell-focused-tech-name {
    background-color: #fde68a !important;
    color: #111827 !important;
    font-weight: 800 !important;
    box-shadow: inset 4px 0 0 #2563eb, inset 0 0 0 2px #f59e0b !important;
}

.ag-theme-alpine .ag-header-cell.ag-header-focused-column,
.ag-theme-alpine .ag-header-cell.ag-header-focused-column:hover {
    background-color: #fde68a !important;
    box-shadow: inset 0 -4px 0 #2563eb, inset 0 0 0 2px #f59e0b !important;
}

/* Save button */
.save-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.save-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Action buttons (Select All, etc.) - Dashboard style */
.action-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.action-button:active {
    transform: translateY(0px);
}

/* Toggle button (Hide/Unhide) - Dashboard style */
.toggle-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.toggle-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.toggle-button:active {
    transform: translateY(0px) !important;
}

/* Status messages */
#save-status:empty { display: none; }
.status-message:not(.success):not(.error) { display: none; }

.status-message {
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: 16px;
    font-weight: 600;
    text-align: center;
    animation: slideIn 0.3s ease;
}

.status-message.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.status-message.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

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

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

/* Login Page Styles */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-card {
    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 25%, #a8a8a8 50%, #d0d0d0 75%, #b8b8b8 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5);
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
}

.login-card:hover::before {
    left: 100%;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.login-logo {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 10px auto;
    padding: 20px;
    border-radius: 30px;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.login-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    font-style: normal;
    color: #0f172a;
    margin: 0 0 8px 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.login-subtitle {
    font-size: 16px;
    color: #334155;
    margin: 0 0 30px 0;
    font-weight: 500;
}

.login-input {
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
}

.login-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.login-button {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.5);
}

.login-button:active {
    transform: translateY(0px);
}

.login-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 12px;
    border-radius: 8px;
    margin-top: 16px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.login-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 12px;
    border-radius: 8px;
    margin-top: 16px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.logout-button {
    background: linear-gradient(135deg, rgba(203, 213, 225, 0.6) 0%, rgba(148, 163, 184, 0.7) 100%);
    color: #334155;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    backdrop-filter: blur(8px);
}

.user-profile-badge {
    position: absolute;
    top: 18px;
    right: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: transparent;
    padding: 0;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    z-index: 1001;
    cursor: help;
}

.user-avatar,
.user-avatar-initial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--user-presence-color, #4285F4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    object-fit: cover;
}

.user-info {
    display: none;
    flex-direction: column;
    justify-content: center;
}

.ag-cell-own-cursor {
    position: relative;
    box-shadow: inset 0 0 0 2px var(--active-user-color, #4285F4) !important;
    outline: none !important;
}

.ag-cell-own-cursor::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--active-user-color, #4285F4) !important;
    box-shadow: inset 0 0 0 1px var(--active-user-color, #4285F4) !important;
    pointer-events: none;
    border-radius: 2px;
    z-index: 20;
}

.user-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.user-email {
    font-size: 11px;
    color: #475569;
    line-height: 1.2;
}

.logout-button:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

.logout-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3),
        inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Standard Dropdowns - Reset to browser/Dash defaults */
.Select-control {
    border-radius: 4px;
}

@media (max-width: 768px) {
    .editor-container {
        padding: 8px;
    }

    .editor-title {
        font-size: 20px;
    }

    .nav-tabs .nav-link {
        padding: 8px 12px;
        font-size: 11px;
    }
}

/* ── Cloud Save Status Icon ── */
/* Kill AG Grid's yellow cell-change flash completely */
.ag-theme-alpine .ag-cell-data-changed {
    background-color: transparent !important;
}
.ag-theme-alpine .ag-cell-data-changed-animation {
    background-color: transparent !important;
}
.ag-theme-alpine .ag-cell-highlight {
    background-color: transparent !important;
}

#cloud-save-icon {
    position: fixed;
    top: 62px;
    right: 122px;
    z-index: 1000;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}
#cloud-save-icon:empty { display: none; }

@keyframes cloud-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
#cloud-save-icon .cloud-spinner {
    display: inline-block;
    animation: cloud-spin 1s linear infinite;
}