/* --- Salesforce Lightning Design System Styling --- */
/* Import Salesforce Sans Font */
@import url('https://use.typekit.net/moo1qze.css');

:root {
    /* Salesforce Brand Colors */
    --slds-c-brand: #0176d3;
    --slds-c-brand-dark: #014486;
    --slds-c-brand-darker: #032d60;
    --slds-c-brand-light: #00a1e0;

    /* Neutral Colors */
    --slds-c-neutral-1: #ffffff;
    --slds-c-neutral-2: #fafaf9;
    --slds-c-neutral-3: #f3f3f3;
    --slds-c-neutral-4: #ecebea;
    --slds-c-neutral-5: #dddbda;
    --slds-c-neutral-6: #c9c9c9;
    --slds-c-neutral-7: #aeacab;
    --slds-c-neutral-8: #706e6b;
    --slds-c-neutral-9: #3e3e3c;
    --slds-c-neutral-10: #080707;

    /* Status Colors */
    --slds-c-success: #04844b;
    --slds-c-success-dark: #027e46;
    --slds-c-error: #c23934;
    --slds-c-error-dark: #a61e1a;
    --slds-c-warning: #fe9339;
    --slds-c-warning-dark: #f4a900;
    --slds-c-info: #0176d3;

    /* Spacing */
    --slds-spacing-xx-small: 0.25rem;
    --slds-spacing-x-small: 0.5rem;
    --slds-spacing-small: 0.75rem;
    --slds-spacing-medium: 1rem;
    --slds-spacing-large: 1.5rem;
    --slds-spacing-x-large: 2rem;

    /* Border Radius */
    --slds-border-radius-small: 0.125rem;
    --slds-border-radius-medium: 0.25rem;
    --slds-border-radius-large: 0.5rem;

    /* Shadows */
    --slds-shadow-small: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    --slds-shadow-medium: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
    --slds-shadow-large: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Salesforce Sans', 'SalesforceSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--slds-c-neutral-3);
    color: var(--slds-c-neutral-10);
    font-size: 0.8125rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Navigation Panel --- */
#navigation {
    width: 280px;
    background: linear-gradient(180deg, var(--slds-c-brand-darker) 0%, var(--slds-c-brand) 100%);
    padding: var(--slds-spacing-large) var(--slds-spacing-medium);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0,0,0,0.15);
    z-index: 100;
    position: relative;
}

#navigation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--slds-c-brand-light), var(--slds-c-brand), var(--slds-c-brand-darker));
}

/* Navigation Logo/Branding */
.nav-branding {
    display: flex;
    align-items: center;
    gap: var(--slds-spacing-small);
    padding: var(--slds-spacing-medium);
    margin-bottom: var(--slds-spacing-large);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--slds-border-radius-medium);
    backdrop-filter: blur(10px);
}

.nav-branding-icon {
    width: 40px;
    height: 40px;
    background: var(--slds-c-neutral-1);
    border-radius: var(--slds-border-radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.nav-branding-text {
    flex: 1;
}

.nav-branding-title {
    color: var(--slds-c-neutral-1);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.nav-branding-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.2;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: var(--slds-spacing-medium) var(--slds-spacing-large);
    margin-bottom: var(--slds-spacing-small);
    background: rgba(255,255,255,0.08);
    border-radius: var(--slds-border-radius-medium);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--slds-c-brand-light);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.nav-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateX(4px);
}

.nav-item:hover::before {
    transform: scaleY(1);
}

.nav-item.active {
    background: rgba(255,255,255,0.25);
    border-left-color: var(--slds-c-brand-light);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-weight: 600;
}

.nav-item.active::before {
    transform: scaleY(1);
}

.nav-text {
    flex: 1;
}

.nav-title {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 3px;
}

.nav-desc {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

/* --- Main Content Area --- */
#mainContent {
    flex: 1;
    overflow-y: auto;
    padding: var(--slds-spacing-x-large);
    background: var(--slds-c-neutral-3);
    position: relative;
}

#mainContent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--slds-c-neutral-5), transparent);
}

.step-content {
    position: relative;
    animation: fadeInContent 0.3s ease-in;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-content h2 {
    margin: 0 0 10px 0;
    color: #032d60;
    font-size: 2rem;
    font-weight: 700;
}

.step-description {
    color: #706e6b;
    font-size: 16px;
    margin-bottom: 30px;
}

.content-panel {
    background: var(--slds-c-neutral-1);
    padding: var(--slds-spacing-x-large);
    border-radius: var(--slds-border-radius-medium);
    box-shadow: var(--slds-shadow-small);
    border: 1px solid var(--slds-c-neutral-5);
    position: relative;
}

.content-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--slds-c-brand), var(--slds-c-brand-light), var(--slds-c-brand));
    border-radius: var(--slds-border-radius-medium) var(--slds-border-radius-medium) 0 0;
}

/* Salesforce Card Component */
.slds-card {
    background: var(--slds-c-neutral-1);
    border: 1px solid var(--slds-c-neutral-5);
    border-radius: var(--slds-border-radius-medium);
    box-shadow: var(--slds-shadow-small);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.slds-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--slds-c-brand), var(--slds-c-brand-light));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.slds-card:hover {
    box-shadow: var(--slds-shadow-medium);
    transform: translateY(-2px);
}

.slds-card:hover::before {
    opacity: 1;
}

.slds-card__header {
    padding: var(--slds-spacing-small) var(--slds-spacing-medium);
    border-bottom: 1px solid var(--slds-c-neutral-5);
    background: linear-gradient(180deg, var(--slds-c-neutral-2) 0%, var(--slds-c-neutral-1) 100%);
    font-weight: 700;
    color: var(--slds-c-neutral-9);
}

.slds-card__body {
    padding: var(--slds-spacing-medium);
}

.controls-bar {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    background: white;
    padding: 25px;
    border-radius: 4px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddbda;
}

.split-view {
    display: flex;
    gap: 20px;
    height: calc(100vh - 200px);
}

.controls-section {
    width: 380px;
    background: white;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddbda;
    overflow-y: auto;
}

.graph-section {
    flex: 1;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddbda;
    overflow: hidden;
}

.graph-container {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #dddbda;
    height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.graph-title-wrapper {
    padding: var(--slds-spacing-large) var(--slds-spacing-x-large);
    background: linear-gradient(135deg, var(--slds-c-brand-darker) 0%, var(--slds-c-brand) 50%, var(--slds-c-brand-light) 100%);
    border-bottom: 3px solid var(--slds-c-brand-light);
    box-shadow: var(--slds-shadow-medium);
    position: relative;
    overflow: hidden;
}

.graph-title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 161, 224, 0.8), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

.graph-title-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--slds-c-brand-light), transparent, var(--slds-c-brand-light));
}

.graph-title-wrapper h2,
.graph-title-wrapper h3 {
    margin: 0;
    color: var(--slds-c-neutral-1);
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    font-size: 1.75rem;
    position: relative;
    z-index: 1;
}

.graph-title-wrapper h3 {
    font-size: 1.5rem;
}

@keyframes shimmer {
    0%, 100% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(100%);
        opacity: 1;
    }
}

/* --- Input Elements --- */
.input-group {
    margin-bottom: 24px;
}

label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: #3e3e3c;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dddbda;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.15s;
    margin-bottom: 8px;
    background: white;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #0176d3;
    box-shadow: 0 0 3px #0176d3;
}

textarea {
    resize: vertical;
    font-family: inherit;
}

/* --- Salesforce Button Styles --- */
button {
    width: 100%;
    padding: 0 var(--slds-spacing-medium);
    background: var(--slds-c-brand);
    color: var(--slds-c-neutral-1);
    border: 1px solid var(--slds-c-brand);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8125rem;
    border-radius: var(--slds-border-radius-medium);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: var(--slds-spacing-small);
    text-align: center;
    line-height: 1.875rem;
    min-height: 2.25rem;
    white-space: normal;
    font-family: 'Salesforce Sans', 'SalesforceSans', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:hover::before {
    width: 300px;
    height: 300px;
}

button:hover {
    background: var(--slds-c-brand-dark);
    border-color: var(--slds-c-brand-dark);
    box-shadow: var(--slds-shadow-medium);
    transform: translateY(-1px);
}

button:active {
    background: var(--slds-c-brand-darker);
    border-color: var(--slds-c-brand-darker);
    box-shadow: none;
    transform: translateY(0);
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--slds-c-neutral-1), 0 0 0 4px var(--slds-c-brand);
}

button:focus:not(:focus-visible) {
    box-shadow: none;
}

button:disabled {
    background: var(--slds-c-neutral-4);
    border-color: var(--slds-c-neutral-6);
    color: var(--slds-c-neutral-6);
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

button:disabled:hover {
    box-shadow: none;
    transform: none;
}

/* Salesforce Brand Button */
.btn-brand, .btn-primary {
    background: #0176d3;
    border-color: #0176d3;
    color: #ffffff;
}

.btn-brand:hover, .btn-primary:hover {
    background: #014486;
    border-color: #014486;
}

/* Salesforce Secondary Button */
.btn-secondary {
    background: #ffffff;
    border-color: #0176d3;
    color: #0176d3;
}

.btn-secondary:hover {
    background: #f3f3f3;
    border-color: #014486;
    color: #014486;
}

/* Destructive/Delete Button */
.btn-delete {
    background: #c23934;
    border-color: #c23934;
}

.btn-delete:hover {
    background: #a61e1a;
    border-color: #a61e1a;
}

.btn-delete:active {
    background: #8a1b17;
    border-color: #8a1b17;
}

/* Back Button */
.btn-back, .btn-back-link {
    background: transparent !important;
    color: #4A90E2 !important;
    border: 1px solid #4A90E2 !important;
    transition: all 0.2s ease;
}

.btn-back:hover, .btn-back-link:hover {
    background: #4A90E2 !important;
    color: white !important;
    border-color: #4A90E2 !important;
    transform: translateX(-3px);
}

/* Success Button */
.btn-success {
    background: #04844b;
    border-color: #04844b;
}

.btn-success:hover {
    background: #036e3f;
    border-color: #036e3f;
}

/* Neutral/Secondary Button */
.btn-neutral {
    background: white;
    border-color: #c9c9c9;
    color: #0176d3;
}

.btn-neutral:hover {
    background: #f3f3f3;
    border-color: #c9c9c9;
}

.btn-neutral:active {
    background: #eee;
}

.button-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.button-row button {
    flex: 1;
    margin-top: 0;
}

.info-box {
    background: linear-gradient(135deg, #d8edff 0%, #c3e2ff 100%);
    border-left: 4px solid var(--slds-c-brand);
    padding: var(--slds-spacing-medium) var(--slds-spacing-large);
    border-radius: var(--slds-border-radius-medium);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--slds-c-neutral-10);
    box-shadow: var(--slds-shadow-small);
    position: relative;
    overflow: hidden;
}

.info-box::before {
    content: 'ℹ';
    position: absolute;
    top: var(--slds-spacing-small);
    right: var(--slds-spacing-small);
    font-size: 2rem;
    color: var(--slds-c-brand);
    opacity: 0.1;
}

.info-box strong {
    color: var(--slds-c-brand-darker);
    display: block;
    margin-bottom: var(--slds-spacing-small);
    font-size: 0.875rem;
    font-weight: 700;
}

.info-box ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.info-box li {
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
}

.info-box li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0176d3;
    font-weight: bold;
}

/* --- D3 Graph Elements --- */
svg {
    width: 100%;
    flex: 1;
    display: block;
    background: linear-gradient(135deg, var(--slds-c-neutral-2) 0%, var(--slds-c-neutral-1) 100%);
}

.node {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.node rect {
    fill: var(--slds-c-neutral-1);
    stroke: var(--slds-c-brand);
    stroke-width: 2.5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    rx: 6;
    ry: 6;
}

.node rect:hover {
    fill: linear-gradient(135deg, #e8f4fd 0%, var(--slds-c-neutral-1) 100%);
    stroke: var(--slds-c-brand-dark);
    stroke-width: 3px;
    filter: drop-shadow(0 4px 8px rgba(1, 118, 211, 0.3));
    transform: scale(1.05);
}

.node.selected rect {
    fill: #d8edff;
    stroke: var(--slds-c-brand-darker);
    stroke-width: 3px;
    filter: drop-shadow(0 4px 12px rgba(1, 118, 211, 0.5));
}

.node text {
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    fill: var(--slds-c-neutral-10);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -20;
    }
}

.link {
    fill: none;
    stroke: var(--slds-c-brand);
    stroke-width: 2.5px;
    opacity: 0.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: dashFlow 1.2s linear infinite;
    filter: drop-shadow(0 1px 2px rgba(1, 118, 211, 0.2));
    transition: all 0.3s ease;
}

.link:hover {
    stroke: var(--slds-c-brand-dark);
    stroke-width: 3px;
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(1, 118, 211, 0.4));
}

.link.positive {
    stroke: var(--slds-c-success);
}

.link.negative {
    stroke: var(--slds-c-error);
}

.link-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--slds-c-brand-darker);
    text-shadow:
        -1px -1px 0 var(--slds-c-neutral-1),
        1px -1px 0 var(--slds-c-neutral-1),
        -1px 1px 0 var(--slds-c-neutral-1),
        1px 1px 0 var(--slds-c-neutral-1),
        0 0 4px var(--slds-c-neutral-1);
}

/* --- Tooltip --- */
.tooltip {
    position: absolute;
    background: rgba(3, 45, 96, 0.95);
    color: #fff;
    padding: 12px 15px;
    border-radius: 4px;
    font-size: 13px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
    max-width: 300px;
}

.tooltip strong {
    color: #00a1e0;
    font-size: 15px;
    display: block;
    margin-bottom: 6px;
}

/* --- Modals --- */
#jsonModal {
    display: none;
}

#jsonContent {
    max-height: 400px;
    overflow: auto;
    border: 1px solid #ddd;
    font-family: 'Courier New', Courier, monospace;
}

/* --- Animations --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* --- Flash Messages --- */
.flash-success {
    background: #04844b;
    color: #ffffff;
    border-left: 4px solid #027e46;
}

.flash-error {
    background: #c23934;
    color: #ffffff;
    border-left: 4px solid #a61e1a;
}

.flash-info {
    background: #0176d3;
    color: #ffffff;
    border-left: 4px solid #014486;
}

/* --- Salesforce Action Buttons --- */
.action-buttons {
    display: flex;
    gap: var(--slds-spacing-small);
    margin-bottom: var(--slds-spacing-large);
    flex-wrap: wrap;
    padding: var(--slds-spacing-medium);
    background: linear-gradient(135deg, var(--slds-c-neutral-2) 0%, var(--slds-c-neutral-1) 100%);
    border-radius: var(--slds-border-radius-medium);
    border: 1px solid var(--slds-c-neutral-5);
    box-shadow: var(--slds-shadow-small);
}

.action-buttons button {
    width: auto;
    padding: 0 var(--slds-spacing-large);
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--slds-spacing-x-small);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

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

/* --- Salesforce Status Badges --- */
.slds-badge, .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.slds-badge-success, .status-badge.active {
    background: linear-gradient(135deg, var(--slds-c-success) 0%, var(--slds-c-success-dark) 100%);
    color: var(--slds-c-neutral-1);
    border-color: var(--slds-c-success-dark);
    box-shadow: 0 1px 3px rgba(4, 132, 75, 0.3);
}

.slds-badge-warning, .status-badge.draft {
    background: linear-gradient(135deg, #ffc835 0%, var(--slds-c-warning-dark) 100%);
    color: var(--slds-c-neutral-10);
    border-color: var(--slds-c-warning-dark);
    box-shadow: 0 1px 3px rgba(255, 200, 53, 0.3);
}

.slds-badge-error, .status-badge.inactive {
    background: linear-gradient(135deg, var(--slds-c-error) 0%, var(--slds-c-error-dark) 100%);
    color: var(--slds-c-neutral-1);
    border-color: var(--slds-c-error-dark);
    box-shadow: 0 1px 3px rgba(194, 57, 52, 0.3);
}

.slds-badge-info {
    background: linear-gradient(135deg, var(--slds-c-brand) 0%, var(--slds-c-brand-dark) 100%);
    color: var(--slds-c-neutral-1);
    border-color: var(--slds-c-brand-dark);
    box-shadow: 0 1px 3px rgba(1, 118, 211, 0.3);
}

.slds-badge:hover, .status-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* --- Salesforce Table Styles --- */
.slds-table, .use-case-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--slds-c-neutral-1);
    border-radius: var(--slds-border-radius-medium);
    table-layout: fixed;
}

.slds-table thead, .use-case-table thead {
    background: linear-gradient(180deg, var(--slds-c-neutral-2) 0%, var(--slds-c-neutral-3) 100%);
    border-bottom: 2px solid var(--slds-c-brand);
}

.slds-table th, .use-case-table th {
    padding: var(--slds-spacing-small) var(--slds-spacing-medium);
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--slds-c-neutral-9);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    border-bottom: 1px solid var(--slds-c-neutral-5);
    background: transparent;
    vertical-align: middle;
}

.slds-table td, .use-case-table td {
    padding: var(--slds-spacing-small) var(--slds-spacing-medium);
    border-bottom: 1px solid var(--slds-c-neutral-4);
    font-size: 0.8125rem;
    transition: all 0.15s ease;
    vertical-align: middle;
}

.slds-table tbody tr, .use-case-table tbody tr {
    transition: background-color 0.15s ease;
}

.slds-table tbody tr:hover, .use-case-table tbody tr:hover {
    background: var(--slds-c-neutral-2);
    box-shadow: inset 4px 0 0 var(--slds-c-brand);
}

.slds-table tbody tr:last-child td, .use-case-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table container to prevent overflow issues */
.use-case-table-container,
.content-panel {
    overflow-x: auto;
}

/* Colgroup columns should respect their specified widths */
.use-case-table colgroup col,
.slds-table colgroup col {
    /* width controlled by inline styles in HTML */
}

/* --- Salesforce Page Header --- */
.slds-page-header {
    background: linear-gradient(135deg, var(--slds-c-neutral-1) 0%, var(--slds-c-neutral-2) 100%);
    border-bottom: 3px solid var(--slds-c-brand);
    padding: var(--slds-spacing-large) var(--slds-spacing-x-large);
    margin-bottom: var(--slds-spacing-large);
    border-radius: var(--slds-border-radius-medium);
    box-shadow: var(--slds-shadow-medium);
    position: relative;
    overflow: hidden;
}

.slds-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--slds-c-brand), var(--slds-c-brand-light), var(--slds-c-brand-darker), var(--slds-c-brand));
}

.slds-page-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(1, 118, 211, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.slds-page-header__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--slds-c-brand-darker);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--slds-spacing-small);
    position: relative;
    z-index: 1;
}

.slds-page-header__subtitle {
    font-size: 1rem;
    color: var(--slds-c-neutral-8);
    margin-top: var(--slds-spacing-x-small);
    position: relative;
    z-index: 1;
}

/* --- Salesforce Form Elements --- */
.slds-form-element {
    margin-bottom: 1.5rem;
}

.slds-form-element__label {
    display: block;
    font-weight: 700;
    font-size: 0.75rem;
    color: #3e3e3c;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025rem;
}

.slds-input,
.slds-select,
.slds-textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--slds-c-neutral-5);
    border-radius: var(--slds-border-radius-medium);
    font-family: 'Salesforce Sans', 'SalesforceSans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8125rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--slds-c-neutral-1);
    color: var(--slds-c-neutral-10);
    position: relative;
}

.slds-input:hover,
.slds-select:hover,
.slds-textarea:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
select:hover,
textarea:hover {
    border-color: var(--slds-c-neutral-6);
}

.slds-input:focus,
.slds-select:focus,
.slds-textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--slds-c-brand);
    box-shadow: 0 0 0 1px var(--slds-c-brand), 0 0 0 3px rgba(1, 118, 211, 0.16);
    background: var(--slds-c-neutral-1);
}

.slds-input:disabled,
.slds-select:disabled,
.slds-textarea:disabled,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
select:disabled,
textarea:disabled {
    background: var(--slds-c-neutral-3);
    border-color: var(--slds-c-neutral-6);
    color: var(--slds-c-neutral-6);
    cursor: not-allowed;
}

/* --- Salesforce Helper Text --- */
.slds-form-element__help {
    font-size: 0.75rem;
    color: #706e6b;
    margin-top: 0.25rem;
    display: block;
}

.slds-form-element__error {
    font-size: 0.75rem;
    color: #c23934;
    margin-top: 0.25rem;
    display: block;
}

/* --- Salesforce Spacing Utilities --- */
.slds-m-top_small {
    margin-top: 0.75rem;
}

.slds-m-top_medium {
    margin-top: 1rem;
}

.slds-m-top_large {
    margin-top: 1.5rem;
}

.slds-m-bottom_small {
    margin-bottom: 0.75rem;
}

.slds-m-bottom_medium {
    margin-bottom: 1rem;
}

.slds-m-bottom_large {
    margin-bottom: 1.5rem;
}

.slds-p-around_small {
    padding: 0.75rem;
}

.slds-p-around_medium {
    padding: 1rem;
}

.slds-p-around_large {
    padding: 1.5rem;
}

/* --- Salesforce Text Utilities --- */
.slds-text-heading_small {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
}

.slds-text-heading_medium {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.slds-text-heading_large {
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.25;
}

.slds-text-body_regular {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.slds-text-body_small {
    font-size: 0.75rem;
    line-height: 1.5;
}

.slds-text-color_weak {
    color: #706e6b;
}

.slds-text-color_default {
    color: #080707;
}

.slds-text-color_inverse {
    color: #ffffff;
}

.slds-text-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    font-size: 0.75rem;
}

/* --- Salesforce Border Utilities --- */
.slds-border_top {
    border-top: 1px solid #dddbda;
}

.slds-border_bottom {
    border-bottom: 1px solid #dddbda;
}

.slds-border_left {
    border-left: 1px solid #dddbda;
}

.slds-border_right {
    border-right: 1px solid #dddbda;
}

/* --- Salesforce Notification Banner --- */
.slds-notify {
    padding: var(--slds-spacing-small) var(--slds-spacing-medium);
    border-radius: var(--slds-border-radius-medium);
    border: 1px solid;
    margin-bottom: var(--slds-spacing-medium);
    display: flex;
    align-items: center;
    gap: var(--slds-spacing-small);
    box-shadow: var(--slds-shadow-small);
    position: relative;
    overflow: hidden;
}

.slds-notify::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.slds-notify_alert {
    background: linear-gradient(135deg, #fdecea 0%, #fce8e6 100%);
    border-color: var(--slds-c-error);
    color: var(--slds-c-neutral-10);
}

.slds-notify_alert::before {
    background: var(--slds-c-error);
}

.slds-notify_success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-color: var(--slds-c-success);
    color: var(--slds-c-neutral-10);
}

.slds-notify_success::before {
    background: var(--slds-c-success);
}

.slds-notify_warning {
    background: linear-gradient(135deg, #fff4e5 0%, #ffeccc 100%);
    border-color: var(--slds-c-warning);
    color: var(--slds-c-neutral-10);
}

.slds-notify_warning::before {
    background: var(--slds-c-warning);
}

.slds-notify_info {
    background: linear-gradient(135deg, #d8edff 0%, #c3e2ff 100%);
    border-color: var(--slds-c-brand);
    color: var(--slds-c-neutral-10);
}

.slds-notify_info::before {
    background: var(--slds-c-brand);
}

/* --- Salesforce Box Shadow Utilities --- */
.slds-box_small {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.slds-box_medium {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}

.slds-box_large {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* --- Salesforce Icon Utilities --- */
.slds-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.slds-icon_small {
    width: 0.875rem;
    height: 0.875rem;
}

.slds-icon_medium {
    width: 1.25rem;
    height: 1.25rem;
}

.slds-icon_large {
    width: 1.5rem;
    height: 1.5rem;
}

/* --- Empty State --- */
.slds-illustration {
    text-align: center;
    padding: 2rem 1rem;
}

.slds-illustration__svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    opacity: 0.7;
}

.slds-illustration__header {
    margin-top: 1.5rem;
}

.slds-illustration__heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3e3e3c;
    margin: 0 0 0.5rem 0;
}

.slds-illustration__body {
    font-size: 0.875rem;
    color: #706e6b;
}

/* --- Loading Spinner --- */
.slds-spinner_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--slds-spacing-medium);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    z-index: 9000;
}

.slds-spinner, .spinner {
    border: 0.25rem solid var(--slds-c-neutral-4);
    border-top: 0.25rem solid var(--slds-c-brand);
    border-right: 0.25rem solid var(--slds-c-brand-light);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    position: relative;
}

.slds-spinner::after, .spinner::after {
    content: none;
}

.slds-spinner_large {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 0.375rem;
}

.slds-spinner_small {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.125rem;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}