/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET - EXCEL/SMARTSHEET STYLE GRID
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   COLOR PALETTE (Excel-style) - Scoped to supersheet to avoid conflicts
   ═══════════════════════════════════════════════════════════════════════════ */
.supersheet-container {
    /* Theme colors */
    --ss-primary: #0969da;
    --ss-primary-light: #ddf4ff;
    --ss-primary-dark: #0550ae;
    
    /* Cell background colors (Excel palette) */
    --ss-bg-none: transparent;
    --ss-bg-red-light: #ffeef0;
    --ss-bg-red: #ffcecf;
    --ss-bg-red-dark: #ff8182;
    --ss-bg-orange-light: #fff5eb;
    --ss-bg-orange: #ffd9b3;
    --ss-bg-orange-dark: #ffb366;
    --ss-bg-yellow-light: #fffde7;
    --ss-bg-yellow: #fff59d;
    --ss-bg-yellow-dark: #ffee58;
    --ss-bg-green-light: #e8f5e9;
    --ss-bg-green: #a5d6a7;
    --ss-bg-green-dark: #66bb6a;
    --ss-bg-teal-light: #e0f2f1;
    --ss-bg-teal: #80cbc4;
    --ss-bg-teal-dark: #26a69a;
    --ss-bg-blue-light: #e3f2fd;
    --ss-bg-blue: #90caf9;
    --ss-bg-blue-dark: #42a5f5;
    --ss-bg-indigo-light: #e8eaf6;
    --ss-bg-indigo: #9fa8da;
    --ss-bg-indigo-dark: #5c6bc0;
    --ss-bg-purple-light: #f3e5f5;
    --ss-bg-purple: #ce93d8;
    --ss-bg-purple-dark: #ab47bc;
    --ss-bg-pink-light: #fce4ec;
    --ss-bg-pink: #f48fb1;
    --ss-bg-pink-dark: #ec407a;
    --ss-bg-gray-light: #f5f5f5;
    --ss-bg-gray: #e0e0e0;
    --ss-bg-gray-dark: #9e9e9e;
    
    /* Text colors */
    --ss-text-default: #24292f;
    --ss-text-red: #cf222e;
    --ss-text-orange: #bc4c00;
    --ss-text-yellow: #9a6700;
    --ss-text-green: #1a7f37;
    --ss-text-teal: #0d6969;
    --ss-text-blue: #0550ae;
    --ss-text-indigo: #3949ab;
    --ss-text-purple: #6e40c9;
    --ss-text-pink: #bf3989;
    --ss-text-gray: #656d76;
}

/* Cell background color classes */
.cell-bg-red-light { background-color: var(--ss-bg-red-light) !important; }
.cell-bg-red { background-color: var(--ss-bg-red) !important; }
.cell-bg-red-dark { background-color: var(--ss-bg-red-dark) !important; }
.cell-bg-orange-light { background-color: var(--ss-bg-orange-light) !important; }
.cell-bg-orange { background-color: var(--ss-bg-orange) !important; }
.cell-bg-orange-dark { background-color: var(--ss-bg-orange-dark) !important; }
.cell-bg-yellow-light { background-color: var(--ss-bg-yellow-light) !important; }
.cell-bg-yellow { background-color: var(--ss-bg-yellow) !important; }
.cell-bg-yellow-dark { background-color: var(--ss-bg-yellow-dark) !important; }
.cell-bg-green-light { background-color: var(--ss-bg-green-light) !important; }
.cell-bg-green { background-color: var(--ss-bg-green) !important; }
.cell-bg-green-dark { background-color: var(--ss-bg-green-dark) !important; }
.cell-bg-teal-light { background-color: var(--ss-bg-teal-light) !important; }
.cell-bg-teal { background-color: var(--ss-bg-teal) !important; }
.cell-bg-teal-dark { background-color: var(--ss-bg-teal-dark) !important; }
.cell-bg-blue-light { background-color: var(--ss-bg-blue-light) !important; }
.cell-bg-blue { background-color: var(--ss-bg-blue) !important; }
.cell-bg-blue-dark { background-color: var(--ss-bg-blue-dark) !important; }
.cell-bg-indigo-light { background-color: var(--ss-bg-indigo-light) !important; }
.cell-bg-indigo { background-color: var(--ss-bg-indigo) !important; }
.cell-bg-indigo-dark { background-color: var(--ss-bg-indigo-dark) !important; }
.cell-bg-purple-light { background-color: var(--ss-bg-purple-light) !important; }
.cell-bg-purple { background-color: var(--ss-bg-purple) !important; }
.cell-bg-purple-dark { background-color: var(--ss-bg-purple-dark) !important; }
.cell-bg-pink-light { background-color: var(--ss-bg-pink-light) !important; }
.cell-bg-pink { background-color: var(--ss-bg-pink) !important; }
.cell-bg-pink-dark { background-color: var(--ss-bg-pink-dark) !important; }
.cell-bg-gray-light { background-color: var(--ss-bg-gray-light) !important; }
.cell-bg-gray { background-color: var(--ss-bg-gray) !important; }
.cell-bg-gray-dark { background-color: var(--ss-bg-gray-dark) !important; }

/* Text color classes */
.cell-text-red { color: var(--ss-text-red) !important; }
.cell-text-orange { color: var(--ss-text-orange) !important; }
.cell-text-yellow { color: var(--ss-text-yellow) !important; }
.cell-text-green { color: var(--ss-text-green) !important; }
.cell-text-teal { color: var(--ss-text-teal) !important; }
.cell-text-blue { color: var(--ss-text-blue) !important; }
.cell-text-indigo { color: var(--ss-text-indigo) !important; }
.cell-text-purple { color: var(--ss-text-purple) !important; }
.cell-text-pink { color: var(--ss-text-pink) !important; }
.cell-text-gray { color: var(--ss-text-gray) !important; }

/* Container */
.supersheet-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #d0d7de;
    border-radius: 0;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    outline: none;
    overflow: hidden;
}

.supersheet-container:focus {
    border-color: #0969da;
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLBAR (Excel-like formatting bar)
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(180deg, #f6f8fa 0%, #ebeef1 100%);
    border-bottom: 1px solid #d0d7de;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.toolbar-cell-ref {
    min-width: 50px;
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.toolbar-separator {
    width: 1px;
    height: 24px;
    background: #d0d7de;
    margin: 0 4px;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #24292f;
    transition: all 0.15s;
}

.toolbar-btn:hover {
    background: #fff;
    border-color: #d0d7de;
}

.toolbar-btn.active {
    background: #ddf4ff;
    border-color: #0969da;
    color: #0969da;
}

.toolbar-color-btn {
    flex-direction: column;
    width: 32px;
    height: 28px;
    gap: 2px;
}

.toolbar-color-btn .toolbar-icon {
    font-size: 12px;
    line-height: 1;
}

.toolbar-color-btn .color-indicator {
    width: 18px;
    height: 4px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.1);
}

.toolbar-select {
    height: 28px;
    padding: 0 8px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.toolbar-select:hover {
    border-color: var(--rz-primary);
}

/* Color picker popup */
.supersheet-color-picker-popup {
    position: absolute;
    background: var(--rz-white);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 8px;
}

.color-picker-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rz-base-200);
}

.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(10, 22px);
    gap: 3px;
}

.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.15s;
}

.color-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.color-swatch.color-none {
    background: linear-gradient(135deg, #fff 45%, #ff0000 45%, #ff0000 55%, #fff 55%) !important;
}

/* Excel-style color picker grid (10 columns x 6 rows) */
.color-picker-grid-excel {
    display: grid;
    grid-template-columns: repeat(10, 22px);
    gap: 2px;
    margin-bottom: 8px;
}

.color-picker-recent {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--rz-base-200);
    flex-wrap: wrap;
}

.color-picker-recent .color-label {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    margin-right: 4px;
}

.color-picker-recent .color-swatch.small {
    width: 18px;
    height: 18px;
}

/* Border picker popup */
.supersheet-border-picker-popup {
    position: absolute;
    top: 40px;
    right: 100px;
    background: var(--rz-white);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 12px;
    min-width: 260px;
}

.border-picker-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--rz-text-color);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rz-base-200);
}

/* Live preview of the configured border style + color. */
.border-picker-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: var(--rz-base-50);
    border-radius: 6px;
}

.border-picker-preview-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
}

.border-picker-preview-cell {
    width: 44px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rz-white);
    font-size: 12px;
    color: var(--rz-text-color);
    border-radius: 2px;
}

.border-picker-selection-hint {
    font-size: 11px;
    color: var(--rz-primary);
    background: rgba(var(--rz-primary-rgb, 66, 133, 244) / 0.08);
    border: 1px solid rgba(var(--rz-primary-rgb, 66, 133, 244) / 0.25);
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 10px;
    text-align: center;
}

/* Two-column grid — each option shows icon + descriptive label. */
.border-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 12px;
}

.border-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 8px;
    min-height: 32px;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-white);
    cursor: pointer;
    transition: all 0.1s;
    font-size: 12px;
    color: var(--rz-text-color);
    text-align: left;
}

.border-option:hover {
    background: var(--rz-base-100);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.border-option:hover svg {
    color: var(--rz-primary);
}

.border-option svg {
    color: var(--rz-text-secondary-color);
    flex-shrink: 0;
}

.border-option-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.border-option-danger:hover {
    border-color: var(--rz-danger);
    color: var(--rz-danger);
}

.border-option-danger:hover svg {
    color: var(--rz-danger);
}

.border-style-selector,
.border-color-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.border-style-selector label,
.border-color-selector label {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    min-width: 50px;
}

.border-style-selector select {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    font-size: 12px;
    background: var(--rz-white);
    color: var(--rz-text-color);
}

.border-color-selector .rz-colorpicker {
    flex: 0 0 auto;
}

.border-color-selector .rz-colorpicker-trigger {
    height: 28px !important;
    min-width: 40px !important;
    border: 1px solid var(--rz-base-300) !important;
    border-radius: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE TOOLBAR (Smartsheet-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 34px;
    padding: 3px 8px;
    background: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-200);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    z-index: 10;
}

/* Spacer pushes right items to the end */
.ss-toolbar-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

.ss-divider {
    width: 1px;
    height: 20px;
    background: var(--rz-base-300);
    margin: 0 3px;
    flex-shrink: 0;
}

.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    color: var(--rz-text-color);
    transition: all 0.1s ease;
    flex-shrink: 0;
}

.ss-btn:hover {
    background: var(--rz-base-100);
    border-color: var(--rz-base-300);
}

.ss-btn.ss-active {
    background: var(--rz-base-200);
    border-color: var(--rz-base-300);
    color: var(--rz-primary);
}

/* Text label inside button (B, I, U, ab) */
.ss-btn-label {
    font-family: 'Segoe UI', Calibri, sans-serif;
    font-size: 15px;
    line-height: 1;
}

.ss-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Color picker buttons (Excel Font Group style) ---- */

.ss-color-picker-inline {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    padding: 0 3px;
    border: 1px solid transparent;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    min-width: 20px;
}

.ss-color-picker-inline.ss-bg-picker { min-width: 19px; }
.ss-color-picker-inline.ss-text-picker { min-width: 18px; }

.ss-color-picker-inline:hover {
    border-color: var(--rz-base-300);
    background: var(--rz-base-100);
}

.ss-color-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--rz-text-color);
    -webkit-user-select: none;
    user-select: none;
    z-index: 1;
    pointer-events: none;
}

.ss-color-icon .rzi,
.ss-color-icon .rz-icon {
    font-size: 16px !important;
    line-height: 1;
    color: inherit;
}

.ss-color-icon-text {
    width: 18px;
}

.ss-color-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    border-radius: 1px;
}

.ss-color-picker-inline .rz-colorpicker-trigger {
    min-width: 12px !important;
    width: 12px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 2px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ss-color-picker-inline .rz-colorpicker {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 2;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ss-color-picker-inline .rz-colorpicker *,
.ss-color-picker-inline .rz-colorpicker .rz-colorpicker-value,
.ss-color-picker-inline .rz-colorpicker .rz-colorpicker-text,
.ss-color-picker-inline .rz-colorpicker .rz-inputtext,
.ss-color-picker-inline .rz-colorpicker .rz-dropdown-trigger {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ss-color-picker-inline .rz-colorpicker .rz-button.rz-colorpicker-trigger,
.ss-color-picker-inline .rz-colorpicker .rz-colorpicker-trigger {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ss-color-picker-inline .rz-colorpicker-value {
    display: none !important;
}

.ss-color-picker-inline .rz-colorpicker-trigger .rzi {
    display: none !important;
}

.ss-color-picker-inline .rz-colorpicker-trigger:focus,
.ss-color-picker-inline .rz-colorpicker-trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.ss-color-icon-text .ss-color-strip {
    left: 1px;
    right: 1px;
}

.ss-select {
    height: 26px;
    padding: 0 6px;
    background: var(--rz-white);
    border: 1px solid var(--rz-base-300);
    border-radius: 3px;
    font-size: 12px;
    color: var(--rz-text-color);
    cursor: pointer;
    outline: none;
}

.ss-select:hover {
    border-color: var(--rz-primary);
}

.ss-select:focus {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px rgba(var(--rz-primary-rgb), 0.2);
}

.ss-font-family {
    width: 96px;
}

.ss-font-size {
    width: 52px;
}

.ss-function {
    width: 60px;
}

/* Hide number input spinners */
input.numeric-input::-webkit-outer-spin-button,
input.numeric-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.numeric-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input.numeric-input {
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULA BAR (Excel-like)
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-formula-bar {
    display: flex;
    align-items: center;
    height: 28px;
    background: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-200);
    padding: 0 4px;
    flex-shrink: 0;
    position: relative;
}

.formula-cell-ref {
    min-width: 50px;
    padding: 2px 8px;
    background: var(--rz-white);
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    margin-right: 4px;
    color: var(--rz-text-color);
}

.formula-fx {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    background: linear-gradient(180deg, var(--rz-base-100) 0%, var(--rz-base-200) 100%);
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    font-weight: bold;
    font-size: 11px;
    color: var(--rz-text-secondary-color);
    margin-right: 4px;
}

.formula-input {
    flex: 1;
    height: 22px;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    padding: 0 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    background: var(--rz-white) !important;
    color: var(--rz-text-color) !important;
    outline: none;
}

.formula-input:focus {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px rgba(var(--rz-primary-rgb), 0.15);
}

.formula-input::placeholder {
    color: var(--rz-text-secondary-color);
    font-style: italic;
}

.formula-input.formula-input-error {
    border-color: #cf222e;
    background: #fff5f5 !important;
}

:root.rz-dark .formula-input.formula-input-error,
[data-bs-theme="dark"] .formula-input.formula-input-error {
    border-color: #f85149;
    background: #3d1c1c !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUNCTION HELP POPUP (Smartsheet-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.formula-help-popup {
    position: absolute;
    top: 100%;
    left: 80px;
    right: 8px;
    background: var(--rz-white);
    border: 1px solid var(--rz-base-300);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1001;
    font-size: 13px;
    overflow: hidden;
}

.formula-help-signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 14px;
    background: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-200);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    gap: 0;
}

.formula-help-name {
    font-weight: 700;
    color: var(--rz-text-color);
}

.formula-help-paren {
    color: var(--rz-text-secondary-color);
    font-weight: 600;
}

.formula-help-comma {
    color: var(--rz-text-secondary-color);
}

.formula-help-bracket {
    color: #8b949e;
    font-size: 12px;
}

.formula-help-param {
    color: var(--rz-text-secondary-color);
    padding: 1px 3px;
    border-radius: 3px;
    transition: all 0.15s;
}

.formula-help-param.active-param {
    background: #fff8c5;
    color: #1a1a1a;
    font-weight: 700;
    box-shadow: 0 0 0 1px #d4a72c;
}

.formula-help-body {
    padding: 10px 14px 12px;
}

.formula-help-section {
    margin-bottom: 10px;
}

.formula-help-section:last-child {
    margin-bottom: 0;
}

.formula-help-label {
    font-weight: 700;
    font-size: 12px;
    color: var(--rz-text-color);
    margin-bottom: 3px;
}

.formula-help-value {
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1.5;
}

.formula-help-args {
    list-style: disc;
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 12px;
    color: var(--rz-text-secondary-color);
    line-height: 1.6;
}

.formula-help-args li {
    padding: 1px 0;
}

.formula-help-args li.active-arg {
    color: var(--rz-text-color);
    font-weight: 500;
}

.formula-help-args li strong {
    color: var(--rz-text-color);
    font-weight: 600;
}

/* Dark mode — function help popup */
:root.rz-dark .formula-help-popup,
[data-bs-theme="dark"] .formula-help-popup {
    background: var(--rz-base-100);
    border-color: var(--rz-base-400);
}

:root.rz-dark .formula-help-signature,
[data-bs-theme="dark"] .formula-help-signature {
    background: var(--rz-base-200);
    border-bottom-color: var(--rz-base-400);
}

:root.rz-dark .formula-help-param.active-param,
[data-bs-theme="dark"] .formula-help-param.active-param {
    background: #3d3200;
    color: #ffd33d;
    box-shadow: 0 0 0 1px #9e7700;
}

:root.rz-dark .formula-help-args li.active-arg,
[data-bs-theme="dark"] .formula-help-args li.active-arg {
    color: #e6edf3;
}

/* Formula Autocomplete Popup */
.formula-autocomplete {
    position: absolute;
    top: 100%;
    left: 80px;
    right: 8px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--rz-white);
    border: 1px solid var(--rz-base-300);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
}

.formula-autocomplete-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 10px 12px;
    border-bottom: 1px solid #eaecef;
    cursor: pointer;
    transition: background 0.1s;
}

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

.formula-autocomplete-item:hover,
.formula-autocomplete-item.selected {
    background: #f3f8ff;
}

.formula-name {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.formula-icon {
    color: #0969da;
    font-weight: 600;
    font-size: 11px;
}

.formula-syntax {
    grid-column: 2;
    grid-row: 1;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 11px;
    color: #656d76;
}

.formula-description {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: 12px;
    color: #57606a;
}

.formula-tooltip {
    grid-column: 3;
    grid-row: 1 / 3;
    position: relative;
    display: flex;
    align-items: center;
}

.info-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e1e4e8;
    color: #57606a;
    font-size: 12px;
    cursor: help;
}

.tooltip-content {
    display: none;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    padding: 12px;
    background: #24292e;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    z-index: 1001;
    margin-right: 8px;
}

.formula-tooltip:hover .tooltip-content {
    display: block;
}

.tooltip-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: #58a6ff;
}

.tooltip-desc {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.tooltip-example {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 11px;
    background: rgba(255,255,255,0.1);
    padding: 6px 8px;
    border-radius: 4px;
}

.tooltip-example strong {
    color: #7ee787;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-header {
    display: flex;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--rz-base-50) 0%, var(--rz-base-100) 100%);
    border-bottom: 2px solid var(--rz-base-200);
    position: sticky;
    top: 0;
    z-index: 10;
}

.supersheet-col-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    height: 36px;
    border-right: 1px solid var(--rz-base-200);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 500;
    color: var(--rz-text-color);
    transition: background-color 0.15s;
}

.supersheet-col-header:hover {
    background: var(--rz-base-100);
}

.supersheet-col-header.selected {
    background: var(--rz-primary-lighter) !important;
    box-shadow: inset 0 -3px 0 0 var(--rz-primary);
}

/* ── Drag-and-drop reordering states ────────────────────────────
   ss-col-dragging: column currently being dragged — dimmed to give
   visual feedback that it is being moved.
   ss-col-drop-target: column currently being hovered over while a
   drag is in flight — left border acts as the insertion indicator. */
.supersheet-col-header.ss-col-dragging {
    opacity: 0.5;
}

.supersheet-col-header.ss-col-drop-target {
    box-shadow: inset 3px 0 0 0 var(--rz-primary);
}

.col-header-content {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    flex: 1;
}

.drag-handle {
    color: var(--rz-text-secondary-color);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
}

.supersheet-col-header:hover .drag-handle {
    opacity: 1;
}

.col-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.col-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.required-mark {
    color: #cf222e;
    font-weight: bold;
}

.col-menu-btn {
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    color: #656d76;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s;
}

.supersheet-col-header:hover .col-menu-btn {
    opacity: 1;
}

.col-menu-btn:hover {
    background: #d0d7de;
    color: #24292f;
}

/* Column resizer */
.col-resizer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
}

.col-resizer:hover,
.col-resizer:active {
    background: #0969da;
}

/* Corner cell (top-left) */
.supersheet-corner {
    flex-shrink: 0;
    width: 50px;
    min-width: 50px;
    justify-content: center;
    background: linear-gradient(180deg, #ebeef1 0%, #e1e4e8 100%);
}

/* Add column button */
.supersheet-add-col {
    width: 40px;
    min-width: 40px;
    justify-content: center;
    color: #656d76;
    border-right: none;
    cursor: pointer;
}

.supersheet-add-col:hover {
    background: #ddf4ff;
    color: #0969da;
}

.supersheet-add-col span {
    font-size: 18px;
    font-weight: 300;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY / ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-body {
    flex: 1;
    overflow: auto;
    background: #fff;
}

.supersheet-row {
    display: flex;
    border-bottom: 1px solid #eaecef;
    height: 32px;
    min-height: 32px;
}

.supersheet-row:hover > .supersheet-cell:not(.supersheet-empty) {
    background: #f6f8fa;
}

.supersheet-row.selected > .supersheet-cell:not(.supersheet-empty) {
    background: #eef6ff !important;
}

.supersheet-row.selected > .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty) {
    border-top: 2px solid var(--rz-primary);
    border-bottom: 2px solid var(--rz-primary);
    border-right-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
}

.supersheet-row.selected > .supersheet-cell:nth-child(2) {
    border-left: 2px solid var(--rz-primary);
}

.supersheet-row.selected > .supersheet-cell:not(.supersheet-empty):last-child {
    border-right: 2px solid var(--rz-primary);
}

.supersheet-row.selected > .supersheet-row-header {
    background: #e8f2ff !important;
    color: var(--rz-primary);
    font-weight: 700;
}

/* Active row (clicked/focused) — full border highlight like Excel */
.supersheet-row.active-row {
    position: relative;
    z-index: 2;
}

.supersheet-row.active-row > .supersheet-cell:not(.supersheet-empty) {
    background: #f0f7ff;
}

.supersheet-row.active-row > .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty) {
    border-top: 2px solid var(--rz-primary);
    border-bottom: 2px solid var(--rz-primary);
    padding-top: 0;
    padding-bottom: 0;
}

.supersheet-row.active-row > .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty):first-of-type {
    border-left: 2px solid var(--rz-primary);
}

.supersheet-row.active-row > .supersheet-cell:nth-last-child(2) {
    border-right: 2px solid var(--rz-primary);
}

/* Ensure empty cell gets no active-row styling */
.supersheet-row.active-row > .supersheet-empty {
    border: none !important;
    background: transparent !important;
}

.supersheet-row.active-row > .supersheet-row-header,
.supersheet-row-header.active-row-header {
    background: var(--rz-primary);
    color: #fff;
    font-weight: 700;
}

/* Subtle indicator for current active row header (not selected) */
.supersheet-row-header.current-row-header:not(.active-row-header) {
    font-weight: 700;
    color: var(--rz-primary);
}

/* Formula error display */
.cell-error {
    color: #cf222e;
    font-weight: 600;
    font-size: 11px;
    cursor: help;
}

/* Computed (Formula / Rollup) cell — read-only with small icon marker. */
.ss-computed-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rz-text-color);
}

.ss-computed-cell .ss-computed-icon {
    font-size: 13px;
    color: var(--rz-primary);
    opacity: 0.8;
}

/* Cell reference highlight during formula editing */
.supersheet-cell.ref-highlighted {
    position: relative;
    z-index: 3;
}

/* Formula validation error message */
.formula-validation-error {
    position: absolute;
    top: 100%;
    left: 120px;
    right: 8px;
    padding: 6px 10px;
    background: #fff5f5;
    border: 1px solid #cf222e;
    border-radius: 4px;
    color: #cf222e;
    font-size: 11px;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Formula autocomplete category badge */
.formula-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    vertical-align: middle;
}

.formula-category.cat-Math { background: #ddf4ff; color: #0969da; }
.formula-category.cat-Logic { background: #dafbe1; color: #1a7f37; }
.formula-category.cat-Text { background: #fff8c5; color: #9a6700; }
.formula-category.cat-Date { background: #ffeff7; color: #bf3989; }
.formula-category.cat-Range { background: #fbefff; color: #8250df; }

/* Column suggestions header */
.column-suggestions-header {
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #656d76;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #eaecef;
    display: flex;
    align-items: center;
    gap: 6px;
}

:root.rz-dark .column-suggestions-header,
[data-bs-theme="dark"] .column-suggestions-header {
    color: var(--rz-text-secondary-color);
    border-bottom-color: var(--rz-base-200);
}

/* Row header (number column) */
.supersheet-row-header {
    flex-shrink: 0;
    width: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f6f8fa;
    border-right: 1px solid #d0d7de;
    color: #656d76;
    font-size: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.supersheet-row-header {
    position: relative;
}

.supersheet-row-header:hover {
    background: #e6ecf0;
}

/* Smartsheet-style row menu button — appears on row header hover */
.ss-row-menu-btn {
    display: none;
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    color: #6b7280;
    border-radius: 2px;
}

.ss-row-menu-btn .rzi {
    font-size: 14px;
    display: block;
}

.ss-row-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #374151;
}

.supersheet-row-header:hover .ss-row-menu-btn,
.supersheet-row-header.active-row-header .ss-row-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide row number when menu btn is visible to avoid overlap */
.supersheet-row-header:hover .row-number {
    opacity: 0;
}

.supersheet-row-header input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: #0969da;
    border-radius: 3px;
}

.row-number {
    font-variant-numeric: tabular-nums;
}

/* Add row button */
.supersheet-add-row {
    background: #f6f8fa;
    border-bottom: none;
    cursor: pointer;
    color: #656d76;
}

.supersheet-add-row:hover {
    background: #ddf4ff;
    color: #0969da;
}

.supersheet-add-row .add-icon {
    font-size: 16px;
    font-weight: 300;
}

.supersheet-add-row .add-text {
    font-size: 12px;
    padding-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELLS
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-cell {
    position: relative;
    display: flex;
    align-items: center;
    --supersheet-row-height: 32px;
    padding: 0 8px;
    border-right: 1px solid var(--rz-base-200);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--rz-white);
    color: var(--rz-text-color);
    -webkit-user-select: none;
    user-select: none;
}

.supersheet-cell .cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
}

.supersheet-cell .supersheet-editor-host {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: text;
    user-select: text;
}

.supersheet-cell > input,
.supersheet-cell > textarea,
.supersheet-cell > select,
.supersheet-cell .supersheet-user-picker,
.supersheet-cell .supersheet-user-picker * {
    -webkit-user-select: text;
    user-select: text;
}

/* Active cell (cursor) */
.supersheet-cell.active {
    outline: 2px solid var(--rz-primary);
    outline-offset: -1px;
    z-index: 5;
    background: var(--rz-white);
    border-right-color: transparent;
}

/* Fill handle — 8×8 square at bottom-right corner of the active cell (Excel-style drag-to-fill) */
.ss-fill-handle {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--rz-primary);
    border: 1.5px solid var(--rz-white);
    cursor: crosshair;
    z-index: 20;
}

/* Cells highlighted while a fill-handle drag is in progress */
.supersheet-cell.ss-fill-preview {
    background: rgba(0, 105, 217, 0.08) !important;
    outline: 1px dashed var(--rz-primary);
    outline-offset: -1px;
}

/* Column selected */
.supersheet-cell.col-selected {
    background: rgba(9, 105, 218, 0.08) !important;
    box-shadow: inset 2px 0 0 0 #0969da, inset -2px 0 0 0 #0969da;
}

/* Multi-cell selected (Ctrl+click) */
.supersheet-cell.cell-selected {
    background: rgba(9, 105, 218, 0.12) !important;
    outline: 1px solid rgba(9, 105, 218, 0.5);
    outline-offset: -1px;
    z-index: 3;
}

/* First row in column selection */
.supersheet-row:first-child .supersheet-cell.col-selected {
    box-shadow: inset 2px 0 0 0 #0969da, inset -2px 0 0 0 #0969da, inset 0 2px 0 0 #0969da;
}

/* Last row in column selection */
.supersheet-row:last-of-type .supersheet-cell.col-selected {
    box-shadow: inset 2px 0 0 0 #0969da, inset -2px 0 0 0 #0969da, inset 0 -2px 0 0 #0969da;
}

/* Empty cell (for add column space) */
.supersheet-empty {
    width: 40px;
    min-width: 40px;
    background: transparent;
    border-right: none;
    pointer-events: none;
}

.supersheet-empty.col-selected,
.supersheet-empty.cell-selected,
.supersheet-empty.active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELL EDITING
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-cell input[type="text"],
.supersheet-cell input[type="number"],
.supersheet-cell input[type="date"],
.supersheet-cell input[type="datetime-local"],
.supersheet-cell input[type="email"],
.supersheet-cell input[type="url"],
.supersheet-cell input[type="tel"],
.supersheet-cell select,
.supersheet-cell textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: #ffffff !important;
    color: #24292f !important;
    padding: 0 4px;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
    caret-color: #0969da;
}

.supersheet-cell input::placeholder,
.supersheet-cell textarea::placeholder {
    color: #8c959f;
}

.supersheet-cell input:focus,
.supersheet-cell select:focus,
.supersheet-cell textarea:focus,
.supersheet-cell input:focus-visible,
.supersheet-cell select:focus-visible,
.supersheet-cell textarea:focus-visible {
    background: #ffffff !important;
    color: #24292f !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Catch any unstyled input inside cells */
.supersheet-cell input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
}

.supersheet-cell input.supersheet-editor-input,
.supersheet-cell input.supersheet-editor-input:focus,
.supersheet-cell input.supersheet-editor-input:focus-visible,
.supersheet-cell textarea.supersheet-editor-input,
.supersheet-cell textarea.supersheet-editor-input:focus,
.supersheet-cell textarea.supersheet-editor-input:focus-visible {
    all: unset !important;
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    line-height: 1.2 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    transition: none !important;
}

.supersheet-cell textarea.supersheet-editor-textarea {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    align-self: center;
    width: 100% !important;
    height: auto !important;
    resize: none !important;
    min-width: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    white-space: pre !important;
    line-height: inherit !important;
    padding: 0 !important;
    text-indent: 0 !important;
    -ms-overflow-style: none;
}

.supersheet-cell .supersheet-editor-host > textarea.supersheet-editor-input,
.supersheet-cell .supersheet-editor-host > textarea.supersheet-editor-input:focus,
.supersheet-cell .supersheet-editor-host > textarea.supersheet-editor-input:focus-visible {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: inherit !important;
}

.supersheet-cell textarea.supersheet-editor-textarea::-webkit-resizer,
.supersheet-cell textarea.supersheet-editor-textarea::-webkit-scrollbar,
.supersheet-cell textarea.supersheet-editor-textarea::-webkit-scrollbar-corner {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.supersheet-cell.active > input.supersheet-editor-input,
.supersheet-cell.active > input.supersheet-editor-input:focus,
.supersheet-cell.active > input.supersheet-editor-input:focus-visible,
.supersheet-cell.active > textarea.supersheet-editor-input,
.supersheet-cell.active > textarea.supersheet-editor-input:focus,
.supersheet-cell.active > textarea.supersheet-editor-input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.supersheet-cell input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: #0969da;
    border-radius: 3px;
    appearance: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER (AGGREGATIONS)
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-footer {
    display: flex;
    flex-shrink: 0;
    background: linear-gradient(0deg, #f6f8fa 0%, #ebeef1 100%);
    border-top: 2px solid #d0d7de;
    height: 32px;
}

.supersheet-footer .supersheet-cell {
    font-weight: 600;
    color: #0969da;
}

.supersheet-footer .supersheet-row-header {
    font-weight: bold;
    color: #656d76;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELL FORMATTING (applied via inline styles or classes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text alignment */
.cell-align-left { text-align: left; }
.cell-align-center { text-align: center; }
.cell-align-right { text-align: right; }

/* Text styles */
.cell-bold { font-weight: 700; }
.cell-italic { font-style: italic; }
.cell-underline { text-decoration: underline; }
.cell-strikethrough { text-decoration: line-through; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.supersheet-body::-webkit-scrollbar-track {
    background: #f6f8fa;
}

.supersheet-body::-webkit-scrollbar-thumb {
    background: #d0d7de;
    border-radius: 5px;
    border: 2px solid #f6f8fa;
}

.supersheet-body::-webkit-scrollbar-thumb:hover {
    background: #8c959f;
}

.supersheet-body::-webkit-scrollbar-corner {
    background: #f6f8fa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIAL FIELD TYPES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Checkbox / Boolean */
.supersheet-cell.field-boolean {
    justify-content: center;
}

.supersheet-cell.field-boolean input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ss-primary);
}

/* UserList / Person picker */
.supersheet-cell.field-userlist .user-chips,
.supersheet-cell.field-contact .contact-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
}

.user-chip, .contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ss-bg-blue-light);
    border: 1px solid var(--ss-bg-blue);
    border-radius: 16px;
    padding: 2px 8px 2px 2px;
    font-size: 12px;
    max-width: 150px;
    white-space: nowrap;
}

.contact-chip {
    background: var(--ss-bg-purple-light);
    border-color: var(--ss-bg-purple);
}

.user-chip .user-avatar,
.contact-chip .contact-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ss-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-chip .user-name,
.contact-chip .contact-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-chip .user-avatar img,
.contact-chip .contact-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-chip-more {
    background: var(--ss-bg-gray);
    font-weight: 600;
    padding: 2px 8px;
}

/* Badge / Status */
.supersheet-cell.field-badge .badge-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Rating */
.supersheet-cell.field-rating .rating-stars {
    display: flex;
    gap: 2px;
}

.rating-star {
    color: #e0e0e0;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.15s;
}

.rating-star.filled {
    color: #ffc107;
}

.rating-star:hover {
    color: #ffb300;
}

/* Phone */
.supersheet-cell.field-phone .phone-link {
    color: var(--ss-primary);
    text-decoration: none;
}

.supersheet-cell.field-phone .phone-link:hover {
    text-decoration: underline;
}

/* Email */
.supersheet-cell.field-email .email-link {
    color: var(--ss-primary);
    text-decoration: none;
}

.supersheet-cell.field-email .email-link:hover {
    text-decoration: underline;
}

/* URL */
.supersheet-cell.field-url .url-link {
    color: var(--ss-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.supersheet-cell.field-url .url-link:hover {
    text-decoration: underline;
}

/* Attachment */
.supersheet-cell.field-attachment .attachment-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ss-text-gray);
}

.supersheet-cell.field-attachment .attachment-count {
    background: var(--ss-bg-gray);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

/* MultiSelect / Tags */
.supersheet-cell.field-multiselect .tag-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
}

.tag-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: var(--ss-bg-gray-light);
    border: 1px solid var(--ss-bg-gray);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES - Only the sheet, not the web UI
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    /* Hide everything except the sheet */
    body * {
        visibility: hidden;
    }
    
    .supersheet-container,
    .supersheet-container * {
        visibility: visible;
    }
    
    .supersheet-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        height: auto !important;
        overflow: visible !important;
    }
    
    .supersheet-body {
        overflow: visible !important;
        height: auto !important;
    }
    
    /* Hide interactive elements */
    .supersheet-add-row,
    .supersheet-add-col,
    .col-menu-btn,
    .drag-handle,
    .col-resizer,
    input[type="checkbox"] {
        display: none !important;
    }
    
    /* Ensure all rows are visible (no virtualization) */
    .supersheet-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    /* Header on each page */
    .supersheet-header {
        position: relative !important;
        break-after: avoid;
    }
    
    /* Clean borders for print */
    .supersheet-cell,
    .supersheet-col-header,
    .supersheet-row-header {
        border-color: #888 !important;
    }
    
    .supersheet-row {
        border-bottom-color: #888 !important;
    }
    
    /* Force background colors to print */
    .supersheet-cell,
    .supersheet-header,
    .supersheet-footer {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Remove hover/active states */
    .supersheet-cell.active {
        outline: none;
    }
    
    .supersheet-cell.col-selected {
        box-shadow: none;
        background: transparent !important;
    }
    
    .supersheet-row.selected {
        background: transparent !important;
    }
    
    /* Footer aggregations */
    .supersheet-footer {
        break-before: avoid;
        border-top: 2px solid #000 !important;
    }
    
    /* Page setup */
    @page {
        size: landscape;
        margin: 1cm;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT (Radzen .rz-dark and Bootstrap [data-bs-theme="dark"])
   SuperSheet maintains a light spreadsheet appearance in all themes (like Excel)
   ═══════════════════════════════════════════════════════════════════════════ */

:root.rz-dark .supersheet-container,
[data-bs-theme="dark"] .supersheet-container {
    /* SuperSheet siempre claro como Excel/Smartsheet */
    background: var(--rz-white);
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .supersheet-body,
[data-bs-theme="dark"] .supersheet-body {
    background: var(--rz-base-background);
}

:root.rz-dark .supersheet-toolbar,
[data-bs-theme="dark"] .supersheet-toolbar {
    background: linear-gradient(180deg, var(--rz-base-50) 0%, var(--rz-base-100) 100%);
    border-bottom-color: var(--rz-base-200);
}

:root.rz-dark .toolbar-cell-ref,
[data-bs-theme="dark"] .toolbar-cell-ref {
    background: var(--rz-white);
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .toolbar-btn,
[data-bs-theme="dark"] .toolbar-btn {
    color: var(--rz-text-secondary-color);
    border-color: transparent;
}

:root.rz-dark .toolbar-btn:hover,
[data-bs-theme="dark"] .toolbar-btn:hover {
    background: var(--rz-base-100);
    border-color: var(--rz-base-200);
}

:root.rz-dark .toolbar-btn.active,
[data-bs-theme="dark"] .toolbar-btn.active {
    background: var(--rz-primary);
    color: var(--rz-on-primary);
}

:root.rz-dark .toolbar-divider,
[data-bs-theme="dark"] .toolbar-divider {
    background: var(--rz-base-200);
}

:root.rz-dark .supersheet-header,
[data-bs-theme="dark"] .supersheet-header {
    background: linear-gradient(180deg, var(--rz-base-50) 0%, var(--rz-base-100) 100%);
    border-bottom-color: var(--rz-base-200);
}

:root.rz-dark .supersheet-cell,
[data-bs-theme="dark"] .supersheet-cell {
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .supersheet-cell:not(.supersheet-row-header):not(.supersheet-header .supersheet-cell),
[data-bs-theme="dark"] .supersheet-cell:not(.supersheet-row-header):not(.supersheet-header .supersheet-cell) {
    background: var(--rz-white);
    color: var(--rz-text-color);
}

:root.rz-dark .supersheet-row-header,
[data-bs-theme="dark"] .supersheet-row-header {
    background: var(--rz-base-50);
    color: var(--rz-text-secondary-color);
    border-color: var(--rz-base-200);
}

:root.rz-dark .supersheet-header .supersheet-cell,
[data-bs-theme="dark"] .supersheet-header .supersheet-cell {
    background: transparent;
    color: var(--rz-text-color);
}

:root.rz-dark .supersheet-cell.active,
[data-bs-theme="dark"] .supersheet-cell.active {
    background: var(--rz-white) !important;
    color: var(--rz-text-color) !important;
    outline: 2px solid var(--rz-primary);
    outline-offset: -1px;
    border-right-color: transparent;
    z-index: 5;
}

:root.rz-dark .supersheet-cell.cell-selected,
[data-bs-theme="dark"] .supersheet-cell.cell-selected {
    background: rgba(56, 139, 253, 0.15) !important;
    outline: 1px solid rgba(56, 139, 253, 0.5);
    outline-offset: -1px;
}

:root.rz-dark .supersheet-cell.selected,
[data-bs-theme="dark"] .supersheet-cell.selected {
    background: var(--rz-primary-lighter) !important;
    color: var(--rz-text-color);
}

:root.rz-dark .supersheet-row.selected .supersheet-row-header,
[data-bs-theme="dark"] .supersheet-row.selected .supersheet-row-header {
    background: rgba(56, 139, 253, 0.2);
    color: #e6edf3;
}

/* Dark mode — active row */
:root.rz-dark .supersheet-row.active-row,
[data-bs-theme="dark"] .supersheet-row.active-row {
    background: transparent;
}

:root.rz-dark .supersheet-row.active-row > .supersheet-cell:not(.supersheet-empty),
[data-bs-theme="dark"] .supersheet-row.active-row > .supersheet-cell:not(.supersheet-empty) {
    background: var(--rz-base-100);
}

:root.rz-dark .supersheet-row.selected > .supersheet-cell:not(.supersheet-empty):not(.supersheet-row-header),
[data-bs-theme="dark"] .supersheet-row.selected > .supersheet-cell:not(.supersheet-empty):not(.supersheet-row-header) {
    background: rgba(56, 139, 253, 0.15) !important;
    border-top: 2px solid var(--rz-primary);
    border-bottom: 2px solid var(--rz-primary);
    border-right-color: transparent;
}

:root.rz-dark .supersheet-row.selected > .supersheet-cell:nth-child(2),
[data-bs-theme="dark"] .supersheet-row.selected > .supersheet-cell:nth-child(2) {
    border-left: 2px solid var(--rz-primary);
}

:root.rz-dark .supersheet-row.selected > .supersheet-cell:not(.supersheet-empty):last-child,
[data-bs-theme="dark"] .supersheet-row.selected > .supersheet-cell:not(.supersheet-empty):last-child {
    border-right: 2px solid var(--rz-primary);
}

:root.rz-dark .supersheet-row.active-row > .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty),
[data-bs-theme="dark"] .supersheet-row.active-row > .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty) {
    border-top-color: var(--rz-primary);
    border-bottom-color: var(--rz-primary);
}

/* Dark mode — current row header subtle indicator */
:root.rz-dark .supersheet-row-header.current-row-header:not(.active-row-header),
[data-bs-theme="dark"] .supersheet-row-header.current-row-header:not(.active-row-header) {
    color: var(--rz-primary-lighter);
}

:root.rz-dark .supersheet-row.active-row > .supersheet-row-header,
:root.rz-dark .supersheet-row-header.active-row-header,
[data-bs-theme="dark"] .supersheet-row.active-row > .supersheet-row-header,
[data-bs-theme="dark"] .supersheet-row-header.active-row-header {
    background: var(--rz-primary);
    color: #fff;
}

/* Dark mode — cell error */
:root.rz-dark .cell-error,
[data-bs-theme="dark"] .cell-error {
    color: #f85149;
}

/* Dark mode — formula validation error */
:root.rz-dark .formula-validation-error,
[data-bs-theme="dark"] .formula-validation-error {
    background: #3d1c1c;
    border-color: #f85149;
    color: #f85149;
}

/* Dark mode — autocomplete categories */
:root.rz-dark .formula-category.cat-Math,
[data-bs-theme="dark"] .formula-category.cat-Math { background: #1c3a5e; color: #58a6ff; }
:root.rz-dark .formula-category.cat-Logic,
[data-bs-theme="dark"] .formula-category.cat-Logic { background: #1c3a2a; color: #3fb950; }
:root.rz-dark .formula-category.cat-Text,
[data-bs-theme="dark"] .formula-category.cat-Text { background: #3d3219; color: #d29922; }
:root.rz-dark .formula-category.cat-Date,
[data-bs-theme="dark"] .formula-category.cat-Date { background: #3d1c2e; color: #f778ba; }
:root.rz-dark .formula-category.cat-Range,
[data-bs-theme="dark"] .formula-category.cat-Range { background: #2d1c3d; color: #d2a8ff; }

:root.rz-dark .supersheet-cell input[type="checkbox"],
:root.rz-dark .supersheet-row-header input[type="checkbox"],
[data-bs-theme="dark"] .supersheet-cell input[type="checkbox"],
[data-bs-theme="dark"] .supersheet-row-header input[type="checkbox"] {
    accent-color: var(--rz-primary);
}

:root.rz-dark .supersheet-cell input:not([type="checkbox"]),
:root.rz-dark .supersheet-cell select,
[data-bs-theme="dark"] .supersheet-cell input:not([type="checkbox"]),
[data-bs-theme="dark"] .supersheet-cell select {
    background: var(--rz-white);
    color: var(--rz-text-color);
    border-color: var(--rz-base-200);
}

:root.rz-dark .supersheet-cell input:focus,
[data-bs-theme="dark"] .supersheet-cell input:focus {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

:root.rz-dark .supersheet-formula-bar,
[data-bs-theme="dark"] .supersheet-formula-bar {
    background: var(--rz-base-50);
    border-bottom-color: var(--rz-base-200);
}

:root.rz-dark .formula-cell-ref,
[data-bs-theme="dark"] .formula-cell-ref {
    background: var(--rz-white);
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .formula-fx,
[data-bs-theme="dark"] .formula-fx {
    background: linear-gradient(135deg, var(--rz-base-100) 0%, var(--rz-base-50) 100%);
    border-color: var(--rz-base-200);
    color: var(--rz-primary);
}

:root.rz-dark .formula-input,
[data-bs-theme="dark"] .formula-input {
    background: var(--rz-white);
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .formula-input:focus,
[data-bs-theme="dark"] .formula-input:focus {
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 2px var(--rz-primary-lighter);
}

:root.rz-dark .supersheet-footer,
[data-bs-theme="dark"] .supersheet-footer {
    background: var(--rz-base-50);
    border-top-color: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
}

:root.rz-dark .supersheet-add-row,
[data-bs-theme="dark"] .supersheet-add-row {
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}

:root.rz-dark .supersheet-add-row:hover,
[data-bs-theme="dark"] .supersheet-add-row:hover {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

:root.rz-dark .supersheet-row,
[data-bs-theme="dark"] .supersheet-row {
    border-bottom-color: var(--rz-base-200);
}

:root.rz-dark .supersheet-aggregation-row,
[data-bs-theme="dark"] .supersheet-aggregation-row {
    background: var(--rz-base-100);
    border-top-color: var(--rz-base-200);
}

:root.rz-dark .supersheet-aggregation-cell,
[data-bs-theme="dark"] .supersheet-aggregation-cell {
    background: var(--rz-base-100);
    color: var(--rz-text-color);
    border-color: var(--rz-base-200);
}

:root.rz-dark .aggregation-label,
[data-bs-theme="dark"] .aggregation-label {
    color: var(--rz-text-secondary-color);
}

/* Dark mode - hover states */
:root.rz-dark .supersheet-row:hover .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty),
[data-bs-theme="dark"] .supersheet-row:hover .supersheet-cell:not(.supersheet-row-header):not(.supersheet-empty) {
    background: var(--rz-base-50);
}

:root.rz-dark .supersheet-header .supersheet-cell:hover,
[data-bs-theme="dark"] .supersheet-header .supersheet-cell:hover {
    background: var(--rz-base-200);
}

/* Dark mode - context menu */
:root.rz-dark .ss-context-menu,
[data-bs-theme="dark"] .ss-context-menu {
    background: var(--rz-white);
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .ss-context-menu-item:hover,
[data-bs-theme="dark"] .ss-context-menu-item:hover {
    background: var(--rz-base-100);
}

/* Dark mode - Native Toolbar */
:root.rz-dark .ss-toolbar,
[data-bs-theme="dark"] .ss-toolbar {
    background: var(--rz-base-50);
    border-bottom-color: var(--rz-base-200);
}

:root.rz-dark .ss-divider,
[data-bs-theme="dark"] .ss-divider {
    background: var(--rz-base-200);
}

:root.rz-dark .ss-btn,
[data-bs-theme="dark"] .ss-btn {
    color: var(--rz-text-secondary-color);
}

:root.rz-dark .ss-btn:hover,
[data-bs-theme="dark"] .ss-btn:hover {
    background: var(--rz-base-100);
    border-color: var(--rz-base-200);
}

:root.rz-dark .ss-btn.ss-active,
[data-bs-theme="dark"] .ss-btn.ss-active {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-on-primary);
}

:root.rz-dark .ss-select,
[data-bs-theme="dark"] .ss-select {
    background: var(--rz-white);
    border-color: var(--rz-base-200);
    color: var(--rz-text-color);
}

:root.rz-dark .ss-select:hover,
:root.rz-dark .ss-select:focus,
[data-bs-theme="dark"] .ss-select:hover,
[data-bs-theme="dark"] .ss-select:focus {
    border-color: var(--rz-primary);
}

/* Dark mode - color picker buttons */
:root.rz-dark .ss-color-picker-inline:hover,
[data-bs-theme="dark"] .ss-color-picker-inline:hover {
    border-color: var(--rz-base-200);
    background: var(--rz-base-100);
}

:root.rz-dark .ss-color-icon,
[data-bs-theme="dark"] .ss-color-icon,
[data-bs-theme="dark"] .ss-color-picker-inline .rz-colorpicker-trigger .rzi {
    color: var(--rz-text-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONDITIONAL FORMAT DIALOG
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.supersheet-conditional-dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    width: 420px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.conditional-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
    background: #f9f9f9;
}

.conditional-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.conditional-header .close-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0;
}
.conditional-header .close-btn:hover {
    color: #d32f2f;
}

.conditional-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.rule-column-info {
    margin-bottom: 16px;
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 13px;
}

.rule-form .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.rule-form .form-row label {
    min-width: 80px;
    font-size: 13px;
    color: #555;
}

.rule-form .form-row select,
.rule-form .form-row input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.rule-form select:focus,
.rule-form input:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 2px rgba(25,118,210,0.15);
}

.format-preview-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.format-preview-section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
}

.format-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.format-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.format-option label {
    margin: 0;
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.color-input-wrapper .rz-colorpicker {
    flex: 0 0 auto;
}

.color-input-wrapper .rz-colorpicker-trigger {
    height: 26px !important;
    min-width: 32px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

.color-input-wrapper .clear-color {
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-input-wrapper .clear-color:hover {
    border-color: #d32f2f;
    color: #d32f2f;
}

.checkbox-option label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.format-preview {
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    background: #fff;
}

.existing-rules {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

.existing-rules h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 600;
}

.rule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 12px;
}

.rule-item .rule-desc {
    flex: 1;
}

.rule-item .rule-actions {
    display: flex;
    gap: 4px;
}

.rule-item .rule-actions button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 14px;
}
.rule-item .rule-actions button:hover {
    background: #e0e0e0;
    border-radius: 4px;
}

.conditional-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e5e5;
    background: #f9f9f9;
}

.conditional-footer .btn-cancel {
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.conditional-footer .btn-cancel:hover {
    background: #f5f5f5;
}

.conditional-footer .btn-save {
    background: #1976d2;
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.conditional-footer .btn-save:hover {
    background: #1565c0;
}

/* Dark mode for conditional dialog */
:root.rz-dark .supersheet-conditional-dialog,
[data-bs-theme="dark"] .supersheet-conditional-dialog {
    background: #252526;
    color: #d4d4d4;
}

:root.rz-dark .conditional-header,
[data-bs-theme="dark"] .conditional-header {
    background: #1e1e1e;
    border-color: #3c3c3c;
}

:root.rz-dark .conditional-header .close-btn,
[data-bs-theme="dark"] .conditional-header .close-btn {
    color: #999;
}

:root.rz-dark .conditional-body,
[data-bs-theme="dark"] .conditional-body {
    background: #252526;
}

:root.rz-dark .rule-column-info,
[data-bs-theme="dark"] .rule-column-info {
    background: #1e1e1e;
}

:root.rz-dark .rule-form select,
:root.rz-dark .rule-form input[type="text"],
[data-bs-theme="dark"] .rule-form select,
[data-bs-theme="dark"] .rule-form input[type="text"] {
    background: #1e1e1e;
    border-color: #3c3c3c;
    color: #d4d4d4;
}

:root.rz-dark .format-preview-section,
:root.rz-dark .existing-rules,
[data-bs-theme="dark"] .format-preview-section,
[data-bs-theme="dark"] .existing-rules {
    border-color: #3c3c3c;
}

:root.rz-dark .format-preview,
[data-bs-theme="dark"] .format-preview {
    background: #1e1e1e;
    border-color: #3c3c3c;
}

:root.rz-dark .rule-item,
[data-bs-theme="dark"] .rule-item {
    background: #1e1e1e;
}

:root.rz-dark .conditional-footer,
[data-bs-theme="dark"] .conditional-footer {
    background: #1e1e1e;
    border-color: #3c3c3c;
}

:root.rz-dark .conditional-footer .btn-cancel,
[data-bs-theme="dark"] .conditional-footer .btn-cancel {
    background: #333;
    border-color: #444;
    color: #d4d4d4;
}

:root.rz-dark .color-input-wrapper .clear-color,
[data-bs-theme="dark"] .color-input-wrapper .clear-color {
    border-color: #3c3c3c;
    color: #999;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER LIST PICKER
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-user-picker {
    position: relative;
    width: 100%;
    min-width: 180px;
}

.selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e3f2fd;
    border-radius: 16px;
    padding: 2px 8px 2px 2px;
    font-size: 12px;
}

.user-chip .user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.user-chip .user-avatar-placeholder {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1976d2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
}

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

.user-chip .remove-user {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
}
.user-chip .remove-user:hover {
    color: #d32f2f;
}

.user-search-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}
.user-search-input:focus {
    outline: none;
    border-color: #1976d2;
}

.user-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
}

.user-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.user-picker-item:hover {
    background: #f5f5f5;
}
.user-picker-item.selected {
    background: #e3f2fd;
}

.user-picker-item .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.user-picker-item .user-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1976d2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-picker-item .user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.user-picker-item .user-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-picker-item .user-email {
    font-size: 11px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-picker-item .check-icon {
    color: #1976d2;
    font-weight: 600;
}

/* Dark mode for user picker */
:root.rz-dark .user-chip,
[data-bs-theme="dark"] .user-chip {
    background: #1e3a5f;
    color: #d4d4d4;
}

:root.rz-dark .user-chip .remove-user,
[data-bs-theme="dark"] .user-chip .remove-user {
    color: #999;
}

:root.rz-dark .user-search-input,
[data-bs-theme="dark"] .user-search-input {
    background: #1e1e1e;
    border-color: #3c3c3c;
    color: #d4d4d4;
}

:root.rz-dark .user-picker-dropdown,
[data-bs-theme="dark"] .user-picker-dropdown {
    background: #252526;
    border-color: #3c3c3c;
}

:root.rz-dark .user-picker-item:hover,
[data-bs-theme="dark"] .user-picker-item:hover {
    background: #333;
}

:root.rz-dark .user-picker-item.selected,
[data-bs-theme="dark"] .user-picker-item.selected {
    background: #1e3a5f;
}

:root.rz-dark .user-picker-item .user-email,
[data-bs-theme="dark"] .user-picker-item .user-email {
    color: #999;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPERSHEET FORM VIEWER
   ═══════════════════════════════════════════════════════════════════════════ */

.supersheet-form {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.supersheet-form.public-form {
    border-top: 4px solid #1976d2;
}

.form-disabled,
.form-closed,
.form-success {
    text-align: center;
    padding: 48px 24px;
}

.form-disabled-icon,
.form-closed-icon,
.form-success-icon {
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.form-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.form-title {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
}

.form-description {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.form-field.required .form-label .required-marker {
    color: #d32f2f;
    margin-left: 2px;
}

.form-input {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25,118,210,0.15);
}

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

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.checkbox-label {
    font-size: 14px;
}

.form-help {
    font-size: 12px;
    color: #666;
}

.form-actions {
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #1976d2;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-submit:hover:not(:disabled) {
    background: #1565c0;
}
.btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-submit-another {
    margin-top: 16px;
    padding: 10px 20px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}
.btn-submit-another:hover {
    background: #e5e5e5;
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Dark mode for form viewer */
:root.rz-dark .supersheet-form,
[data-bs-theme="dark"] .supersheet-form {
    background: #252526;
    color: #d4d4d4;
}

:root.rz-dark .form-header,
[data-bs-theme="dark"] .form-header {
    border-color: #3c3c3c;
}

:root.rz-dark .form-title,
[data-bs-theme="dark"] .form-title {
    color: #e5e5e5;
}

:root.rz-dark .form-description,
:root.rz-dark .form-help,
[data-bs-theme="dark"] .form-description,
[data-bs-theme="dark"] .form-help {
    color: #999;
}

:root.rz-dark .form-label,
[data-bs-theme="dark"] .form-label {
    color: #d4d4d4;
}

:root.rz-dark .form-input,
[data-bs-theme="dark"] .form-input {
    background: #1e1e1e;
    border-color: #3c3c3c;
    color: #d4d4d4;
}

:root.rz-dark .form-actions,
[data-bs-theme="dark"] .form-actions {
    border-color: #3c3c3c;
}

:root.rz-dark .btn-submit-another,
[data-bs-theme="dark"] .btn-submit-another {
    background: #333;
    border-color: #444;
    color: #d4d4d4;
}
/* ═══════════════════════════════════════════════════════════════════════════
   Inline group-by headers rendered by SuperSheet when InlineGroupBy is set.
   Each group-header row exposes a +/- toggle, the field label, the group
   value and the count of rows. Multiple levels are visually indented via
   inline padding on the first cell, set by the renderer.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-group-header {
    background: var(--rz-base-100);
    font-weight: 600;
    font-size: 0.82rem;
}

.ss-group-header td {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--rz-base-200);
}

.ss-group-toggle {
    width: 14px;
    height: 14px;
    border: 1px solid var(--rz-base-400);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    margin-right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
}

.ss-group-toggle:hover {
    background: var(--rz-base-200);
}

.ss-group-label {
    color: var(--rz-text-tertiary-color);
    margin-right: 0.25rem;
    font-weight: 500;
}

.ss-group-value {
    color: var(--rz-text-color);
}

.ss-group-count {
    margin-left: 0.5rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phantom "new record" row (Excel-like inline create). Lives at the tail of
   the grid when AllowInlineCreate=true and never enters selection state.
   ───────────────────────────────────────────────────────────────────────── */
.ss-phantom-row {
    background: var(--rz-white);
    opacity: 0.7;
}

.ss-phantom-row:hover,
.ss-phantom-row:focus-within {
    opacity: 1;
}

.ss-phantom-row-header {
    color: #9ca3af;
}

.ss-phantom-cell {
    cursor: text;
    position: relative;
}

/* Date/datetime inputs inside phantom host — no box, transparent */
.ss-phantom-date-input {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font: inherit !important;
    color: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Select inside phantom host */
.ss-phantom-select {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font: inherit !important;
    color: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

.ss-phantom-cell:hover {
    cursor: text;
    background: var(--rz-base-50, #f9fafb);
}

.ss-phantom-cell-empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    font-style: italic;
}

.ss-phantom-cell-advanced-only {
    color: #6b7280;
    font-style: italic;
    cursor: pointer;
    padding: 0 0.25rem;
}

.ss-phantom-cell-advanced-only:hover {
    color: var(--rz-primary);
    text-decoration: underline;
}

.ss-phantom-cell-active {
    outline: 2px solid var(--rz-primary) !important;
    outline-offset: -2px;
    background: var(--rz-primary-lighter, #eff6ff) !important;
}

.ss-phantom-cell-invalid {
    border-left: 2px solid var(--rz-danger, #dc2626) !important;
}