maybe good

static/css/components.css

@@ -0,0 +1,259 @@
+/* Delphi Database System - Component Styles */
+
+/* Login Component */
+.login-page {
+    background-color: #f8f9fa;
+}
+
+.login-card {
+    max-width: 400px;
+    margin: 2rem auto;
+}
+
+.login-logo {
+    height: 60px;
+    margin-bottom: 1rem;
+}
+
+.login-form .input-group-text {
+    background-color: #e9ecef;
+    border-right: none;
+}
+
+.login-form .form-control {
+    border-left: none;
+}
+
+.login-form .form-control:focus {
+    border-left: none;
+    box-shadow: none;
+}
+
+.login-status {
+    margin-top: 1rem;
+}
+
+/* Customer Management Component */
+.customer-search-panel {
+    background-color: white;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}
+
+.customer-table-container {
+    background-color: white;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+.customer-modal .modal-dialog {
+    max-width: 90%;
+}
+
+.customer-form-section {
+    margin-bottom: 1.5rem;
+}
+
+.customer-form-section .card-header {
+    background-color: #f8f9fa;
+    border-bottom: 1px solid #dee2e6;
+    font-weight: 600;
+}
+
+.phone-entry {
+    background-color: #f8f9fa;
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    margin-bottom: 0.5rem;
+}
+
+.phone-entry:last-child {
+    margin-bottom: 0;
+}
+
+/* Statistics Modal */
+.stats-modal .modal-body {
+    background-color: #f8f9fa;
+}
+
+.stats-section {
+    background-color: white;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Navigation Component */
+.navbar-shortcuts small {
+    font-size: 0.7rem;
+    opacity: 0.8;
+}
+
+.keyboard-shortcuts-modal .modal-body {
+    background-color: #f8f9fa;
+}
+
+.shortcuts-section {
+    background-color: white;
+    border-radius: 0.375rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+/* Dashboard Component */
+.dashboard-card {
+    transition: transform 0.2s ease-in-out;
+}
+
+.dashboard-card:hover {
+    transform: translateY(-2px);
+}
+
+.dashboard-stats {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 1rem;
+}
+
+.recent-activity {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.activity-item {
+    border-left: 3px solid var(--delphi-primary);
+    padding-left: 1rem;
+    margin-bottom: 1rem;
+}
+
+.activity-item:last-child {
+    margin-bottom: 0;
+}
+
+/* Form Components */
+.form-floating-custom .form-control {
+    height: calc(3.5rem + 2px);
+    line-height: 1.25;
+}
+
+.form-floating-custom .form-control::placeholder {
+    color: transparent;
+}
+
+.form-floating-custom .form-control:focus ~ .form-label,
+.form-floating-custom .form-control:not(:placeholder-shown) ~ .form-label {
+    opacity: 0.65;
+    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+
+/* Search Components */
+.search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid #dee2e6;
+    border-top: none;
+    border-radius: 0 0 0.375rem 0.375rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.search-result-item {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #f8f9fa;
+    cursor: pointer;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.search-result-item:hover {
+    background-color: #f8f9fa;
+}
+
+.search-result-item:last-child {
+    border-bottom: none;
+}
+
+/* Notification Components */
+#notification-container,
+.notification-container {
+    z-index: 1070 !important;
+}
+
+#notification-container {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    width: 300px;
+}
+
+.notification {
+    margin-bottom: 0.5rem;
+    animation: slideInRight 0.3s ease-out;
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Loading Components */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.loading-spinner {
+    width: 2rem;
+    height: 2rem;
+    border: 0.25rem solid #f3f3f3;
+    border-top: 0.25rem solid var(--delphi-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+/* Table Components */
+.sortable-header {
+    cursor: pointer;
+    user-select: none;
+}
+
+.sortable-header:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.sortable-header.sort-asc::after {
+    content: " ↑";
+}
+
+.sortable-header.sort-desc::after {
+    content: " ↓";
+}
+
+/* Form Validation */
+.invalid-feedback.hidden {
+    display: none;
+}
+
+.invalid-feedback.visible {
+    display: block;
+}