/* Dense table styles */
.dense-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}
.dense-table th, .dense-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #374151;
    white-space: nowrap;
}
.dense-table th {
    background: #111827;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.dense-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}
.sticky-col {
    position: sticky;
    background: #0f1219;
    z-index: 3;
}
.dense-table thead .sticky-col {
    z-index: 10;
    background: #111827;
}

/* Editable cell */
.editable-cell {
    cursor: pointer;
    transition: background 0.15s;
}
.editable-cell:hover {
    background: rgba(99, 102, 241, 0.1) !important;
}
.cell-input {
    background: #0f1219;
    border: 1px solid #6366f1;
    color: #f9fafb;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    outline: none;
    font-family: ui-monospace, monospace;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f1219; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* CRUD card */
.crud-card {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 8px;
}
.crud-card:hover {
    border-color: #4b5563;
}

/* Form inputs */
.fo-input {
    width: 100%;
    background: #0f1219;
    border: 1px solid #374151;
    color: #f9fafb;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.fo-input:focus {
    border-color: #6366f1;
}
.fo-label {
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
    display: block;
}

/* Button styles */
.fo-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fo-btn-primary { background: #6366f1; color: white; }
.fo-btn-primary:hover { background: #5558e6; }
.fo-btn-ghost { background: none; color: #9ca3af; border: 1px solid #374151; }
.fo-btn-ghost:hover { color: white; border-color: #6366f1; }
.fo-btn-danger { background: none; color: #ef4444; }
.fo-btn-danger:hover { color: #f87171; }

/* Progress bar */
.progress-bar {
    height: 6px;
    background: #1f2937;
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
    transition: width 0.3s;
}

/* Checkbox */
.fo-check {
    width: 16px;
    height: 16px;
    accent-color: #6366f1;
    cursor: pointer;
}

/* Scenario cards */
.scenario-card {
    border-radius: 8px;
    padding: 16px;
    flex: 1;
    min-width: 280px;
}
.scenario-green { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3); }
.scenario-yellow { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); }
.scenario-red { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); }

/* Mobile */
@media (max-width: 768px) {
    #sidebar { display: none; }
    .dense-table { font-size: 11px; }
    .dense-table th, .dense-table td { padding: 4px 6px; }
}