section { margin-bottom: 2rem; } h1 { margin-bottom: 1.5rem; } h2 { margin-bottom: 1rem; font-size: 1.25rem; } h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; } /* Tabs styling */ .nav-tabs { border-bottom: 2px solid #dee2e6; } .nav-tabs .nav-link { border: none; border-bottom: 3px solid transparent; color: #6c757d; margin-bottom: -2px; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; } .nav-tabs .nav-link:hover { border-bottom-color: #0d6efd; color: #0d6efd; } .nav-tabs .nav-link.active { border-bottom-color: #0d6efd; color: #0d6efd; background-color: transparent; } .tab-content { animation: fadeIn 0.2s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .tab-pane { display: none; } .tab-pane.show.active { display: block; } /* Editor styling */ .editor-wrapper { border: 1px solid #dee2e6; border-radius: 0.375rem; overflow: hidden; background-color: #fff; } .editor-wrapper ::deep .ql-container { font-family: inherit; font-size: 1rem; } .editor-wrapper ::deep .ql-editor { min-height: 200px; padding: 15px; line-height: 1.5; } .editor-wrapper ::deep .ql-toolbar { background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; } .editor-wrapper ::deep .ql-toolbar.ql-snow { padding: 10px; } .editor-wrapper ::deep .ql-snow .ql-picker-label { color: #495057; } .editor-wrapper ::deep .ql-snow .ql-stroke { stroke: #495057; } .editor-wrapper ::deep .ql-snow .ql-fill { fill: #495057; } .editor-wrapper ::deep .ql-snow .ql-picker.ql-expanded .ql-picker-item.selected { color: #0d6efd; } /* Table styling */ .table { margin-top: 1rem; } .table thead th { background-color: #f8f9fa; border-top: 2px solid #dee2e6; font-weight: 600; } .table tbody tr:hover { background-color: #f8f9fa; } /* Form styling */ .form-check { margin-top: 0.75rem; } .form-check-input { margin-right: 0.5rem; } .text-muted { color: #6c757d; } /* Alert styling */ .alert { margin-bottom: 1.5rem; } /* Responsive adjustments */ @media (max-width: 768px) { .nav-tabs .nav-link { font-size: 0.9rem; padding: 0.5rem 0.75rem; } .table { font-size: 0.9rem; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; } } /* Category grouping and drag-drop */ .category-groups { display: flex; flex-direction: column; gap: 1rem; } .category-group { border: 1px solid #dee2e6; } .category-group .card-header { background-color: #f8f9fa; } .category-group [draggable="true"] { cursor: move; } .category-group tbody tr[draggable="true"]:active { opacity: 0.6; } /* Drop indicators */ .category-group.drop-target-category { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2); } .drop-target-category-before { box-shadow: inset 0 3px 0 #0d6efd; } .drop-target-category-after { box-shadow: inset 0 -3px 0 #0d6efd; } .drop-target-item-end { border-bottom: 3px solid #0d6efd; } .table tbody tr.drop-target-item-before { box-shadow: inset 0 3px 0 #0d6efd; } .table tbody tr.drop-target-item-after { box-shadow: inset 0 -3px 0 #0d6efd; } .category-list-end-drop-zone { min-height: 18px; border-radius: 0.375rem; } .category-list-end-drop-zone.drop-target-category-list-end { box-shadow: inset 0 -3px 0 #0d6efd; }