/* Import Tailwind base styles (optional if using CDN effectively, good for build process) */
/* @tailwind base; */
/* @tailwind components; */
/* @tailwind utilities; */

/* Custom Styles from original HTML */
body {
    background-color: #f0f2f5; /* Light gray background */
    font-family: 'Inter', sans-serif;
}
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }

/* Sidebar Styling */
.sidebar { background-color: #1f2937; /* Darker gray */ }
.sidebar-link { color: #d1d5db; /* Gray-300 */ }
.sidebar-link:hover, .sidebar-link.active { color: #ffffff; background-color: #374151; /* Gray-700 */ }

/* Workflow Steps Visualization */
.workflow-step { transition: all 0.3s ease; }
.workflow-step.completed { border-color: #10b981 !important; /* Emerald-500 */ color: #047857 !important; /* Emerald-700 */ }
.workflow-step.active {
    border-color: #3b82f6 !important; /* Blue-500 */
    color: #1d4ed8 !important; /* Blue-700 */
    font-weight: 600;
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}
.workflow-connector { height: 2px; background-color: #d1d5db; /* Gray-300 */ flex-grow: 1; margin: 0 4px; }
.workflow-connector.completed { background-color: #10b981 !important; } /* Match completed step */
.workflow-connector.active { background-color: #3b82f6 !important; } /* Match active step */

/* Card Styling */
.content-card { background-color: #ffffff; border: 1px solid #e5e7eb; /* Gray-200 */ }

/* Subtle button loader */
.button-loader { border-top-color: currentColor; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Utility */
.hidden { display: none !important; } /* Use important to override potential Tailwind conflicts */

/* Responsiveness Example */
@media (max-width: 768px) {
    .sidebar {
        /* Example: Hide sidebar on smaller screens or make it collapsible */
        /* display: none; */
         width: 5rem; /* Example: Make it narrower */
         overflow: hidden; /* Hide text potentially */
    }
    .sidebar .text-sm {
        /* display: none; Hide text on narrow sidebar */
    }
     /* Adjust main content padding if sidebar changes */
    main {
        padding: 1rem; /* Smaller padding */
    }
     .md\:grid-cols-3 { /* Undo the grid change on smaller screens if needed */
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .md\:col-span-1, .md\:col-span-2 {
        grid-column: span 1 / span 1;
    }
    h1 { font-size: 1.5rem; } /* Smaller header */
    .text-xs { font-size: 0.65rem; } /* Even smaller text for workflow */
}