/* Pristine Portfolio Tool - Custom Styles */

/* Base styles */
:root {
    --pristine-primary: #0ea5e9;
    --pristine-secondary: #0284c7;
    --pristine-accent: #38bdf8;
    --sidebar-width: 280px;
    --topbar-height: 64px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Layout */
.app-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 30;
    transition: transform 0.3s ease;
}

.sidebar.mobile-hidden {
    transform: translateX(-100%);
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.main-content.sidebar-collapsed {
    margin-left: 0;
    width: 100%;
}

.topbar {
    height: var(--topbar-height);
    position: sticky;
    top: 0;
    z-index: 20;
}

.content-area {
    min-height: calc(100vh - var(--topbar-height));
    padding: 1.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: 1rem;
    }
    
    :root {
        --topbar-height: 56px;
    }
}

/* Navigation styles */
.nav-item {
    @apply flex items-center px-4 py-3 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer;
}

.nav-item.active {
    @apply bg-pristine-50 text-pristine-700 font-medium;
}

.nav-item i {
    @apply w-5 text-center mr-3;
}

/* Form styles */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pristine-500 focus:border-pristine-500 transition-colors;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pristine-500 focus:border-pristine-500 transition-colors resize-vertical;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pristine-500 focus:border-pristine-500 bg-white transition-colors;
}

.form-checkbox {
    @apply h-4 w-4 text-pristine-600 border-gray-300 rounded focus:ring-pristine-500;
}

/* Button styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer;
}

.btn-primary {
    @apply bg-pristine-600 text-white hover:bg-pristine-700 focus:ring-pristine-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-outline {
    @apply bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Table styles */
.table-container {
    @apply overflow-x-auto bg-white rounded-lg shadow;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table tbody tr:hover {
    @apply bg-gray-50;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow border border-gray-200;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Status indicators */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-active {
    @apply bg-green-100 text-green-800;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.status-inactive {
    @apply bg-gray-100 text-gray-800;
}

.status-danger {
    @apply bg-red-100 text-red-800;
}

/* Progress bars */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply h-2 rounded-full transition-all duration-300 ease-out;
}

/* Modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50 p-4;
}

.modal {
    @apply bg-white rounded-lg shadow-xl max-w-md w-full max-h-screen overflow-y-auto;
}

.modal-lg {
    @apply max-w-2xl;
}

.modal-xl {
    @apply max-w-4xl;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end space-x-2;
}

/* Toast notifications */
.toast {
    @apply bg-white rounded-lg shadow-lg border-l-4 p-4 mb-2 max-w-sm animate-slide-in;
}

.toast-success {
    @apply border-green-500;
}

.toast-error {
    @apply border-red-500;
}

.toast-warning {
    @apply border-yellow-500;
}

.toast-info {
    @apply border-blue-500;
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}

/* Loading states */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-pristine-600 rounded-full animate-spin;
}

/* Drag and drop */
.drag-area {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-pristine-400 transition-colors;
}

.drag-area.drag-over {
    @apply border-pristine-500 bg-pristine-50;
}

/* Formula BOM editor specific styles */
.bom-editor {
    @apply overflow-x-auto;
}

.bom-table {
    @apply min-w-full border border-gray-200 rounded-lg;
}

.bom-table th,
.bom-table td {
    @apply border border-gray-200 px-3 py-2 text-sm;
}

.bom-table input {
    @apply w-full border-0 focus:ring-0 bg-transparent;
}

.percentage-input {
    @apply text-right;
}

/* Chart containers */
.chart-container {
    @apply relative;
    height: 400px;
}

.chart-container canvas {
    @apply max-w-full max-h-full;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .card {
        @apply rounded-none border-x-0;
    }
    
    .table-container {
        @apply rounded-none;
    }
    
    .modal {
        @apply m-0 rounded-none h-full;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Utility classes */
.text-truncate {
    @apply truncate;
}

.shadow-hover {
    transition: box-shadow 0.2s ease;
}

.shadow-hover:hover {
    @apply shadow-lg;
}

/* Focus visible improvements */
.focus-visible:focus-visible {
    @apply outline-2 outline-offset-2 outline-pristine-500;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        @apply border-2 border-gray-900;
    }
    
    .nav-item.active {
        @apply border-2 border-pristine-700;
    }
}