/* VG UI Custom Styles */

/* Dashboard Components */
.dashboard-container {
    @apply max-w-7xl mx-auto px-4 py-6;
}

.stat-card {
    @apply bg-white rounded-lg shadow p-6 flex items-center space-x-4;
}

.stat-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-xl;
}

.stat-content {
    @apply flex-1;
}

.stat-title {
    @apply text-sm text-gray-600 font-medium;
}

.stat-value {
    @apply text-2xl font-bold text-gray-900;
}

.dashboard-section {
    @apply mb-8;
}

.section-title {
    @apply text-xl font-semibold text-gray-900 mb-4;
}

/* Quick Action Cards */
.quick-action-card {
    @apply bg-white rounded-lg shadow p-6 text-center hover:shadow-lg transition-shadow cursor-pointer;
}

.quick-action-icon {
    @apply text-3xl mb-2 block;
}

.quick-action-text {
    @apply text-sm font-medium text-gray-700;
}

/* Status Indicators */
.status-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

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

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

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

.status-info {
    @apply bg-blue-100 text-blue-800;
}

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

/* Property Tags */
.property-tag {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.property-tag-blue {
    @apply bg-blue-100 text-blue-700;
}

.property-tag-red {
    @apply bg-red-100 text-red-700;
}

.property-tag-yellow {
    @apply bg-yellow-100 text-yellow-700;
}

.property-tag-green {
    @apply bg-green-100 text-green-700;
}

/* Detail List */
.detail-list {
    @apply space-y-4;
}

.detail-item {
    @apply grid grid-cols-3 gap-4;
}

.detail-item dt {
    @apply text-sm font-medium text-gray-600;
}

.detail-item dd {
    @apply text-sm text-gray-900 col-span-2;
}

/* Stat Items */
.stat-item {
    @apply text-center;
}

.stat-label {
    @apply text-sm text-gray-600 font-medium;
}

/* Modal Styles */
.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50;
}

.modal-dialog {
    @apply bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4;
}

.modal-content {
    @apply relative;
}

.modal-header {
    @apply flex items-center justify-between px-6 py-4 border-b;
}

.modal-title {
    @apply text-lg font-semibold text-gray-900;
}

.modal-close {
    @apply text-gray-400 hover:text-gray-600 text-2xl leading-none;
}

.modal-body {
    @apply px-6 py-4;
}

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

/* List Container */
.list-container {
    @apply max-w-7xl mx-auto px-4 py-6;
}

/* Filter Form */
.filter-form {
    @apply p-4;
}

/* Detail Container */
.detail-container {
    @apply max-w-7xl mx-auto px-4 py-6;
}

/* Form Container */
.form-container {
    @apply max-w-7xl mx-auto px-4 py-6;
}

/* Overview Container */
.overview-container {
    @apply max-w-7xl mx-auto px-4 py-6;
}

/* Unit Display */
.unit-display {
    @apply text-sm font-medium text-gray-600;
}

/* VG-specific Descriptions */
.vg-desc {
    @apply p-2 bg-gray-50 rounded;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .page-header {
        @apply px-4 py-3;
    }
    
    .page-title {
        @apply text-lg;
    }
    
    .btn {
        @apply text-sm px-3 py-2;
    }
    
    .card {
        @apply p-4;
    }
    
    .table {
        @apply text-sm;
    }
}

/* Mobile sidebar */
.sidebar-wrapper {
    @apply relative;
}

/* Hide desktop buttons on mobile */
@media (max-width: 639px) {
    .page-actions .btn {
        @apply text-xs px-2 py-1.5;
    }
}