diff --git a/.gitignore b/.gitignore index 763bcc3..dbb0a33 100644 --- a/.gitignore +++ b/.gitignore @@ -43,6 +43,21 @@ Thumbs.db # Local configuration .claude/ *.local.json +.env +.env.local +.env.production + +# Secrets +*.pem +*.key + +# POS static uploads +pos/static/images/parts/ + +# SQLite databases +*.db +*.db-shm +*.db-wal # Temporary files *.tmp @@ -54,6 +69,10 @@ Thumbs.db # Data files (TecDoc downloads, too large for git) data/ +vehicle_database/ +CapturasWeb/ +.pytest_cache/ +node_modules/ # SQLite WAL files *.db-shm diff --git a/config.py b/config.py index 4b0f627..d7573bf 100644 --- a/config.py +++ b/config.py @@ -4,10 +4,12 @@ Central configuration for Nexus Autoparts. import os # Database -DB_URL = os.environ.get( - "DATABASE_URL", - "postgresql://nexus:nexus_autoparts_2026@localhost/nexus_autoparts" -) +DB_URL = os.environ.get("DATABASE_URL") +if not DB_URL: + raise ValueError( + "DATABASE_URL environment variable is required. " + "Example: postgresql://user:pass@localhost/nexus_autoparts" + ) # Legacy SQLite path (used only by migration script) SQLITE_PATH = os.path.join( @@ -16,7 +18,13 @@ SQLITE_PATH = os.path.join( ) # JWT Authentication -JWT_SECRET = os.environ.get("JWT_SECRET", "nexus-saas-secret-change-in-prod-2026") +JWT_SECRET = os.environ.get("JWT_SECRET") +if not JWT_SECRET: + raise ValueError( + "JWT_SECRET environment variable is required. " + "Generate one with: python3 -c 'import secrets; print(secrets.token_hex(32))'" + ) + JWT_ACCESS_EXPIRES = 900 # 15 minutes JWT_REFRESH_EXPIRES = 2592000 # 30 days diff --git a/dashboard/admin.css b/dashboard/admin.css new file mode 100644 index 0000000..ddd8a43 --- /dev/null +++ b/dashboard/admin.css @@ -0,0 +1,585 @@ +/* Extracted from admin.html */ + +/* Admin-specific variable overrides */ + :root { + --text-secondary: #8888aa; + --success: #00d68f; + --warning: #ffaa00; + } + + /* Layout */ + .container { + display: flex; + min-height: calc(100vh - 60px); + padding-top: 60px; + } + + /* Sidebar */ + .sidebar { + width: 250px; + background: var(--bg-secondary); + border-right: 1px solid var(--border); + padding: 1rem 0; + flex-shrink: 0; + } + + .sidebar-section { + padding: 0.5rem 1rem; + margin-bottom: 0.5rem; + } + + .sidebar-section h3 { + font-size: 0.75rem; + text-transform: uppercase; + color: var(--text-secondary); + margin-bottom: 0.5rem; + letter-spacing: 0.05em; + } + + .sidebar-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + color: var(--text-secondary); + text-decoration: none; + cursor: pointer; + transition: all 0.2s; + border-left: 3px solid transparent; + } + + .sidebar-item:hover { + background: var(--bg-tertiary); + color: var(--text-primary); + } + + .sidebar-item.active { + background: var(--bg-tertiary); + color: var(--accent); + border-left-color: var(--accent); + } + + .sidebar-item .icon { + width: 20px; + text-align: center; + } + + /* Main Content */ + .main-content { + flex: 1; + padding: 2rem; + overflow-x: auto; + } + + .page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + } + + .page-title { + font-size: 1.75rem; + font-weight: 600; + } + + .page-actions { + display: flex; + gap: 1rem; + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; + text-decoration: none; + } + + .btn-primary { + background: var(--accent); + color: white; + } + + .btn-primary:hover { + background: var(--accent-hover); + } + + .btn-secondary { + background: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border); + } + + .btn-secondary:hover { + background: var(--border); + } + + .btn-success { + background: var(--success); + color: white; + } + + .btn-danger { + background: var(--danger); + color: white; + } + + .btn-sm { + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + } + + /* Cards */ + .card { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 1.5rem; + } + + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); + } + + .card-title { + font-size: 1.1rem; + font-weight: 600; + } + + /* Tables */ + .table-wrapper { + overflow-x: auto; + } + + table { + width: 100%; + border-collapse: collapse; + } + + th, td { + text-align: left; + padding: 1rem; + border-bottom: 1px solid var(--border); + } + + th { + font-weight: 600; + color: var(--text-secondary); + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--bg-tertiary); + } + + tr:hover td { + background: rgba(255, 107, 53, 0.05); + } + + .actions-cell { + display: flex; + gap: 0.5rem; + } + + /* Forms - admin-specific */ + select.form-input { + cursor: pointer; + } + + textarea.form-input { + min-height: 100px; + resize: vertical; + } + + .form-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + } + + /* Modal */ + .modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 1000; + justify-content: center; + align-items: flex-start; + padding: 2rem; + overflow-y: auto; + } + + .modal-overlay.active { + display: flex; + } + + .modal { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 16px; + width: 100%; + max-width: 600px; + margin-top: 2rem; + } + + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid var(--border); + } + + .modal-title { + font-size: 1.25rem; + font-weight: 600; + } + + .modal-close { + background: none; + border: none; + color: var(--text-secondary); + font-size: 1.5rem; + cursor: pointer; + padding: 0.5rem; + line-height: 1; + } + + .modal-close:hover { + color: var(--text-primary); + } + + .modal-body { + padding: 1.5rem; + } + + .modal-footer { + display: flex; + justify-content: flex-end; + gap: 1rem; + padding: 1.5rem; + border-top: 1px solid var(--border); + } + + /* File Upload */ + .file-upload { + border: 2px dashed var(--border); + border-radius: 12px; + padding: 2rem; + text-align: center; + cursor: pointer; + transition: all 0.2s; + } + + .file-upload:hover { + border-color: var(--accent); + background: rgba(255, 107, 53, 0.05); + } + + .file-upload.dragover { + border-color: var(--accent); + background: rgba(255, 107, 53, 0.1); + } + + .file-upload input { + display: none; + } + + .file-upload-icon { + font-size: 2.5rem; + margin-bottom: 1rem; + } + + .file-upload-text { + color: var(--text-secondary); + } + + .file-upload-text strong { + color: var(--accent); + } + + /* Stats Grid */ + .stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; + } + + .stat-card { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + } + + .stat-value { + font-size: 2rem; + font-weight: 700; + color: var(--accent); + } + + .stat-label { + color: var(--text-secondary); + font-size: 0.9rem; + margin-top: 0.25rem; + } + + /* Badge */ + .badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 600; + } + + .badge-economy { background: #444; color: #ccc; } + .badge-standard { background: #2a5a2a; color: #7fff7f; } + .badge-premium { background: #5a5a2a; color: #ffff7f; } + .badge-oem { background: #2a2a5a; color: #7f7fff; } + + /* Pagination */ + .pagination { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 1.5rem; + } + + .pagination button { + padding: 0.5rem 1rem; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + cursor: pointer; + } + + .pagination button:hover:not(:disabled) { + background: var(--accent); + } + + .pagination button:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .pagination button.active { + background: var(--accent); + } + + /* Search */ + .search-box { + position: relative; + max-width: 300px; + } + + .search-box input { + width: 100%; + padding: 0.75rem 1rem 0.75rem 2.5rem; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + } + + .search-box::before { + content: "🔍"; + position: absolute; + left: 0.75rem; + top: 50%; + transform: translateY(-50%); + font-size: 0.9rem; + } + + /* Tab navigation */ + .tab-nav { + display: flex; + gap: 0.5rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid var(--border); + padding-bottom: 0.5rem; + } + + .tab-btn { + padding: 0.75rem 1.5rem; + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + border-radius: 8px 8px 0 0; + transition: all 0.2s; + } + + .tab-btn:hover { + color: var(--text-primary); + background: var(--bg-tertiary); + } + + .tab-btn.active { + color: var(--accent); + background: var(--bg-tertiary); + border-bottom: 2px solid var(--accent); + } + + .tab-content { + display: none; + } + + .tab-content.active { + display: block; + } + + /* Hidden sections */ + .admin-section { + display: none; + } + + .admin-section.active { + display: block; + } + + /* Loading */ + .loading { + text-align: center; + padding: 2rem; + color: var(--text-secondary); + } + + .spinner { + display: inline-block; + width: 40px; + height: 40px; + border: 3px solid var(--border); + border-top-color: var(--accent); + border-radius: 50%; + animation: spin 1s linear infinite; + } + + /* Image Upload */ + .image-upload-container { + display: flex; + gap: 1rem; + align-items: flex-start; + } + + .image-preview { + width: 120px; + height: 120px; + background: var(--bg-tertiary); + border: 2px dashed var(--border); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + flex-shrink: 0; + } + + .image-preview img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + .image-placeholder { + color: var(--text-secondary); + font-size: 0.85rem; + text-align: center; + } + + .image-upload-actions { + flex: 1; + } + + .image-upload-actions input[type="file"] { + display: none; + } + + .part-thumbnail { + width: 50px; + height: 50px; + object-fit: contain; + border-radius: 4px; + background: var(--bg-tertiary); + } + + /* Bulk Parts Selector */ + .bulk-parts-container { + max-height: 400px; + overflow-y: auto; + border: 1px solid var(--border); + border-radius: 8px; + padding: 1rem; + background: var(--bg-tertiary); + } + + .bulk-part-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem; + border-bottom: 1px solid var(--border); + cursor: pointer; + transition: background 0.2s; + } + + .bulk-part-item:last-child { + border-bottom: none; + } + + .bulk-part-item:hover { + background: var(--bg-hover, rgba(255, 107, 53, 0.1)); + } + + .bulk-part-item.selected { + background: rgba(0, 214, 143, 0.15); + border-color: var(--success); + } + + .bulk-part-item input[type="checkbox"] { + width: 18px; + height: 18px; + accent-color: var(--accent); + } + + .bulk-part-info { + flex: 1; + } + + .bulk-part-number { + font-family: monospace; + color: var(--accent); + font-size: 0.85rem; + } + + .bulk-part-name { + font-weight: 500; + } + + .bulk-part-group { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .bulk-part-qty { + width: 60px; + } diff --git a/dashboard/admin.html b/dashboard/admin.html index cfb4769..eeab4e1 100644 --- a/dashboard/admin.html +++ b/dashboard/admin.html @@ -6,592 +6,7 @@ Admin Panel - Nexus Autoparts - + diff --git a/dashboard/admin.min.css b/dashboard/admin.min.css new file mode 100644 index 0000000..ddd8a43 --- /dev/null +++ b/dashboard/admin.min.css @@ -0,0 +1,585 @@ +/* Extracted from admin.html */ + +/* Admin-specific variable overrides */ + :root { + --text-secondary: #8888aa; + --success: #00d68f; + --warning: #ffaa00; + } + + /* Layout */ + .container { + display: flex; + min-height: calc(100vh - 60px); + padding-top: 60px; + } + + /* Sidebar */ + .sidebar { + width: 250px; + background: var(--bg-secondary); + border-right: 1px solid var(--border); + padding: 1rem 0; + flex-shrink: 0; + } + + .sidebar-section { + padding: 0.5rem 1rem; + margin-bottom: 0.5rem; + } + + .sidebar-section h3 { + font-size: 0.75rem; + text-transform: uppercase; + color: var(--text-secondary); + margin-bottom: 0.5rem; + letter-spacing: 0.05em; + } + + .sidebar-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 1rem; + color: var(--text-secondary); + text-decoration: none; + cursor: pointer; + transition: all 0.2s; + border-left: 3px solid transparent; + } + + .sidebar-item:hover { + background: var(--bg-tertiary); + color: var(--text-primary); + } + + .sidebar-item.active { + background: var(--bg-tertiary); + color: var(--accent); + border-left-color: var(--accent); + } + + .sidebar-item .icon { + width: 20px; + text-align: center; + } + + /* Main Content */ + .main-content { + flex: 1; + padding: 2rem; + overflow-x: auto; + } + + .page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + } + + .page-title { + font-size: 1.75rem; + font-weight: 600; + } + + .page-actions { + display: flex; + gap: 1rem; + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 8px; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; + text-decoration: none; + } + + .btn-primary { + background: var(--accent); + color: white; + } + + .btn-primary:hover { + background: var(--accent-hover); + } + + .btn-secondary { + background: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border); + } + + .btn-secondary:hover { + background: var(--border); + } + + .btn-success { + background: var(--success); + color: white; + } + + .btn-danger { + background: var(--danger); + color: white; + } + + .btn-sm { + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + } + + /* Cards */ + .card { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + margin-bottom: 1.5rem; + } + + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); + } + + .card-title { + font-size: 1.1rem; + font-weight: 600; + } + + /* Tables */ + .table-wrapper { + overflow-x: auto; + } + + table { + width: 100%; + border-collapse: collapse; + } + + th, td { + text-align: left; + padding: 1rem; + border-bottom: 1px solid var(--border); + } + + th { + font-weight: 600; + color: var(--text-secondary); + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--bg-tertiary); + } + + tr:hover td { + background: rgba(255, 107, 53, 0.05); + } + + .actions-cell { + display: flex; + gap: 0.5rem; + } + + /* Forms - admin-specific */ + select.form-input { + cursor: pointer; + } + + textarea.form-input { + min-height: 100px; + resize: vertical; + } + + .form-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + } + + /* Modal */ + .modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 1000; + justify-content: center; + align-items: flex-start; + padding: 2rem; + overflow-y: auto; + } + + .modal-overlay.active { + display: flex; + } + + .modal { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 16px; + width: 100%; + max-width: 600px; + margin-top: 2rem; + } + + .modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border-bottom: 1px solid var(--border); + } + + .modal-title { + font-size: 1.25rem; + font-weight: 600; + } + + .modal-close { + background: none; + border: none; + color: var(--text-secondary); + font-size: 1.5rem; + cursor: pointer; + padding: 0.5rem; + line-height: 1; + } + + .modal-close:hover { + color: var(--text-primary); + } + + .modal-body { + padding: 1.5rem; + } + + .modal-footer { + display: flex; + justify-content: flex-end; + gap: 1rem; + padding: 1.5rem; + border-top: 1px solid var(--border); + } + + /* File Upload */ + .file-upload { + border: 2px dashed var(--border); + border-radius: 12px; + padding: 2rem; + text-align: center; + cursor: pointer; + transition: all 0.2s; + } + + .file-upload:hover { + border-color: var(--accent); + background: rgba(255, 107, 53, 0.05); + } + + .file-upload.dragover { + border-color: var(--accent); + background: rgba(255, 107, 53, 0.1); + } + + .file-upload input { + display: none; + } + + .file-upload-icon { + font-size: 2.5rem; + margin-bottom: 1rem; + } + + .file-upload-text { + color: var(--text-secondary); + } + + .file-upload-text strong { + color: var(--accent); + } + + /* Stats Grid */ + .stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-bottom: 2rem; + } + + .stat-card { + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1.5rem; + } + + .stat-value { + font-size: 2rem; + font-weight: 700; + color: var(--accent); + } + + .stat-label { + color: var(--text-secondary); + font-size: 0.9rem; + margin-top: 0.25rem; + } + + /* Badge */ + .badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 20px; + font-size: 0.75rem; + font-weight: 600; + } + + .badge-economy { background: #444; color: #ccc; } + .badge-standard { background: #2a5a2a; color: #7fff7f; } + .badge-premium { background: #5a5a2a; color: #ffff7f; } + .badge-oem { background: #2a2a5a; color: #7f7fff; } + + /* Pagination */ + .pagination { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 1.5rem; + } + + .pagination button { + padding: 0.5rem 1rem; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + cursor: pointer; + } + + .pagination button:hover:not(:disabled) { + background: var(--accent); + } + + .pagination button:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .pagination button.active { + background: var(--accent); + } + + /* Search */ + .search-box { + position: relative; + max-width: 300px; + } + + .search-box input { + width: 100%; + padding: 0.75rem 1rem 0.75rem 2.5rem; + background: var(--bg-tertiary); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + } + + .search-box::before { + content: "🔍"; + position: absolute; + left: 0.75rem; + top: 50%; + transform: translateY(-50%); + font-size: 0.9rem; + } + + /* Tab navigation */ + .tab-nav { + display: flex; + gap: 0.5rem; + margin-bottom: 1.5rem; + border-bottom: 1px solid var(--border); + padding-bottom: 0.5rem; + } + + .tab-btn { + padding: 0.75rem 1.5rem; + background: none; + border: none; + color: var(--text-secondary); + cursor: pointer; + border-radius: 8px 8px 0 0; + transition: all 0.2s; + } + + .tab-btn:hover { + color: var(--text-primary); + background: var(--bg-tertiary); + } + + .tab-btn.active { + color: var(--accent); + background: var(--bg-tertiary); + border-bottom: 2px solid var(--accent); + } + + .tab-content { + display: none; + } + + .tab-content.active { + display: block; + } + + /* Hidden sections */ + .admin-section { + display: none; + } + + .admin-section.active { + display: block; + } + + /* Loading */ + .loading { + text-align: center; + padding: 2rem; + color: var(--text-secondary); + } + + .spinner { + display: inline-block; + width: 40px; + height: 40px; + border: 3px solid var(--border); + border-top-color: var(--accent); + border-radius: 50%; + animation: spin 1s linear infinite; + } + + /* Image Upload */ + .image-upload-container { + display: flex; + gap: 1rem; + align-items: flex-start; + } + + .image-preview { + width: 120px; + height: 120px; + background: var(--bg-tertiary); + border: 2px dashed var(--border); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + flex-shrink: 0; + } + + .image-preview img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + .image-placeholder { + color: var(--text-secondary); + font-size: 0.85rem; + text-align: center; + } + + .image-upload-actions { + flex: 1; + } + + .image-upload-actions input[type="file"] { + display: none; + } + + .part-thumbnail { + width: 50px; + height: 50px; + object-fit: contain; + border-radius: 4px; + background: var(--bg-tertiary); + } + + /* Bulk Parts Selector */ + .bulk-parts-container { + max-height: 400px; + overflow-y: auto; + border: 1px solid var(--border); + border-radius: 8px; + padding: 1rem; + background: var(--bg-tertiary); + } + + .bulk-part-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem; + border-bottom: 1px solid var(--border); + cursor: pointer; + transition: background 0.2s; + } + + .bulk-part-item:last-child { + border-bottom: none; + } + + .bulk-part-item:hover { + background: var(--bg-hover, rgba(255, 107, 53, 0.1)); + } + + .bulk-part-item.selected { + background: rgba(0, 214, 143, 0.15); + border-color: var(--success); + } + + .bulk-part-item input[type="checkbox"] { + width: 18px; + height: 18px; + accent-color: var(--accent); + } + + .bulk-part-info { + flex: 1; + } + + .bulk-part-number { + font-family: monospace; + color: var(--accent); + font-size: 0.85rem; + } + + .bulk-part-name { + font-weight: 500; + } + + .bulk-part-group { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .bulk-part-qty { + width: 60px; + } diff --git a/dashboard/catalog-public.css b/dashboard/catalog-public.css new file mode 100644 index 0000000..0f13c41 --- /dev/null +++ b/dashboard/catalog-public.css @@ -0,0 +1,537 @@ +/* Extracted from catalog-public.html */ + +/* ── Reset ── */ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html { scroll-behavior: smooth; scrollbar-width: none; } + html::-webkit-scrollbar { width: 0; } + + body { + font-family: var(--font-body); + background: var(--color-bg-base); + color: var(--color-text-primary); + line-height: var(--leading-body); + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + } + a { color: var(--color-text-accent); text-decoration: none; } + a:hover { text-decoration: underline; } + + /* ========================================================================== + HEADER — Glassmorphism sticky (matches landing) + ========================================================================== */ + + .site-header { + position: sticky; top: 0; + z-index: var(--z-sticky); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border-bottom: 1px solid var(--glass-border); + } + .site-header .inner { + max-width: var(--content-xl); margin: 0 auto; + padding: 0 var(--space-6); + display: flex; align-items: center; justify-content: space-between; + height: 56px; + } + .logo { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); + text-transform: uppercase; letter-spacing: var(--tracking-wide); + text-decoration: none; + position: relative; + } + .logo::after { + content: ''; + position: absolute; + bottom: -3px; left: 0; right: 0; + height: 2px; + background: var(--gradient-accent); + border-radius: 1px; + opacity: 0.5; + filter: blur(1px); + } + .header-right { display: flex; gap: var(--space-3); align-items: center; } + + /* ── Catalog mode toggle (OEM / Local) ── */ + .mode-toggle { + display: inline-flex; + padding: 3px; + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px dashed var(--glass-border); + border-radius: var(--radius-md); + gap: 2px; + } + .mode-toggle button { + background: transparent; + border: none; + color: var(--color-text-muted); + padding: 4px 12px; + border-radius: calc(var(--radius-md) - 3px); + font-family: var(--font-mono); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + cursor: pointer; + transition: all 0.2s var(--ease-out); + } + .mode-toggle button:hover { + color: var(--color-text-accent); + } + .mode-toggle button.is-active { + background: var(--color-primary-muted); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + + .theme-toggle { + width: 36px; height: 36px; + display: flex; align-items: center; justify-content: center; + background: transparent; + border: 1px dashed var(--glass-border); + border-radius: var(--radius-md); + color: var(--color-text-muted); + cursor: pointer; font-size: 1rem; + transition: var(--transition-fast); + } + .theme-toggle:hover { + border-color: var(--color-border-accent); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .header-back { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + text-decoration: none; + transition: color 0.2s; + } + .header-back:hover { color: var(--color-text-accent); text-decoration: none; } + + /* ========================================================================== + SEARCH BAR — Glass style + ========================================================================== */ + + .search-bar { + max-width: var(--content-xl); margin: 0 auto; + padding: var(--space-4) var(--space-6); + } + .search-wrapper { + display: flex; gap: var(--space-2); + } + .search-wrapper input { + flex: 1; + padding: var(--space-3) var(--space-4); + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body); + outline: none; + transition: all 0.25s var(--ease-out); + } + .search-wrapper input:focus { + border-color: var(--color-border-focus); + box-shadow: 0 0 0 3px var(--glow-color-soft), 0 0 20px var(--glow-color-soft); + } + .search-wrapper input::placeholder { color: var(--color-text-muted); } + + /* 3D search button */ + .search-wrapper button { + padding: var(--space-3) var(--space-5); + background: var(--gradient-accent); + color: var(--btn-primary-text); + border: none; border-radius: var(--radius-md); + font-family: var(--font-body); font-size: var(--text-body); + font-weight: var(--font-weight-semibold); cursor: pointer; + transition: all 0.25s var(--ease-out); + box-shadow: 0 3px 0 var(--color-primary-active), + 0 4px 10px var(--glow-color-soft); + position: relative; + overflow: hidden; + } + .search-wrapper button:hover { + transform: translateY(-1px); + box-shadow: 0 4px 0 var(--color-primary-active), + 0 8px 20px var(--glow-color); + } + .search-wrapper button:active { + transform: translateY(1px); + box-shadow: 0 1px 0 var(--color-primary-active); + } + /* Shimmer */ + .search-wrapper button::after { + content: ''; + position: absolute; + top: 0; left: -100%; width: 60%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s ease; + } + .search-wrapper button:hover::after { left: 120%; } + + /* ========================================================================== + REGION BAR — Glass pills + ========================================================================== */ + + .region-bar { + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border-bottom: 1px solid var(--glass-border); + padding: var(--space-2) 0; + } + .region-inner { + max-width: var(--content-xl); margin: 0 auto; + padding: 0 var(--space-6); + display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; + } + .region-label { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-widest); margin-right: var(--space-2); + font-family: var(--font-mono); + } + .region-btn { + background: transparent; + border: 1px dashed var(--glass-border); + color: var(--color-text-muted); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-md); cursor: pointer; + font-size: var(--text-caption); + font-family: var(--font-body); + transition: all 0.25s ease; + } + .region-btn:hover { + border-color: var(--color-border-accent); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .region-btn.is-active { + background: var(--color-primary-muted); + color: var(--color-text-accent); + border-color: var(--color-border-accent); + border-style: solid; + font-weight: var(--font-weight-semibold); + box-shadow: 0 0 16px var(--glow-color-soft); + } + + /* ========================================================================== + BREADCRUMB + ========================================================================== */ + + .breadcrumb { + max-width: var(--content-xl); margin: 0 auto; + padding: var(--space-2) var(--space-6); + display: flex; flex-wrap: wrap; gap: var(--space-1); + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-family: var(--font-mono); + } + .breadcrumb a { color: var(--color-text-accent); } + .breadcrumb .sep { margin: 0 var(--space-1); color: var(--color-text-muted); opacity: 0.4; } + + /* ========================================================================== + MAIN CONTENT + ========================================================================== */ + + .main { + max-width: var(--content-xl); margin: 0 auto; + padding: var(--space-4) var(--space-6) var(--space-16); + } + .main h2 { + font-family: var(--font-heading); font-size: var(--text-h3); + font-weight: var(--heading-weight-primary); + margin-bottom: var(--space-6); + letter-spacing: var(--heading-tracking-h3); + } + + /* ========================================================================== + NAV GRID — Glass cards for brands/models/years/engines/categories/groups + ========================================================================== */ + + .nav-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: var(--space-3); + } + .nav-card { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-5); + cursor: pointer; + transition: all 0.3s var(--ease-out); + display: flex; align-items: center; justify-content: space-between; + position: relative; + overflow: hidden; + } + /* Top accent line on hover */ + .nav-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: var(--gradient-accent); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s var(--ease-out); + } + .nav-card:hover::before { transform: scaleX(1); } + .nav-card:hover { + border-color: var(--color-border-accent); + box-shadow: 0 4px 20px var(--glow-color-soft); + transform: translateY(-2px); + } + .nav-card .name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body); + } + .nav-card .count { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-family: var(--font-mono); + } + + /* ========================================================================== + PARTS LIST — Glass rows with glow + ========================================================================== */ + + .parts-list { display: flex; flex-direction: column; gap: var(--space-3); } + .part-row { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-5); + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-3); + transition: all 0.3s var(--ease-out); + } + .part-row:hover { + border-color: var(--color-border-accent); + box-shadow: 0 4px 20px var(--glow-color-soft); + } + + /* Local-mode priority highlights */ + .part-row--tier1 { + border-color: var(--color-border-accent); + box-shadow: 0 0 16px var(--glow-color-soft); + } + .part-manu { + display: inline-flex; align-items: center; gap: 6px; + padding: 3px 10px; margin-bottom: var(--space-2); + background: var(--color-primary-muted); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: var(--color-text-accent); + font-family: var(--font-mono); + } + .part-row--tier2 .part-manu { + background: var(--color-surface-2); + color: var(--color-text-secondary); + } + .part-manu .manu-tier { color: var(--color-primary); font-size: 13px; } + .part-oem-sub { color: var(--color-text-muted); font-weight: var(--font-weight-regular); font-size: var(--text-caption); } + + .part-stock { + display: inline-block; + margin-top: var(--space-2); + padding: 2px 10px; + border-radius: var(--radius-full); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + } + .part-stock--yes { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); } + .part-stock--no { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px dashed var(--glass-border); } + .part-name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body); + } + .part-oem { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-accent); + } + .part-desc { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + margin-top: var(--space-1); + } + .part-alts { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: var(--space-2); + } + .part-alts span { + display: inline-block; + background: var(--color-primary-muted); + padding: 2px var(--space-2); + border-radius: var(--radius-sm); + margin-right: var(--space-1); + margin-bottom: var(--space-1); + font-family: var(--font-mono); + border: 1px dashed var(--glass-border); + } + .part-img { + width: 80px; height: 80px; + object-fit: contain; + border-radius: var(--radius-sm); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + } + .part-detail-btn { + font-size: var(--text-caption); + color: var(--color-text-accent); + cursor: pointer; + border: none; background: none; font-family: var(--font-body); + padding: var(--space-1) 0; + transition: color 0.2s; + } + .part-detail-btn:hover { text-decoration: underline; } + + /* ========================================================================== + PAGINATION — Glass buttons + ========================================================================== */ + + .pagination { + display: flex; justify-content: center; gap: var(--space-2); + margin-top: var(--space-6); + } + .pagination button { + padding: var(--space-2) var(--space-4); + background: var(--glass-bg); + backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + cursor: pointer; font-family: var(--font-body); + transition: all 0.25s ease; + } + .pagination button:hover { + border-color: var(--color-border-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .pagination button.active { + background: var(--gradient-accent); + color: var(--btn-primary-text); + border-color: transparent; + box-shadow: 0 3px 0 var(--color-primary-active), + 0 4px 12px var(--glow-color-soft); + } + .pagination button:disabled { opacity: .4; cursor: default; } + + /* ========================================================================== + SEARCH RESULTS + ========================================================================== */ + + .search-results { display: flex; flex-direction: column; gap: var(--space-3); } + + /* ========================================================================== + PART DETAIL MODAL — Glass overlay + ========================================================================== */ + + .modal-overlay { + display: none; + position: fixed; inset: 0; + background: var(--overlay-backdrop); + z-index: var(--z-modal); + justify-content: center; align-items: flex-start; + padding: var(--space-10) var(--space-4); + overflow-y: auto; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + } + .modal-overlay.open { display: flex; } + .modal-content { + background: var(--glass-bg-strong); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + max-width: 700px; width: 100%; + padding: var(--space-8); + position: relative; + box-shadow: 0 24px 48px rgba(0,0,0,0.3); + } + .modal-close { + position: absolute; top: var(--space-3); right: var(--space-3); + background: none; border: none; color: var(--color-text-muted); + font-size: 1.5rem; cursor: pointer; line-height: 1; + transition: color 0.2s; + } + .modal-close:hover { color: var(--color-text-accent); } + .detail-section { margin-top: var(--space-6); } + .detail-section h4 { + font-family: var(--font-heading); + font-size: var(--text-h6); + font-weight: var(--heading-weight-secondary); + margin-bottom: var(--space-3); + color: var(--color-text-accent); + } + .alt-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + .alt-table th, .alt-table td { + padding: var(--space-2) var(--space-3); + text-align: left; + border-bottom: 1px solid var(--glass-border); + } + .alt-table th { + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + font-size: var(--text-caption); + letter-spacing: var(--tracking-widest); + font-family: var(--font-mono); + } + + /* ========================================================================== + LOADING / EMPTY + ========================================================================== */ + + .loading { + text-align: center; padding: var(--space-10); + color: var(--color-text-muted); + font-size: var(--text-body); + } + .empty { + text-align: center; padding: var(--space-10); + color: var(--color-text-muted); + } + + /* ========================================================================== + FOOTER + ========================================================================== */ + + .site-footer { + padding: var(--space-4) 0; text-align: center; + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); color: var(--color-text-muted); + } + + /* ========================================================================== + RESPONSIVE + ========================================================================== */ + + @media (max-width: 640px) { + .nav-grid { grid-template-columns: 1fr; } + .part-row { grid-template-columns: 1fr; } + } diff --git a/dashboard/catalog-public.html b/dashboard/catalog-public.html index 19336b3..64a320f 100644 --- a/dashboard/catalog-public.html +++ b/dashboard/catalog-public.html @@ -11,543 +11,7 @@ })(); - + diff --git a/dashboard/catalog-public.min.css b/dashboard/catalog-public.min.css new file mode 100644 index 0000000..0f13c41 --- /dev/null +++ b/dashboard/catalog-public.min.css @@ -0,0 +1,537 @@ +/* Extracted from catalog-public.html */ + +/* ── Reset ── */ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html { scroll-behavior: smooth; scrollbar-width: none; } + html::-webkit-scrollbar { width: 0; } + + body { + font-family: var(--font-body); + background: var(--color-bg-base); + color: var(--color-text-primary); + line-height: var(--leading-body); + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + } + a { color: var(--color-text-accent); text-decoration: none; } + a:hover { text-decoration: underline; } + + /* ========================================================================== + HEADER — Glassmorphism sticky (matches landing) + ========================================================================== */ + + .site-header { + position: sticky; top: 0; + z-index: var(--z-sticky); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border-bottom: 1px solid var(--glass-border); + } + .site-header .inner { + max-width: var(--content-xl); margin: 0 auto; + padding: 0 var(--space-6); + display: flex; align-items: center; justify-content: space-between; + height: 56px; + } + .logo { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); + text-transform: uppercase; letter-spacing: var(--tracking-wide); + text-decoration: none; + position: relative; + } + .logo::after { + content: ''; + position: absolute; + bottom: -3px; left: 0; right: 0; + height: 2px; + background: var(--gradient-accent); + border-radius: 1px; + opacity: 0.5; + filter: blur(1px); + } + .header-right { display: flex; gap: var(--space-3); align-items: center; } + + /* ── Catalog mode toggle (OEM / Local) ── */ + .mode-toggle { + display: inline-flex; + padding: 3px; + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px dashed var(--glass-border); + border-radius: var(--radius-md); + gap: 2px; + } + .mode-toggle button { + background: transparent; + border: none; + color: var(--color-text-muted); + padding: 4px 12px; + border-radius: calc(var(--radius-md) - 3px); + font-family: var(--font-mono); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + cursor: pointer; + transition: all 0.2s var(--ease-out); + } + .mode-toggle button:hover { + color: var(--color-text-accent); + } + .mode-toggle button.is-active { + background: var(--color-primary-muted); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + + .theme-toggle { + width: 36px; height: 36px; + display: flex; align-items: center; justify-content: center; + background: transparent; + border: 1px dashed var(--glass-border); + border-radius: var(--radius-md); + color: var(--color-text-muted); + cursor: pointer; font-size: 1rem; + transition: var(--transition-fast); + } + .theme-toggle:hover { + border-color: var(--color-border-accent); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .header-back { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + text-decoration: none; + transition: color 0.2s; + } + .header-back:hover { color: var(--color-text-accent); text-decoration: none; } + + /* ========================================================================== + SEARCH BAR — Glass style + ========================================================================== */ + + .search-bar { + max-width: var(--content-xl); margin: 0 auto; + padding: var(--space-4) var(--space-6); + } + .search-wrapper { + display: flex; gap: var(--space-2); + } + .search-wrapper input { + flex: 1; + padding: var(--space-3) var(--space-4); + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body); + outline: none; + transition: all 0.25s var(--ease-out); + } + .search-wrapper input:focus { + border-color: var(--color-border-focus); + box-shadow: 0 0 0 3px var(--glow-color-soft), 0 0 20px var(--glow-color-soft); + } + .search-wrapper input::placeholder { color: var(--color-text-muted); } + + /* 3D search button */ + .search-wrapper button { + padding: var(--space-3) var(--space-5); + background: var(--gradient-accent); + color: var(--btn-primary-text); + border: none; border-radius: var(--radius-md); + font-family: var(--font-body); font-size: var(--text-body); + font-weight: var(--font-weight-semibold); cursor: pointer; + transition: all 0.25s var(--ease-out); + box-shadow: 0 3px 0 var(--color-primary-active), + 0 4px 10px var(--glow-color-soft); + position: relative; + overflow: hidden; + } + .search-wrapper button:hover { + transform: translateY(-1px); + box-shadow: 0 4px 0 var(--color-primary-active), + 0 8px 20px var(--glow-color); + } + .search-wrapper button:active { + transform: translateY(1px); + box-shadow: 0 1px 0 var(--color-primary-active); + } + /* Shimmer */ + .search-wrapper button::after { + content: ''; + position: absolute; + top: 0; left: -100%; width: 60%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s ease; + } + .search-wrapper button:hover::after { left: 120%; } + + /* ========================================================================== + REGION BAR — Glass pills + ========================================================================== */ + + .region-bar { + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border-bottom: 1px solid var(--glass-border); + padding: var(--space-2) 0; + } + .region-inner { + max-width: var(--content-xl); margin: 0 auto; + padding: 0 var(--space-6); + display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; + } + .region-label { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-widest); margin-right: var(--space-2); + font-family: var(--font-mono); + } + .region-btn { + background: transparent; + border: 1px dashed var(--glass-border); + color: var(--color-text-muted); + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-md); cursor: pointer; + font-size: var(--text-caption); + font-family: var(--font-body); + transition: all 0.25s ease; + } + .region-btn:hover { + border-color: var(--color-border-accent); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .region-btn.is-active { + background: var(--color-primary-muted); + color: var(--color-text-accent); + border-color: var(--color-border-accent); + border-style: solid; + font-weight: var(--font-weight-semibold); + box-shadow: 0 0 16px var(--glow-color-soft); + } + + /* ========================================================================== + BREADCRUMB + ========================================================================== */ + + .breadcrumb { + max-width: var(--content-xl); margin: 0 auto; + padding: var(--space-2) var(--space-6); + display: flex; flex-wrap: wrap; gap: var(--space-1); + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-family: var(--font-mono); + } + .breadcrumb a { color: var(--color-text-accent); } + .breadcrumb .sep { margin: 0 var(--space-1); color: var(--color-text-muted); opacity: 0.4; } + + /* ========================================================================== + MAIN CONTENT + ========================================================================== */ + + .main { + max-width: var(--content-xl); margin: 0 auto; + padding: var(--space-4) var(--space-6) var(--space-16); + } + .main h2 { + font-family: var(--font-heading); font-size: var(--text-h3); + font-weight: var(--heading-weight-primary); + margin-bottom: var(--space-6); + letter-spacing: var(--heading-tracking-h3); + } + + /* ========================================================================== + NAV GRID — Glass cards for brands/models/years/engines/categories/groups + ========================================================================== */ + + .nav-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: var(--space-3); + } + .nav-card { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-5); + cursor: pointer; + transition: all 0.3s var(--ease-out); + display: flex; align-items: center; justify-content: space-between; + position: relative; + overflow: hidden; + } + /* Top accent line on hover */ + .nav-card::before { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; + height: 2px; + background: var(--gradient-accent); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s var(--ease-out); + } + .nav-card:hover::before { transform: scaleX(1); } + .nav-card:hover { + border-color: var(--color-border-accent); + box-shadow: 0 4px 20px var(--glow-color-soft); + transform: translateY(-2px); + } + .nav-card .name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body); + } + .nav-card .count { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-family: var(--font-mono); + } + + /* ========================================================================== + PARTS LIST — Glass rows with glow + ========================================================================== */ + + .parts-list { display: flex; flex-direction: column; gap: var(--space-3); } + .part-row { + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-5); + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-3); + transition: all 0.3s var(--ease-out); + } + .part-row:hover { + border-color: var(--color-border-accent); + box-shadow: 0 4px 20px var(--glow-color-soft); + } + + /* Local-mode priority highlights */ + .part-row--tier1 { + border-color: var(--color-border-accent); + box-shadow: 0 0 16px var(--glow-color-soft); + } + .part-manu { + display: inline-flex; align-items: center; gap: 6px; + padding: 3px 10px; margin-bottom: var(--space-2); + background: var(--color-primary-muted); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: var(--color-text-accent); + font-family: var(--font-mono); + } + .part-row--tier2 .part-manu { + background: var(--color-surface-2); + color: var(--color-text-secondary); + } + .part-manu .manu-tier { color: var(--color-primary); font-size: 13px; } + .part-oem-sub { color: var(--color-text-muted); font-weight: var(--font-weight-regular); font-size: var(--text-caption); } + + .part-stock { + display: inline-block; + margin-top: var(--space-2); + padding: 2px 10px; + border-radius: var(--radius-full); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + } + .part-stock--yes { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); } + .part-stock--no { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px dashed var(--glass-border); } + .part-name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body); + } + .part-oem { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-accent); + } + .part-desc { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + margin-top: var(--space-1); + } + .part-alts { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: var(--space-2); + } + .part-alts span { + display: inline-block; + background: var(--color-primary-muted); + padding: 2px var(--space-2); + border-radius: var(--radius-sm); + margin-right: var(--space-1); + margin-bottom: var(--space-1); + font-family: var(--font-mono); + border: 1px dashed var(--glass-border); + } + .part-img { + width: 80px; height: 80px; + object-fit: contain; + border-radius: var(--radius-sm); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + } + .part-detail-btn { + font-size: var(--text-caption); + color: var(--color-text-accent); + cursor: pointer; + border: none; background: none; font-family: var(--font-body); + padding: var(--space-1) 0; + transition: color 0.2s; + } + .part-detail-btn:hover { text-decoration: underline; } + + /* ========================================================================== + PAGINATION — Glass buttons + ========================================================================== */ + + .pagination { + display: flex; justify-content: center; gap: var(--space-2); + margin-top: var(--space-6); + } + .pagination button { + padding: var(--space-2) var(--space-4); + background: var(--glass-bg); + backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + cursor: pointer; font-family: var(--font-body); + transition: all 0.25s ease; + } + .pagination button:hover { + border-color: var(--color-border-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .pagination button.active { + background: var(--gradient-accent); + color: var(--btn-primary-text); + border-color: transparent; + box-shadow: 0 3px 0 var(--color-primary-active), + 0 4px 12px var(--glow-color-soft); + } + .pagination button:disabled { opacity: .4; cursor: default; } + + /* ========================================================================== + SEARCH RESULTS + ========================================================================== */ + + .search-results { display: flex; flex-direction: column; gap: var(--space-3); } + + /* ========================================================================== + PART DETAIL MODAL — Glass overlay + ========================================================================== */ + + .modal-overlay { + display: none; + position: fixed; inset: 0; + background: var(--overlay-backdrop); + z-index: var(--z-modal); + justify-content: center; align-items: flex-start; + padding: var(--space-10) var(--space-4); + overflow-y: auto; + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + } + .modal-overlay.open { display: flex; } + .modal-content { + background: var(--glass-bg-strong); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid var(--glass-border); + border-radius: var(--radius-lg); + max-width: 700px; width: 100%; + padding: var(--space-8); + position: relative; + box-shadow: 0 24px 48px rgba(0,0,0,0.3); + } + .modal-close { + position: absolute; top: var(--space-3); right: var(--space-3); + background: none; border: none; color: var(--color-text-muted); + font-size: 1.5rem; cursor: pointer; line-height: 1; + transition: color 0.2s; + } + .modal-close:hover { color: var(--color-text-accent); } + .detail-section { margin-top: var(--space-6); } + .detail-section h4 { + font-family: var(--font-heading); + font-size: var(--text-h6); + font-weight: var(--heading-weight-secondary); + margin-bottom: var(--space-3); + color: var(--color-text-accent); + } + .alt-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + .alt-table th, .alt-table td { + padding: var(--space-2) var(--space-3); + text-align: left; + border-bottom: 1px solid var(--glass-border); + } + .alt-table th { + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + font-size: var(--text-caption); + letter-spacing: var(--tracking-widest); + font-family: var(--font-mono); + } + + /* ========================================================================== + LOADING / EMPTY + ========================================================================== */ + + .loading { + text-align: center; padding: var(--space-10); + color: var(--color-text-muted); + font-size: var(--text-body); + } + .empty { + text-align: center; padding: var(--space-10); + color: var(--color-text-muted); + } + + /* ========================================================================== + FOOTER + ========================================================================== */ + + .site-footer { + padding: var(--space-4) 0; text-align: center; + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); color: var(--color-text-muted); + } + + /* ========================================================================== + RESPONSIVE + ========================================================================== */ + + @media (max-width: 640px) { + .nav-grid { grid-template-columns: 1fr; } + .part-row { grid-template-columns: 1fr; } + } diff --git a/dashboard/customer-landing.css b/dashboard/customer-landing.css new file mode 100644 index 0000000..d5dc822 --- /dev/null +++ b/dashboard/customer-landing.css @@ -0,0 +1,941 @@ +/* Extracted from customer-landing.html */ + +/* Landing page-specific header extras */ + .header-actions { + display: flex; + align-items: center; + gap: 1.5rem; + } + + .search-btn, .cart-btn { + width: 42px; + height: 42px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + font-size: 1.2rem; + position: relative; + } + + .search-btn:hover, .cart-btn:hover { + background: var(--accent); + border-color: var(--accent); + } + + .cart-badge { + position: absolute; + top: -5px; + right: -5px; + width: 20px; + height: 20px; + background: var(--accent); + border-radius: 50%; + font-size: 0.7rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + } + + /* Footer logo (reuses .logo classes) */ + .footer .logo { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; + } + + .footer .logo-icon { + width: 42px; + height: 42px; + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + box-shadow: 0 4px 20px var(--accent-glow); + } + + .footer .logo-text { + font-family: 'Orbitron', sans-serif; + font-size: 1.4rem; + font-weight: 700; + background: linear-gradient(135deg, #fff 0%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Hero Section */ + .hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 8rem 3rem 4rem; + position: relative; + overflow: hidden; + } + + .hero-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at 80% 20%, rgba(255, 69, 0, 0.1) 0%, transparent 40%); + z-index: 0; + } + + .hero-grid { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: + linear-gradient(rgba(255, 107, 53, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 107, 53, 0.03) 1px, transparent 1px); + background-size: 50px 50px; + z-index: 0; + } + + .hero-content { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + width: 100%; + position: relative; + z-index: 1; + } + + .hero-text h1 { + font-family: 'Orbitron', sans-serif; + font-size: 3.5rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1.5rem; + } + + .hero-text h1 span { + color: var(--accent); + text-shadow: 0 0 30px var(--accent-glow); + } + + .hero-text p { + font-size: 1.2rem; + color: var(--text-secondary); + line-height: 1.8; + margin-bottom: 2.5rem; + max-width: 500px; + } + + .hero-buttons { + display: flex; + gap: 1rem; + } + + .btn-large { + padding: 1rem 2rem; + font-size: 1rem; + } + + .btn-outline { + background: transparent; + border: 2px solid var(--border); + color: var(--text-primary); + } + + .btn-outline:hover { + border-color: var(--accent); + color: var(--accent); + } + + .hero-stats { + display: flex; + gap: 3rem; + margin-top: 3rem; + padding-top: 2rem; + border-top: 1px solid var(--border); + } + + .hero-stat { + text-align: center; + } + + .hero-stat-value { + font-family: 'Orbitron', sans-serif; + font-size: 2rem; + font-weight: 700; + color: var(--accent); + } + + .hero-stat-label { + font-size: 0.85rem; + color: var(--text-secondary); + margin-top: 0.25rem; + } + + .hero-visual { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + .hero-image { + width: 500px; + height: 400px; + background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%); + border-radius: 20px; + border: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: center; + font-size: 8rem; + position: relative; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + } + + .hero-image::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(135deg, var(--accent), transparent, var(--accent)); + border-radius: 22px; + z-index: -1; + opacity: 0.5; + } + + .floating-card { + position: absolute; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1rem 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + } + + .floating-card-1 { + top: 20px; + right: -20px; + animation: float 3s ease-in-out infinite; + } + + .floating-card-2 { + bottom: 40px; + left: -30px; + animation: float 3s ease-in-out infinite 1.5s; + } + + @keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } + } + + .floating-card-text { + font-size: 0.85rem; + color: var(--text-secondary); + } + + .floating-card-value { + font-family: 'Orbitron', sans-serif; + font-size: 1.5rem; + font-weight: 700; + color: var(--accent); + } + + /* Categories Section */ + .categories { + padding: 5rem 3rem; + background: var(--bg-secondary); + } + + .section-header { + text-align: center; + margin-bottom: 3rem; + } + + .section-tag { + display: inline-block; + padding: 0.5rem 1rem; + background: rgba(255, 107, 53, 0.1); + border: 1px solid var(--accent); + border-radius: 20px; + color: var(--accent); + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 1rem; + } + + .section-title { + font-family: 'Orbitron', sans-serif; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + } + + .section-subtitle { + color: var(--text-secondary); + font-size: 1.1rem; + } + + .categories-grid { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1.5rem; + } + + .category-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem 1rem; + text-align: center; + cursor: pointer; + transition: all 0.3s; + text-decoration: none; + color: inherit; + display: block; + } + + .category-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .category-icon { + width: 70px; + height: 70px; + background: var(--bg-hover); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + margin: 0 auto 1rem; + transition: all 0.3s; + } + + .category-card:hover .category-icon { + background: var(--accent); + transform: scale(1.1); + } + + .category-name { + font-weight: 600; + margin-bottom: 0.5rem; + } + + .category-count { + font-size: 0.85rem; + color: var(--text-secondary); + } + + /* Featured Products */ + .featured { + padding: 5rem 3rem; + } + + .featured-header { + max-width: 1400px; + margin: 0 auto 3rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .view-all { + color: var(--accent); + text-decoration: none; + font-weight: 600; + display: flex; + align-items: center; + gap: 0.5rem; + transition: gap 0.3s; + } + + .view-all:hover { + gap: 1rem; + } + + .products-grid { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + } + + .product-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + transition: all 0.3s; + } + + .product-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); + } + + .product-image { + height: 200px; + background: var(--bg-hover); + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; + position: relative; + } + + .product-badge { + position: absolute; + top: 1rem; + left: 1rem; + padding: 0.4rem 0.8rem; + background: var(--accent); + border-radius: 6px; + font-size: 0.75rem; + font-weight: 700; + } + + .product-badge.premium { + background: linear-gradient(135deg, #f59e0b, #d97706); + } + + .product-badge.economy { + background: var(--success); + } + + .product-wishlist { + position: absolute; + top: 1rem; + right: 1rem; + width: 36px; + height: 36px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + } + + .product-wishlist:hover { + background: var(--accent); + border-color: var(--accent); + } + + .product-info { + padding: 1.5rem; + } + + .product-category { + font-size: 0.8rem; + color: var(--accent); + font-weight: 600; + margin-bottom: 0.5rem; + } + + .product-name { + font-weight: 600; + font-size: 1.1rem; + margin-bottom: 0.5rem; + line-height: 1.4; + } + + .product-oem { + font-size: 0.8rem; + color: var(--text-secondary); + font-family: monospace; + margin-bottom: 0.5rem; + } + + .product-compatibility { + font-size: 0.85rem; + color: var(--text-secondary); + margin-bottom: 1rem; + } + + .product-footer { + display: flex; + justify-content: space-between; + align-items: center; + } + + .product-price { + font-family: 'Orbitron', sans-serif; + font-size: 1.3rem; + font-weight: 700; + color: var(--accent); + } + + .product-price .original { + font-size: 0.9rem; + color: var(--text-secondary); + text-decoration: line-through; + margin-left: 0.5rem; + } + + .btn-add-cart { + width: 40px; + height: 40px; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + font-size: 1.2rem; + } + + .btn-add-cart:hover { + background: var(--accent); + border-color: var(--accent); + } + + /* Brands Section */ + .brands { + padding: 5rem 3rem; + background: var(--bg-secondary); + } + + .brands-grid { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + flex-wrap: wrap; + } + + .brand-item { + width: 140px; + height: 70px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + font-weight: 700; + color: var(--text-secondary); + transition: all 0.3s; + cursor: pointer; + text-align: center; + padding: 0.5rem; + } + + .brand-item:hover { + border-color: var(--accent); + color: var(--accent); + transform: translateY(-3px); + } + + /* VIN Section */ + .vin-section { + padding: 5rem 3rem; + position: relative; + overflow: hidden; + } + + .vin-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 50%); + } + + .vin-content { + max-width: 800px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 1; + } + + .vin-form { + display: flex; + gap: 1rem; + max-width: 600px; + margin: 2rem auto 0; + } + + .vin-input { + flex: 1; + padding: 1rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-size: 1rem; + font-family: monospace; + text-transform: uppercase; + letter-spacing: 2px; + outline: none; + transition: border-color 0.3s; + } + + .vin-input:focus { + border-color: var(--accent); + } + + .vin-input::placeholder { + color: var(--text-secondary); + text-transform: none; + letter-spacing: normal; + } + + /* CTA Section */ + .cta { + padding: 5rem 3rem; + background: var(--bg-secondary); + position: relative; + overflow: hidden; + } + + .cta-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 60%); + } + + .cta-content { + max-width: 800px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 1; + } + + .cta-title { + font-family: 'Orbitron', sans-serif; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + } + + .cta-subtitle { + color: var(--text-secondary); + font-size: 1.1rem; + margin-bottom: 2rem; + } + + .cta-form { + display: flex; + gap: 1rem; + max-width: 500px; + margin: 0 auto; + } + + .cta-input { + flex: 1; + padding: 1rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-size: 1rem; + outline: none; + transition: border-color 0.3s; + } + + .cta-input:focus { + border-color: var(--accent); + } + + .cta-input::placeholder { + color: var(--text-secondary); + } + + /* Footer */ + .footer { + background: var(--bg-primary); + border-top: 1px solid var(--border); + padding: 4rem 3rem 2rem; + } + + .footer-content { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + } + + .footer-brand p { + color: var(--text-secondary); + margin: 1rem 0; + line-height: 1.8; + } + + .social-links { + display: flex; + gap: 1rem; + } + + .social-link { + width: 40px; + height: 40px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + text-decoration: none; + color: var(--text-secondary); + } + + .social-link:hover { + background: var(--accent); + border-color: var(--accent); + color: white; + } + + .footer-title { + font-weight: 700; + margin-bottom: 1.5rem; + font-size: 1.1rem; + } + + .footer-links { + list-style: none; + } + + .footer-links li { + margin-bottom: 0.75rem; + } + + .footer-links a { + color: var(--text-secondary); + text-decoration: none; + transition: color 0.3s; + } + + .footer-links a:hover { + color: var(--accent); + } + + .footer-bottom { + max-width: 1400px; + margin: 3rem auto 0; + padding-top: 2rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + color: var(--text-secondary); + font-size: 0.9rem; + } + + /* Loading skeleton */ + .skeleton { + background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-card) 50%, var(--bg-hover) 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: 8px; + } + + @keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } + } + + /* Search Modal */ + .search-modal { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 2000; + align-items: flex-start; + justify-content: center; + padding-top: 15vh; + } + + .search-modal.active { + display: flex; + } + + .search-modal-content { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + width: 100%; + max-width: 600px; + padding: 1.5rem; + } + + .search-modal-input { + width: 100%; + padding: 1rem 1.5rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-size: 1.1rem; + outline: none; + } + + .search-modal-input:focus { + border-color: var(--accent); + } + + .search-results { + margin-top: 1rem; + max-height: 400px; + overflow-y: auto; + } + + .search-result-item { + padding: 1rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + } + + .search-result-item:hover { + background: var(--bg-hover); + } + + .search-result-name { + font-weight: 600; + } + + .search-result-oem { + font-size: 0.85rem; + color: var(--accent); + font-family: monospace; + } + + /* Mobile menu */ + .mobile-menu-btn { + display: none; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--text-primary); + } + + @media (max-width: 1024px) { + .hero-content { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-text p { + margin: 0 auto 2.5rem; + } + + .hero-buttons { + justify-content: center; + } + + .hero-stats { + justify-content: center; + } + + .hero-visual { + display: none; + } + + .categories-grid { + grid-template-columns: repeat(3, 1fr); + } + + .products-grid { + grid-template-columns: repeat(2, 1fr); + } + + .footer-content { + grid-template-columns: 1fr 1fr; + } + } + + @media (max-width: 768px) { + .header { + padding: 1rem; + } + + .nav-links { + display: none; + } + + .mobile-menu-btn { + display: block; + } + + .hero { + padding: 6rem 1rem 3rem; + } + + .hero-text h1 { + font-size: 2.5rem; + } + + .categories, .featured, .brands, .vin-section, .cta { + padding: 3rem 1rem; + } + + .categories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .products-grid { + grid-template-columns: 1fr; + } + + .vin-form, .cta-form { + flex-direction: column; + } + + .footer-content { + grid-template-columns: 1fr; + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + text-align: center; + } + } diff --git a/dashboard/customer-landing.html b/dashboard/customer-landing.html index 65b7127..909337e 100644 --- a/dashboard/customer-landing.html +++ b/dashboard/customer-landing.html @@ -6,947 +6,7 @@ Nexus Autoparts - Tu conexión directa con las partes que necesitas - + diff --git a/dashboard/customer-landing.min.css b/dashboard/customer-landing.min.css new file mode 100644 index 0000000..d5dc822 --- /dev/null +++ b/dashboard/customer-landing.min.css @@ -0,0 +1,941 @@ +/* Extracted from customer-landing.html */ + +/* Landing page-specific header extras */ + .header-actions { + display: flex; + align-items: center; + gap: 1.5rem; + } + + .search-btn, .cart-btn { + width: 42px; + height: 42px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + font-size: 1.2rem; + position: relative; + } + + .search-btn:hover, .cart-btn:hover { + background: var(--accent); + border-color: var(--accent); + } + + .cart-badge { + position: absolute; + top: -5px; + right: -5px; + width: 20px; + height: 20px; + background: var(--accent); + border-radius: 50%; + font-size: 0.7rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + } + + /* Footer logo (reuses .logo classes) */ + .footer .logo { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; + } + + .footer .logo-icon { + width: 42px; + height: 42px; + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + box-shadow: 0 4px 20px var(--accent-glow); + } + + .footer .logo-text { + font-family: 'Orbitron', sans-serif; + font-size: 1.4rem; + font-weight: 700; + background: linear-gradient(135deg, #fff 0%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + /* Hero Section */ + .hero { + min-height: 100vh; + display: flex; + align-items: center; + padding: 8rem 3rem 4rem; + position: relative; + overflow: hidden; + } + + .hero-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%), + radial-gradient(ellipse at 80% 20%, rgba(255, 69, 0, 0.1) 0%, transparent 40%); + z-index: 0; + } + + .hero-grid { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: + linear-gradient(rgba(255, 107, 53, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 107, 53, 0.03) 1px, transparent 1px); + background-size: 50px 50px; + z-index: 0; + } + + .hero-content { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; + width: 100%; + position: relative; + z-index: 1; + } + + .hero-text h1 { + font-family: 'Orbitron', sans-serif; + font-size: 3.5rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1.5rem; + } + + .hero-text h1 span { + color: var(--accent); + text-shadow: 0 0 30px var(--accent-glow); + } + + .hero-text p { + font-size: 1.2rem; + color: var(--text-secondary); + line-height: 1.8; + margin-bottom: 2.5rem; + max-width: 500px; + } + + .hero-buttons { + display: flex; + gap: 1rem; + } + + .btn-large { + padding: 1rem 2rem; + font-size: 1rem; + } + + .btn-outline { + background: transparent; + border: 2px solid var(--border); + color: var(--text-primary); + } + + .btn-outline:hover { + border-color: var(--accent); + color: var(--accent); + } + + .hero-stats { + display: flex; + gap: 3rem; + margin-top: 3rem; + padding-top: 2rem; + border-top: 1px solid var(--border); + } + + .hero-stat { + text-align: center; + } + + .hero-stat-value { + font-family: 'Orbitron', sans-serif; + font-size: 2rem; + font-weight: 700; + color: var(--accent); + } + + .hero-stat-label { + font-size: 0.85rem; + color: var(--text-secondary); + margin-top: 0.25rem; + } + + .hero-visual { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + .hero-image { + width: 500px; + height: 400px; + background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-hover) 100%); + border-radius: 20px; + border: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: center; + font-size: 8rem; + position: relative; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + } + + .hero-image::before { + content: ''; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + background: linear-gradient(135deg, var(--accent), transparent, var(--accent)); + border-radius: 22px; + z-index: -1; + opacity: 0.5; + } + + .floating-card { + position: absolute; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1rem 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + } + + .floating-card-1 { + top: 20px; + right: -20px; + animation: float 3s ease-in-out infinite; + } + + .floating-card-2 { + bottom: 40px; + left: -30px; + animation: float 3s ease-in-out infinite 1.5s; + } + + @keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } + } + + .floating-card-text { + font-size: 0.85rem; + color: var(--text-secondary); + } + + .floating-card-value { + font-family: 'Orbitron', sans-serif; + font-size: 1.5rem; + font-weight: 700; + color: var(--accent); + } + + /* Categories Section */ + .categories { + padding: 5rem 3rem; + background: var(--bg-secondary); + } + + .section-header { + text-align: center; + margin-bottom: 3rem; + } + + .section-tag { + display: inline-block; + padding: 0.5rem 1rem; + background: rgba(255, 107, 53, 0.1); + border: 1px solid var(--accent); + border-radius: 20px; + color: var(--accent); + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 1rem; + } + + .section-title { + font-family: 'Orbitron', sans-serif; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + } + + .section-subtitle { + color: var(--text-secondary); + font-size: 1.1rem; + } + + .categories-grid { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1.5rem; + } + + .category-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem 1rem; + text-align: center; + cursor: pointer; + transition: all 0.3s; + text-decoration: none; + color: inherit; + display: block; + } + + .category-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .category-icon { + width: 70px; + height: 70px; + background: var(--bg-hover); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + margin: 0 auto 1rem; + transition: all 0.3s; + } + + .category-card:hover .category-icon { + background: var(--accent); + transform: scale(1.1); + } + + .category-name { + font-weight: 600; + margin-bottom: 0.5rem; + } + + .category-count { + font-size: 0.85rem; + color: var(--text-secondary); + } + + /* Featured Products */ + .featured { + padding: 5rem 3rem; + } + + .featured-header { + max-width: 1400px; + margin: 0 auto 3rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .view-all { + color: var(--accent); + text-decoration: none; + font-weight: 600; + display: flex; + align-items: center; + gap: 0.5rem; + transition: gap 0.3s; + } + + .view-all:hover { + gap: 1rem; + } + + .products-grid { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + } + + .product-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + transition: all 0.3s; + } + + .product-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); + } + + .product-image { + height: 200px; + background: var(--bg-hover); + display: flex; + align-items: center; + justify-content: center; + font-size: 4rem; + position: relative; + } + + .product-badge { + position: absolute; + top: 1rem; + left: 1rem; + padding: 0.4rem 0.8rem; + background: var(--accent); + border-radius: 6px; + font-size: 0.75rem; + font-weight: 700; + } + + .product-badge.premium { + background: linear-gradient(135deg, #f59e0b, #d97706); + } + + .product-badge.economy { + background: var(--success); + } + + .product-wishlist { + position: absolute; + top: 1rem; + right: 1rem; + width: 36px; + height: 36px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + } + + .product-wishlist:hover { + background: var(--accent); + border-color: var(--accent); + } + + .product-info { + padding: 1.5rem; + } + + .product-category { + font-size: 0.8rem; + color: var(--accent); + font-weight: 600; + margin-bottom: 0.5rem; + } + + .product-name { + font-weight: 600; + font-size: 1.1rem; + margin-bottom: 0.5rem; + line-height: 1.4; + } + + .product-oem { + font-size: 0.8rem; + color: var(--text-secondary); + font-family: monospace; + margin-bottom: 0.5rem; + } + + .product-compatibility { + font-size: 0.85rem; + color: var(--text-secondary); + margin-bottom: 1rem; + } + + .product-footer { + display: flex; + justify-content: space-between; + align-items: center; + } + + .product-price { + font-family: 'Orbitron', sans-serif; + font-size: 1.3rem; + font-weight: 700; + color: var(--accent); + } + + .product-price .original { + font-size: 0.9rem; + color: var(--text-secondary); + text-decoration: line-through; + margin-left: 0.5rem; + } + + .btn-add-cart { + width: 40px; + height: 40px; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + font-size: 1.2rem; + } + + .btn-add-cart:hover { + background: var(--accent); + border-color: var(--accent); + } + + /* Brands Section */ + .brands { + padding: 5rem 3rem; + background: var(--bg-secondary); + } + + .brands-grid { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + flex-wrap: wrap; + } + + .brand-item { + width: 140px; + height: 70px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.9rem; + font-weight: 700; + color: var(--text-secondary); + transition: all 0.3s; + cursor: pointer; + text-align: center; + padding: 0.5rem; + } + + .brand-item:hover { + border-color: var(--accent); + color: var(--accent); + transform: translateY(-3px); + } + + /* VIN Section */ + .vin-section { + padding: 5rem 3rem; + position: relative; + overflow: hidden; + } + + .vin-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.1) 0%, transparent 50%); + } + + .vin-content { + max-width: 800px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 1; + } + + .vin-form { + display: flex; + gap: 1rem; + max-width: 600px; + margin: 2rem auto 0; + } + + .vin-input { + flex: 1; + padding: 1rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-size: 1rem; + font-family: monospace; + text-transform: uppercase; + letter-spacing: 2px; + outline: none; + transition: border-color 0.3s; + } + + .vin-input:focus { + border-color: var(--accent); + } + + .vin-input::placeholder { + color: var(--text-secondary); + text-transform: none; + letter-spacing: normal; + } + + /* CTA Section */ + .cta { + padding: 5rem 3rem; + background: var(--bg-secondary); + position: relative; + overflow: hidden; + } + + .cta-bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 60%); + } + + .cta-content { + max-width: 800px; + margin: 0 auto; + text-align: center; + position: relative; + z-index: 1; + } + + .cta-title { + font-family: 'Orbitron', sans-serif; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; + } + + .cta-subtitle { + color: var(--text-secondary); + font-size: 1.1rem; + margin-bottom: 2rem; + } + + .cta-form { + display: flex; + gap: 1rem; + max-width: 500px; + margin: 0 auto; + } + + .cta-input { + flex: 1; + padding: 1rem 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-size: 1rem; + outline: none; + transition: border-color 0.3s; + } + + .cta-input:focus { + border-color: var(--accent); + } + + .cta-input::placeholder { + color: var(--text-secondary); + } + + /* Footer */ + .footer { + background: var(--bg-primary); + border-top: 1px solid var(--border); + padding: 4rem 3rem 2rem; + } + + .footer-content { + max-width: 1400px; + margin: 0 auto; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + } + + .footer-brand p { + color: var(--text-secondary); + margin: 1rem 0; + line-height: 1.8; + } + + .social-links { + display: flex; + gap: 1rem; + } + + .social-link { + width: 40px; + height: 40px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s; + text-decoration: none; + color: var(--text-secondary); + } + + .social-link:hover { + background: var(--accent); + border-color: var(--accent); + color: white; + } + + .footer-title { + font-weight: 700; + margin-bottom: 1.5rem; + font-size: 1.1rem; + } + + .footer-links { + list-style: none; + } + + .footer-links li { + margin-bottom: 0.75rem; + } + + .footer-links a { + color: var(--text-secondary); + text-decoration: none; + transition: color 0.3s; + } + + .footer-links a:hover { + color: var(--accent); + } + + .footer-bottom { + max-width: 1400px; + margin: 3rem auto 0; + padding-top: 2rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + color: var(--text-secondary); + font-size: 0.9rem; + } + + /* Loading skeleton */ + .skeleton { + background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-card) 50%, var(--bg-hover) 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: 8px; + } + + @keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } + } + + /* Search Modal */ + .search-modal { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 2000; + align-items: flex-start; + justify-content: center; + padding-top: 15vh; + } + + .search-modal.active { + display: flex; + } + + .search-modal-content { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + width: 100%; + max-width: 600px; + padding: 1.5rem; + } + + .search-modal-input { + width: 100%; + padding: 1rem 1.5rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-size: 1.1rem; + outline: none; + } + + .search-modal-input:focus { + border-color: var(--accent); + } + + .search-results { + margin-top: 1rem; + max-height: 400px; + overflow-y: auto; + } + + .search-result-item { + padding: 1rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + } + + .search-result-item:hover { + background: var(--bg-hover); + } + + .search-result-name { + font-weight: 600; + } + + .search-result-oem { + font-size: 0.85rem; + color: var(--accent); + font-family: monospace; + } + + /* Mobile menu */ + .mobile-menu-btn { + display: none; + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: var(--text-primary); + } + + @media (max-width: 1024px) { + .hero-content { + grid-template-columns: 1fr; + text-align: center; + } + + .hero-text p { + margin: 0 auto 2.5rem; + } + + .hero-buttons { + justify-content: center; + } + + .hero-stats { + justify-content: center; + } + + .hero-visual { + display: none; + } + + .categories-grid { + grid-template-columns: repeat(3, 1fr); + } + + .products-grid { + grid-template-columns: repeat(2, 1fr); + } + + .footer-content { + grid-template-columns: 1fr 1fr; + } + } + + @media (max-width: 768px) { + .header { + padding: 1rem; + } + + .nav-links { + display: none; + } + + .mobile-menu-btn { + display: block; + } + + .hero { + padding: 6rem 1rem 3rem; + } + + .hero-text h1 { + font-size: 2.5rem; + } + + .categories, .featured, .brands, .vin-section, .cta { + padding: 3rem 1rem; + } + + .categories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .products-grid { + grid-template-columns: 1fr; + } + + .vin-form, .cta-form { + flex-direction: column; + } + + .footer-content { + grid-template-columns: 1fr; + } + + .footer-bottom { + flex-direction: column; + gap: 1rem; + text-align: center; + } + } diff --git a/dashboard/demo.css b/dashboard/demo.css new file mode 100644 index 0000000..f764b70 --- /dev/null +++ b/dashboard/demo.css @@ -0,0 +1,709 @@ +/* Extracted from demo.html */ + +*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } + + :root { + --bg: #0a0a0f; + --bg2: #12121a; + --card: #1a1a24; + --hover: #252532; + --border: #2a2a3a; + --accent: #ff6b35; + --accent-glow: rgba(255, 107, 53, 0.25); + --text: #ffffff; + --text2: #a0a0b0; + --success: #22c55e; + --info: #3b82f6; + } + + body { + font-family: 'DM Sans', sans-serif; + background: var(--bg); + color: var(--text); + min-height: 100vh; + } + + /* --- Header --- */ + .header { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 100; + background: rgba(18, 18, 26, 0.92); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border-bottom: 1px solid var(--border); + padding: 0.7rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; + } + + .logo { + display: flex; + align-items: center; + gap: 0.7rem; + } + + .logo-mark { + width: 40px; height: 40px; + background: linear-gradient(135deg, var(--accent), #ff4500); + border-radius: 10px; + display: flex; align-items: center; justify-content: center; + font-size: 1.3rem; + box-shadow: 0 3px 16px var(--accent-glow); + } + + .logo-text { + font-family: 'Outfit', sans-serif; + font-weight: 800; + font-size: 1.3rem; + background: linear-gradient(135deg, #fff, var(--accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .logo-sub { + font-size: 0.6rem; + color: var(--text2); + letter-spacing: 0.12em; + text-transform: uppercase; + } + + .header-search { + position: relative; + width: 340px; + } + + .header-search input { + width: 100%; + padding: 0.5rem 0.8rem 0.5rem 2.2rem; + background: var(--card); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text); + font-family: 'DM Sans', sans-serif; + font-size: 0.85rem; + outline: none; + transition: border-color 0.2s; + } + + .header-search input:focus { border-color: var(--accent); } + .header-search input::placeholder { color: var(--text2); } + + .header-search svg { + position: absolute; + left: 0.7rem; top: 50%; + transform: translateY(-50%); + width: 16px; height: 16px; + color: var(--text2); + pointer-events: none; + } + + .search-drop { + position: absolute; + top: calc(100% + 4px); + left: 0; right: 0; + background: var(--card); + border: 1px solid var(--border); + border-radius: 10px; + max-height: 320px; + overflow-y: auto; + box-shadow: 0 12px 40px rgba(0,0,0,0.5); + display: none; + z-index: 200; + } + + .search-drop.open { display: block; } + + .search-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.55rem 0.8rem; + border-bottom: 1px solid var(--border); + cursor: pointer; + transition: background 0.15s; + } + + .search-item:last-child { border-bottom: none; } + .search-item:hover { background: var(--hover); } + + .search-item .si-oem { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + font-size: 0.85rem; + color: var(--accent); + } + + .search-item .si-name { + font-size: 0.8rem; + color: var(--text2); + margin-left: 0.5rem; + } + + .search-item .si-cat { + font-size: 0.7rem; + color: var(--text2); + } + + .badge-demo { + font-size: 0.65rem; + font-weight: 700; + background: var(--accent); + color: #fff; + padding: 0.2rem 0.6rem; + border-radius: 5px; + letter-spacing: 0.08em; + } + + /* --- Main --- */ + .main { + max-width: 1200px; + margin: 0 auto; + padding: 4.5rem 1.5rem 2rem; + } + + /* --- Breadcrumb --- */ + .breadcrumb { + display: flex; + align-items: center; + gap: 0.4rem; + margin-bottom: 1rem; + font-size: 0.8rem; + flex-wrap: wrap; + } + + .breadcrumb span { + color: var(--text2); + } + + .breadcrumb a { + color: var(--accent); + text-decoration: none; + cursor: pointer; + } + + .breadcrumb a:hover { text-decoration: underline; } + + .breadcrumb .sep { + color: var(--border); + } + + /* --- Section title --- */ + .section-title { + font-family: 'Outfit', sans-serif; + font-weight: 700; + font-size: 1.4rem; + margin-bottom: 1rem; + } + + .section-subtitle { + font-size: 0.85rem; + color: var(--text2); + margin-top: -0.6rem; + margin-bottom: 1rem; + } + + /* --- Grid --- */ + .grid { + display: grid; + gap: 0.6rem; + } + + .grid-brands { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + } + + .grid-models { + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + } + + .grid-vehicles { + grid-template-columns: 1fr; + } + + .grid-categories { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + } + + .grid-parts { + grid-template-columns: 1fr; + } + + /* --- Card --- */ + .card { + background: var(--card); + border: 1px solid var(--border); + border-radius: 10px; + padding: 0.8rem 1rem; + cursor: pointer; + transition: border-color 0.2s, transform 0.15s, background 0.2s; + } + + .card:hover { + border-color: var(--accent); + background: var(--hover); + } + + .card:active { + transform: scale(0.98); + } + + /* Brand card */ + .card-brand { + display: flex; + align-items: center; + justify-content: space-between; + } + + .card-brand .cb-name { + font-weight: 700; + font-size: 0.95rem; + } + + .card-brand .cb-count { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + } + + /* Model card */ + .card-model { + display: flex; + flex-direction: column; + gap: 0.3rem; + } + + .card-model .cm-name { + font-weight: 700; + font-size: 1rem; + } + + .card-model .cm-years { + font-size: 0.75rem; + color: var(--text2); + } + + .card-model .cm-count { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + } + + /* Vehicle row */ + .card-vehicle { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + } + + .cv-main { + display: flex; + align-items: center; + gap: 1rem; + } + + .cv-year { + font-family: 'Outfit', sans-serif; + font-weight: 700; + font-size: 1.1rem; + color: var(--accent); + min-width: 50px; + } + + .cv-engine { + font-weight: 600; + font-size: 0.9rem; + } + + .cv-details { + font-size: 0.75rem; + color: var(--text2); + } + + .cv-trim { + font-size: 0.7rem; + color: var(--info); + background: rgba(59, 130, 246, 0.1); + padding: 0.15rem 0.5rem; + border-radius: 4px; + } + + /* Category card */ + .card-category { + display: flex; + align-items: center; + justify-content: space-between; + } + + .cc-name { + font-weight: 600; + font-size: 0.9rem; + } + + .cc-count { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + } + + /* Group header */ + .group-header { + padding: 0.6rem 0; + margin-top: 0.5rem; + border-bottom: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + } + + .group-header .gh-name { + font-weight: 700; + font-size: 0.9rem; + color: var(--accent); + } + + .group-header .gh-count { + font-size: 0.7rem; + color: var(--text2); + } + + /* Part row */ + .part-row { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem 0.6rem; + border-bottom: 1px solid rgba(42, 42, 58, 0.4); + transition: background 0.15s; + } + + .part-row:hover { + background: var(--hover); + border-radius: 6px; + } + + .part-oem { + font-family: 'JetBrains Mono', monospace; + font-weight: 700; + font-size: 0.9rem; + color: var(--accent); + min-width: 160px; + } + + .part-name { + font-size: 0.85rem; + flex: 1; + } + + .part-pos { + font-size: 0.7rem; + color: var(--text2); + } + + .part-qty { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + min-width: 40px; + text-align: right; + } + + /* --- Loading / Empty --- */ + .loading, .empty { + text-align: center; + padding: 3rem 1rem; + color: var(--text2); + font-size: 0.9rem; + } + + /* --- Responsive --- */ + @media (max-width: 768px) { + .header-search { display: none; } + .grid-brands { grid-template-columns: repeat(2, 1fr); } + .main { padding: 4rem 0.8rem 1.5rem; } + .part-oem { min-width: 120px; font-size: 0.8rem; } + } + + /* --- Part row clickable --- */ + .part-row { + cursor: pointer; + } + + /* --- Modal overlay --- */ + .modal-bg { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 500; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.25s; + } + + .modal-bg.open { + opacity: 1; + pointer-events: auto; + } + + .modal { + background: var(--card); + border: 1px solid var(--border); + border-radius: 14px; + width: 600px; + max-width: 95vw; + max-height: 85vh; + overflow-y: auto; + transform: translateY(12px) scale(0.97); + transition: transform 0.25s; + } + + .modal-bg.open .modal { + transform: translateY(0) scale(1); + } + + /* Modal header */ + .modal-head { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 1.2rem 1.2rem 0.8rem; + border-bottom: 1px solid var(--border); + } + + .modal-head-info { + flex: 1; + min-width: 0; + } + + .modal-oem { + font-family: 'JetBrains Mono', monospace; + font-weight: 700; + font-size: 1.2rem; + color: var(--accent); + word-break: break-all; + } + + .modal-part-name { + font-size: 0.95rem; + margin-top: 0.2rem; + } + + .modal-close { + background: none; + border: none; + color: var(--text2); + font-size: 1.4rem; + cursor: pointer; + padding: 0.2rem 0.4rem; + border-radius: 6px; + transition: background 0.15s, color 0.15s; + flex-shrink: 0; + margin-left: 0.5rem; + } + + .modal-close:hover { + background: var(--hover); + color: var(--text); + } + + /* Modal detail fields */ + .modal-fields { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; + padding: 0.8rem 1.2rem; + } + + .mf { + display: flex; + flex-direction: column; + gap: 0.1rem; + } + + .mf-label { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text2); + font-weight: 600; + } + + .mf-value { + font-size: 0.85rem; + font-weight: 500; + } + + /* Modal sections */ + .modal-section { + padding: 0.8rem 1.2rem; + border-top: 1px solid var(--border); + } + + .modal-section-title { + font-family: 'DM Sans', sans-serif; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--accent); + margin-bottom: 0.6rem; + } + + /* Alternatives table */ + .alt-table { + width: 100%; + border-collapse: collapse; + font-size: 0.8rem; + } + + .alt-table th { + text-align: left; + padding: 0.35rem 0.5rem; + border-bottom: 1px solid var(--border); + color: var(--text2); + font-size: 0.7rem; + text-transform: uppercase; + font-weight: 600; + } + + .alt-table td { + padding: 0.4rem 0.5rem; + border-bottom: 1px solid rgba(42, 42, 58, 0.4); + } + + .alt-table .alt-pn { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + color: var(--info); + } + + .alt-table .alt-mfr { + font-weight: 600; + } + + .alt-quality { + font-size: 0.65rem; + font-weight: 600; + padding: 0.12rem 0.4rem; + border-radius: 4px; + text-transform: uppercase; + } + + .alt-quality.premium { background: rgba(34, 197, 94, 0.15); color: var(--success); } + .alt-quality.economy { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } + .alt-quality.oem { background: rgba(59, 130, 246, 0.15); color: var(--info); } + + /* Cross-ref rows */ + .xref-row { + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.35rem 0; + border-bottom: 1px solid rgba(42, 42, 58, 0.3); + } + + .xref-row:last-child { border-bottom: none; } + + .xref-number { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + font-size: 0.85rem; + color: var(--text); + } + + .xref-type { + font-size: 0.65rem; + font-weight: 600; + padding: 0.1rem 0.35rem; + border-radius: 3px; + background: rgba(255, 107, 53, 0.12); + color: var(--accent); + text-transform: uppercase; + } + + .xref-source { + font-size: 0.75rem; + color: var(--text2); + } + + .modal-empty { + text-align: center; + padding: 1rem; + color: var(--text2); + font-size: 0.8rem; + } + + .modal-loading { + text-align: center; + padding: 0.8rem; + color: var(--text2); + font-size: 0.8rem; + } + + /* --- Region Filter --- */ + .region-bar { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; + flex-wrap: wrap; + } + + .region-label { + font-size: 0.75rem; + color: var(--text2); + text-transform: uppercase; + letter-spacing: 0.06em; + font-weight: 600; + margin-right: 0.3rem; + } + + .region-chip { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.35rem 0.75rem; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--card); + color: var(--text2); + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + user-select: none; + } + + .region-chip:hover { + border-color: var(--accent); + color: var(--text); + } + + .region-chip.active { + background: rgba(255, 107, 53, 0.15); + border-color: var(--accent); + color: var(--accent); + } + + .region-chip .rc-flag { + font-size: 1rem; + line-height: 1; + } + + /* --- Animations --- */ + @keyframes fadeUp { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } + } + + .card, .part-row, .group-header { + animation: fadeUp 0.3s ease both; + } diff --git a/dashboard/demo.html b/dashboard/demo.html index c6e7296..35cf1e0 100644 --- a/dashboard/demo.html +++ b/dashboard/demo.html @@ -5,715 +5,7 @@ NEXUS AUTOPARTS — Catálogo OEM - +
diff --git a/dashboard/demo.min.css b/dashboard/demo.min.css new file mode 100644 index 0000000..f764b70 --- /dev/null +++ b/dashboard/demo.min.css @@ -0,0 +1,709 @@ +/* Extracted from demo.html */ + +*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } + + :root { + --bg: #0a0a0f; + --bg2: #12121a; + --card: #1a1a24; + --hover: #252532; + --border: #2a2a3a; + --accent: #ff6b35; + --accent-glow: rgba(255, 107, 53, 0.25); + --text: #ffffff; + --text2: #a0a0b0; + --success: #22c55e; + --info: #3b82f6; + } + + body { + font-family: 'DM Sans', sans-serif; + background: var(--bg); + color: var(--text); + min-height: 100vh; + } + + /* --- Header --- */ + .header { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 100; + background: rgba(18, 18, 26, 0.92); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border-bottom: 1px solid var(--border); + padding: 0.7rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; + } + + .logo { + display: flex; + align-items: center; + gap: 0.7rem; + } + + .logo-mark { + width: 40px; height: 40px; + background: linear-gradient(135deg, var(--accent), #ff4500); + border-radius: 10px; + display: flex; align-items: center; justify-content: center; + font-size: 1.3rem; + box-shadow: 0 3px 16px var(--accent-glow); + } + + .logo-text { + font-family: 'Outfit', sans-serif; + font-weight: 800; + font-size: 1.3rem; + background: linear-gradient(135deg, #fff, var(--accent)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .logo-sub { + font-size: 0.6rem; + color: var(--text2); + letter-spacing: 0.12em; + text-transform: uppercase; + } + + .header-search { + position: relative; + width: 340px; + } + + .header-search input { + width: 100%; + padding: 0.5rem 0.8rem 0.5rem 2.2rem; + background: var(--card); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text); + font-family: 'DM Sans', sans-serif; + font-size: 0.85rem; + outline: none; + transition: border-color 0.2s; + } + + .header-search input:focus { border-color: var(--accent); } + .header-search input::placeholder { color: var(--text2); } + + .header-search svg { + position: absolute; + left: 0.7rem; top: 50%; + transform: translateY(-50%); + width: 16px; height: 16px; + color: var(--text2); + pointer-events: none; + } + + .search-drop { + position: absolute; + top: calc(100% + 4px); + left: 0; right: 0; + background: var(--card); + border: 1px solid var(--border); + border-radius: 10px; + max-height: 320px; + overflow-y: auto; + box-shadow: 0 12px 40px rgba(0,0,0,0.5); + display: none; + z-index: 200; + } + + .search-drop.open { display: block; } + + .search-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.55rem 0.8rem; + border-bottom: 1px solid var(--border); + cursor: pointer; + transition: background 0.15s; + } + + .search-item:last-child { border-bottom: none; } + .search-item:hover { background: var(--hover); } + + .search-item .si-oem { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + font-size: 0.85rem; + color: var(--accent); + } + + .search-item .si-name { + font-size: 0.8rem; + color: var(--text2); + margin-left: 0.5rem; + } + + .search-item .si-cat { + font-size: 0.7rem; + color: var(--text2); + } + + .badge-demo { + font-size: 0.65rem; + font-weight: 700; + background: var(--accent); + color: #fff; + padding: 0.2rem 0.6rem; + border-radius: 5px; + letter-spacing: 0.08em; + } + + /* --- Main --- */ + .main { + max-width: 1200px; + margin: 0 auto; + padding: 4.5rem 1.5rem 2rem; + } + + /* --- Breadcrumb --- */ + .breadcrumb { + display: flex; + align-items: center; + gap: 0.4rem; + margin-bottom: 1rem; + font-size: 0.8rem; + flex-wrap: wrap; + } + + .breadcrumb span { + color: var(--text2); + } + + .breadcrumb a { + color: var(--accent); + text-decoration: none; + cursor: pointer; + } + + .breadcrumb a:hover { text-decoration: underline; } + + .breadcrumb .sep { + color: var(--border); + } + + /* --- Section title --- */ + .section-title { + font-family: 'Outfit', sans-serif; + font-weight: 700; + font-size: 1.4rem; + margin-bottom: 1rem; + } + + .section-subtitle { + font-size: 0.85rem; + color: var(--text2); + margin-top: -0.6rem; + margin-bottom: 1rem; + } + + /* --- Grid --- */ + .grid { + display: grid; + gap: 0.6rem; + } + + .grid-brands { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + } + + .grid-models { + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + } + + .grid-vehicles { + grid-template-columns: 1fr; + } + + .grid-categories { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + } + + .grid-parts { + grid-template-columns: 1fr; + } + + /* --- Card --- */ + .card { + background: var(--card); + border: 1px solid var(--border); + border-radius: 10px; + padding: 0.8rem 1rem; + cursor: pointer; + transition: border-color 0.2s, transform 0.15s, background 0.2s; + } + + .card:hover { + border-color: var(--accent); + background: var(--hover); + } + + .card:active { + transform: scale(0.98); + } + + /* Brand card */ + .card-brand { + display: flex; + align-items: center; + justify-content: space-between; + } + + .card-brand .cb-name { + font-weight: 700; + font-size: 0.95rem; + } + + .card-brand .cb-count { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + } + + /* Model card */ + .card-model { + display: flex; + flex-direction: column; + gap: 0.3rem; + } + + .card-model .cm-name { + font-weight: 700; + font-size: 1rem; + } + + .card-model .cm-years { + font-size: 0.75rem; + color: var(--text2); + } + + .card-model .cm-count { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + } + + /* Vehicle row */ + .card-vehicle { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + } + + .cv-main { + display: flex; + align-items: center; + gap: 1rem; + } + + .cv-year { + font-family: 'Outfit', sans-serif; + font-weight: 700; + font-size: 1.1rem; + color: var(--accent); + min-width: 50px; + } + + .cv-engine { + font-weight: 600; + font-size: 0.9rem; + } + + .cv-details { + font-size: 0.75rem; + color: var(--text2); + } + + .cv-trim { + font-size: 0.7rem; + color: var(--info); + background: rgba(59, 130, 246, 0.1); + padding: 0.15rem 0.5rem; + border-radius: 4px; + } + + /* Category card */ + .card-category { + display: flex; + align-items: center; + justify-content: space-between; + } + + .cc-name { + font-weight: 600; + font-size: 0.9rem; + } + + .cc-count { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + } + + /* Group header */ + .group-header { + padding: 0.6rem 0; + margin-top: 0.5rem; + border-bottom: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + } + + .group-header .gh-name { + font-weight: 700; + font-size: 0.9rem; + color: var(--accent); + } + + .group-header .gh-count { + font-size: 0.7rem; + color: var(--text2); + } + + /* Part row */ + .part-row { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem 0.6rem; + border-bottom: 1px solid rgba(42, 42, 58, 0.4); + transition: background 0.15s; + } + + .part-row:hover { + background: var(--hover); + border-radius: 6px; + } + + .part-oem { + font-family: 'JetBrains Mono', monospace; + font-weight: 700; + font-size: 0.9rem; + color: var(--accent); + min-width: 160px; + } + + .part-name { + font-size: 0.85rem; + flex: 1; + } + + .part-pos { + font-size: 0.7rem; + color: var(--text2); + } + + .part-qty { + font-size: 0.7rem; + color: var(--text2); + font-family: 'JetBrains Mono', monospace; + min-width: 40px; + text-align: right; + } + + /* --- Loading / Empty --- */ + .loading, .empty { + text-align: center; + padding: 3rem 1rem; + color: var(--text2); + font-size: 0.9rem; + } + + /* --- Responsive --- */ + @media (max-width: 768px) { + .header-search { display: none; } + .grid-brands { grid-template-columns: repeat(2, 1fr); } + .main { padding: 4rem 0.8rem 1.5rem; } + .part-oem { min-width: 120px; font-size: 0.8rem; } + } + + /* --- Part row clickable --- */ + .part-row { + cursor: pointer; + } + + /* --- Modal overlay --- */ + .modal-bg { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 500; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + transition: opacity 0.25s; + } + + .modal-bg.open { + opacity: 1; + pointer-events: auto; + } + + .modal { + background: var(--card); + border: 1px solid var(--border); + border-radius: 14px; + width: 600px; + max-width: 95vw; + max-height: 85vh; + overflow-y: auto; + transform: translateY(12px) scale(0.97); + transition: transform 0.25s; + } + + .modal-bg.open .modal { + transform: translateY(0) scale(1); + } + + /* Modal header */ + .modal-head { + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 1.2rem 1.2rem 0.8rem; + border-bottom: 1px solid var(--border); + } + + .modal-head-info { + flex: 1; + min-width: 0; + } + + .modal-oem { + font-family: 'JetBrains Mono', monospace; + font-weight: 700; + font-size: 1.2rem; + color: var(--accent); + word-break: break-all; + } + + .modal-part-name { + font-size: 0.95rem; + margin-top: 0.2rem; + } + + .modal-close { + background: none; + border: none; + color: var(--text2); + font-size: 1.4rem; + cursor: pointer; + padding: 0.2rem 0.4rem; + border-radius: 6px; + transition: background 0.15s, color 0.15s; + flex-shrink: 0; + margin-left: 0.5rem; + } + + .modal-close:hover { + background: var(--hover); + color: var(--text); + } + + /* Modal detail fields */ + .modal-fields { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; + padding: 0.8rem 1.2rem; + } + + .mf { + display: flex; + flex-direction: column; + gap: 0.1rem; + } + + .mf-label { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text2); + font-weight: 600; + } + + .mf-value { + font-size: 0.85rem; + font-weight: 500; + } + + /* Modal sections */ + .modal-section { + padding: 0.8rem 1.2rem; + border-top: 1px solid var(--border); + } + + .modal-section-title { + font-family: 'DM Sans', sans-serif; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--accent); + margin-bottom: 0.6rem; + } + + /* Alternatives table */ + .alt-table { + width: 100%; + border-collapse: collapse; + font-size: 0.8rem; + } + + .alt-table th { + text-align: left; + padding: 0.35rem 0.5rem; + border-bottom: 1px solid var(--border); + color: var(--text2); + font-size: 0.7rem; + text-transform: uppercase; + font-weight: 600; + } + + .alt-table td { + padding: 0.4rem 0.5rem; + border-bottom: 1px solid rgba(42, 42, 58, 0.4); + } + + .alt-table .alt-pn { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + color: var(--info); + } + + .alt-table .alt-mfr { + font-weight: 600; + } + + .alt-quality { + font-size: 0.65rem; + font-weight: 600; + padding: 0.12rem 0.4rem; + border-radius: 4px; + text-transform: uppercase; + } + + .alt-quality.premium { background: rgba(34, 197, 94, 0.15); color: var(--success); } + .alt-quality.economy { background: rgba(245, 158, 11, 0.15); color: #f59e0b; } + .alt-quality.oem { background: rgba(59, 130, 246, 0.15); color: var(--info); } + + /* Cross-ref rows */ + .xref-row { + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.35rem 0; + border-bottom: 1px solid rgba(42, 42, 58, 0.3); + } + + .xref-row:last-child { border-bottom: none; } + + .xref-number { + font-family: 'JetBrains Mono', monospace; + font-weight: 600; + font-size: 0.85rem; + color: var(--text); + } + + .xref-type { + font-size: 0.65rem; + font-weight: 600; + padding: 0.1rem 0.35rem; + border-radius: 3px; + background: rgba(255, 107, 53, 0.12); + color: var(--accent); + text-transform: uppercase; + } + + .xref-source { + font-size: 0.75rem; + color: var(--text2); + } + + .modal-empty { + text-align: center; + padding: 1rem; + color: var(--text2); + font-size: 0.8rem; + } + + .modal-loading { + text-align: center; + padding: 0.8rem; + color: var(--text2); + font-size: 0.8rem; + } + + /* --- Region Filter --- */ + .region-bar { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; + flex-wrap: wrap; + } + + .region-label { + font-size: 0.75rem; + color: var(--text2); + text-transform: uppercase; + letter-spacing: 0.06em; + font-weight: 600; + margin-right: 0.3rem; + } + + .region-chip { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.35rem 0.75rem; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--card); + color: var(--text2); + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + user-select: none; + } + + .region-chip:hover { + border-color: var(--accent); + color: var(--text); + } + + .region-chip.active { + background: rgba(255, 107, 53, 0.15); + border-color: var(--accent); + color: var(--accent); + } + + .region-chip .rc-flag { + font-size: 1rem; + line-height: 1; + } + + /* --- Animations --- */ + @keyframes fadeUp { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } + } + + .card, .part-row, .group-header { + animation: fadeUp 0.3s ease both; + } diff --git a/dashboard/diagrams.css b/dashboard/diagrams.css new file mode 100644 index 0000000..a772add --- /dev/null +++ b/dashboard/diagrams.css @@ -0,0 +1,475 @@ +/* Extracted from diagrams.html */ + +/* Main container */ + .main-container { + max-width: 1600px; + margin: 0 auto; + padding: 5rem 2rem 2rem; + } + + /* Search bar */ + .search-section { + display: flex; gap: 1rem; margin-bottom: 2rem; + flex-wrap: wrap; align-items: center; + } + + .search-input { + flex: 1; min-width: 250px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.75rem 1rem 0.75rem 2.5rem; + color: var(--text-primary); + font-size: 0.95rem; + outline: none; + transition: border-color 0.2s; + } + + .search-input:focus { border-color: var(--accent); } + + .search-wrapper { + position: relative; flex: 1; min-width: 250px; + } + + .search-wrapper i { + position: absolute; left: 0.85rem; top: 50%; + transform: translateY(-50%); + color: var(--text-secondary); + } + + .filter-select { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.75rem 1rem; + color: var(--text-primary); + font-size: 0.9rem; + outline: none; + min-width: 160px; + } + + .filter-select option { background: var(--bg-card); } + + .type-filters { + display: flex; gap: 0.5rem; + } + + .type-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 1rem; + color: var(--text-secondary); + font-size: 0.85rem; + cursor: pointer; + transition: all 0.2s; + } + + .type-btn:hover { border-color: var(--accent); color: var(--text-primary); } + .type-btn.active { + background: var(--accent); + border-color: var(--accent); + color: white; + } + + /* Stats bar */ + .stats-bar { + display: flex; gap: 2rem; margin-bottom: 1.5rem; + padding: 0.75rem 1rem; + background: var(--bg-secondary); + border-radius: 8px; + border: 1px solid var(--border); + font-size: 0.85rem; + color: var(--text-secondary); + } + + .stats-bar span { color: var(--accent); font-weight: 600; } + + /* Diagram grid */ + .diagram-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.25rem; + } + + .diagram-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + overflow: hidden; + cursor: pointer; + transition: all 0.3s ease; + } + + .diagram-card:hover { + border-color: var(--accent); + transform: translateY(-2px); + box-shadow: 0 8px 30px rgba(0,0,0,0.4); + } + + .diagram-card-img { + width: 100%; + aspect-ratio: 16/10; + object-fit: contain; + background: #f0f0f0; + display: block; + } + + .diagram-card-body { + padding: 0.85rem 1rem; + } + + .diagram-card-title { + font-family: 'Orbitron', monospace; + font-size: 1rem; + font-weight: 600; + color: var(--accent); + margin-bottom: 0.25rem; + } + + .diagram-card-sub { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .diagram-card-badge { + display: inline-block; + font-size: 0.7rem; + padding: 0.15rem 0.5rem; + border-radius: 4px; + margin-top: 0.4rem; + font-weight: 600; + } + + .badge-front { background: rgba(59,130,246,0.2); color: #60a5fa; } + .badge-steering { background: rgba(245,158,11,0.2); color: #fbbf24; } + .badge-rear { background: rgba(34,197,94,0.2); color: #4ade80; } + + /* Viewer overlay */ + .viewer-overlay { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.85); + z-index: 2000; + display: none; + opacity: 0; + transition: opacity 0.3s ease; + } + + .viewer-overlay.active { + display: flex; + opacity: 1; + } + + .viewer-layout { + display: flex; + width: 100%; height: 100%; + } + + /* Diagram panel (left) */ + .viewer-diagram { + flex: 1; + display: flex; + flex-direction: column; + background: var(--bg-primary); + } + + .viewer-toolbar { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem 1.25rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + } + + .viewer-toolbar .title { + font-family: 'Orbitron', monospace; + font-size: 1.1rem; + font-weight: 600; + color: var(--accent); + flex: 1; + } + + .viewer-toolbar .subtitle { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .toolbar-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 0.75rem; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + font-size: 0.9rem; + } + + .toolbar-btn:hover { + border-color: var(--accent); + color: var(--text-primary); + } + + .viewer-img-container { + flex: 1; + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: #e8e8e8; + } + + .viewer-img-container img { + max-width: 100%; + max-height: 100%; + transition: transform 0.3s ease; + cursor: grab; + } + + .viewer-img-container img.zoomed { + max-width: none; + max-height: none; + cursor: move; + } + + /* Parts panel (right) */ + .viewer-parts { + width: 420px; + background: var(--bg-secondary); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .parts-header { + padding: 0.85rem 1.25rem; + background: var(--bg-card); + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 0.75rem; + } + + .parts-header h3 { + font-size: 0.95rem; + font-weight: 600; + flex: 1; + } + + .parts-header .count { + font-size: 0.8rem; + color: var(--text-secondary); + background: var(--bg-hover); + padding: 0.2rem 0.6rem; + border-radius: 10px; + } + + .parts-search { + padding: 0.65rem 1rem; + border-bottom: 1px solid var(--border); + } + + .parts-search input { + width: 100%; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 0.75rem; + color: var(--text-primary); + font-size: 0.85rem; + outline: none; + } + + .parts-search input:focus { border-color: var(--accent); } + + .parts-list { + flex: 1; + overflow-y: auto; + padding: 0.5rem; + } + + .part-item { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.75rem; + margin-bottom: 0.5rem; + cursor: pointer; + transition: all 0.2s; + } + + .part-item:hover, .part-item.highlighted { + border-color: var(--accent); + background: var(--bg-hover); + } + + .part-item .part-number { + font-family: 'Orbitron', monospace; + font-size: 0.9rem; + font-weight: 600; + color: var(--accent); + } + + .part-item .part-name { + font-size: 0.8rem; + color: var(--text-secondary); + margin: 0.2rem 0; + } + + .part-item .part-group { + font-size: 0.7rem; + color: var(--text-secondary); + opacity: 0.7; + } + + .xref-list { + margin-top: 0.4rem; + padding-top: 0.4rem; + border-top: 1px solid var(--border); + } + + .xref-item { + display: inline-block; + font-size: 0.7rem; + padding: 0.1rem 0.4rem; + background: rgba(59,130,246,0.15); + color: #60a5fa; + border-radius: 3px; + margin: 0.1rem; + } + + .xref-label { + font-size: 0.65rem; + color: var(--text-secondary); + margin-bottom: 0.2rem; + } + + /* Loading / Empty states */ + .loading-state, .empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem; + color: var(--text-secondary); + text-align: center; + } + + .loading-state i, .empty-state i { + font-size: 2.5rem; + margin-bottom: 1rem; + opacity: 0.5; + } + + .spinner { + animation: spin 1s linear infinite; + } + + /* Pagination */ + .pagination { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 2rem; + padding-bottom: 2rem; + } + + .page-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 1rem; + color: var(--text-secondary); + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s; + } + + .page-btn:hover { border-color: var(--accent); color: var(--text-primary); } + .page-btn.active { background: var(--accent); border-color: var(--accent); color: white; } + .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } + + /* Responsive */ + @media (max-width: 768px) { + .viewer-layout { flex-direction: column; } + .viewer-parts { width: 100%; height: 50%; } + .diagram-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } + .search-section { flex-direction: column; } + } + + /* Close button */ + .close-btn { + position: absolute; + top: 0.75rem; right: 0.75rem; + background: rgba(0,0,0,0.6); + border: none; + color: white; + width: 36px; height: 36px; + border-radius: 50%; + font-size: 1.1rem; + cursor: pointer; + z-index: 10; + transition: background 0.2s; + } + + .close-btn:hover { background: var(--accent); } + + /* Zoom controls */ + .zoom-controls { + position: absolute; + bottom: 1rem; left: 50%; + transform: translateX(-50%); + display: flex; gap: 0.5rem; + background: rgba(0,0,0,0.6); + padding: 0.4rem; + border-radius: 8px; + } + + .zoom-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.4rem 0.75rem; + color: var(--text-primary); + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s; + } + + .zoom-btn:hover { background: var(--accent); } + + .zoom-level { + display: flex; + align-items: center; + color: var(--text-secondary); + font-size: 0.8rem; + padding: 0 0.5rem; + } + + /* Nav buttons in viewer */ + .viewer-nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(0,0,0,0.5); + border: none; + color: white; + width: 44px; height: 44px; + border-radius: 50%; + font-size: 1.2rem; + cursor: pointer; + transition: background 0.2s; + z-index: 5; + } + + .viewer-nav-btn:hover { background: var(--accent); } + .viewer-nav-btn.prev { left: 0.75rem; } + .viewer-nav-btn.next { right: 430px; } + + @media (max-width: 768px) { + .viewer-nav-btn.next { right: 0.75rem; } + } diff --git a/dashboard/diagrams.html b/dashboard/diagrams.html index d39580d..2ecff1f 100644 --- a/dashboard/diagrams.html +++ b/dashboard/diagrams.html @@ -8,481 +8,7 @@ - + diff --git a/dashboard/diagrams.min.css b/dashboard/diagrams.min.css new file mode 100644 index 0000000..a772add --- /dev/null +++ b/dashboard/diagrams.min.css @@ -0,0 +1,475 @@ +/* Extracted from diagrams.html */ + +/* Main container */ + .main-container { + max-width: 1600px; + margin: 0 auto; + padding: 5rem 2rem 2rem; + } + + /* Search bar */ + .search-section { + display: flex; gap: 1rem; margin-bottom: 2rem; + flex-wrap: wrap; align-items: center; + } + + .search-input { + flex: 1; min-width: 250px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.75rem 1rem 0.75rem 2.5rem; + color: var(--text-primary); + font-size: 0.95rem; + outline: none; + transition: border-color 0.2s; + } + + .search-input:focus { border-color: var(--accent); } + + .search-wrapper { + position: relative; flex: 1; min-width: 250px; + } + + .search-wrapper i { + position: absolute; left: 0.85rem; top: 50%; + transform: translateY(-50%); + color: var(--text-secondary); + } + + .filter-select { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.75rem 1rem; + color: var(--text-primary); + font-size: 0.9rem; + outline: none; + min-width: 160px; + } + + .filter-select option { background: var(--bg-card); } + + .type-filters { + display: flex; gap: 0.5rem; + } + + .type-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 1rem; + color: var(--text-secondary); + font-size: 0.85rem; + cursor: pointer; + transition: all 0.2s; + } + + .type-btn:hover { border-color: var(--accent); color: var(--text-primary); } + .type-btn.active { + background: var(--accent); + border-color: var(--accent); + color: white; + } + + /* Stats bar */ + .stats-bar { + display: flex; gap: 2rem; margin-bottom: 1.5rem; + padding: 0.75rem 1rem; + background: var(--bg-secondary); + border-radius: 8px; + border: 1px solid var(--border); + font-size: 0.85rem; + color: var(--text-secondary); + } + + .stats-bar span { color: var(--accent); font-weight: 600; } + + /* Diagram grid */ + .diagram-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.25rem; + } + + .diagram-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 10px; + overflow: hidden; + cursor: pointer; + transition: all 0.3s ease; + } + + .diagram-card:hover { + border-color: var(--accent); + transform: translateY(-2px); + box-shadow: 0 8px 30px rgba(0,0,0,0.4); + } + + .diagram-card-img { + width: 100%; + aspect-ratio: 16/10; + object-fit: contain; + background: #f0f0f0; + display: block; + } + + .diagram-card-body { + padding: 0.85rem 1rem; + } + + .diagram-card-title { + font-family: 'Orbitron', monospace; + font-size: 1rem; + font-weight: 600; + color: var(--accent); + margin-bottom: 0.25rem; + } + + .diagram-card-sub { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .diagram-card-badge { + display: inline-block; + font-size: 0.7rem; + padding: 0.15rem 0.5rem; + border-radius: 4px; + margin-top: 0.4rem; + font-weight: 600; + } + + .badge-front { background: rgba(59,130,246,0.2); color: #60a5fa; } + .badge-steering { background: rgba(245,158,11,0.2); color: #fbbf24; } + .badge-rear { background: rgba(34,197,94,0.2); color: #4ade80; } + + /* Viewer overlay */ + .viewer-overlay { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.85); + z-index: 2000; + display: none; + opacity: 0; + transition: opacity 0.3s ease; + } + + .viewer-overlay.active { + display: flex; + opacity: 1; + } + + .viewer-layout { + display: flex; + width: 100%; height: 100%; + } + + /* Diagram panel (left) */ + .viewer-diagram { + flex: 1; + display: flex; + flex-direction: column; + background: var(--bg-primary); + } + + .viewer-toolbar { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem 1.25rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + } + + .viewer-toolbar .title { + font-family: 'Orbitron', monospace; + font-size: 1.1rem; + font-weight: 600; + color: var(--accent); + flex: 1; + } + + .viewer-toolbar .subtitle { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .toolbar-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 0.75rem; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + font-size: 0.9rem; + } + + .toolbar-btn:hover { + border-color: var(--accent); + color: var(--text-primary); + } + + .viewer-img-container { + flex: 1; + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: #e8e8e8; + } + + .viewer-img-container img { + max-width: 100%; + max-height: 100%; + transition: transform 0.3s ease; + cursor: grab; + } + + .viewer-img-container img.zoomed { + max-width: none; + max-height: none; + cursor: move; + } + + /* Parts panel (right) */ + .viewer-parts { + width: 420px; + background: var(--bg-secondary); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .parts-header { + padding: 0.85rem 1.25rem; + background: var(--bg-card); + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 0.75rem; + } + + .parts-header h3 { + font-size: 0.95rem; + font-weight: 600; + flex: 1; + } + + .parts-header .count { + font-size: 0.8rem; + color: var(--text-secondary); + background: var(--bg-hover); + padding: 0.2rem 0.6rem; + border-radius: 10px; + } + + .parts-search { + padding: 0.65rem 1rem; + border-bottom: 1px solid var(--border); + } + + .parts-search input { + width: 100%; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 0.75rem; + color: var(--text-primary); + font-size: 0.85rem; + outline: none; + } + + .parts-search input:focus { border-color: var(--accent); } + + .parts-list { + flex: 1; + overflow-y: auto; + padding: 0.5rem; + } + + .part-item { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.75rem; + margin-bottom: 0.5rem; + cursor: pointer; + transition: all 0.2s; + } + + .part-item:hover, .part-item.highlighted { + border-color: var(--accent); + background: var(--bg-hover); + } + + .part-item .part-number { + font-family: 'Orbitron', monospace; + font-size: 0.9rem; + font-weight: 600; + color: var(--accent); + } + + .part-item .part-name { + font-size: 0.8rem; + color: var(--text-secondary); + margin: 0.2rem 0; + } + + .part-item .part-group { + font-size: 0.7rem; + color: var(--text-secondary); + opacity: 0.7; + } + + .xref-list { + margin-top: 0.4rem; + padding-top: 0.4rem; + border-top: 1px solid var(--border); + } + + .xref-item { + display: inline-block; + font-size: 0.7rem; + padding: 0.1rem 0.4rem; + background: rgba(59,130,246,0.15); + color: #60a5fa; + border-radius: 3px; + margin: 0.1rem; + } + + .xref-label { + font-size: 0.65rem; + color: var(--text-secondary); + margin-bottom: 0.2rem; + } + + /* Loading / Empty states */ + .loading-state, .empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 3rem; + color: var(--text-secondary); + text-align: center; + } + + .loading-state i, .empty-state i { + font-size: 2.5rem; + margin-bottom: 1rem; + opacity: 0.5; + } + + .spinner { + animation: spin 1s linear infinite; + } + + /* Pagination */ + .pagination { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 2rem; + padding-bottom: 2rem; + } + + .page-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.5rem 1rem; + color: var(--text-secondary); + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s; + } + + .page-btn:hover { border-color: var(--accent); color: var(--text-primary); } + .page-btn.active { background: var(--accent); border-color: var(--accent); color: white; } + .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } + + /* Responsive */ + @media (max-width: 768px) { + .viewer-layout { flex-direction: column; } + .viewer-parts { width: 100%; height: 50%; } + .diagram-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } + .search-section { flex-direction: column; } + } + + /* Close button */ + .close-btn { + position: absolute; + top: 0.75rem; right: 0.75rem; + background: rgba(0,0,0,0.6); + border: none; + color: white; + width: 36px; height: 36px; + border-radius: 50%; + font-size: 1.1rem; + cursor: pointer; + z-index: 10; + transition: background 0.2s; + } + + .close-btn:hover { background: var(--accent); } + + /* Zoom controls */ + .zoom-controls { + position: absolute; + bottom: 1rem; left: 50%; + transform: translateX(-50%); + display: flex; gap: 0.5rem; + background: rgba(0,0,0,0.6); + padding: 0.4rem; + border-radius: 8px; + } + + .zoom-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.4rem 0.75rem; + color: var(--text-primary); + cursor: pointer; + font-size: 0.85rem; + transition: all 0.2s; + } + + .zoom-btn:hover { background: var(--accent); } + + .zoom-level { + display: flex; + align-items: center; + color: var(--text-secondary); + font-size: 0.8rem; + padding: 0 0.5rem; + } + + /* Nav buttons in viewer */ + .viewer-nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(0,0,0,0.5); + border: none; + color: white; + width: 44px; height: 44px; + border-radius: 50%; + font-size: 1.2rem; + cursor: pointer; + transition: background 0.2s; + z-index: 5; + } + + .viewer-nav-btn:hover { background: var(--accent); } + .viewer-nav-btn.prev { left: 0.75rem; } + .viewer-nav-btn.next { right: 430px; } + + @media (max-width: 768px) { + .viewer-nav-btn.next { right: 0.75rem; } + } diff --git a/dashboard/index.css b/dashboard/index.css new file mode 100644 index 0000000..217fc6d --- /dev/null +++ b/dashboard/index.css @@ -0,0 +1,1891 @@ +/* Extracted from index.html */ + +/* Search & Header extras (page-specific) */ + .search-container { + flex: 1; + max-width: 600px; + } + + .search-box { + display: flex; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + transition: border-color 0.3s; + } + + .search-box:focus-within { + border-color: var(--accent); + } + + .search-input { + flex: 1; + padding: 0.8rem 1rem; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 0.95rem; + outline: none; + } + + .search-input::placeholder { + color: var(--text-secondary); + } + + .search-btn, .vin-btn { + padding: 0.8rem 1rem; + background: transparent; + border: none; + border-left: 1px solid var(--border); + color: var(--text-secondary); + cursor: pointer; + transition: all 0.3s; + } + + .search-btn:hover, .vin-btn:hover { + background: var(--accent); + color: white; + } + + /* Enhanced Search Styles */ + .search-box-enhanced { + position: relative; + width: 100%; + max-width: 600px; + } + + .search-input-wrapper { + display: flex; + align-items: center; + background: var(--bg-card); + border: 2px solid var(--border); + border-radius: 12px; + overflow: hidden; + transition: all 0.3s; + } + + .search-input-wrapper:focus-within { + border-color: var(--accent); + box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15); + } + + .search-input-wrapper .search-icon { + padding: 0 0.5rem 0 1rem; + color: var(--text-secondary); + font-size: 0.9rem; + } + + .search-input-wrapper .search-input { + flex: 1; + padding: 0.9rem 0.5rem; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 0.95rem; + outline: none; + min-width: 200px; + } + + .search-filters-toggle { + padding: 0.5rem 0.75rem; + color: var(--text-secondary); + cursor: pointer; + transition: color 0.2s; + } + + .search-filters-toggle:hover, + .search-filters-toggle.active { + color: var(--accent); + } + + .search-loading { + padding: 0 0.75rem; + } + + .search-spinner { + width: 18px; + height: 18px; + border: 2px solid var(--border); + border-top-color: var(--accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + /* Search Dropdown */ + .search-dropdown { + display: none; + position: absolute; + top: calc(100% + 8px); + left: 0; + right: 0; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + max-height: 70vh; + overflow-y: auto; + z-index: 1000; + } + + .search-dropdown.active { + display: block; + animation: slideDown 0.2s ease-out; + } + + @keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } + } + + /* Search Filters */ + .search-filters { + display: flex; + gap: 1rem; + padding: 1rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + } + + .search-filters .filter-group { + flex: 1; + } + + .search-filters label { + display: block; + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: 0.25rem; + text-transform: uppercase; + } + + .search-filters select { + width: 100%; + padding: 0.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + font-size: 0.85rem; + } + + /* Recent Searches */ + .search-recent { + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border); + } + + .search-section-title { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + color: var(--text-secondary); + text-transform: uppercase; + margin-bottom: 0.5rem; + } + + .search-section-title i { + font-size: 0.7rem; + } + + .clear-recent { + margin-left: auto; + cursor: pointer; + color: var(--accent); + font-size: 0.7rem; + } + + .clear-recent:hover { + text-decoration: underline; + } + + .search-recent-items { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .search-recent-item { + padding: 0.4rem 0.8rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 20px; + font-size: 0.8rem; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + } + + .search-recent-item:hover { + background: var(--accent); + color: white; + border-color: var(--accent); + } + + /* Search Results */ + .search-results-container { + padding: 0.5rem; + } + + .search-results-section { + margin-bottom: 0.5rem; + } + + .search-results-section .search-section-title { + padding: 0.5rem; + } + + .search-results-list { + display: flex; + flex-direction: column; + } + + .search-result-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem 1rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + } + + .search-result-item:hover { + background: rgba(255, 107, 53, 0.15); + } + + .search-result-item.highlighted { + background: rgba(255, 107, 53, 0.2); + outline: 2px solid var(--accent); + outline-offset: -2px; + } + + .search-result-icon { + width: 40px; + height: 40px; + background: var(--bg-secondary); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + flex-shrink: 0; + } + + .search-result-icon img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 8px; + } + + .search-result-info { + flex: 1; + min-width: 0; + } + + .search-result-title { + font-weight: 500; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .search-result-title .highlight { + background: rgba(255, 107, 53, 0.3); + color: var(--accent); + padding: 0 2px; + border-radius: 2px; + } + + .search-result-subtitle { + font-size: 0.8rem; + color: var(--text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .search-result-badge { + padding: 0.2rem 0.5rem; + background: var(--bg-secondary); + border-radius: 4px; + font-size: 0.7rem; + color: var(--text-secondary); + flex-shrink: 0; + } + + .search-result-badge.aftermarket { + background: rgba(76, 175, 80, 0.15); + color: #66bb6a; + } + + .search-result-badge.cross_reference { + background: rgba(255, 152, 0, 0.15); + color: #ffb74d; + } + + .search-result-badge.vehicle-badge { + background: rgba(33, 150, 243, 0.15); + color: #42a5f5; + } + + /* Vehicle category buttons in search */ + .vehicle-item { + flex-wrap: wrap; + } + + .vehicle-categories-row { + display: flex; + gap: 0.4rem; + margin-top: 0.5rem; + width: 100%; + } + + .vehicle-category-btn { + padding: 0.35rem 0.6rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-secondary); + font-size: 0.75rem; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 0.3rem; + } + + .vehicle-category-btn:hover { + background: var(--accent); + color: white; + border-color: var(--accent); + } + + .vehicle-category-btn i { + font-size: 0.8rem; + } + + .vehicle-all-btn { + margin-left: auto; + background: rgba(33, 150, 243, 0.1); + border-color: rgba(33, 150, 243, 0.3); + color: #42a5f5; + } + + .vehicle-all-btn:hover { + background: #42a5f5; + color: white; + } + + /* Vehicle parts search results (combined search) */ + .vehicle-parts-header { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.6rem 0.8rem; + background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.05)); + border-radius: 8px; + margin-bottom: 0.5rem; + border-left: 3px solid #42a5f5; + } + + .vehicle-parts-header i { + color: #42a5f5; + } + + .vehicle-parts-header span { + font-weight: 600; + color: var(--text-primary); + } + + .vehicle-parts-header small { + color: var(--text-secondary); + font-size: 0.8rem; + margin-left: auto; + } + + .vehicle-part-item { + border-left: 2px solid transparent; + } + + .vehicle-part-item:hover { + border-left-color: var(--accent); + } + + .search-result-badge.vehicle-part-badge { + background: rgba(76, 175, 80, 0.15); + color: #66bb6a; + font-size: 0.65rem; + } + + .search-result-badge.vehicle-part-badge i { + font-size: 0.6rem; + } + + .search-category-badge { + font-size: 0.7rem; + padding: 0.1rem 0.4rem; + background: var(--bg-secondary); + border-radius: 3px; + color: var(--text-secondary); + margin-left: 0.5rem; + } + + .search-result-subtitle .part-number { + font-family: 'Roboto Mono', monospace; + font-weight: 500; + } + + .search-suggestion-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + justify-content: center; + } + + .search-tag { + padding: 0.3rem 0.75rem; + background: var(--bg-secondary); + border-radius: 20px; + font-size: 0.8rem; + cursor: pointer; + transition: all 0.2s ease; + } + + .search-tag:hover { + background: var(--accent); + color: white; + } + + /* No Results */ + .search-no-results { + padding: 2rem; + text-align: center; + color: var(--text-secondary); + } + + .search-no-results i { + font-size: 2rem; + margin-bottom: 0.5rem; + opacity: 0.5; + } + + .search-no-results p { + font-weight: 500; + margin-bottom: 0.25rem; + } + + .search-no-results span { + font-size: 0.85rem; + } + + /* Dropdown Footer */ + .search-dropdown-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1rem; + background: var(--bg-secondary); + border-top: 1px solid var(--border); + } + + .search-hint { + font-size: 0.75rem; + color: var(--text-secondary); + } + + .search-hint kbd { + padding: 0.15rem 0.4rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 4px; + font-family: inherit; + font-size: 0.7rem; + } + + .search-view-all { + padding: 0.5rem 1rem; + background: var(--accent); + border: none; + border-radius: 6px; + color: white; + font-size: 0.8rem; + cursor: pointer; + transition: background 0.2s; + } + + .search-view-all:hover { + background: var(--accent-hover); + } + + .header-actions { + display: flex; + align-items: center; + gap: 1rem; + } + + .header-stats { + display: flex; + gap: 1.5rem; + } + + .header-stat { + text-align: center; + } + + .header-stat-value { + font-family: 'Orbitron', sans-serif; + font-size: 1.2rem; + font-weight: 700; + color: var(--accent); + } + + .header-stat-label { + font-size: 0.7rem; + color: var(--text-secondary); + text-transform: uppercase; + } + + .btn-icon { + width: 42px; + height: 42px; + padding: 0; + border-radius: 10px; + } + + /* Main Content */ + .main-container { + max-width: 1600px; + margin: 0 auto; + padding: 100px 2rem 2rem; + } + + /* Breadcrumb */ + .breadcrumb-container { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1rem 1.5rem; + margin-bottom: 1.5rem; + } + + .breadcrumb { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + } + + .breadcrumb-item { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-secondary); + font-size: 0.95rem; + } + + .breadcrumb-item a { + color: var(--accent); + text-decoration: none; + font-weight: 500; + transition: color 0.3s; + } + + .breadcrumb-item a:hover { + color: var(--accent-hover); + } + + .breadcrumb-item.active { + color: var(--text-primary); + font-weight: 600; + } + + .breadcrumb-separator { + color: var(--text-secondary); + } + + /* Filters Bar */ + .filters-bar { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1rem 1.5rem; + margin-bottom: 1.5rem; + display: none; + } + + .filters-bar.visible { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; + } + + .filter-label { + font-weight: 600; + color: var(--text-secondary); + } + + .filter-select { + padding: 0.6rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + font-size: 0.9rem; + outline: none; + cursor: pointer; + min-width: 150px; + } + + .filter-select:focus { + border-color: var(--accent); + } + + .result-count { + margin-left: auto; + padding: 0.5rem 1rem; + background: var(--accent); + border-radius: 20px; + font-size: 0.85rem; + font-weight: 600; + } + + /* Content Grid */ + .content-grid { + display: grid; + gap: 1.5rem; + } + + .content-grid.brands-grid { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + } + + .content-grid.models-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + } + + .content-grid.vehicles-grid { + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + } + + .content-grid.categories-grid { + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + } + + .content-grid.groups-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + + /* Brand Card */ + .brand-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem 1.5rem; + text-align: center; + cursor: pointer; + transition: all 0.3s; + } + + .brand-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .brand-icon { + width: 70px; + height: 70px; + background: var(--bg-hover); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + margin: 0 auto 1rem; + transition: all 0.3s; + } + + .brand-card:hover .brand-icon { + background: var(--accent); + transform: scale(1.1); + } + + .brand-name { + font-weight: 700; + font-size: 1.2rem; + margin-bottom: 0.5rem; + } + + .brand-count { + font-size: 0.85rem; + color: var(--text-secondary); + } + + .brand-country { + font-size: 0.8rem; + color: var(--text-secondary); + margin-top: 0.5rem; + } + + /* Model Card */ + .model-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s; + } + + .model-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .model-name { + font-weight: 700; + font-size: 1.2rem; + margin-bottom: 0.5rem; + } + + .model-info { + font-size: 0.9rem; + color: var(--text-secondary); + } + + .model-badge { + display: inline-block; + padding: 0.3rem 0.8rem; + background: var(--bg-hover); + border-radius: 20px; + font-size: 0.8rem; + color: var(--accent); + margin-top: 0.75rem; + } + + /* Vehicle Card */ + .vehicle-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + transition: all 0.3s; + } + + .vehicle-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .vehicle-header { + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + padding: 1.2rem 1.5rem; + color: white; + } + + .vehicle-title { + font-weight: 700; + font-size: 1.1rem; + margin-bottom: 0.3rem; + } + + .vehicle-engine { + font-size: 0.9rem; + opacity: 0.9; + } + + .vehicle-body { + padding: 1.5rem; + } + + .vehicle-specs { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; + } + + .spec-item { + background: var(--bg-hover); + padding: 0.75rem; + border-radius: 8px; + text-align: center; + } + + .spec-item i { + color: var(--accent); + margin-bottom: 0.3rem; + display: block; + } + + .spec-value { + font-weight: 600; + font-size: 0.9rem; + } + + .btn-parts { + width: 100%; + margin-top: 1rem; + padding: 0.8rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + } + + .btn-parts:hover { + background: var(--accent); + border-color: var(--accent); + } + + /* Category Card */ + .category-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1.5rem; + text-align: center; + cursor: pointer; + transition: all 0.3s; + } + + .category-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .category-icon { + width: 60px; + height: 60px; + background: var(--bg-hover); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + margin: 0 auto 1rem; + transition: all 0.3s; + } + + .category-card:hover .category-icon { + background: var(--accent); + transform: scale(1.1); + } + + .category-name { + font-weight: 600; + font-size: 1rem; + margin-bottom: 0.3rem; + } + + .category-count { + font-size: 0.8rem; + color: var(--text-secondary); + } + + /* Group Card */ + .group-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s; + display: flex; + align-items: center; + gap: 1rem; + } + + .group-card:hover { + transform: translateY(-3px); + border-color: var(--accent); + box-shadow: 0 8px 25px var(--accent-glow); + } + + .group-icon { + width: 50px; + height: 50px; + background: var(--bg-hover); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + flex-shrink: 0; + transition: all 0.3s; + } + + .group-card:hover .group-icon { + background: var(--accent); + } + + .group-info { + flex: 1; + } + + .group-name { + font-weight: 600; + font-size: 1rem; + margin-bottom: 0.25rem; + } + + .group-count { + font-size: 0.85rem; + color: var(--text-secondary); + } + + .group-actions { + display: flex; + gap: 0.5rem; + } + + .btn-diagram { + padding: 0.5rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-secondary); + font-size: 0.85rem; + cursor: pointer; + transition: all 0.3s; + } + + .btn-diagram:hover { + background: var(--info); + border-color: var(--info); + color: white; + } + + /* Parts Table */ + .parts-container { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + } + + .parts-header { + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + padding: 1rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + color: white; + } + + .parts-title { + font-weight: 700; + font-size: 1.1rem; + } + + .parts-table { + width: 100%; + border-collapse: collapse; + } + + .parts-table thead { + background: var(--bg-hover); + } + + .parts-table th { + padding: 1rem; + text-align: left; + font-weight: 600; + font-size: 0.85rem; + color: var(--text-secondary); + text-transform: uppercase; + border-bottom: 1px solid var(--border); + } + + .parts-table tbody tr { + transition: background 0.2s; + } + + .parts-table tbody tr:hover { + background: var(--bg-hover); + } + + .parts-table td { + padding: 1rem; + border-bottom: 1px solid var(--border); + font-size: 0.95rem; + } + + .part-number { + font-family: 'Orbitron', monospace; + color: var(--accent); + font-weight: 600; + } + + .btn-view { + padding: 0.4rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + font-size: 0.85rem; + cursor: pointer; + transition: all 0.3s; + } + + .btn-view:hover { + background: var(--accent); + border-color: var(--accent); + } + + /* Modal Styles */ + .modal-content { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + width: 100%; + max-width: 800px; + max-height: 90vh; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .modal-content.large { + max-width: 1200px; + } + + .modal-header { + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + padding: 1.25rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + color: white; + } + + .modal-title { + font-weight: 700; + font-size: 1.2rem; + display: flex; + align-items: center; + gap: 0.5rem; + } + + .modal-close { + background: rgba(255,255,255,0.2); + border: none; + width: 36px; + height: 36px; + border-radius: 8px; + color: white; + font-size: 1.2rem; + cursor: pointer; + transition: background 0.3s; + } + + .modal-close:hover { + background: rgba(255,255,255,0.3); + } + + .modal-body { + padding: 1.5rem; + overflow-y: auto; + flex: 1; + } + + .modal-footer { + padding: 1rem 1.5rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: flex-end; + gap: 1rem; + } + + /* Part Detail */ + .part-detail-row { + display: flex; + justify-content: space-between; + padding: 0.8rem 0; + border-bottom: 1px solid var(--border); + } + + .part-detail-row:last-child { + border-bottom: none; + } + + .part-detail-label { + font-weight: 600; + color: var(--accent); + } + + .part-detail-value { + color: var(--text-primary); + } + + .part-oem-badge { + display: inline-block; + background: var(--accent); + color: white; + padding: 0.4rem 1rem; + border-radius: 20px; + font-family: 'Orbitron', monospace; + font-size: 1rem; + } + + /* Alternatives Section */ + .alternatives-section, .crossref-section { + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border); + } + + .section-title-sm { + color: var(--accent); + font-weight: 700; + margin-bottom: 1rem; + font-size: 1rem; + } + + .alternatives-table { + width: 100%; + border-collapse: collapse; + font-size: 0.9rem; + } + + .alternatives-table thead { + background: var(--bg-hover); + } + + .alternatives-table th { + padding: 0.75rem; + text-align: left; + font-weight: 600; + color: var(--text-secondary); + } + + .alternatives-table td { + padding: 0.75rem; + border-bottom: 1px solid var(--border); + } + + .crossref-badge { + display: inline-block; + background: var(--bg-hover); + color: var(--accent); + padding: 0.3rem 0.6rem; + border-radius: 6px; + margin: 0.2rem; + font-size: 0.85rem; + font-family: monospace; + } + + /* Diagram Viewer */ + .diagram-viewer { + background: var(--bg-secondary); + border-radius: 12px; + overflow: hidden; + } + + .diagram-toolbar { + background: var(--bg-card); + padding: 0.75rem 1rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border); + } + + .zoom-controls { + display: flex; + gap: 0.5rem; + } + + .zoom-btn { + width: 36px; + height: 36px; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + cursor: pointer; + transition: all 0.3s; + } + + .zoom-btn:hover { + background: var(--accent); + border-color: var(--accent); + } + + .diagram-container { + padding: 1rem; + min-height: 400px; + display: flex; + justify-content: center; + align-items: center; + overflow: auto; + } + + .diagram-svg-wrapper { + transform-origin: center; + transition: transform 0.2s; + } + + .diagram-svg-wrapper svg { + max-width: 100%; + height: auto; + } + + .diagram-thumbnails { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 1rem; + padding: 1rem; + border-top: 1px solid var(--border); + } + + .diagram-thumbnail { + background: var(--bg-card); + border: 2px solid var(--border); + border-radius: 8px; + padding: 0.5rem; + cursor: pointer; + transition: all 0.3s; + } + + .diagram-thumbnail:hover, + .diagram-thumbnail.active { + border-color: var(--accent); + } + + .diagram-thumbnail svg { + width: 100%; + height: 80px; + object-fit: contain; + } + + .diagram-thumbnail-name { + text-align: center; + font-size: 0.8rem; + margin-top: 0.5rem; + color: var(--text-secondary); + } + + /* VIN Decoder */ + .vin-input-container { + max-width: 500px; + margin-bottom: 1.5rem; + } + + .vin-label { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; + } + + .vin-input-group { + display: flex; + gap: 0.5rem; + } + + .vin-input { + flex: 1; + padding: 0.8rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-family: 'Orbitron', monospace; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 2px; + outline: none; + } + + .vin-input:focus { + border-color: var(--accent); + } + + .vin-help { + font-size: 0.85rem; + color: var(--text-secondary); + margin-top: 0.5rem; + } + + .vin-result { + background: var(--bg-hover); + border-radius: 12px; + padding: 1.5rem; + } + + .vin-badge { + display: inline-block; + background: var(--accent); + color: white; + padding: 0.5rem 1rem; + border-radius: 8px; + font-family: 'Orbitron', monospace; + font-size: 1rem; + letter-spacing: 1px; + margin-bottom: 1rem; + } + + .vehicle-match-card { + background: linear-gradient(135deg, var(--success), #16a34a); + color: white; + border-radius: 10px; + padding: 1rem; + margin-top: 1rem; + } + + .vehicle-no-match { + background: linear-gradient(135deg, var(--warning), #d97706); + } + + /* Search Results */ + .search-results-list { + max-height: 400px; + overflow-y: auto; + } + + .search-result-item { + padding: 1rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + border-bottom: 1px solid var(--border); + } + + .search-result-item:hover { + background: var(--bg-hover); + } + + .search-result-item:last-child { + border-bottom: none; + } + + .search-result-part-number { + font-family: 'Orbitron', monospace; + font-weight: 600; + color: var(--accent); + } + + .search-result-name { + color: var(--text-secondary); + font-size: 0.9rem; + margin-top: 0.25rem; + } + + /* Responsive */ + @media (max-width: 1024px) { + .header-stats { + display: none; + } + + .content-grid.brands-grid { + grid-template-columns: repeat(3, 1fr); + } + } + + @media (max-width: 768px) { + .header { + padding: 0.75rem 1rem; + } + + .header-content { + flex-wrap: wrap; + } + + .search-container { + order: 3; + max-width: 100%; + width: 100%; + margin-top: 0.75rem; + } + + .main-container { + padding: 90px 1rem 1rem; + } + + .content-grid.brands-grid, + .content-grid.categories-grid { + grid-template-columns: repeat(2, 1fr); + } + + .content-grid.models-grid, + .content-grid.vehicles-grid, + .content-grid.groups-grid { + grid-template-columns: 1fr; + } + + .filters-bar.visible { + flex-direction: column; + align-items: stretch; + } + + .result-count { + margin-left: 0; + text-align: center; + } + + .group-card { + flex-direction: column; + text-align: center; + } + + .group-actions { + width: 100%; + justify-content: center; + } + } + + /* Focus styles */ + .brand-card:focus, + .model-card:focus, + .category-card:focus, + .group-card:focus, + .vehicle-card:focus, + .diagram-thumbnail:focus { + outline: 3px solid var(--accent); + outline-offset: 2px; + } + + /* ========== Diagram Strip (horizontal scroll above groups) ========== */ + .diagrams-strip { + margin-bottom: 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + } + + .diagrams-strip-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1.25rem; + background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%); + border-bottom: 1px solid var(--border); + } + + .diagrams-strip-header h5 { + margin: 0; + font-size: 0.9rem; + font-weight: 600; + color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; + } + + .diagrams-strip-header .strip-badge { + font-size: 0.75rem; + background: rgba(255, 107, 53, 0.2); + color: var(--accent); + padding: 0.15rem 0.6rem; + border-radius: 10px; + font-weight: 600; + } + + .diagrams-strip-scroll { + display: flex; + gap: 0.75rem; + padding: 0.75rem 1rem; + overflow-x: auto; + scroll-behavior: smooth; + scrollbar-width: thin; + scrollbar-color: var(--accent) var(--bg-hover); + } + + .diagrams-strip-scroll::-webkit-scrollbar { + height: 6px; + } + + .diagrams-strip-scroll::-webkit-scrollbar-track { + background: var(--bg-hover); + border-radius: 3px; + } + + .diagrams-strip-scroll::-webkit-scrollbar-thumb { + background: var(--accent); + border-radius: 3px; + } + + .strip-card { + flex: 0 0 180px; + background: var(--bg-hover); + border: 2px solid var(--border); + border-radius: 10px; + cursor: pointer; + transition: all 0.25s ease; + overflow: hidden; + } + + .strip-card:hover { + border-color: var(--accent); + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(255, 107, 53, 0.15); + } + + .strip-card-img { + width: 100%; + height: 110px; + object-fit: contain; + background: #e8e8e8; + display: block; + } + + .strip-card-body { + padding: 0.5rem 0.65rem; + } + + .strip-card-title { + font-family: 'Orbitron', monospace; + font-size: 0.8rem; + font-weight: 600; + color: var(--accent); + } + + .strip-card-type { + font-size: 0.7rem; + color: var(--text-secondary); + margin-top: 0.15rem; + } + + /* ========== Diagram Viewer Overlay (full-screen split) ========== */ + .diagram-viewer-overlay { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.92); + z-index: 3000; + display: none; + opacity: 0; + transition: opacity 0.3s ease; + } + + .diagram-viewer-overlay.active { + display: flex; + opacity: 1; + } + + .dv-layout { + display: flex; + width: 100%; + height: 100%; + } + + /* Left: Diagram image panel */ + .dv-image-panel { + flex: 1; + display: flex; + flex-direction: column; + background: var(--bg-primary); + position: relative; + } + + .dv-toolbar { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.65rem 1.25rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + z-index: 2; + } + + .dv-toolbar .dv-title { + font-family: 'Orbitron', monospace; + font-size: 1rem; + font-weight: 600; + color: var(--accent); + flex: 1; + } + + .dv-toolbar .dv-subtitle { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .dv-toolbar-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.45rem 0.7rem; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + font-size: 0.85rem; + } + + .dv-toolbar-btn:hover { + border-color: var(--accent); + color: var(--text-primary); + } + + .dv-close-btn { + background: rgba(255, 255, 255, 0.1); + border: none; + color: white; + width: 34px; height: 34px; + border-radius: 8px; + font-size: 1.1rem; + cursor: pointer; + transition: background 0.2s; + } + + .dv-close-btn:hover { background: var(--accent); } + + .dv-img-container { + flex: 1; + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: #e0e0e0; + position: relative; + } + + .dv-img-wrapper { + position: relative; + display: inline-block; + transition: transform 0.2s ease; + transform-origin: center center; + } + + .dv-img-wrapper img { + max-width: 100%; + max-height: 100%; + display: block; + user-select: none; + -webkit-user-drag: none; + } + + .dv-img-wrapper.zoomed img { + max-width: none; + max-height: none; + } + + .dv-zoom-controls { + position: absolute; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 0.4rem; + background: rgba(0, 0, 0, 0.7); + padding: 0.35rem; + border-radius: 8px; + z-index: 5; + } + + .dv-zoom-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 5px; + padding: 0.35rem 0.65rem; + color: var(--text-primary); + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s; + } + + .dv-zoom-btn:hover { background: var(--accent); border-color: var(--accent); } + + .dv-zoom-level { + display: flex; + align-items: center; + color: var(--text-secondary); + font-size: 0.75rem; + padding: 0 0.4rem; + } + + /* Nav arrows */ + .dv-nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(0, 0, 0, 0.5); + border: none; + color: white; + width: 42px; height: 42px; + border-radius: 50%; + font-size: 1.1rem; + cursor: pointer; + transition: background 0.2s; + z-index: 5; + } + + .dv-nav-btn:hover { background: var(--accent); } + .dv-nav-btn.prev { left: 0.75rem; } + .dv-nav-btn.next { right: 0.75rem; } + + /* Right: Parts panel */ + .dv-parts-panel { + width: 400px; + background: var(--bg-secondary); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .dv-parts-header { + padding: 0.75rem 1rem; + background: var(--bg-card); + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 0.6rem; + } + + .dv-parts-header h3 { + font-size: 0.9rem; + font-weight: 600; + flex: 1; + margin: 0; + } + + .dv-parts-header .dv-parts-count { + font-size: 0.75rem; + color: var(--text-secondary); + background: var(--bg-hover); + padding: 0.15rem 0.5rem; + border-radius: 10px; + } + + .dv-parts-search { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid var(--border); + } + + .dv-parts-search input { + width: 100%; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.45rem 0.65rem; + color: var(--text-primary); + font-size: 0.82rem; + outline: none; + } + + .dv-parts-search input:focus { border-color: var(--accent); } + + .dv-parts-list { + flex: 1; + overflow-y: auto; + padding: 0.5rem; + } + + .dv-group-label { + font-size: 0.72rem; + color: var(--accent); + padding: 0.5rem 0.25rem 0.2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + } + + .dv-part-item { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.65rem 0.75rem; + margin-bottom: 0.4rem; + cursor: pointer; + transition: all 0.2s; + } + + .dv-part-item:hover { + border-color: var(--accent); + background: var(--bg-hover); + } + + .dv-part-item.highlighted { + border-color: var(--accent); + background: rgba(255, 107, 53, 0.1); + box-shadow: 0 0 0 1px var(--accent); + } + + .dv-part-number { + font-family: 'Orbitron', monospace; + font-size: 0.85rem; + font-weight: 600; + color: var(--accent); + } + + .dv-part-name { + font-size: 0.78rem; + color: var(--text-secondary); + margin-top: 0.15rem; + } + + .dv-xref-list { + margin-top: 0.35rem; + padding-top: 0.35rem; + border-top: 1px solid var(--border); + } + + .dv-xref-tag { + display: inline-block; + font-size: 0.68rem; + padding: 0.08rem 0.4rem; + background: rgba(59, 130, 246, 0.15); + color: #60a5fa; + border-radius: 3px; + margin: 0.08rem; + } + + /* ========== Hotspot markers ========== */ + .hotspot-marker { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + background: rgba(255, 107, 53, 0.35); + border: 2px solid var(--accent); + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + transform: translate(-50%, -50%); + z-index: 3; + } + + .hotspot-marker:hover, + .hotspot-marker.active { + background: rgba(255, 107, 53, 0.6); + transform: translate(-50%, -50%) scale(1.25); + box-shadow: 0 0 12px rgba(255, 107, 53, 0.5); + } + + .hotspot-marker .hotspot-number { + font-size: 0.65rem; + font-weight: 700; + color: white; + text-shadow: 0 1px 2px rgba(0,0,0,0.5); + } + + @keyframes hotspot-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); } + 50% { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); } + } + + .hotspot-marker.pulse { + animation: hotspot-pulse 1.5s ease-in-out 3; + } + + /* ========== Responsive ========== */ + @media (max-width: 768px) { + .dv-layout { flex-direction: column; } + .dv-parts-panel { width: 100%; height: 45%; } + .strip-card { flex: 0 0 150px; } + .strip-card-img { height: 90px; } + } diff --git a/dashboard/index.html b/dashboard/index.html index eec1da6..98456b9 100644 --- a/dashboard/index.html +++ b/dashboard/index.html @@ -8,1897 +8,7 @@ - + diff --git a/dashboard/index.min.css b/dashboard/index.min.css new file mode 100644 index 0000000..217fc6d --- /dev/null +++ b/dashboard/index.min.css @@ -0,0 +1,1891 @@ +/* Extracted from index.html */ + +/* Search & Header extras (page-specific) */ + .search-container { + flex: 1; + max-width: 600px; + } + + .search-box { + display: flex; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + transition: border-color 0.3s; + } + + .search-box:focus-within { + border-color: var(--accent); + } + + .search-input { + flex: 1; + padding: 0.8rem 1rem; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 0.95rem; + outline: none; + } + + .search-input::placeholder { + color: var(--text-secondary); + } + + .search-btn, .vin-btn { + padding: 0.8rem 1rem; + background: transparent; + border: none; + border-left: 1px solid var(--border); + color: var(--text-secondary); + cursor: pointer; + transition: all 0.3s; + } + + .search-btn:hover, .vin-btn:hover { + background: var(--accent); + color: white; + } + + /* Enhanced Search Styles */ + .search-box-enhanced { + position: relative; + width: 100%; + max-width: 600px; + } + + .search-input-wrapper { + display: flex; + align-items: center; + background: var(--bg-card); + border: 2px solid var(--border); + border-radius: 12px; + overflow: hidden; + transition: all 0.3s; + } + + .search-input-wrapper:focus-within { + border-color: var(--accent); + box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15); + } + + .search-input-wrapper .search-icon { + padding: 0 0.5rem 0 1rem; + color: var(--text-secondary); + font-size: 0.9rem; + } + + .search-input-wrapper .search-input { + flex: 1; + padding: 0.9rem 0.5rem; + background: transparent; + border: none; + color: var(--text-primary); + font-size: 0.95rem; + outline: none; + min-width: 200px; + } + + .search-filters-toggle { + padding: 0.5rem 0.75rem; + color: var(--text-secondary); + cursor: pointer; + transition: color 0.2s; + } + + .search-filters-toggle:hover, + .search-filters-toggle.active { + color: var(--accent); + } + + .search-loading { + padding: 0 0.75rem; + } + + .search-spinner { + width: 18px; + height: 18px; + border: 2px solid var(--border); + border-top-color: var(--accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; + } + + /* Search Dropdown */ + .search-dropdown { + display: none; + position: absolute; + top: calc(100% + 8px); + left: 0; + right: 0; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); + max-height: 70vh; + overflow-y: auto; + z-index: 1000; + } + + .search-dropdown.active { + display: block; + animation: slideDown 0.2s ease-out; + } + + @keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } + } + + /* Search Filters */ + .search-filters { + display: flex; + gap: 1rem; + padding: 1rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + } + + .search-filters .filter-group { + flex: 1; + } + + .search-filters label { + display: block; + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: 0.25rem; + text-transform: uppercase; + } + + .search-filters select { + width: 100%; + padding: 0.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-primary); + font-size: 0.85rem; + } + + /* Recent Searches */ + .search-recent { + padding: 0.75rem 1rem; + border-bottom: 1px solid var(--border); + } + + .search-section-title { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + color: var(--text-secondary); + text-transform: uppercase; + margin-bottom: 0.5rem; + } + + .search-section-title i { + font-size: 0.7rem; + } + + .clear-recent { + margin-left: auto; + cursor: pointer; + color: var(--accent); + font-size: 0.7rem; + } + + .clear-recent:hover { + text-decoration: underline; + } + + .search-recent-items { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .search-recent-item { + padding: 0.4rem 0.8rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 20px; + font-size: 0.8rem; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + } + + .search-recent-item:hover { + background: var(--accent); + color: white; + border-color: var(--accent); + } + + /* Search Results */ + .search-results-container { + padding: 0.5rem; + } + + .search-results-section { + margin-bottom: 0.5rem; + } + + .search-results-section .search-section-title { + padding: 0.5rem; + } + + .search-results-list { + display: flex; + flex-direction: column; + } + + .search-result-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.75rem 1rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + } + + .search-result-item:hover { + background: rgba(255, 107, 53, 0.15); + } + + .search-result-item.highlighted { + background: rgba(255, 107, 53, 0.2); + outline: 2px solid var(--accent); + outline-offset: -2px; + } + + .search-result-icon { + width: 40px; + height: 40px; + background: var(--bg-secondary); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + flex-shrink: 0; + } + + .search-result-icon img { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 8px; + } + + .search-result-info { + flex: 1; + min-width: 0; + } + + .search-result-title { + font-weight: 500; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .search-result-title .highlight { + background: rgba(255, 107, 53, 0.3); + color: var(--accent); + padding: 0 2px; + border-radius: 2px; + } + + .search-result-subtitle { + font-size: 0.8rem; + color: var(--text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .search-result-badge { + padding: 0.2rem 0.5rem; + background: var(--bg-secondary); + border-radius: 4px; + font-size: 0.7rem; + color: var(--text-secondary); + flex-shrink: 0; + } + + .search-result-badge.aftermarket { + background: rgba(76, 175, 80, 0.15); + color: #66bb6a; + } + + .search-result-badge.cross_reference { + background: rgba(255, 152, 0, 0.15); + color: #ffb74d; + } + + .search-result-badge.vehicle-badge { + background: rgba(33, 150, 243, 0.15); + color: #42a5f5; + } + + /* Vehicle category buttons in search */ + .vehicle-item { + flex-wrap: wrap; + } + + .vehicle-categories-row { + display: flex; + gap: 0.4rem; + margin-top: 0.5rem; + width: 100%; + } + + .vehicle-category-btn { + padding: 0.35rem 0.6rem; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: 6px; + color: var(--text-secondary); + font-size: 0.75rem; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + gap: 0.3rem; + } + + .vehicle-category-btn:hover { + background: var(--accent); + color: white; + border-color: var(--accent); + } + + .vehicle-category-btn i { + font-size: 0.8rem; + } + + .vehicle-all-btn { + margin-left: auto; + background: rgba(33, 150, 243, 0.1); + border-color: rgba(33, 150, 243, 0.3); + color: #42a5f5; + } + + .vehicle-all-btn:hover { + background: #42a5f5; + color: white; + } + + /* Vehicle parts search results (combined search) */ + .vehicle-parts-header { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.6rem 0.8rem; + background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.05)); + border-radius: 8px; + margin-bottom: 0.5rem; + border-left: 3px solid #42a5f5; + } + + .vehicle-parts-header i { + color: #42a5f5; + } + + .vehicle-parts-header span { + font-weight: 600; + color: var(--text-primary); + } + + .vehicle-parts-header small { + color: var(--text-secondary); + font-size: 0.8rem; + margin-left: auto; + } + + .vehicle-part-item { + border-left: 2px solid transparent; + } + + .vehicle-part-item:hover { + border-left-color: var(--accent); + } + + .search-result-badge.vehicle-part-badge { + background: rgba(76, 175, 80, 0.15); + color: #66bb6a; + font-size: 0.65rem; + } + + .search-result-badge.vehicle-part-badge i { + font-size: 0.6rem; + } + + .search-category-badge { + font-size: 0.7rem; + padding: 0.1rem 0.4rem; + background: var(--bg-secondary); + border-radius: 3px; + color: var(--text-secondary); + margin-left: 0.5rem; + } + + .search-result-subtitle .part-number { + font-family: 'Roboto Mono', monospace; + font-weight: 500; + } + + .search-suggestion-tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + justify-content: center; + } + + .search-tag { + padding: 0.3rem 0.75rem; + background: var(--bg-secondary); + border-radius: 20px; + font-size: 0.8rem; + cursor: pointer; + transition: all 0.2s ease; + } + + .search-tag:hover { + background: var(--accent); + color: white; + } + + /* No Results */ + .search-no-results { + padding: 2rem; + text-align: center; + color: var(--text-secondary); + } + + .search-no-results i { + font-size: 2rem; + margin-bottom: 0.5rem; + opacity: 0.5; + } + + .search-no-results p { + font-weight: 500; + margin-bottom: 0.25rem; + } + + .search-no-results span { + font-size: 0.85rem; + } + + /* Dropdown Footer */ + .search-dropdown-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1rem; + background: var(--bg-secondary); + border-top: 1px solid var(--border); + } + + .search-hint { + font-size: 0.75rem; + color: var(--text-secondary); + } + + .search-hint kbd { + padding: 0.15rem 0.4rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 4px; + font-family: inherit; + font-size: 0.7rem; + } + + .search-view-all { + padding: 0.5rem 1rem; + background: var(--accent); + border: none; + border-radius: 6px; + color: white; + font-size: 0.8rem; + cursor: pointer; + transition: background 0.2s; + } + + .search-view-all:hover { + background: var(--accent-hover); + } + + .header-actions { + display: flex; + align-items: center; + gap: 1rem; + } + + .header-stats { + display: flex; + gap: 1.5rem; + } + + .header-stat { + text-align: center; + } + + .header-stat-value { + font-family: 'Orbitron', sans-serif; + font-size: 1.2rem; + font-weight: 700; + color: var(--accent); + } + + .header-stat-label { + font-size: 0.7rem; + color: var(--text-secondary); + text-transform: uppercase; + } + + .btn-icon { + width: 42px; + height: 42px; + padding: 0; + border-radius: 10px; + } + + /* Main Content */ + .main-container { + max-width: 1600px; + margin: 0 auto; + padding: 100px 2rem 2rem; + } + + /* Breadcrumb */ + .breadcrumb-container { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1rem 1.5rem; + margin-bottom: 1.5rem; + } + + .breadcrumb { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + } + + .breadcrumb-item { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-secondary); + font-size: 0.95rem; + } + + .breadcrumb-item a { + color: var(--accent); + text-decoration: none; + font-weight: 500; + transition: color 0.3s; + } + + .breadcrumb-item a:hover { + color: var(--accent-hover); + } + + .breadcrumb-item.active { + color: var(--text-primary); + font-weight: 600; + } + + .breadcrumb-separator { + color: var(--text-secondary); + } + + /* Filters Bar */ + .filters-bar { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + padding: 1rem 1.5rem; + margin-bottom: 1.5rem; + display: none; + } + + .filters-bar.visible { + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; + } + + .filter-label { + font-weight: 600; + color: var(--text-secondary); + } + + .filter-select { + padding: 0.6rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + font-size: 0.9rem; + outline: none; + cursor: pointer; + min-width: 150px; + } + + .filter-select:focus { + border-color: var(--accent); + } + + .result-count { + margin-left: auto; + padding: 0.5rem 1rem; + background: var(--accent); + border-radius: 20px; + font-size: 0.85rem; + font-weight: 600; + } + + /* Content Grid */ + .content-grid { + display: grid; + gap: 1.5rem; + } + + .content-grid.brands-grid { + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + } + + .content-grid.models-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + } + + .content-grid.vehicles-grid { + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + } + + .content-grid.categories-grid { + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + } + + .content-grid.groups-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + + /* Brand Card */ + .brand-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 2rem 1.5rem; + text-align: center; + cursor: pointer; + transition: all 0.3s; + } + + .brand-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .brand-icon { + width: 70px; + height: 70px; + background: var(--bg-hover); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + margin: 0 auto 1rem; + transition: all 0.3s; + } + + .brand-card:hover .brand-icon { + background: var(--accent); + transform: scale(1.1); + } + + .brand-name { + font-weight: 700; + font-size: 1.2rem; + margin-bottom: 0.5rem; + } + + .brand-count { + font-size: 0.85rem; + color: var(--text-secondary); + } + + .brand-country { + font-size: 0.8rem; + color: var(--text-secondary); + margin-top: 0.5rem; + } + + /* Model Card */ + .model-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s; + } + + .model-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .model-name { + font-weight: 700; + font-size: 1.2rem; + margin-bottom: 0.5rem; + } + + .model-info { + font-size: 0.9rem; + color: var(--text-secondary); + } + + .model-badge { + display: inline-block; + padding: 0.3rem 0.8rem; + background: var(--bg-hover); + border-radius: 20px; + font-size: 0.8rem; + color: var(--accent); + margin-top: 0.75rem; + } + + /* Vehicle Card */ + .vehicle-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + transition: all 0.3s; + } + + .vehicle-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .vehicle-header { + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + padding: 1.2rem 1.5rem; + color: white; + } + + .vehicle-title { + font-weight: 700; + font-size: 1.1rem; + margin-bottom: 0.3rem; + } + + .vehicle-engine { + font-size: 0.9rem; + opacity: 0.9; + } + + .vehicle-body { + padding: 1.5rem; + } + + .vehicle-specs { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; + } + + .spec-item { + background: var(--bg-hover); + padding: 0.75rem; + border-radius: 8px; + text-align: center; + } + + .spec-item i { + color: var(--accent); + margin-bottom: 0.3rem; + display: block; + } + + .spec-value { + font-weight: 600; + font-size: 0.9rem; + } + + .btn-parts { + width: 100%; + margin-top: 1rem; + padding: 0.8rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + } + + .btn-parts:hover { + background: var(--accent); + border-color: var(--accent); + } + + /* Category Card */ + .category-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1.5rem; + text-align: center; + cursor: pointer; + transition: all 0.3s; + } + + .category-card:hover { + transform: translateY(-5px); + border-color: var(--accent); + box-shadow: 0 10px 30px var(--accent-glow); + } + + .category-icon { + width: 60px; + height: 60px; + background: var(--bg-hover); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.8rem; + margin: 0 auto 1rem; + transition: all 0.3s; + } + + .category-card:hover .category-icon { + background: var(--accent); + transform: scale(1.1); + } + + .category-name { + font-weight: 600; + font-size: 1rem; + margin-bottom: 0.3rem; + } + + .category-count { + font-size: 0.8rem; + color: var(--text-secondary); + } + + /* Group Card */ + .group-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s; + display: flex; + align-items: center; + gap: 1rem; + } + + .group-card:hover { + transform: translateY(-3px); + border-color: var(--accent); + box-shadow: 0 8px 25px var(--accent-glow); + } + + .group-icon { + width: 50px; + height: 50px; + background: var(--bg-hover); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + flex-shrink: 0; + transition: all 0.3s; + } + + .group-card:hover .group-icon { + background: var(--accent); + } + + .group-info { + flex: 1; + } + + .group-name { + font-weight: 600; + font-size: 1rem; + margin-bottom: 0.25rem; + } + + .group-count { + font-size: 0.85rem; + color: var(--text-secondary); + } + + .group-actions { + display: flex; + gap: 0.5rem; + } + + .btn-diagram { + padding: 0.5rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-secondary); + font-size: 0.85rem; + cursor: pointer; + transition: all 0.3s; + } + + .btn-diagram:hover { + background: var(--info); + border-color: var(--info); + color: white; + } + + /* Parts Table */ + .parts-container { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + overflow: hidden; + } + + .parts-header { + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + padding: 1rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + color: white; + } + + .parts-title { + font-weight: 700; + font-size: 1.1rem; + } + + .parts-table { + width: 100%; + border-collapse: collapse; + } + + .parts-table thead { + background: var(--bg-hover); + } + + .parts-table th { + padding: 1rem; + text-align: left; + font-weight: 600; + font-size: 0.85rem; + color: var(--text-secondary); + text-transform: uppercase; + border-bottom: 1px solid var(--border); + } + + .parts-table tbody tr { + transition: background 0.2s; + } + + .parts-table tbody tr:hover { + background: var(--bg-hover); + } + + .parts-table td { + padding: 1rem; + border-bottom: 1px solid var(--border); + font-size: 0.95rem; + } + + .part-number { + font-family: 'Orbitron', monospace; + color: var(--accent); + font-weight: 600; + } + + .btn-view { + padding: 0.4rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + font-size: 0.85rem; + cursor: pointer; + transition: all 0.3s; + } + + .btn-view:hover { + background: var(--accent); + border-color: var(--accent); + } + + /* Modal Styles */ + .modal-content { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 16px; + width: 100%; + max-width: 800px; + max-height: 90vh; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .modal-content.large { + max-width: 1200px; + } + + .modal-header { + background: linear-gradient(135deg, var(--accent) 0%, #ff4500 100%); + padding: 1.25rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + color: white; + } + + .modal-title { + font-weight: 700; + font-size: 1.2rem; + display: flex; + align-items: center; + gap: 0.5rem; + } + + .modal-close { + background: rgba(255,255,255,0.2); + border: none; + width: 36px; + height: 36px; + border-radius: 8px; + color: white; + font-size: 1.2rem; + cursor: pointer; + transition: background 0.3s; + } + + .modal-close:hover { + background: rgba(255,255,255,0.3); + } + + .modal-body { + padding: 1.5rem; + overflow-y: auto; + flex: 1; + } + + .modal-footer { + padding: 1rem 1.5rem; + border-top: 1px solid var(--border); + display: flex; + justify-content: flex-end; + gap: 1rem; + } + + /* Part Detail */ + .part-detail-row { + display: flex; + justify-content: space-between; + padding: 0.8rem 0; + border-bottom: 1px solid var(--border); + } + + .part-detail-row:last-child { + border-bottom: none; + } + + .part-detail-label { + font-weight: 600; + color: var(--accent); + } + + .part-detail-value { + color: var(--text-primary); + } + + .part-oem-badge { + display: inline-block; + background: var(--accent); + color: white; + padding: 0.4rem 1rem; + border-radius: 20px; + font-family: 'Orbitron', monospace; + font-size: 1rem; + } + + /* Alternatives Section */ + .alternatives-section, .crossref-section { + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border); + } + + .section-title-sm { + color: var(--accent); + font-weight: 700; + margin-bottom: 1rem; + font-size: 1rem; + } + + .alternatives-table { + width: 100%; + border-collapse: collapse; + font-size: 0.9rem; + } + + .alternatives-table thead { + background: var(--bg-hover); + } + + .alternatives-table th { + padding: 0.75rem; + text-align: left; + font-weight: 600; + color: var(--text-secondary); + } + + .alternatives-table td { + padding: 0.75rem; + border-bottom: 1px solid var(--border); + } + + .crossref-badge { + display: inline-block; + background: var(--bg-hover); + color: var(--accent); + padding: 0.3rem 0.6rem; + border-radius: 6px; + margin: 0.2rem; + font-size: 0.85rem; + font-family: monospace; + } + + /* Diagram Viewer */ + .diagram-viewer { + background: var(--bg-secondary); + border-radius: 12px; + overflow: hidden; + } + + .diagram-toolbar { + background: var(--bg-card); + padding: 0.75rem 1rem; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border); + } + + .zoom-controls { + display: flex; + gap: 0.5rem; + } + + .zoom-btn { + width: 36px; + height: 36px; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-primary); + cursor: pointer; + transition: all 0.3s; + } + + .zoom-btn:hover { + background: var(--accent); + border-color: var(--accent); + } + + .diagram-container { + padding: 1rem; + min-height: 400px; + display: flex; + justify-content: center; + align-items: center; + overflow: auto; + } + + .diagram-svg-wrapper { + transform-origin: center; + transition: transform 0.2s; + } + + .diagram-svg-wrapper svg { + max-width: 100%; + height: auto; + } + + .diagram-thumbnails { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 1rem; + padding: 1rem; + border-top: 1px solid var(--border); + } + + .diagram-thumbnail { + background: var(--bg-card); + border: 2px solid var(--border); + border-radius: 8px; + padding: 0.5rem; + cursor: pointer; + transition: all 0.3s; + } + + .diagram-thumbnail:hover, + .diagram-thumbnail.active { + border-color: var(--accent); + } + + .diagram-thumbnail svg { + width: 100%; + height: 80px; + object-fit: contain; + } + + .diagram-thumbnail-name { + text-align: center; + font-size: 0.8rem; + margin-top: 0.5rem; + color: var(--text-secondary); + } + + /* VIN Decoder */ + .vin-input-container { + max-width: 500px; + margin-bottom: 1.5rem; + } + + .vin-label { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; + } + + .vin-input-group { + display: flex; + gap: 0.5rem; + } + + .vin-input { + flex: 1; + padding: 0.8rem 1rem; + background: var(--bg-hover); + border: 1px solid var(--border); + border-radius: 10px; + color: var(--text-primary); + font-family: 'Orbitron', monospace; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 2px; + outline: none; + } + + .vin-input:focus { + border-color: var(--accent); + } + + .vin-help { + font-size: 0.85rem; + color: var(--text-secondary); + margin-top: 0.5rem; + } + + .vin-result { + background: var(--bg-hover); + border-radius: 12px; + padding: 1.5rem; + } + + .vin-badge { + display: inline-block; + background: var(--accent); + color: white; + padding: 0.5rem 1rem; + border-radius: 8px; + font-family: 'Orbitron', monospace; + font-size: 1rem; + letter-spacing: 1px; + margin-bottom: 1rem; + } + + .vehicle-match-card { + background: linear-gradient(135deg, var(--success), #16a34a); + color: white; + border-radius: 10px; + padding: 1rem; + margin-top: 1rem; + } + + .vehicle-no-match { + background: linear-gradient(135deg, var(--warning), #d97706); + } + + /* Search Results */ + .search-results-list { + max-height: 400px; + overflow-y: auto; + } + + .search-result-item { + padding: 1rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + border-bottom: 1px solid var(--border); + } + + .search-result-item:hover { + background: var(--bg-hover); + } + + .search-result-item:last-child { + border-bottom: none; + } + + .search-result-part-number { + font-family: 'Orbitron', monospace; + font-weight: 600; + color: var(--accent); + } + + .search-result-name { + color: var(--text-secondary); + font-size: 0.9rem; + margin-top: 0.25rem; + } + + /* Responsive */ + @media (max-width: 1024px) { + .header-stats { + display: none; + } + + .content-grid.brands-grid { + grid-template-columns: repeat(3, 1fr); + } + } + + @media (max-width: 768px) { + .header { + padding: 0.75rem 1rem; + } + + .header-content { + flex-wrap: wrap; + } + + .search-container { + order: 3; + max-width: 100%; + width: 100%; + margin-top: 0.75rem; + } + + .main-container { + padding: 90px 1rem 1rem; + } + + .content-grid.brands-grid, + .content-grid.categories-grid { + grid-template-columns: repeat(2, 1fr); + } + + .content-grid.models-grid, + .content-grid.vehicles-grid, + .content-grid.groups-grid { + grid-template-columns: 1fr; + } + + .filters-bar.visible { + flex-direction: column; + align-items: stretch; + } + + .result-count { + margin-left: 0; + text-align: center; + } + + .group-card { + flex-direction: column; + text-align: center; + } + + .group-actions { + width: 100%; + justify-content: center; + } + } + + /* Focus styles */ + .brand-card:focus, + .model-card:focus, + .category-card:focus, + .group-card:focus, + .vehicle-card:focus, + .diagram-thumbnail:focus { + outline: 3px solid var(--accent); + outline-offset: 2px; + } + + /* ========== Diagram Strip (horizontal scroll above groups) ========== */ + .diagrams-strip { + margin-bottom: 1.5rem; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 12px; + overflow: hidden; + } + + .diagrams-strip-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1.25rem; + background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%); + border-bottom: 1px solid var(--border); + } + + .diagrams-strip-header h5 { + margin: 0; + font-size: 0.9rem; + font-weight: 600; + color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; + } + + .diagrams-strip-header .strip-badge { + font-size: 0.75rem; + background: rgba(255, 107, 53, 0.2); + color: var(--accent); + padding: 0.15rem 0.6rem; + border-radius: 10px; + font-weight: 600; + } + + .diagrams-strip-scroll { + display: flex; + gap: 0.75rem; + padding: 0.75rem 1rem; + overflow-x: auto; + scroll-behavior: smooth; + scrollbar-width: thin; + scrollbar-color: var(--accent) var(--bg-hover); + } + + .diagrams-strip-scroll::-webkit-scrollbar { + height: 6px; + } + + .diagrams-strip-scroll::-webkit-scrollbar-track { + background: var(--bg-hover); + border-radius: 3px; + } + + .diagrams-strip-scroll::-webkit-scrollbar-thumb { + background: var(--accent); + border-radius: 3px; + } + + .strip-card { + flex: 0 0 180px; + background: var(--bg-hover); + border: 2px solid var(--border); + border-radius: 10px; + cursor: pointer; + transition: all 0.25s ease; + overflow: hidden; + } + + .strip-card:hover { + border-color: var(--accent); + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(255, 107, 53, 0.15); + } + + .strip-card-img { + width: 100%; + height: 110px; + object-fit: contain; + background: #e8e8e8; + display: block; + } + + .strip-card-body { + padding: 0.5rem 0.65rem; + } + + .strip-card-title { + font-family: 'Orbitron', monospace; + font-size: 0.8rem; + font-weight: 600; + color: var(--accent); + } + + .strip-card-type { + font-size: 0.7rem; + color: var(--text-secondary); + margin-top: 0.15rem; + } + + /* ========== Diagram Viewer Overlay (full-screen split) ========== */ + .diagram-viewer-overlay { + position: fixed; + top: 0; left: 0; right: 0; bottom: 0; + background: rgba(0, 0, 0, 0.92); + z-index: 3000; + display: none; + opacity: 0; + transition: opacity 0.3s ease; + } + + .diagram-viewer-overlay.active { + display: flex; + opacity: 1; + } + + .dv-layout { + display: flex; + width: 100%; + height: 100%; + } + + /* Left: Diagram image panel */ + .dv-image-panel { + flex: 1; + display: flex; + flex-direction: column; + background: var(--bg-primary); + position: relative; + } + + .dv-toolbar { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.65rem 1.25rem; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border); + z-index: 2; + } + + .dv-toolbar .dv-title { + font-family: 'Orbitron', monospace; + font-size: 1rem; + font-weight: 600; + color: var(--accent); + flex: 1; + } + + .dv-toolbar .dv-subtitle { + font-size: 0.8rem; + color: var(--text-secondary); + } + + .dv-toolbar-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.45rem 0.7rem; + color: var(--text-secondary); + cursor: pointer; + transition: all 0.2s; + font-size: 0.85rem; + } + + .dv-toolbar-btn:hover { + border-color: var(--accent); + color: var(--text-primary); + } + + .dv-close-btn { + background: rgba(255, 255, 255, 0.1); + border: none; + color: white; + width: 34px; height: 34px; + border-radius: 8px; + font-size: 1.1rem; + cursor: pointer; + transition: background 0.2s; + } + + .dv-close-btn:hover { background: var(--accent); } + + .dv-img-container { + flex: 1; + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: #e0e0e0; + position: relative; + } + + .dv-img-wrapper { + position: relative; + display: inline-block; + transition: transform 0.2s ease; + transform-origin: center center; + } + + .dv-img-wrapper img { + max-width: 100%; + max-height: 100%; + display: block; + user-select: none; + -webkit-user-drag: none; + } + + .dv-img-wrapper.zoomed img { + max-width: none; + max-height: none; + } + + .dv-zoom-controls { + position: absolute; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); + display: flex; + gap: 0.4rem; + background: rgba(0, 0, 0, 0.7); + padding: 0.35rem; + border-radius: 8px; + z-index: 5; + } + + .dv-zoom-btn { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 5px; + padding: 0.35rem 0.65rem; + color: var(--text-primary); + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s; + } + + .dv-zoom-btn:hover { background: var(--accent); border-color: var(--accent); } + + .dv-zoom-level { + display: flex; + align-items: center; + color: var(--text-secondary); + font-size: 0.75rem; + padding: 0 0.4rem; + } + + /* Nav arrows */ + .dv-nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(0, 0, 0, 0.5); + border: none; + color: white; + width: 42px; height: 42px; + border-radius: 50%; + font-size: 1.1rem; + cursor: pointer; + transition: background 0.2s; + z-index: 5; + } + + .dv-nav-btn:hover { background: var(--accent); } + .dv-nav-btn.prev { left: 0.75rem; } + .dv-nav-btn.next { right: 0.75rem; } + + /* Right: Parts panel */ + .dv-parts-panel { + width: 400px; + background: var(--bg-secondary); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + overflow: hidden; + } + + .dv-parts-header { + padding: 0.75rem 1rem; + background: var(--bg-card); + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + gap: 0.6rem; + } + + .dv-parts-header h3 { + font-size: 0.9rem; + font-weight: 600; + flex: 1; + margin: 0; + } + + .dv-parts-header .dv-parts-count { + font-size: 0.75rem; + color: var(--text-secondary); + background: var(--bg-hover); + padding: 0.15rem 0.5rem; + border-radius: 10px; + } + + .dv-parts-search { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid var(--border); + } + + .dv-parts-search input { + width: 100%; + background: var(--bg-primary); + border: 1px solid var(--border); + border-radius: 6px; + padding: 0.45rem 0.65rem; + color: var(--text-primary); + font-size: 0.82rem; + outline: none; + } + + .dv-parts-search input:focus { border-color: var(--accent); } + + .dv-parts-list { + flex: 1; + overflow-y: auto; + padding: 0.5rem; + } + + .dv-group-label { + font-size: 0.72rem; + color: var(--accent); + padding: 0.5rem 0.25rem 0.2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.03em; + } + + .dv-part-item { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 0.65rem 0.75rem; + margin-bottom: 0.4rem; + cursor: pointer; + transition: all 0.2s; + } + + .dv-part-item:hover { + border-color: var(--accent); + background: var(--bg-hover); + } + + .dv-part-item.highlighted { + border-color: var(--accent); + background: rgba(255, 107, 53, 0.1); + box-shadow: 0 0 0 1px var(--accent); + } + + .dv-part-number { + font-family: 'Orbitron', monospace; + font-size: 0.85rem; + font-weight: 600; + color: var(--accent); + } + + .dv-part-name { + font-size: 0.78rem; + color: var(--text-secondary); + margin-top: 0.15rem; + } + + .dv-xref-list { + margin-top: 0.35rem; + padding-top: 0.35rem; + border-top: 1px solid var(--border); + } + + .dv-xref-tag { + display: inline-block; + font-size: 0.68rem; + padding: 0.08rem 0.4rem; + background: rgba(59, 130, 246, 0.15); + color: #60a5fa; + border-radius: 3px; + margin: 0.08rem; + } + + /* ========== Hotspot markers ========== */ + .hotspot-marker { + position: absolute; + width: 28px; + height: 28px; + border-radius: 50%; + background: rgba(255, 107, 53, 0.35); + border: 2px solid var(--accent); + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + transform: translate(-50%, -50%); + z-index: 3; + } + + .hotspot-marker:hover, + .hotspot-marker.active { + background: rgba(255, 107, 53, 0.6); + transform: translate(-50%, -50%) scale(1.25); + box-shadow: 0 0 12px rgba(255, 107, 53, 0.5); + } + + .hotspot-marker .hotspot-number { + font-size: 0.65rem; + font-weight: 700; + color: white; + text-shadow: 0 1px 2px rgba(0,0,0,0.5); + } + + @keyframes hotspot-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); } + 50% { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); } + } + + .hotspot-marker.pulse { + animation: hotspot-pulse 1.5s ease-in-out 3; + } + + /* ========== Responsive ========== */ + @media (max-width: 768px) { + .dv-layout { flex-direction: column; } + .dv-parts-panel { width: 100%; height: 45%; } + .strip-card { flex: 0 0 150px; } + .strip-card-img { height: 90px; } + } diff --git a/dashboard/landing.css b/dashboard/landing.css new file mode 100644 index 0000000..f3999b4 --- /dev/null +++ b/dashboard/landing.css @@ -0,0 +1,419 @@ +/* Extracted from landing.html */ + +/* ── Reset ── */ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html { scroll-behavior: smooth; scrollbar-width: none; } + html::-webkit-scrollbar { width: 0; } + + body { + font-family: var(--font-body); + background: var(--color-bg-base); + color: var(--color-text-primary); + line-height: var(--leading-body); + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + } + a { color: var(--color-text-accent); text-decoration: none; } + a:hover { text-decoration: underline; } + .container { + max-width: var(--content-xl); + margin: 0 auto; + padding: 0 var(--space-6); + } + + /* ══════════════════════════════════════════════════════════════════ + HEADER — Glassmorphism sticky + ══════════════════════════════════════════════════════════════════ */ + + .site-header { + position: fixed; top: 0; left: 0; right: 0; + z-index: var(--z-sticky); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border-bottom: 1px solid var(--glass-border); + transition: background 0.3s ease; + } + .site-header .container { + display: flex; align-items: center; justify-content: space-between; height: 64px; + } + .logo { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); + letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none; + position: relative; + } + .logo::after { + content: ''; position: absolute; bottom: -4px; left: 0; right: 0; + height: 2px; background: var(--gradient-accent); border-radius: 1px; opacity: 0.6; filter: blur(2px); + } + .header-nav { display: flex; gap: var(--space-6); align-items: center; } + .header-nav a { + font-size: var(--text-body-sm); color: var(--color-text-secondary); + text-decoration: none; position: relative; padding: var(--space-1) 0; transition: color 0.2s ease; + } + .header-nav a:hover { color: var(--color-text-accent); text-decoration: none; } + .header-nav a::after { + content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; + background: var(--color-primary); transition: width 0.3s ease; + } + .header-nav a:hover::after { width: 100%; } + .header-actions { display: flex; gap: var(--space-3); align-items: center; } + .theme-toggle { + width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px dashed var(--glass-border); border-radius: var(--radius-md); + color: var(--color-text-muted); cursor: pointer; font-size: 1.1rem; transition: var(--transition-fast); + } + .theme-toggle:hover { + border-color: var(--color-border-accent); color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + + /* ── Buttons ── */ + .btn { + display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); + padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); + font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + cursor: pointer; border: 2px solid transparent; text-decoration: none; + transition: all 0.25s var(--ease-out); position: relative; overflow: hidden; + } + .btn:hover { text-decoration: none; } + .btn-primary { + background: var(--gradient-accent); color: var(--btn-primary-text); border: none; + box-shadow: 0 4px 0 var(--color-primary-active), 0 6px 12px var(--glow-color-soft); + } + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 0 var(--color-primary-active), 0 10px 24px var(--glow-color); + } + .btn-primary:active { + transform: translateY(2px); + box-shadow: 0 2px 0 var(--color-primary-active), 0 3px 8px var(--glow-color-soft); + } + .btn-primary::after { + content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s ease; + } + .btn-primary:hover::after { left: 120%; } + .btn-secondary { + background: var(--glass-bg); backdrop-filter: blur(8px); + color: var(--color-text-accent); border: 1px solid var(--color-border-accent); + } + .btn-secondary:hover { background: var(--color-primary-muted); box-shadow: 0 0 20px var(--glow-color-soft); } + .btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-body); border-radius: var(--radius-lg); } + + /* ══════════════════════════════════════════════════════════════════ + HERO + ══════════════════════════════════════════════════════════════════ */ + + .hero { + position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; + overflow: hidden; padding-top: 64px; + } + #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } + .hero::after { + content: ''; position: absolute; inset: 0; + background: radial-gradient(ellipse 60% 50% at 50% 40%, var(--glow-color-soft) 0%, transparent 70%); + pointer-events: none; + } + .hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: var(--space-8) var(--space-6); } + .hero h1 { + font-family: var(--font-heading); font-size: clamp(2.5rem, 7vw, 4.5rem); + font-weight: var(--heading-weight-primary); line-height: 1.05; letter-spacing: var(--tracking-tight); + background: var(--gradient-text); background-size: 200% auto; + -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + animation: nx-shimmer 4s linear infinite; margin-bottom: var(--space-3); + } + .hero .subtitle { + font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--color-text-secondary); + margin-bottom: var(--space-2); max-width: 650px; margin-left: auto; margin-right: auto; + } + .hero .typewriter-line { + display: inline-block; font-family: var(--font-mono); font-size: var(--text-body-sm); + color: var(--color-text-muted); background: var(--glass-bg); backdrop-filter: blur(8px); + padding: var(--space-1) var(--space-4); border-radius: var(--radius-md); + border: 1px dashed var(--glass-border); margin-bottom: var(--space-8); min-height: 2em; + } + .typewriter-cursor { + display: inline-block; width: 2px; height: 1em; background: var(--color-primary); + vertical-align: text-bottom; margin-left: 2px; animation: nx-typewriter-cursor 0.8s ease infinite; + } + .hero-buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-12); } + .hero-stats { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; } + .stat-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-5) var(--space-8); text-align: center; min-width: 140px; + transition: all 0.3s var(--ease-out); + } + .stat-card:hover { border-color: var(--color-border-accent); box-shadow: 0 0 24px var(--glow-color-soft); transform: translateY(-4px); } + .stat-card .number { + font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); line-height: 1; + } + .stat-card .label { + font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); + text-transform: uppercase; letter-spacing: var(--tracking-widest); + } + + /* ══════════════════════════════════════════════════════════════════ + SECTION CHROME — Terminal style separator + ══════════════════════════════════════════════════════════════════ */ + + .section-chrome { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); + background: var(--glass-bg); backdrop-filter: blur(8px); + } + .chrome-dots { display: flex; gap: 6px; } + .chrome-dots span { width: 10px; height: 10px; border-radius: var(--radius-full); border: 1.5px solid var(--color-text-muted); opacity: 0.3; } + .chrome-label { + font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); + text-transform: uppercase; letter-spacing: var(--tracking-widest); + } + .chrome-star { color: var(--color-text-muted); opacity: 0.3; font-size: 14px; } + + /* ══════════════════════════════════════════════════════════════════ + PRODUCT SECTION — 3 columns with feature lists + ══════════════════════════════════════════════════════════════════ */ + + .product { padding: var(--space-16) 0; } + .section-title { + font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary); + text-align: center; margin-bottom: var(--space-3); letter-spacing: var(--heading-tracking-h2); + } + .section-subtitle { + text-align: center; font-size: var(--text-body); color: var(--color-text-secondary); + margin-bottom: var(--space-10); max-width: 600px; margin-left: auto; margin-right: auto; + } + .product-grid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); + } + .product-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-6); transition: all 0.35s var(--ease-out); position: relative; overflow: hidden; + } + .product-card::before { + content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; + border-radius: 3px 0 0 3px; + } + .product-card:hover { + border-color: var(--color-border-accent); + box-shadow: 0 8px 32px var(--glow-color-soft); + transform: translateY(-3px); + } + .product-card--orange::before { background: var(--color-primary); } + .product-card--cyan::before { background: #00D4FF; } + .product-card--green::before { background: #3FB950; } + + .product-card h3 { + font-family: var(--font-heading); font-size: var(--text-h6); + font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-4); + } + .product-card--orange h3 { color: var(--color-text-accent); } + .product-card--cyan h3 { color: #00D4FF; } + .product-card--green h3 { color: #3FB950; } + + .product-card ul { list-style: none; font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .product-card ul li { + padding: var(--space-1) 0; line-height: 1.8; + } + .product-card ul li::before { margin-right: var(--space-2); } + .product-card--orange ul li::before { content: '▸ '; color: var(--color-text-accent); } + .product-card--cyan ul li::before { content: '▸ '; color: #00D4FF; } + .product-card--green ul li::before { content: '▸ '; color: #3FB950; } + + /* Hardware banner */ + .hw-banner { + margin-top: var(--space-6); text-align: center; + } + .hw-banner-inner { + display: inline-flex; align-items: center; gap: var(--space-4); + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px dashed var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-8); transition: all 0.3s var(--ease-out); + } + .hw-banner-inner:hover { border-color: var(--color-border-accent); box-shadow: 0 0 20px var(--glow-color-soft); } + .hw-banner-inner span:first-child { font-size: 1.5rem; } + .hw-banner-inner .hw-text { font-size: var(--text-body-sm); color: var(--color-text-secondary); text-align: left; } + .hw-banner-inner .hw-text strong { color: var(--color-text-accent); } + + /* ══════════════════════════════════════════════════════════════════ + HOW IT WORKS — Timeline + ══════════════════════════════════════════════════════════════════ */ + + .how-it-works { padding: var(--space-16) 0; } + .steps { display: flex; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; position: relative; } + .steps::before { + content: ''; position: absolute; top: 28px; left: 15%; right: 15%; height: 2px; + background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent); opacity: 0.3; + } + .step { flex: 1; text-align: center; padding: 0 var(--space-4); position: relative; } + .step-number { + display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; + border-radius: var(--radius-full); background: var(--glass-bg); backdrop-filter: blur(8px); + border: 2px solid var(--color-border-accent); color: var(--color-text-accent); + font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight-primary); + margin-bottom: var(--space-4); position: relative; z-index: 1; transition: all 0.3s ease; + } + .step:hover .step-number { + box-shadow: 0 0 24px var(--glow-color), 0 0 48px var(--glow-color-soft); + background: var(--color-primary); color: var(--color-text-inverse); + } + .step h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-2); } + .step p { font-size: var(--text-body-sm); color: var(--color-text-secondary); } + + /* ══════════════════════════════════════════════════════════════════ + DIFFERENTIATOR — Competitive highlight + ══════════════════════════════════════════════════════════════════ */ + + .differentiator { padding: var(--space-16) 0; } + .diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } + .diff-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-6); text-align: center; transition: all 0.3s var(--ease-out); + } + .diff-card:hover { border-color: var(--color-border-accent); box-shadow: 0 4px 20px var(--glow-color-soft); transform: translateY(-3px); } + .diff-icon { + width: 48px; height: 48px; margin: 0 auto var(--space-3); + display: flex; align-items: center; justify-content: center; + background: var(--color-primary-muted); border: 1px dashed var(--color-border-accent); + border-radius: var(--radius-md); font-size: 1.3rem; + } + .diff-card h4 { font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-1); } + .diff-card p { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ══════════════════════════════════════════════════════════════════ + BRANDS MARQUEE + ══════════════════════════════════════════════════════════════════ */ + + .brands-section { + padding: var(--space-12) 0; overflow: hidden; + border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); + } + .brands-header { display: flex; align-items: center; } + .brands-label { + flex-shrink: 0; width: 200px; padding: var(--space-6); + font-family: var(--font-heading); font-size: var(--text-body-sm); font-weight: var(--heading-weight-secondary); + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-widest); + border-right: 1px solid var(--color-border); text-align: center; + } + .marquee-track { flex: 1; overflow: hidden; position: relative; padding: var(--space-4) 0; } + .marquee-track::before, .marquee-track::after { + content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; + } + .marquee-track::before { left: 0; background: linear-gradient(90deg, var(--color-bg-base), transparent); } + .marquee-track::after { right: 0; background: linear-gradient(270deg, var(--color-bg-base), transparent); } + .marquee-inner { display: flex; gap: var(--space-3); width: max-content; animation: nx-marquee 40s linear infinite; } + .marquee-inner:hover { animation-play-state: paused; } + .brand-tag { + display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); + background: var(--glass-bg); backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); + white-space: nowrap; transition: all 0.25s ease; cursor: pointer; + } + .brand-tag:hover { + border-color: var(--color-border-accent); color: var(--color-text-accent); + box-shadow: 0 0 16px var(--glow-color-soft); text-decoration: none; + } + + /* ══════════════════════════════════════════════════════════════════ + PRICING PREVIEW + ══════════════════════════════════════════════════════════════════ */ + + .pricing { padding: var(--space-16) 0; } + .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); max-width: 900px; margin: 0 auto; } + .pricing-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-6); text-align: center; transition: all 0.3s var(--ease-out); + } + .pricing-card:hover { border-color: var(--color-border-accent); box-shadow: 0 8px 32px var(--glow-color-soft); transform: translateY(-3px); } + .pricing-card.featured { border-color: var(--color-border-accent); } + .pricing-card h4 { + font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-secondary); + margin-bottom: var(--space-2); color: var(--color-text-primary); + } + .pricing-price { + font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); margin-bottom: var(--space-1); + } + .pricing-period { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-4); } + .pricing-card ul { list-style: none; text-align: left; font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .pricing-card ul li { padding: 3px 0; } + .pricing-card ul li::before { content: '✓ '; color: var(--color-text-accent); } + + /* ══════════════════════════════════════════════════════════════════ + CONTACT + ══════════════════════════════════════════════════════════════════ */ + + .contact { padding: var(--space-16) 0; } + .contact-grid { + display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: var(--space-6); max-width: 900px; margin: 0 auto; + } + .contact-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-8); text-align: center; transition: all 0.3s var(--ease-out); + } + .contact-card:hover { border-color: var(--color-border-accent); box-shadow: 0 8px 32px var(--glow-color-soft); transform: translateY(-4px); } + .contact-icon { + width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; + background: var(--color-primary-muted); border: 1px dashed var(--color-border-accent); + border-radius: var(--radius-md); font-size: 1.3rem; margin-bottom: var(--space-4); + } + .contact-card h4 { font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-2); } + .contact-card p, .contact-card a { font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .btn-whatsapp { + display: inline-flex; align-items: center; gap: var(--space-2); + padding: var(--space-2) var(--space-5); background: #25D366; color: #fff; + border: none; border-radius: var(--radius-md); font-family: var(--font-body); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); cursor: pointer; + text-decoration: none; transition: all 0.25s ease; + box-shadow: 0 4px 0 #1aa84c, 0 6px 12px rgba(37,211,102,0.2); + } + .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1aa84c, 0 10px 24px rgba(37,211,102,0.3); text-decoration: none; } + + /* ══════════════════════════════════════════════════════════════════ + FOOTER + ══════════════════════════════════════════════════════════════════ */ + + .site-footer { border-top: 1px solid var(--color-border); padding: var(--space-10) 0 var(--space-6); position: relative; overflow: hidden; } + .footer-inner { display: flex; justify-content: space-between; align-items: flex-end; } + .footer-info { position: relative; z-index: 1; } + .footer-info .logo { font-size: var(--text-h5); display: block; margin-bottom: var(--space-2); } + .footer-info p { font-size: var(--text-caption); color: var(--color-text-muted); } + .footer-watermark { + font-family: var(--font-heading); font-size: clamp(4rem, 12vw, 10rem); + font-weight: var(--heading-weight-primary); color: var(--color-text-muted); + opacity: 0.06; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-tight); + user-select: none; white-space: nowrap; + } + + /* ── Responsive ── */ + @media (max-width: 768px) { + .header-nav { display: none; } + .hero h1 { font-size: clamp(2rem, 8vw, 3.5rem); } + .hero-content { padding: var(--space-6) var(--space-4); } + .hero-buttons { flex-direction: column; align-items: center; } + .hero-stats { flex-direction: column; align-items: center; gap: var(--space-4); } + .stat-card { width: 100%; max-width: 280px; } + .product-grid { grid-template-columns: 1fr; } + .steps { flex-direction: column; gap: var(--space-8); } + .steps::before { display: none; } + .diff-grid { grid-template-columns: repeat(2, 1fr); } + .brands-header { flex-direction: column; } + .brands-label { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3); } + .pricing-grid { grid-template-columns: 1fr; } + .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } + .footer-watermark { font-size: 4rem; } + } diff --git a/dashboard/landing.html b/dashboard/landing.html index e9433ab..65f1c46 100644 --- a/dashboard/landing.html +++ b/dashboard/landing.html @@ -12,425 +12,7 @@ })(); - + diff --git a/dashboard/landing.min.css b/dashboard/landing.min.css new file mode 100644 index 0000000..f3999b4 --- /dev/null +++ b/dashboard/landing.min.css @@ -0,0 +1,419 @@ +/* Extracted from landing.html */ + +/* ── Reset ── */ + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html { scroll-behavior: smooth; scrollbar-width: none; } + html::-webkit-scrollbar { width: 0; } + + body { + font-family: var(--font-body); + background: var(--color-bg-base); + color: var(--color-text-primary); + line-height: var(--leading-body); + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + } + a { color: var(--color-text-accent); text-decoration: none; } + a:hover { text-decoration: underline; } + .container { + max-width: var(--content-xl); + margin: 0 auto; + padding: 0 var(--space-6); + } + + /* ══════════════════════════════════════════════════════════════════ + HEADER — Glassmorphism sticky + ══════════════════════════════════════════════════════════════════ */ + + .site-header { + position: fixed; top: 0; left: 0; right: 0; + z-index: var(--z-sticky); + background: var(--glass-bg); + backdrop-filter: blur(var(--glass-blur)); + -webkit-backdrop-filter: blur(var(--glass-blur)); + border-bottom: 1px solid var(--glass-border); + transition: background 0.3s ease; + } + .site-header .container { + display: flex; align-items: center; justify-content: space-between; height: 64px; + } + .logo { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); + letter-spacing: var(--tracking-wide); text-transform: uppercase; text-decoration: none; + position: relative; + } + .logo::after { + content: ''; position: absolute; bottom: -4px; left: 0; right: 0; + height: 2px; background: var(--gradient-accent); border-radius: 1px; opacity: 0.6; filter: blur(2px); + } + .header-nav { display: flex; gap: var(--space-6); align-items: center; } + .header-nav a { + font-size: var(--text-body-sm); color: var(--color-text-secondary); + text-decoration: none; position: relative; padding: var(--space-1) 0; transition: color 0.2s ease; + } + .header-nav a:hover { color: var(--color-text-accent); text-decoration: none; } + .header-nav a::after { + content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; + background: var(--color-primary); transition: width 0.3s ease; + } + .header-nav a:hover::after { width: 100%; } + .header-actions { display: flex; gap: var(--space-3); align-items: center; } + .theme-toggle { + width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px dashed var(--glass-border); border-radius: var(--radius-md); + color: var(--color-text-muted); cursor: pointer; font-size: 1.1rem; transition: var(--transition-fast); + } + .theme-toggle:hover { + border-color: var(--color-border-accent); color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + + /* ── Buttons ── */ + .btn { + display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); + padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); + font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + cursor: pointer; border: 2px solid transparent; text-decoration: none; + transition: all 0.25s var(--ease-out); position: relative; overflow: hidden; + } + .btn:hover { text-decoration: none; } + .btn-primary { + background: var(--gradient-accent); color: var(--btn-primary-text); border: none; + box-shadow: 0 4px 0 var(--color-primary-active), 0 6px 12px var(--glow-color-soft); + } + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 0 var(--color-primary-active), 0 10px 24px var(--glow-color); + } + .btn-primary:active { + transform: translateY(2px); + box-shadow: 0 2px 0 var(--color-primary-active), 0 3px 8px var(--glow-color-soft); + } + .btn-primary::after { + content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; + background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); + transition: left 0.5s ease; + } + .btn-primary:hover::after { left: 120%; } + .btn-secondary { + background: var(--glass-bg); backdrop-filter: blur(8px); + color: var(--color-text-accent); border: 1px solid var(--color-border-accent); + } + .btn-secondary:hover { background: var(--color-primary-muted); box-shadow: 0 0 20px var(--glow-color-soft); } + .btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-body); border-radius: var(--radius-lg); } + + /* ══════════════════════════════════════════════════════════════════ + HERO + ══════════════════════════════════════════════════════════════════ */ + + .hero { + position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; + overflow: hidden; padding-top: 64px; + } + #heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } + .hero::after { + content: ''; position: absolute; inset: 0; + background: radial-gradient(ellipse 60% 50% at 50% 40%, var(--glow-color-soft) 0%, transparent 70%); + pointer-events: none; + } + .hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: var(--space-8) var(--space-6); } + .hero h1 { + font-family: var(--font-heading); font-size: clamp(2.5rem, 7vw, 4.5rem); + font-weight: var(--heading-weight-primary); line-height: 1.05; letter-spacing: var(--tracking-tight); + background: var(--gradient-text); background-size: 200% auto; + -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + animation: nx-shimmer 4s linear infinite; margin-bottom: var(--space-3); + } + .hero .subtitle { + font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--color-text-secondary); + margin-bottom: var(--space-2); max-width: 650px; margin-left: auto; margin-right: auto; + } + .hero .typewriter-line { + display: inline-block; font-family: var(--font-mono); font-size: var(--text-body-sm); + color: var(--color-text-muted); background: var(--glass-bg); backdrop-filter: blur(8px); + padding: var(--space-1) var(--space-4); border-radius: var(--radius-md); + border: 1px dashed var(--glass-border); margin-bottom: var(--space-8); min-height: 2em; + } + .typewriter-cursor { + display: inline-block; width: 2px; height: 1em; background: var(--color-primary); + vertical-align: text-bottom; margin-left: 2px; animation: nx-typewriter-cursor 0.8s ease infinite; + } + .hero-buttons { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-12); } + .hero-stats { display: flex; justify-content: center; gap: var(--space-6); flex-wrap: wrap; } + .stat-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-5) var(--space-8); text-align: center; min-width: 140px; + transition: all 0.3s var(--ease-out); + } + .stat-card:hover { border-color: var(--color-border-accent); box-shadow: 0 0 24px var(--glow-color-soft); transform: translateY(-4px); } + .stat-card .number { + font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); line-height: 1; + } + .stat-card .label { + font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); + text-transform: uppercase; letter-spacing: var(--tracking-widest); + } + + /* ══════════════════════════════════════════════════════════════════ + SECTION CHROME — Terminal style separator + ══════════════════════════════════════════════════════════════════ */ + + .section-chrome { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); + background: var(--glass-bg); backdrop-filter: blur(8px); + } + .chrome-dots { display: flex; gap: 6px; } + .chrome-dots span { width: 10px; height: 10px; border-radius: var(--radius-full); border: 1.5px solid var(--color-text-muted); opacity: 0.3; } + .chrome-label { + font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); + text-transform: uppercase; letter-spacing: var(--tracking-widest); + } + .chrome-star { color: var(--color-text-muted); opacity: 0.3; font-size: 14px; } + + /* ══════════════════════════════════════════════════════════════════ + PRODUCT SECTION — 3 columns with feature lists + ══════════════════════════════════════════════════════════════════ */ + + .product { padding: var(--space-16) 0; } + .section-title { + font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary); + text-align: center; margin-bottom: var(--space-3); letter-spacing: var(--heading-tracking-h2); + } + .section-subtitle { + text-align: center; font-size: var(--text-body); color: var(--color-text-secondary); + margin-bottom: var(--space-10); max-width: 600px; margin-left: auto; margin-right: auto; + } + .product-grid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); + } + .product-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-6); transition: all 0.35s var(--ease-out); position: relative; overflow: hidden; + } + .product-card::before { + content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; + border-radius: 3px 0 0 3px; + } + .product-card:hover { + border-color: var(--color-border-accent); + box-shadow: 0 8px 32px var(--glow-color-soft); + transform: translateY(-3px); + } + .product-card--orange::before { background: var(--color-primary); } + .product-card--cyan::before { background: #00D4FF; } + .product-card--green::before { background: #3FB950; } + + .product-card h3 { + font-family: var(--font-heading); font-size: var(--text-h6); + font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-4); + } + .product-card--orange h3 { color: var(--color-text-accent); } + .product-card--cyan h3 { color: #00D4FF; } + .product-card--green h3 { color: #3FB950; } + + .product-card ul { list-style: none; font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .product-card ul li { + padding: var(--space-1) 0; line-height: 1.8; + } + .product-card ul li::before { margin-right: var(--space-2); } + .product-card--orange ul li::before { content: '▸ '; color: var(--color-text-accent); } + .product-card--cyan ul li::before { content: '▸ '; color: #00D4FF; } + .product-card--green ul li::before { content: '▸ '; color: #3FB950; } + + /* Hardware banner */ + .hw-banner { + margin-top: var(--space-6); text-align: center; + } + .hw-banner-inner { + display: inline-flex; align-items: center; gap: var(--space-4); + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px dashed var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-8); transition: all 0.3s var(--ease-out); + } + .hw-banner-inner:hover { border-color: var(--color-border-accent); box-shadow: 0 0 20px var(--glow-color-soft); } + .hw-banner-inner span:first-child { font-size: 1.5rem; } + .hw-banner-inner .hw-text { font-size: var(--text-body-sm); color: var(--color-text-secondary); text-align: left; } + .hw-banner-inner .hw-text strong { color: var(--color-text-accent); } + + /* ══════════════════════════════════════════════════════════════════ + HOW IT WORKS — Timeline + ══════════════════════════════════════════════════════════════════ */ + + .how-it-works { padding: var(--space-16) 0; } + .steps { display: flex; justify-content: center; gap: 0; max-width: 900px; margin: 0 auto; position: relative; } + .steps::before { + content: ''; position: absolute; top: 28px; left: 15%; right: 15%; height: 2px; + background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent); opacity: 0.3; + } + .step { flex: 1; text-align: center; padding: 0 var(--space-4); position: relative; } + .step-number { + display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; + border-radius: var(--radius-full); background: var(--glass-bg); backdrop-filter: blur(8px); + border: 2px solid var(--color-border-accent); color: var(--color-text-accent); + font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight-primary); + margin-bottom: var(--space-4); position: relative; z-index: 1; transition: all 0.3s ease; + } + .step:hover .step-number { + box-shadow: 0 0 24px var(--glow-color), 0 0 48px var(--glow-color-soft); + background: var(--color-primary); color: var(--color-text-inverse); + } + .step h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-2); } + .step p { font-size: var(--text-body-sm); color: var(--color-text-secondary); } + + /* ══════════════════════════════════════════════════════════════════ + DIFFERENTIATOR — Competitive highlight + ══════════════════════════════════════════════════════════════════ */ + + .differentiator { padding: var(--space-16) 0; } + .diff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } + .diff-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-6); text-align: center; transition: all 0.3s var(--ease-out); + } + .diff-card:hover { border-color: var(--color-border-accent); box-shadow: 0 4px 20px var(--glow-color-soft); transform: translateY(-3px); } + .diff-icon { + width: 48px; height: 48px; margin: 0 auto var(--space-3); + display: flex; align-items: center; justify-content: center; + background: var(--color-primary-muted); border: 1px dashed var(--color-border-accent); + border-radius: var(--radius-md); font-size: 1.3rem; + } + .diff-card h4 { font-family: var(--font-heading); font-size: var(--text-body); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-1); } + .diff-card p { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ══════════════════════════════════════════════════════════════════ + BRANDS MARQUEE + ══════════════════════════════════════════════════════════════════ */ + + .brands-section { + padding: var(--space-12) 0; overflow: hidden; + border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); + } + .brands-header { display: flex; align-items: center; } + .brands-label { + flex-shrink: 0; width: 200px; padding: var(--space-6); + font-family: var(--font-heading); font-size: var(--text-body-sm); font-weight: var(--heading-weight-secondary); + color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-widest); + border-right: 1px solid var(--color-border); text-align: center; + } + .marquee-track { flex: 1; overflow: hidden; position: relative; padding: var(--space-4) 0; } + .marquee-track::before, .marquee-track::after { + content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; + } + .marquee-track::before { left: 0; background: linear-gradient(90deg, var(--color-bg-base), transparent); } + .marquee-track::after { right: 0; background: linear-gradient(270deg, var(--color-bg-base), transparent); } + .marquee-inner { display: flex; gap: var(--space-3); width: max-content; animation: nx-marquee 40s linear infinite; } + .marquee-inner:hover { animation-play-state: paused; } + .brand-tag { + display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); + background: var(--glass-bg); backdrop-filter: blur(8px); + border: 1px solid var(--glass-border); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); + white-space: nowrap; transition: all 0.25s ease; cursor: pointer; + } + .brand-tag:hover { + border-color: var(--color-border-accent); color: var(--color-text-accent); + box-shadow: 0 0 16px var(--glow-color-soft); text-decoration: none; + } + + /* ══════════════════════════════════════════════════════════════════ + PRICING PREVIEW + ══════════════════════════════════════════════════════════════════ */ + + .pricing { padding: var(--space-16) 0; } + .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); max-width: 900px; margin: 0 auto; } + .pricing-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-6); text-align: center; transition: all 0.3s var(--ease-out); + } + .pricing-card:hover { border-color: var(--color-border-accent); box-shadow: 0 8px 32px var(--glow-color-soft); transform: translateY(-3px); } + .pricing-card.featured { border-color: var(--color-border-accent); } + .pricing-card h4 { + font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-secondary); + margin-bottom: var(--space-2); color: var(--color-text-primary); + } + .pricing-price { + font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--heading-weight-primary); + color: var(--color-text-accent); margin-bottom: var(--space-1); + } + .pricing-period { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-4); } + .pricing-card ul { list-style: none; text-align: left; font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .pricing-card ul li { padding: 3px 0; } + .pricing-card ul li::before { content: '✓ '; color: var(--color-text-accent); } + + /* ══════════════════════════════════════════════════════════════════ + CONTACT + ══════════════════════════════════════════════════════════════════ */ + + .contact { padding: var(--space-16) 0; } + .contact-grid { + display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: var(--space-6); max-width: 900px; margin: 0 auto; + } + .contact-card { + background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-8); text-align: center; transition: all 0.3s var(--ease-out); + } + .contact-card:hover { border-color: var(--color-border-accent); box-shadow: 0 8px 32px var(--glow-color-soft); transform: translateY(-4px); } + .contact-icon { + width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; + background: var(--color-primary-muted); border: 1px dashed var(--color-border-accent); + border-radius: var(--radius-md); font-size: 1.3rem; margin-bottom: var(--space-4); + } + .contact-card h4 { font-family: var(--font-heading); font-size: var(--text-h6); font-weight: var(--heading-weight-secondary); margin-bottom: var(--space-2); } + .contact-card p, .contact-card a { font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .btn-whatsapp { + display: inline-flex; align-items: center; gap: var(--space-2); + padding: var(--space-2) var(--space-5); background: #25D366; color: #fff; + border: none; border-radius: var(--radius-md); font-family: var(--font-body); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); cursor: pointer; + text-decoration: none; transition: all 0.25s ease; + box-shadow: 0 4px 0 #1aa84c, 0 6px 12px rgba(37,211,102,0.2); + } + .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #1aa84c, 0 10px 24px rgba(37,211,102,0.3); text-decoration: none; } + + /* ══════════════════════════════════════════════════════════════════ + FOOTER + ══════════════════════════════════════════════════════════════════ */ + + .site-footer { border-top: 1px solid var(--color-border); padding: var(--space-10) 0 var(--space-6); position: relative; overflow: hidden; } + .footer-inner { display: flex; justify-content: space-between; align-items: flex-end; } + .footer-info { position: relative; z-index: 1; } + .footer-info .logo { font-size: var(--text-h5); display: block; margin-bottom: var(--space-2); } + .footer-info p { font-size: var(--text-caption); color: var(--color-text-muted); } + .footer-watermark { + font-family: var(--font-heading); font-size: clamp(4rem, 12vw, 10rem); + font-weight: var(--heading-weight-primary); color: var(--color-text-muted); + opacity: 0.06; line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-tight); + user-select: none; white-space: nowrap; + } + + /* ── Responsive ── */ + @media (max-width: 768px) { + .header-nav { display: none; } + .hero h1 { font-size: clamp(2rem, 8vw, 3.5rem); } + .hero-content { padding: var(--space-6) var(--space-4); } + .hero-buttons { flex-direction: column; align-items: center; } + .hero-stats { flex-direction: column; align-items: center; gap: var(--space-4); } + .stat-card { width: 100%; max-width: 280px; } + .product-grid { grid-template-columns: 1fr; } + .steps { flex-direction: column; gap: var(--space-8); } + .steps::before { display: none; } + .diff-grid { grid-template-columns: repeat(2, 1fr); } + .brands-header { flex-direction: column; } + .brands-label { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); padding: var(--space-3); } + .pricing-grid { grid-template-columns: 1fr; } + .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); } + .footer-watermark { font-size: 4rem; } + } diff --git a/pos/static/css/accounting.css b/pos/static/css/accounting.css new file mode 100644 index 0000000..3dd521a --- /dev/null +++ b/pos/static/css/accounting.css @@ -0,0 +1,1246 @@ +/* Extracted from accounting.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ---- Summary Cards ---- */ + + .summary-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .summary-strip { + background: transparent; + } + + .summary-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-3); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + .summary-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + [data-theme="industrial"] .summary-card { + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .summary-card { + background: var(--color-bg-overlay); + } + + .summary-card__icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .summary-card__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .summary-card__icon--success { background: rgba(34,197,94,.12); } + .summary-card__icon--success svg { stroke: var(--color-success); } + .summary-card__icon--error { background: rgba(239,68,68,.12); } + .summary-card__icon--error svg { stroke: var(--color-error); } + .summary-card__icon--warning { background: rgba(234,179,8,.12); } + .summary-card__icon--warning svg { stroke: var(--color-warning); } + + .summary-card__body { flex: 1; min-width: 0; } + + .summary-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .summary-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + color: var(--color-text-primary); + line-height: 1.1; + } + + .summary-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .summary-card__delta { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + margin-top: 2px; + } + + .summary-card__delta--up { color: var(--color-success); } + .summary-card__delta--down { color: var(--color-error); } + + /* ---- Tabs Row ---- */ + + .tabs-row { + display: flex; + align-items: stretch; + gap: 0; + padding: 0 var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + } + + .tabs-row::-webkit-scrollbar { display: none; } + + [data-theme="industrial"] .tabs-row { + background: var(--color-surface-1); + } + + .tab-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: relative; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 var(--space-1); + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + } + + .tab-btn.is-active .tab-btn__badge { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + .tab-btn__badge--alert { + background: rgba(239,68,68,.15); + color: var(--color-error); + } + + .tab-btn.is-active .tab-btn__badge--alert { + background: var(--color-error); + color: #fff; + } + + /* ---- Tab Panels ---- */ + + .tab-panels { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .tab-panels::-webkit-scrollbar { width: 6px; } + .tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .tab-panel { + display: none; + padding: var(--space-5) var(--space-6); + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TOOLBAR + ========================================================================= */ + + .toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + flex-wrap: wrap; + } + + .search-box { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + flex: 1; + min-width: 200px; + max-width: 360px; + transition: var(--transition-fast); + } + + .search-box:focus-within { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .search-box svg { + width: 15px; + height: 15px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .search-box input { + flex: 1; + background: transparent; + border: none; + outline: none; + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .search-box input::placeholder { + color: var(--color-text-muted); + } + + .select-filter { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .select-filter:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .toolbar__spacer { flex: 1; } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--danger { + background: var(--btn-danger-bg); + color: var(--btn-danger-text); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { + border-bottom: none; + } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-accent); + } + + .data-table .td--amount { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--right { + text-align: right; + } + + /* ========================================================================= + BADGES + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + .badge--ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--pending { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--overdue { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--partial { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--info { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + .badge--closed { + background: rgba(115, 115, 115, 0.15); + color: var(--color-text-muted); + } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination__pages { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .pagination__btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + cursor: pointer; + transition: var(--transition-fast); + } + + .pagination__btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .pagination__btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + /* ========================================================================= + FINANCIAL CARDS / REPORT PANELS + ========================================================================= */ + + .finance-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-4); + } + + .finance-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .finance-card { + background: var(--color-bg-overlay); + } + + .finance-card__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .finance-card__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body); + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + } + + .finance-card__row { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-2) 0; + border-bottom: 1px solid var(--color-border); + font-size: var(--text-body-sm); + } + + .finance-card__row:last-child { + border-bottom: none; + } + + .finance-card__row--total { + border-top: 2px solid var(--color-border-strong); + border-bottom: none; + font-weight: var(--font-weight-bold); + padding-top: var(--space-3); + margin-top: var(--space-2); + } + + .finance-card__row-label { + color: var(--color-text-secondary); + } + + .finance-card__row-value { + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .finance-card__row-value--positive { color: var(--color-success); } + .finance-card__row-value--negative { color: var(--color-error); } + + /* Balance sheet indented rows */ + .finance-card__row--indent { + padding-left: var(--space-5); + } + + .finance-card__row--section { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + padding-top: var(--space-3); + margin-top: var(--space-2); + border-top: 1px solid var(--color-border); + border-bottom: none; + } + + /* ========================================================================= + CHART PLACEHOLDER + ========================================================================= */ + + .chart-placeholder { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-8); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-3); + min-height: 200px; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .chart-placeholder { + background: var(--color-bg-overlay); + } + + .chart-placeholder svg { + width: 48px; + height: 48px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 1.5; + stroke-linecap: round; + stroke-linejoin: round; + opacity: 0.5; + } + + .chart-placeholder__label { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-style: italic; + } + + /* ========================================================================= + CONCILIATION MATCH ROWS + ========================================================================= */ + + .match-row { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: var(--space-4); + align-items: center; + padding: var(--space-3) var(--space-4); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--space-3); + } + + [data-theme="modern"] .match-row { + background: var(--color-bg-overlay); + } + + .match-row__side { + display: flex; + flex-direction: column; + gap: 2px; + } + + .match-row__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + } + + .match-row__amount { + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .match-row__desc { + font-size: var(--text-caption); + color: var(--color-text-secondary); + } + + .match-row__connector { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--radius-full); + background: var(--color-primary-muted); + } + + .match-row__connector svg { + width: 18px; + height: 18px; + stroke: var(--color-primary); + fill: none; + stroke-width: 2; + stroke-linecap: round; + } + + .match-row--matched { + border-color: var(--color-success); + background: rgba(34, 197, 94, 0.04); + } + + .match-row--unmatched { + border-color: var(--color-warning); + } + + /* ========================================================================= + CHECKLIST (Cierre de Mes) + ========================================================================= */ + + .checklist { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + .checklist-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + transition: var(--transition-fast); + } + + [data-theme="modern"] .checklist-item { + background: var(--color-bg-overlay); + } + + .checklist-item:hover { + border-color: var(--color-border-strong); + } + + .checklist-item__check { + width: 22px; + height: 22px; + border-radius: var(--radius-sm); + border: 2px solid var(--color-border-strong); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + cursor: pointer; + transition: var(--transition-fast); + } + + .checklist-item__check svg { + width: 14px; + height: 14px; + stroke: transparent; + stroke-width: 2.5; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + } + + .checklist-item--done .checklist-item__check { + background: var(--color-success); + border-color: var(--color-success); + } + + .checklist-item--done .checklist-item__check svg { + stroke: #fff; + } + + .checklist-item__body { flex: 1; } + + .checklist-item__title { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + font-size: var(--text-body-sm); + } + + .checklist-item--done .checklist-item__title { + text-decoration: line-through; + color: var(--color-text-muted); + } + + .checklist-item__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .checklist-item__badge { + flex-shrink: 0; + } + + /* ========================================================================= + SECTION HEADER (within tabs) + ========================================================================= */ + + .section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .section-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + } + + [data-theme="industrial"] .section-title { + text-transform: uppercase; + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .sidebar { width: 60px; } + .brand-name__primary, + .brand-name__sub, + .nav-section-label, + .sidebar__user-info { display: none; } + .sidebar__brand { justify-content: center; padding: var(--space-3); } + .nav-item { justify-content: center; padding: var(--space-2) var(--space-2); border-left: none; border-bottom: 3px solid transparent; } + .nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); } + .sidebar__footer { justify-content: center; } + .summary-strip { grid-template-columns: repeat(2, 1fr); } + } + + @media (max-width: 768px) { + .summary-strip { grid-template-columns: 1fr; } + .finance-grid { grid-template-columns: 1fr; } + } diff --git a/pos/static/css/accounting.min.css b/pos/static/css/accounting.min.css new file mode 100644 index 0000000..3dd521a --- /dev/null +++ b/pos/static/css/accounting.min.css @@ -0,0 +1,1246 @@ +/* Extracted from accounting.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ---- Summary Cards ---- */ + + .summary-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .summary-strip { + background: transparent; + } + + .summary-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-3); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + .summary-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + [data-theme="industrial"] .summary-card { + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .summary-card { + background: var(--color-bg-overlay); + } + + .summary-card__icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .summary-card__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .summary-card__icon--success { background: rgba(34,197,94,.12); } + .summary-card__icon--success svg { stroke: var(--color-success); } + .summary-card__icon--error { background: rgba(239,68,68,.12); } + .summary-card__icon--error svg { stroke: var(--color-error); } + .summary-card__icon--warning { background: rgba(234,179,8,.12); } + .summary-card__icon--warning svg { stroke: var(--color-warning); } + + .summary-card__body { flex: 1; min-width: 0; } + + .summary-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .summary-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + color: var(--color-text-primary); + line-height: 1.1; + } + + .summary-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .summary-card__delta { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + margin-top: 2px; + } + + .summary-card__delta--up { color: var(--color-success); } + .summary-card__delta--down { color: var(--color-error); } + + /* ---- Tabs Row ---- */ + + .tabs-row { + display: flex; + align-items: stretch; + gap: 0; + padding: 0 var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + } + + .tabs-row::-webkit-scrollbar { display: none; } + + [data-theme="industrial"] .tabs-row { + background: var(--color-surface-1); + } + + .tab-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: relative; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 var(--space-1); + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + } + + .tab-btn.is-active .tab-btn__badge { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + .tab-btn__badge--alert { + background: rgba(239,68,68,.15); + color: var(--color-error); + } + + .tab-btn.is-active .tab-btn__badge--alert { + background: var(--color-error); + color: #fff; + } + + /* ---- Tab Panels ---- */ + + .tab-panels { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .tab-panels::-webkit-scrollbar { width: 6px; } + .tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .tab-panel { + display: none; + padding: var(--space-5) var(--space-6); + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TOOLBAR + ========================================================================= */ + + .toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + flex-wrap: wrap; + } + + .search-box { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + flex: 1; + min-width: 200px; + max-width: 360px; + transition: var(--transition-fast); + } + + .search-box:focus-within { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .search-box svg { + width: 15px; + height: 15px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .search-box input { + flex: 1; + background: transparent; + border: none; + outline: none; + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .search-box input::placeholder { + color: var(--color-text-muted); + } + + .select-filter { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .select-filter:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .toolbar__spacer { flex: 1; } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--danger { + background: var(--btn-danger-bg); + color: var(--btn-danger-text); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { + border-bottom: none; + } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-accent); + } + + .data-table .td--amount { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--right { + text-align: right; + } + + /* ========================================================================= + BADGES + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + .badge--ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--pending { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--overdue { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--partial { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--info { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + .badge--closed { + background: rgba(115, 115, 115, 0.15); + color: var(--color-text-muted); + } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination__pages { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .pagination__btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + cursor: pointer; + transition: var(--transition-fast); + } + + .pagination__btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .pagination__btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + /* ========================================================================= + FINANCIAL CARDS / REPORT PANELS + ========================================================================= */ + + .finance-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-4); + } + + .finance-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .finance-card { + background: var(--color-bg-overlay); + } + + .finance-card__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .finance-card__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body); + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + } + + .finance-card__row { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-2) 0; + border-bottom: 1px solid var(--color-border); + font-size: var(--text-body-sm); + } + + .finance-card__row:last-child { + border-bottom: none; + } + + .finance-card__row--total { + border-top: 2px solid var(--color-border-strong); + border-bottom: none; + font-weight: var(--font-weight-bold); + padding-top: var(--space-3); + margin-top: var(--space-2); + } + + .finance-card__row-label { + color: var(--color-text-secondary); + } + + .finance-card__row-value { + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .finance-card__row-value--positive { color: var(--color-success); } + .finance-card__row-value--negative { color: var(--color-error); } + + /* Balance sheet indented rows */ + .finance-card__row--indent { + padding-left: var(--space-5); + } + + .finance-card__row--section { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + padding-top: var(--space-3); + margin-top: var(--space-2); + border-top: 1px solid var(--color-border); + border-bottom: none; + } + + /* ========================================================================= + CHART PLACEHOLDER + ========================================================================= */ + + .chart-placeholder { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-8); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-3); + min-height: 200px; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .chart-placeholder { + background: var(--color-bg-overlay); + } + + .chart-placeholder svg { + width: 48px; + height: 48px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 1.5; + stroke-linecap: round; + stroke-linejoin: round; + opacity: 0.5; + } + + .chart-placeholder__label { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-style: italic; + } + + /* ========================================================================= + CONCILIATION MATCH ROWS + ========================================================================= */ + + .match-row { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: var(--space-4); + align-items: center; + padding: var(--space-3) var(--space-4); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--space-3); + } + + [data-theme="modern"] .match-row { + background: var(--color-bg-overlay); + } + + .match-row__side { + display: flex; + flex-direction: column; + gap: 2px; + } + + .match-row__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + } + + .match-row__amount { + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .match-row__desc { + font-size: var(--text-caption); + color: var(--color-text-secondary); + } + + .match-row__connector { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--radius-full); + background: var(--color-primary-muted); + } + + .match-row__connector svg { + width: 18px; + height: 18px; + stroke: var(--color-primary); + fill: none; + stroke-width: 2; + stroke-linecap: round; + } + + .match-row--matched { + border-color: var(--color-success); + background: rgba(34, 197, 94, 0.04); + } + + .match-row--unmatched { + border-color: var(--color-warning); + } + + /* ========================================================================= + CHECKLIST (Cierre de Mes) + ========================================================================= */ + + .checklist { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + .checklist-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + transition: var(--transition-fast); + } + + [data-theme="modern"] .checklist-item { + background: var(--color-bg-overlay); + } + + .checklist-item:hover { + border-color: var(--color-border-strong); + } + + .checklist-item__check { + width: 22px; + height: 22px; + border-radius: var(--radius-sm); + border: 2px solid var(--color-border-strong); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + cursor: pointer; + transition: var(--transition-fast); + } + + .checklist-item__check svg { + width: 14px; + height: 14px; + stroke: transparent; + stroke-width: 2.5; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + } + + .checklist-item--done .checklist-item__check { + background: var(--color-success); + border-color: var(--color-success); + } + + .checklist-item--done .checklist-item__check svg { + stroke: #fff; + } + + .checklist-item__body { flex: 1; } + + .checklist-item__title { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + font-size: var(--text-body-sm); + } + + .checklist-item--done .checklist-item__title { + text-decoration: line-through; + color: var(--color-text-muted); + } + + .checklist-item__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .checklist-item__badge { + flex-shrink: 0; + } + + /* ========================================================================= + SECTION HEADER (within tabs) + ========================================================================= */ + + .section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .section-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + } + + [data-theme="industrial"] .section-title { + text-transform: uppercase; + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .sidebar { width: 60px; } + .brand-name__primary, + .brand-name__sub, + .nav-section-label, + .sidebar__user-info { display: none; } + .sidebar__brand { justify-content: center; padding: var(--space-3); } + .nav-item { justify-content: center; padding: var(--space-2) var(--space-2); border-left: none; border-bottom: 3px solid transparent; } + .nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); } + .sidebar__footer { justify-content: center; } + .summary-strip { grid-template-columns: repeat(2, 1fr); } + } + + @media (max-width: 768px) { + .summary-strip { grid-template-columns: 1fr; } + .finance-grid { grid-template-columns: 1fr; } + } diff --git a/pos/static/css/catalog.css b/pos/static/css/catalog.css new file mode 100644 index 0000000..0abd791 --- /dev/null +++ b/pos/static/css/catalog.css @@ -0,0 +1,555 @@ +/* Extracted from catalog.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { height: 100%; } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { display: flex; height: 100vh; padding-top: 36px; } + + /* ========================================================================= + SIDEBAR (shared pattern) + ========================================================================= */ + + .sidebar { + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; + background: var(--color-bg-elevated); border-right: 1px solid var(--color-border); + overflow-y: auto; transition: var(--transition-normal); + } + .sidebar__brand { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .brand-logo { + width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: 1.375rem; letter-spacing: var(--tracking-tight); flex-shrink: 0; + } + [data-theme="industrial"] .brand-logo { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); border-radius: 0; } + [data-theme="modern"] .brand-logo { border-radius: var(--radius-md); } + .brand-name { display: flex; flex-direction: column; line-height: 1; } + .brand-name__primary { font-family: var(--font-heading); font-weight: var(--heading-weight-primary); font-size: 1.125rem; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); text-transform: uppercase; } + .brand-name__sub { font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 2px; } + + .sidebar__nav { flex: 1; padding: var(--space-3) 0; } + .nav-section-label { padding: var(--space-3) var(--space-5) var(--space-1); font-size: var(--text-caption); font-family: var(--font-body); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: var(--tracking-widest); text-transform: uppercase; } + .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: var(--transition-fast); border-left: 3px solid transparent; } + .nav-item:hover { background: var(--color-primary-muted); color: var(--color-text-primary); border-left-color: var(--color-primary); } + .nav-item.is-active { background: var(--color-primary-muted); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-left-color: var(--color-primary); } + [data-theme="industrial"] .nav-item.is-active { background: rgba(245, 166, 35, 0.12); } + .nav-item__icon { width: 18px; height: 18px; opacity: 0.75; flex-shrink: 0; } + .nav-item.is-active .nav-item__icon, .nav-item:hover .nav-item__icon { opacity: 1; } + .nav-item__badge { margin-left: auto; background: var(--color-primary); color: var(--color-text-inverse); font-size: 10px; font-weight: var(--font-weight-bold); padding: 1px 6px; border-radius: var(--radius-full); line-height: 1.4; } + + .sidebar__profile { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } + .profile-avatar { width: 36px; height: 36px; background: var(--color-primary); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--heading-weight-primary); font-size: 0.9rem; flex-shrink: 0; } + [data-theme="industrial"] .profile-avatar { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } + [data-theme="modern"] .profile-avatar { border-radius: var(--radius-full); } + .profile-info { flex: 1; min-width: 0; } + .profile-info__name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .profile-info__role { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } + + /* Header with breadcrumb + search */ + .content-header { + display: flex; align-items: center; justify-content: space-between; + padding: 0 var(--space-6); height: 56px; flex-shrink: 0; + background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); + } + + .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-muted); flex-wrap: wrap; } + .breadcrumb__link { color: var(--color-text-muted); text-decoration: none; cursor: pointer; transition: var(--transition-fast); } + .breadcrumb__link:hover { color: var(--color-primary); } + .breadcrumb__sep { color: var(--color-text-disabled); } + .breadcrumb__current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); } + + .header-actions { display: flex; align-items: center; gap: var(--space-3); } + + /* ── Catalog mode toggle (OEM / Local) ── */ + .mode-toggle { + display: inline-flex; + padding: 3px; + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px dashed var(--glass-border); + border-radius: var(--radius-md); + gap: 2px; + flex-shrink: 0; + } + .mode-toggle button { + background: transparent; + border: none; + color: var(--color-text-muted); + padding: 4px 12px; + border-radius: calc(var(--radius-md) - 3px); + font-family: var(--font-mono); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + cursor: pointer; + transition: all 0.2s var(--ease-out); + } + .mode-toggle button:hover { + color: var(--color-text-accent); + } + .mode-toggle button.is-active { + background: var(--color-primary-muted); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + + /* Search bar */ + .search-bar { + display: flex; align-items: center; gap: var(--space-2); + background: var(--color-bg-overlay); border: 1px solid var(--color-border); + padding: var(--space-1) var(--space-3); width: 360px; transition: var(--transition-fast); + } + [data-theme="industrial"] .search-bar { border-radius: 0; } + [data-theme="modern"] .search-bar { border-radius: var(--radius-md); } + .search-bar:focus-within { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } + .search-bar svg { color: var(--color-text-muted); flex-shrink: 0; } + .search-bar input { + flex: 1; border: none; background: transparent; color: var(--color-text-primary); + font-family: var(--font-body); font-size: var(--text-body-sm); outline: none; + height: 32px; + } + .search-bar input::placeholder { color: var(--color-text-disabled); } + + /* Search dropdown */ + .search-dropdown { + position: absolute; top: 100%; left: 0; right: 0; + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + box-shadow: var(--shadow-lg); max-height: 400px; overflow-y: auto; + display: none; z-index: var(--z-dropdown); + } + [data-theme="industrial"] .search-dropdown { border-radius: 0; } + [data-theme="modern"] .search-dropdown { border-radius: var(--radius-md); } + .search-dropdown.is-visible { display: block; } + .search-result-item { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); cursor: pointer; + border-bottom: 1px solid var(--color-border); transition: var(--transition-fast); + } + .search-result-item:hover { background: var(--color-primary-muted); } + .search-result-item:last-child { border-bottom: none; } + .search-result__oem { font-weight: var(--font-weight-semibold); color: var(--color-primary); font-size: var(--text-body-sm); } + .search-result__name { color: var(--color-text-primary); font-size: var(--text-body-sm); } + .search-result__vehicle { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ========================================================================= + PAGE BODY + ========================================================================= */ + + .page-body { + flex: 1; overflow-y: auto; padding: var(--space-6); + display: flex; flex-direction: column; gap: var(--space-5); + } + [data-theme="modern"] .page-body { + background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* Level title */ + .level-title { + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); color: var(--color-text-primary); + letter-spacing: var(--tracking-wide); text-transform: uppercase; + } + [data-theme="industrial"] .level-title { color: var(--color-primary); } + + /* Filter input (quick filter within level) */ + .level-filter { + padding: var(--space-2) var(--space-3); + background: var(--color-bg-overlay); border: 1px solid var(--color-border); + color: var(--color-text-primary); font-family: var(--font-body); + font-size: var(--text-body-sm); outline: none; width: 100%; max-width: 400px; + transition: var(--transition-fast); + } + [data-theme="industrial"] .level-filter { border-radius: 0; } + [data-theme="modern"] .level-filter { border-radius: var(--radius-md); } + .level-filter:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } + + /* ========================================================================= + NAVIGATION CARDS + ========================================================================= */ + + .nav-grid { + display: grid; gap: var(--space-4); + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + } + .nav-grid--years { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + } + .nav-grid--parts { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + } + + .nav-card { + display: flex; flex-direction: column; justify-content: center; align-items: center; + padding: var(--space-5) var(--space-4); gap: var(--space-2); + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + cursor: pointer; transition: var(--transition-fast); text-align: center; + box-shadow: var(--shadow-sm); min-height: 80px; + } + [data-theme="industrial"] .nav-card { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } + [data-theme="modern"] .nav-card { border-radius: var(--radius-lg); } + .nav-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } + .nav-card__name { font-family: var(--font-heading); font-weight: var(--heading-weight-secondary); font-size: var(--text-body); color: var(--color-text-primary); letter-spacing: var(--tracking-wide); } + .nav-card__sub { font-size: var(--text-caption); color: var(--color-text-muted); } + .nav-card__count { font-size: var(--text-caption); color: var(--color-primary); font-weight: var(--font-weight-semibold); } + + /* Year buttons (compact) */ + .nav-card--year { min-height: 48px; padding: var(--space-3); } + .nav-card--year .nav-card__name { font-size: var(--text-h5); } + + /* ========================================================================= + PART CARDS + ========================================================================= */ + + .part-card { + display: flex; flex-direction: column; + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition-fast); + overflow: hidden; + } + [data-theme="industrial"] .part-card { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } + [data-theme="modern"] .part-card { border-radius: var(--radius-lg); } + .part-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } + + .part-card__image { + height: 120px; display: flex; align-items: center; justify-content: center; + background: var(--color-bg-overlay); position: relative; overflow: hidden; + color: var(--color-text-disabled); + } + .part-card__image img { width: 100%; height: 100%; object-fit: contain; } + + .part-card__body { padding: var(--space-3) var(--space-4); flex: 1; } + .part-card__oem { font-family: var(--font-mono, monospace); font-size: var(--text-caption); color: var(--color-primary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } + .part-card__oem-sub { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-text-muted); font-weight: var(--font-weight-regular); } + .part-card__name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.3; } + + /* Local mode — manufacturer badge + priority tier */ + .part-card__manu { + display: inline-flex; align-items: center; gap: 4px; + padding: 2px 8px; margin-bottom: var(--space-1); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + font-size: 10px; + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: var(--color-text-secondary); + } + .part-card__manu .manu-tier { + color: var(--color-primary); + font-size: 11px; + } + .part-card--tier1 { + border-color: var(--color-border-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .part-card--tier1 .part-card__manu { + background: var(--color-primary-muted); + border-color: var(--color-border-accent); + color: var(--color-text-accent); + } + .part-card--tier2 .part-card__manu { + border-color: var(--color-border-strong); + } + + .part-card__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; align-items: center; justify-content: space-between; + } + .part-card__price { font-weight: var(--font-weight-bold); color: var(--color-text-primary); } + + /* Stock badges */ + .stock-badge { + display: inline-flex; align-items: center; gap: 4px; + font-size: 11px; font-weight: var(--font-weight-bold); + padding: 2px 8px; border-radius: var(--radius-full); + } + .stock-badge--local { background: var(--color-success-light); color: var(--color-success-dark); } + .stock-badge--bodega { background: var(--color-warning-light); color: var(--color-warning-dark); } + .stock-badge--none { background: var(--color-neutral-200); color: var(--color-neutral-600); } + [data-theme="industrial"] .stock-badge--none { background: var(--color-neutral-700); color: var(--color-neutral-400); } + + /* ========================================================================= + DETAIL PANEL (slide-in from right) + ========================================================================= */ + + .detail-overlay { + position: fixed; inset: 0; z-index: calc(var(--z-modal) - 2); + background: rgba(0,0,0,0.3); backdrop-filter: blur(2px); display: none; + } + .detail-overlay.is-visible { display: block; } + + .detail-panel { + position: fixed; top: 0; right: 0; bottom: 0; + width: 440px; max-width: 100vw; z-index: calc(var(--z-modal) - 1); + background: var(--color-bg-elevated); border-left: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); display: flex; flex-direction: column; + transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-in-out); + } + .detail-panel.is-open { transform: translateX(0); } + + .detail-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .detail-header h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); color: var(--color-text-primary); } + .detail-close { + background: none; border: none; cursor: pointer; font-size: 1.4rem; + color: var(--color-text-secondary); padding: var(--space-1); + } + .detail-close:hover { color: var(--color-text-primary); } + + .detail-body { flex: 1; overflow-y: auto; padding: var(--space-5); } + + .detail-section { margin-bottom: var(--space-5); } + .detail-section__title { + font-family: var(--font-heading); font-size: var(--text-body-sm); + font-weight: var(--heading-weight-secondary); color: var(--color-text-muted); + text-transform: uppercase; letter-spacing: var(--tracking-wider); + margin-bottom: var(--space-3); padding-bottom: var(--space-2); + border-bottom: 1px solid var(--color-border); + } + + .detail-oem { font-family: var(--font-mono, monospace); font-size: var(--text-h5); color: var(--color-primary); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); } + .detail-name { font-size: var(--text-body); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); } + .detail-desc { font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.5; } + + /* Stock info */ + .stock-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; } + .stock-label { font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .stock-value { font-weight: var(--font-weight-bold); font-size: var(--text-body-sm); } + .stock-value--ok { color: var(--color-success); } + .stock-value--zero { color: var(--color-text-muted); } + + /* Bodega table */ + .bodega-table { width: 100%; font-size: var(--text-body-sm); border-collapse: collapse; } + .bodega-table th { text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); } + .bodega-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); } + + /* Alternatives list */ + .alt-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } + .alt-item:last-child { border-bottom: none; } + .alt-item__pn { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--text-body-sm); } + .alt-item__mfr { font-size: var(--text-caption); color: var(--color-text-muted); } + .alt-item__stock { font-size: var(--text-caption); } + + /* Add to cart section */ + .detail-footer { + padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); + flex-shrink: 0; background: var(--color-bg-elevated); + } + .qty-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } + .qty-btn { + width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; + border: 1px solid var(--color-border); background: var(--color-bg-base); + color: var(--color-text-primary); cursor: pointer; font-size: 1.2rem; + transition: var(--transition-fast); + } + [data-theme="industrial"] .qty-btn { border-radius: 0; } + [data-theme="modern"] .qty-btn { border-radius: var(--radius-sm); } + .qty-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } + .qty-display { font-weight: var(--font-weight-bold); font-size: var(--text-body); min-width: 30px; text-align: center; } + + /* Buttons */ + .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-5); height: 40px; font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); border: 1px solid transparent; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; letter-spacing: var(--tracking-wide); } + [data-theme="industrial"] .btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); text-transform: uppercase; } + [data-theme="modern"] .btn { border-radius: var(--radius-md); } + .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border); } + .btn-primary:hover { background: var(--btn-primary-bg-hover); } + .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } + .btn-ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); } + .btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) 0; } + .page-item { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--transition-fast); } + [data-theme="industrial"] .page-item { border-radius: 0; } + [data-theme="modern"] .page-item { border-radius: var(--radius-md); } + .page-item:hover { border-color: var(--color-primary); color: var(--color-primary); } + .page-item.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } + .page-item.is-disabled { opacity: 0.4; cursor: not-allowed; } + .page-item--wide { padding: 0 var(--space-4); gap: var(--space-2); } + + /* ========================================================================= + EMPTY STATE + ========================================================================= */ + + .empty-state { + display: none; flex-direction: column; align-items: center; justify-content: center; + padding: var(--space-10) var(--space-6); text-align: center; gap: var(--space-3); + } + .empty-state.is-visible { display: flex; } + .empty-state__title { font-family: var(--font-heading); font-weight: var(--heading-weight-secondary); font-size: var(--text-h4); color: var(--color-text-primary); } + .empty-state__subtitle { font-size: var(--text-body-sm); color: var(--color-text-muted); max-width: 400px; } + + /* ========================================================================= + LOADING SPINNER + ========================================================================= */ + + .loading { display: none; justify-content: center; padding: var(--space-10); } + .loading.is-visible { display: flex; } + .spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } + @keyframes spin { to { transform: rotate(360deg); } } + + /* ========================================================================= + CART FAB + SIDEBAR + ========================================================================= */ + + .cart-fab { + position: fixed; bottom: var(--space-6); right: var(--space-6); + width: 56px; height: 56px; z-index: var(--z-sticky); + display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + border: none; cursor: pointer; box-shadow: var(--shadow-lg); + transition: var(--transition-fast); + } + [data-theme="industrial"] .cart-fab { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); } + [data-theme="modern"] .cart-fab { border-radius: var(--radius-full); } + .cart-fab:hover { transform: scale(1.08); } + .cart-fab__badge { + position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; + padding: 0 5px; border-radius: var(--radius-full); + background: var(--color-error); color: #fff; font-size: 11px; + font-weight: var(--font-weight-bold); display: none; + align-items: center; justify-content: center; line-height: 1; + } + + .cart-sidebar { + position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100vw; + z-index: var(--z-modal); background: var(--color-bg-elevated); + border-left: 1px solid var(--color-border); box-shadow: var(--shadow-xl); + display: flex; flex-direction: column; + transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-in-out); + } + .cart-sidebar.open { transform: translateX(0); } + + .cart-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } + .cart-header h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); color: var(--color-text-primary); } + .cart-items { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); } + .cart-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } + .cart-item:last-child { border-bottom: none; } + .cart-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); flex-shrink: 0; background: var(--color-bg-elevated); } + .cart-totals { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .cart-overlay { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(0,0,0,0.3); backdrop-filter: blur(2px); display: none; } + .cart-overlay.open { display: block; } + + /* ========================================================================= + THEME BAR + ========================================================================= */ + + .theme-bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-bg-overlay); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px); height: 36px; } + .theme-bar__label { font-size: var(--text-caption); color: var(--color-text-muted); font-family: var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; } + .theme-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--transition-fast); } + .theme-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } + .theme-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + /* ── Vehicle Selector ── */ + .vehicle-selector { + background: var(--color-bg-elevated); + border-bottom: 2px solid var(--color-primary-muted, rgba(245,166,35,0.2)); + padding: var(--space-3) var(--space-5); + flex-shrink: 0; + } + .vehicle-selector__inner { + display: flex; + align-items: flex-end; + gap: var(--space-3); + flex-wrap: wrap; + } + .vs-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; } + .vs-label { + font-size: var(--text-caption, 0.75rem); + font-weight: var(--font-weight-semibold, 600); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider, 0.04em); + } + .vs-select { + padding: var(--space-2) var(--space-3); + background: var(--color-bg-base); + color: var(--color-text-primary); + border: 1px solid var(--color-border); + font-family: var(--font-body); + font-size: var(--text-body-sm, 0.875rem); + cursor: pointer; + transition: var(--transition-fast); + appearance: auto; + } + [data-theme="industrial"] .vs-select { border-radius: 0; } + [data-theme="modern"] .vs-select { border-radius: var(--radius-md); } + .vs-select:focus { border-color: var(--color-primary); outline: none; box-shadow: var(--shadow-focus); } + .vs-select:disabled { opacity: 0.4; cursor: not-allowed; } + .vs-arrow { + color: var(--color-primary); + font-size: 1.4rem; + font-weight: 700; + padding-bottom: 6px; + flex-shrink: 0; + } + .vs-clear { + background: none; + border: 1px solid var(--color-border); + color: var(--color-text-muted); + padding: var(--space-2) var(--space-3); + cursor: pointer; + font-size: 1rem; + transition: var(--transition-fast); + } + [data-theme="industrial"] .vs-clear { border-radius: 0; } + [data-theme="modern"] .vs-clear { border-radius: var(--radius-md); } + .vs-clear:hover { color: var(--color-error); border-color: var(--color-error); } + + @media (max-width: 768px) { + .sidebar { position: fixed; left: -260px; z-index: var(--z-modal); transition: left var(--duration-normal) var(--ease-in-out); height: 100vh; } + .sidebar.is-open { left: 0; } + .search-bar { width: 200px; } + .detail-panel { width: 100%; } + .nav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } + .vehicle-selector__inner { flex-direction: column; } + .vs-arrow { display: none; } + } diff --git a/pos/static/css/catalog.min.css b/pos/static/css/catalog.min.css new file mode 100644 index 0000000..0abd791 --- /dev/null +++ b/pos/static/css/catalog.min.css @@ -0,0 +1,555 @@ +/* Extracted from catalog.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { height: 100%; } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { display: flex; height: 100vh; padding-top: 36px; } + + /* ========================================================================= + SIDEBAR (shared pattern) + ========================================================================= */ + + .sidebar { + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; + background: var(--color-bg-elevated); border-right: 1px solid var(--color-border); + overflow-y: auto; transition: var(--transition-normal); + } + .sidebar__brand { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .brand-logo { + width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: 1.375rem; letter-spacing: var(--tracking-tight); flex-shrink: 0; + } + [data-theme="industrial"] .brand-logo { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); border-radius: 0; } + [data-theme="modern"] .brand-logo { border-radius: var(--radius-md); } + .brand-name { display: flex; flex-direction: column; line-height: 1; } + .brand-name__primary { font-family: var(--font-heading); font-weight: var(--heading-weight-primary); font-size: 1.125rem; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); text-transform: uppercase; } + .brand-name__sub { font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 2px; } + + .sidebar__nav { flex: 1; padding: var(--space-3) 0; } + .nav-section-label { padding: var(--space-3) var(--space-5) var(--space-1); font-size: var(--text-caption); font-family: var(--font-body); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: var(--tracking-widest); text-transform: uppercase; } + .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: var(--transition-fast); border-left: 3px solid transparent; } + .nav-item:hover { background: var(--color-primary-muted); color: var(--color-text-primary); border-left-color: var(--color-primary); } + .nav-item.is-active { background: var(--color-primary-muted); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-left-color: var(--color-primary); } + [data-theme="industrial"] .nav-item.is-active { background: rgba(245, 166, 35, 0.12); } + .nav-item__icon { width: 18px; height: 18px; opacity: 0.75; flex-shrink: 0; } + .nav-item.is-active .nav-item__icon, .nav-item:hover .nav-item__icon { opacity: 1; } + .nav-item__badge { margin-left: auto; background: var(--color-primary); color: var(--color-text-inverse); font-size: 10px; font-weight: var(--font-weight-bold); padding: 1px 6px; border-radius: var(--radius-full); line-height: 1.4; } + + .sidebar__profile { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } + .profile-avatar { width: 36px; height: 36px; background: var(--color-primary); color: var(--color-text-inverse); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--heading-weight-primary); font-size: 0.9rem; flex-shrink: 0; } + [data-theme="industrial"] .profile-avatar { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); } + [data-theme="modern"] .profile-avatar { border-radius: var(--radius-full); } + .profile-info { flex: 1; min-width: 0; } + .profile-info__name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .profile-info__role { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } + + /* Header with breadcrumb + search */ + .content-header { + display: flex; align-items: center; justify-content: space-between; + padding: 0 var(--space-6); height: 56px; flex-shrink: 0; + background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); + } + + .breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-muted); flex-wrap: wrap; } + .breadcrumb__link { color: var(--color-text-muted); text-decoration: none; cursor: pointer; transition: var(--transition-fast); } + .breadcrumb__link:hover { color: var(--color-primary); } + .breadcrumb__sep { color: var(--color-text-disabled); } + .breadcrumb__current { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); } + + .header-actions { display: flex; align-items: center; gap: var(--space-3); } + + /* ── Catalog mode toggle (OEM / Local) ── */ + .mode-toggle { + display: inline-flex; + padding: 3px; + background: var(--glass-bg); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px dashed var(--glass-border); + border-radius: var(--radius-md); + gap: 2px; + flex-shrink: 0; + } + .mode-toggle button { + background: transparent; + border: none; + color: var(--color-text-muted); + padding: 4px 12px; + border-radius: calc(var(--radius-md) - 3px); + font-family: var(--font-mono); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + cursor: pointer; + transition: all 0.2s var(--ease-out); + } + .mode-toggle button:hover { + color: var(--color-text-accent); + } + .mode-toggle button.is-active { + background: var(--color-primary-muted); + color: var(--color-text-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + + /* Search bar */ + .search-bar { + display: flex; align-items: center; gap: var(--space-2); + background: var(--color-bg-overlay); border: 1px solid var(--color-border); + padding: var(--space-1) var(--space-3); width: 360px; transition: var(--transition-fast); + } + [data-theme="industrial"] .search-bar { border-radius: 0; } + [data-theme="modern"] .search-bar { border-radius: var(--radius-md); } + .search-bar:focus-within { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } + .search-bar svg { color: var(--color-text-muted); flex-shrink: 0; } + .search-bar input { + flex: 1; border: none; background: transparent; color: var(--color-text-primary); + font-family: var(--font-body); font-size: var(--text-body-sm); outline: none; + height: 32px; + } + .search-bar input::placeholder { color: var(--color-text-disabled); } + + /* Search dropdown */ + .search-dropdown { + position: absolute; top: 100%; left: 0; right: 0; + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + box-shadow: var(--shadow-lg); max-height: 400px; overflow-y: auto; + display: none; z-index: var(--z-dropdown); + } + [data-theme="industrial"] .search-dropdown { border-radius: 0; } + [data-theme="modern"] .search-dropdown { border-radius: var(--radius-md); } + .search-dropdown.is-visible { display: block; } + .search-result-item { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); cursor: pointer; + border-bottom: 1px solid var(--color-border); transition: var(--transition-fast); + } + .search-result-item:hover { background: var(--color-primary-muted); } + .search-result-item:last-child { border-bottom: none; } + .search-result__oem { font-weight: var(--font-weight-semibold); color: var(--color-primary); font-size: var(--text-body-sm); } + .search-result__name { color: var(--color-text-primary); font-size: var(--text-body-sm); } + .search-result__vehicle { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ========================================================================= + PAGE BODY + ========================================================================= */ + + .page-body { + flex: 1; overflow-y: auto; padding: var(--space-6); + display: flex; flex-direction: column; gap: var(--space-5); + } + [data-theme="modern"] .page-body { + background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* Level title */ + .level-title { + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); color: var(--color-text-primary); + letter-spacing: var(--tracking-wide); text-transform: uppercase; + } + [data-theme="industrial"] .level-title { color: var(--color-primary); } + + /* Filter input (quick filter within level) */ + .level-filter { + padding: var(--space-2) var(--space-3); + background: var(--color-bg-overlay); border: 1px solid var(--color-border); + color: var(--color-text-primary); font-family: var(--font-body); + font-size: var(--text-body-sm); outline: none; width: 100%; max-width: 400px; + transition: var(--transition-fast); + } + [data-theme="industrial"] .level-filter { border-radius: 0; } + [data-theme="modern"] .level-filter { border-radius: var(--radius-md); } + .level-filter:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } + + /* ========================================================================= + NAVIGATION CARDS + ========================================================================= */ + + .nav-grid { + display: grid; gap: var(--space-4); + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + } + .nav-grid--years { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + } + .nav-grid--parts { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + } + + .nav-card { + display: flex; flex-direction: column; justify-content: center; align-items: center; + padding: var(--space-5) var(--space-4); gap: var(--space-2); + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + cursor: pointer; transition: var(--transition-fast); text-align: center; + box-shadow: var(--shadow-sm); min-height: 80px; + } + [data-theme="industrial"] .nav-card { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } + [data-theme="modern"] .nav-card { border-radius: var(--radius-lg); } + .nav-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } + .nav-card__name { font-family: var(--font-heading); font-weight: var(--heading-weight-secondary); font-size: var(--text-body); color: var(--color-text-primary); letter-spacing: var(--tracking-wide); } + .nav-card__sub { font-size: var(--text-caption); color: var(--color-text-muted); } + .nav-card__count { font-size: var(--text-caption); color: var(--color-primary); font-weight: var(--font-weight-semibold); } + + /* Year buttons (compact) */ + .nav-card--year { min-height: 48px; padding: var(--space-3); } + .nav-card--year .nav-card__name { font-size: var(--text-h5); } + + /* ========================================================================= + PART CARDS + ========================================================================= */ + + .part-card { + display: flex; flex-direction: column; + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition-fast); + overflow: hidden; + } + [data-theme="industrial"] .part-card { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } + [data-theme="modern"] .part-card { border-radius: var(--radius-lg); } + .part-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } + + .part-card__image { + height: 120px; display: flex; align-items: center; justify-content: center; + background: var(--color-bg-overlay); position: relative; overflow: hidden; + color: var(--color-text-disabled); + } + .part-card__image img { width: 100%; height: 100%; object-fit: contain; } + + .part-card__body { padding: var(--space-3) var(--space-4); flex: 1; } + .part-card__oem { font-family: var(--font-mono, monospace); font-size: var(--text-caption); color: var(--color-primary); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); } + .part-card__oem-sub { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--color-text-muted); font-weight: var(--font-weight-regular); } + .part-card__name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.3; } + + /* Local mode — manufacturer badge + priority tier */ + .part-card__manu { + display: inline-flex; align-items: center; gap: 4px; + padding: 2px 8px; margin-bottom: var(--space-1); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + border-radius: var(--radius-sm); + font-size: 10px; + font-weight: var(--font-weight-bold); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + color: var(--color-text-secondary); + } + .part-card__manu .manu-tier { + color: var(--color-primary); + font-size: 11px; + } + .part-card--tier1 { + border-color: var(--color-border-accent); + box-shadow: 0 0 12px var(--glow-color-soft); + } + .part-card--tier1 .part-card__manu { + background: var(--color-primary-muted); + border-color: var(--color-border-accent); + color: var(--color-text-accent); + } + .part-card--tier2 .part-card__manu { + border-color: var(--color-border-strong); + } + + .part-card__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; align-items: center; justify-content: space-between; + } + .part-card__price { font-weight: var(--font-weight-bold); color: var(--color-text-primary); } + + /* Stock badges */ + .stock-badge { + display: inline-flex; align-items: center; gap: 4px; + font-size: 11px; font-weight: var(--font-weight-bold); + padding: 2px 8px; border-radius: var(--radius-full); + } + .stock-badge--local { background: var(--color-success-light); color: var(--color-success-dark); } + .stock-badge--bodega { background: var(--color-warning-light); color: var(--color-warning-dark); } + .stock-badge--none { background: var(--color-neutral-200); color: var(--color-neutral-600); } + [data-theme="industrial"] .stock-badge--none { background: var(--color-neutral-700); color: var(--color-neutral-400); } + + /* ========================================================================= + DETAIL PANEL (slide-in from right) + ========================================================================= */ + + .detail-overlay { + position: fixed; inset: 0; z-index: calc(var(--z-modal) - 2); + background: rgba(0,0,0,0.3); backdrop-filter: blur(2px); display: none; + } + .detail-overlay.is-visible { display: block; } + + .detail-panel { + position: fixed; top: 0; right: 0; bottom: 0; + width: 440px; max-width: 100vw; z-index: calc(var(--z-modal) - 1); + background: var(--color-bg-elevated); border-left: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); display: flex; flex-direction: column; + transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-in-out); + } + .detail-panel.is-open { transform: translateX(0); } + + .detail-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .detail-header h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); color: var(--color-text-primary); } + .detail-close { + background: none; border: none; cursor: pointer; font-size: 1.4rem; + color: var(--color-text-secondary); padding: var(--space-1); + } + .detail-close:hover { color: var(--color-text-primary); } + + .detail-body { flex: 1; overflow-y: auto; padding: var(--space-5); } + + .detail-section { margin-bottom: var(--space-5); } + .detail-section__title { + font-family: var(--font-heading); font-size: var(--text-body-sm); + font-weight: var(--heading-weight-secondary); color: var(--color-text-muted); + text-transform: uppercase; letter-spacing: var(--tracking-wider); + margin-bottom: var(--space-3); padding-bottom: var(--space-2); + border-bottom: 1px solid var(--color-border); + } + + .detail-oem { font-family: var(--font-mono, monospace); font-size: var(--text-h5); color: var(--color-primary); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); } + .detail-name { font-size: var(--text-body); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); } + .detail-desc { font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.5; } + + /* Stock info */ + .stock-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; } + .stock-label { font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .stock-value { font-weight: var(--font-weight-bold); font-size: var(--text-body-sm); } + .stock-value--ok { color: var(--color-success); } + .stock-value--zero { color: var(--color-text-muted); } + + /* Bodega table */ + .bodega-table { width: 100%; font-size: var(--text-body-sm); border-collapse: collapse; } + .bodega-table th { text-align: left; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-wider); padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--color-border); } + .bodega-table td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); } + + /* Alternatives list */ + .alt-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); } + .alt-item:last-child { border-bottom: none; } + .alt-item__pn { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--text-body-sm); } + .alt-item__mfr { font-size: var(--text-caption); color: var(--color-text-muted); } + .alt-item__stock { font-size: var(--text-caption); } + + /* Add to cart section */ + .detail-footer { + padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); + flex-shrink: 0; background: var(--color-bg-elevated); + } + .qty-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } + .qty-btn { + width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; + border: 1px solid var(--color-border); background: var(--color-bg-base); + color: var(--color-text-primary); cursor: pointer; font-size: 1.2rem; + transition: var(--transition-fast); + } + [data-theme="industrial"] .qty-btn { border-radius: 0; } + [data-theme="modern"] .qty-btn { border-radius: var(--radius-sm); } + .qty-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } + .qty-display { font-weight: var(--font-weight-bold); font-size: var(--text-body); min-width: 30px; text-align: center; } + + /* Buttons */ + .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-5); height: 40px; font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); border: 1px solid transparent; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; letter-spacing: var(--tracking-wide); } + [data-theme="industrial"] .btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); text-transform: uppercase; } + [data-theme="modern"] .btn { border-radius: var(--radius-md); } + .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border); } + .btn-primary:hover { background: var(--btn-primary-bg-hover); } + .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } + .btn-ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); } + .btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) 0; } + .page-item { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text-secondary); font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--transition-fast); } + [data-theme="industrial"] .page-item { border-radius: 0; } + [data-theme="modern"] .page-item { border-radius: var(--radius-md); } + .page-item:hover { border-color: var(--color-primary); color: var(--color-primary); } + .page-item.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } + .page-item.is-disabled { opacity: 0.4; cursor: not-allowed; } + .page-item--wide { padding: 0 var(--space-4); gap: var(--space-2); } + + /* ========================================================================= + EMPTY STATE + ========================================================================= */ + + .empty-state { + display: none; flex-direction: column; align-items: center; justify-content: center; + padding: var(--space-10) var(--space-6); text-align: center; gap: var(--space-3); + } + .empty-state.is-visible { display: flex; } + .empty-state__title { font-family: var(--font-heading); font-weight: var(--heading-weight-secondary); font-size: var(--text-h4); color: var(--color-text-primary); } + .empty-state__subtitle { font-size: var(--text-body-sm); color: var(--color-text-muted); max-width: 400px; } + + /* ========================================================================= + LOADING SPINNER + ========================================================================= */ + + .loading { display: none; justify-content: center; padding: var(--space-10); } + .loading.is-visible { display: flex; } + .spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } + @keyframes spin { to { transform: rotate(360deg); } } + + /* ========================================================================= + CART FAB + SIDEBAR + ========================================================================= */ + + .cart-fab { + position: fixed; bottom: var(--space-6); right: var(--space-6); + width: 56px; height: 56px; z-index: var(--z-sticky); + display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + border: none; cursor: pointer; box-shadow: var(--shadow-lg); + transition: var(--transition-fast); + } + [data-theme="industrial"] .cart-fab { border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); } + [data-theme="modern"] .cart-fab { border-radius: var(--radius-full); } + .cart-fab:hover { transform: scale(1.08); } + .cart-fab__badge { + position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; + padding: 0 5px; border-radius: var(--radius-full); + background: var(--color-error); color: #fff; font-size: 11px; + font-weight: var(--font-weight-bold); display: none; + align-items: center; justify-content: center; line-height: 1; + } + + .cart-sidebar { + position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100vw; + z-index: var(--z-modal); background: var(--color-bg-elevated); + border-left: 1px solid var(--color-border); box-shadow: var(--shadow-xl); + display: flex; flex-direction: column; + transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-in-out); + } + .cart-sidebar.open { transform: translateX(0); } + + .cart-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } + .cart-header h3 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--heading-weight-secondary); color: var(--color-text-primary); } + .cart-items { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); } + .cart-item { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } + .cart-item:last-child { border-bottom: none; } + .cart-footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); flex-shrink: 0; background: var(--color-bg-elevated); } + .cart-totals { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-body-sm); color: var(--color-text-secondary); } + .cart-overlay { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(0,0,0,0.3); backdrop-filter: blur(2px); display: none; } + .cart-overlay.open { display: block; } + + /* ========================================================================= + THEME BAR + ========================================================================= */ + + .theme-bar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-bg-overlay); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px); height: 36px; } + .theme-bar__label { font-size: var(--text-caption); color: var(--color-text-muted); font-family: var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; } + .theme-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); cursor: pointer; transition: var(--transition-fast); } + .theme-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } + .theme-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + /* ── Vehicle Selector ── */ + .vehicle-selector { + background: var(--color-bg-elevated); + border-bottom: 2px solid var(--color-primary-muted, rgba(245,166,35,0.2)); + padding: var(--space-3) var(--space-5); + flex-shrink: 0; + } + .vehicle-selector__inner { + display: flex; + align-items: flex-end; + gap: var(--space-3); + flex-wrap: wrap; + } + .vs-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; } + .vs-label { + font-size: var(--text-caption, 0.75rem); + font-weight: var(--font-weight-semibold, 600); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider, 0.04em); + } + .vs-select { + padding: var(--space-2) var(--space-3); + background: var(--color-bg-base); + color: var(--color-text-primary); + border: 1px solid var(--color-border); + font-family: var(--font-body); + font-size: var(--text-body-sm, 0.875rem); + cursor: pointer; + transition: var(--transition-fast); + appearance: auto; + } + [data-theme="industrial"] .vs-select { border-radius: 0; } + [data-theme="modern"] .vs-select { border-radius: var(--radius-md); } + .vs-select:focus { border-color: var(--color-primary); outline: none; box-shadow: var(--shadow-focus); } + .vs-select:disabled { opacity: 0.4; cursor: not-allowed; } + .vs-arrow { + color: var(--color-primary); + font-size: 1.4rem; + font-weight: 700; + padding-bottom: 6px; + flex-shrink: 0; + } + .vs-clear { + background: none; + border: 1px solid var(--color-border); + color: var(--color-text-muted); + padding: var(--space-2) var(--space-3); + cursor: pointer; + font-size: 1rem; + transition: var(--transition-fast); + } + [data-theme="industrial"] .vs-clear { border-radius: 0; } + [data-theme="modern"] .vs-clear { border-radius: var(--radius-md); } + .vs-clear:hover { color: var(--color-error); border-color: var(--color-error); } + + @media (max-width: 768px) { + .sidebar { position: fixed; left: -260px; z-index: var(--z-modal); transition: left var(--duration-normal) var(--ease-in-out); height: 100vh; } + .sidebar.is-open { left: 0; } + .search-bar { width: 200px; } + .detail-panel { width: 100%; } + .nav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } + .vehicle-selector__inner { flex-direction: column; } + .vs-arrow { display: none; } + } diff --git a/pos/static/css/config.css b/pos/static/css/config.css new file mode 100644 index 0000000..539a8a4 --- /dev/null +++ b/pos/static/css/config.css @@ -0,0 +1,1201 @@ +/* Extracted from config.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ========================================================================= + SCROLLABLE CONTENT + ========================================================================= */ + + .content-scroll { + flex: 1; + overflow-y: auto; + padding: var(--space-5) var(--space-6); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .content-scroll::-webkit-scrollbar { width: 6px; } + .content-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .content-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* ========================================================================= + SETTINGS SECTIONS + ========================================================================= */ + + .settings-section { + margin-bottom: var(--space-8); + } + + .settings-section__header { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + padding-bottom: var(--space-3); + border-bottom: 1px solid var(--color-border); + } + + .settings-section__icon { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .settings-section__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .settings-section__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + } + + [data-theme="industrial"] .settings-section__title { + text-transform: uppercase; + } + + .settings-section__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* ========================================================================= + SETTINGS CARD + ========================================================================= */ + + .settings-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + box-shadow: var(--shadow-sm); + margin-bottom: var(--space-4); + } + + [data-theme="modern"] .settings-card { + background: var(--color-bg-overlay); + } + + .settings-card__title { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-4); + font-size: var(--text-body); + } + + /* ========================================================================= + FORM ELEMENTS + ========================================================================= */ + + .form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .form-group { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .form-group--full { + grid-column: 1 / -1; + } + + .form-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .form-input { + height: 38px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + transition: var(--transition-fast); + outline: none; + } + + [data-theme="modern"] .form-input { + background: var(--color-bg-base); + } + + .form-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-input::placeholder { + color: var(--color-text-muted); + } + + .form-select { + height: 38px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .form-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-textarea { + padding: var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + resize: vertical; + min-height: 80px; + outline: none; + transition: var(--transition-fast); + } + + .form-textarea:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-hint { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* ========================================================================= + TOGGLE SWITCH + ========================================================================= */ + + .toggle-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) 0; + border-bottom: 1px solid var(--color-border); + } + + .toggle-row:last-child { + border-bottom: none; + } + + .toggle-row__info { + display: flex; + flex-direction: column; + gap: 2px; + } + + .toggle-row__label { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + font-size: var(--text-body-sm); + } + + .toggle-row__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .toggle { + position: relative; + width: 44px; + height: 24px; + flex-shrink: 0; + } + + .toggle input { + opacity: 0; + width: 0; + height: 0; + } + + .toggle__slider { + position: absolute; + cursor: pointer; + inset: 0; + background: var(--color-border-strong); + border-radius: var(--radius-full); + transition: var(--transition-normal); + } + + .toggle__slider::before { + content: ''; + position: absolute; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background: white; + border-radius: var(--radius-full); + transition: var(--transition-normal); + box-shadow: var(--shadow-sm); + } + + .toggle input:checked + .toggle__slider { + background: var(--color-primary); + } + + .toggle input:checked + .toggle__slider::before { + transform: translateX(20px); + } + + .toggle input:focus + .toggle__slider { + box-shadow: var(--shadow-focus); + } + + /* ========================================================================= + THEME SELECTOR (in-app) + ========================================================================= */ + + .theme-selector { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .theme-option { + background: var(--color-bg-base); + border: 2px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4); + cursor: pointer; + transition: var(--transition-normal); + position: relative; + } + + .theme-option:hover { + border-color: var(--color-border-strong); + } + + .theme-option.is-selected { + border-color: var(--color-primary); + box-shadow: var(--shadow-accent); + } + + .theme-option__check { + position: absolute; + top: var(--space-3); + right: var(--space-3); + width: 22px; + height: 22px; + border-radius: var(--radius-full); + background: var(--color-primary); + display: none; + align-items: center; + justify-content: center; + } + + .theme-option.is-selected .theme-option__check { + display: flex; + } + + .theme-option__check svg { + width: 14px; + height: 14px; + stroke: var(--color-text-inverse); + fill: none; + stroke-width: 2.5; + stroke-linecap: round; + stroke-linejoin: round; + } + + .theme-option__preview { + height: 100px; + border-radius: var(--radius-md); + margin-bottom: var(--space-3); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + position: relative; + overflow: hidden; + } + + .theme-option__preview--dark { + background: #0d0d0d; + border: 1px solid #333; + } + + .theme-option__preview--light { + background: #FFFFFF; + border: 1px solid #e2e4f0; + background-image: radial-gradient(circle, rgba(26,26,46,0.07) 1px, transparent 1px); + background-size: 12px 12px; + } + + .theme-option__preview-logo { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.875rem; + } + + .theme-option__preview-logo--dark { + background: #F5A623; + color: #000; + clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); + } + + .theme-option__preview-logo--light { + background: #FF6B35; + color: #fff; + border-radius: var(--radius-sm); + } + + .theme-option__preview-text { + display: flex; + flex-direction: column; + gap: 4px; + } + + .theme-option__preview-bar { + height: 4px; + border-radius: 2px; + } + + .theme-option__preview--dark .theme-option__preview-bar:nth-child(1) { width: 60px; background: #fff; } + .theme-option__preview--dark .theme-option__preview-bar:nth-child(2) { width: 40px; background: #888; } + .theme-option__preview--dark .theme-option__preview-bar:nth-child(3) { width: 50px; background: #F5A623; } + + .theme-option__preview--light .theme-option__preview-bar:nth-child(1) { width: 60px; background: #1a1a2e; } + .theme-option__preview--light .theme-option__preview-bar:nth-child(2) { width: 40px; background: #8080a0; } + .theme-option__preview--light .theme-option__preview-bar:nth-child(3) { width: 50px; background: #FF6B35; } + + .theme-option__name { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body); + color: var(--color-text-primary); + margin-bottom: 2px; + } + + .theme-option__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .theme-option__colors { + display: flex; + gap: var(--space-2); + margin-top: var(--space-3); + } + + .theme-option__swatch { + width: 20px; + height: 20px; + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); + } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--danger { + background: var(--btn-danger-bg); + color: var(--btn-danger-text); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + .btn-group { + display: flex; + gap: var(--space-3); + margin-top: var(--space-5); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { border-bottom: none; } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + /* ========================================================================= + BADGES + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + .badge--ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--pending { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--inactive { + background: rgba(115, 115, 115, 0.15); + color: var(--color-text-muted); + } + + .badge--admin { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + /* ========================================================================= + USER AVATAR (table) + ========================================================================= */ + + .user-cell { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .user-cell__avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .user-cell__name { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + /* ========================================================================= + PRINTER/DEVICE CARDS + ========================================================================= */ + + .device-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--space-4); + } + + .device-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-4); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + [data-theme="modern"] .device-card { + background: var(--color-bg-overlay); + } + + .device-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + .device-card__icon { + width: 40px; + height: 40px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .device-card__icon svg { + width: 22px; + height: 22px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .device-card__body { flex: 1; } + + .device-card__name { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: 2px; + } + + .device-card__detail { + font-size: var(--text-caption); + color: var(--color-text-muted); + display: flex; + align-items: center; + gap: var(--space-1); + } + + .device-card__detail + .device-card__detail { + margin-top: 2px; + } + + .device-card__actions { + margin-top: var(--space-3); + display: flex; + gap: var(--space-2); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .sidebar { width: 60px; } + .brand-name__primary, + .brand-name__sub, + .nav-section-label, + .sidebar__user-info { display: none; } + .sidebar__brand { justify-content: center; padding: var(--space-3); } + .nav-item { justify-content: center; padding: var(--space-2); border-left: none; border-bottom: 3px solid transparent; } + .nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); } + .sidebar__footer { justify-content: center; } + .form-grid { grid-template-columns: 1fr; } + .theme-selector { grid-template-columns: 1fr; } + } + + @media (max-width: 768px) { + .device-grid { grid-template-columns: 1fr; } + } + +/* Modal styles */ + .cfg-modal-overlay { + position: fixed; + inset: 0; + z-index: 9999; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn var(--duration-fast) var(--ease-in-out); + } + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + + .cfg-modal { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + width: 520px; + max-width: 90vw; + max-height: 80vh; + overflow-y: auto; + box-shadow: var(--shadow-lg); + } + .cfg-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + .cfg-modal__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + } + .cfg-modal__close { + background: none; + border: none; + font-size: 1.5rem; + color: var(--color-text-muted); + cursor: pointer; + line-height: 1; + } + .cfg-modal__close:hover { color: var(--color-text-primary); } + .cfg-modal__body { padding: var(--space-5); } + .cfg-modal__footer { + display: flex; + justify-content: flex-end; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + } + + /* Extra badge colors for roles */ + .badge--owner { background: rgba(245,166,35,0.15); color: var(--color-primary); } + .badge--blue { background: rgba(99,102,241,0.15); color: #818cf8; } + .badge--green { background: rgba(34,197,94,0.15); color: var(--color-success); } + .badge--yellow { background: rgba(234,179,8,0.15); color: #eab308; } + .badge--purple { background: rgba(168,85,247,0.15); color: #a855f7; } + + /* Toast notification */ + .cfg-toast { + position: fixed; + bottom: var(--space-5); + right: var(--space-5); + z-index: 10000; + padding: var(--space-3) var(--space-5); + border-radius: var(--radius-md); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-inverse); + animation: slideUp var(--duration-normal) var(--ease-in-out); + box-shadow: var(--shadow-lg); + } + .cfg-toast--ok { background: var(--color-success); } + .cfg-toast--error { background: var(--color-error, #ef4444); } + @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } diff --git a/pos/static/css/config.min.css b/pos/static/css/config.min.css new file mode 100644 index 0000000..539a8a4 --- /dev/null +++ b/pos/static/css/config.min.css @@ -0,0 +1,1201 @@ +/* Extracted from config.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ========================================================================= + SCROLLABLE CONTENT + ========================================================================= */ + + .content-scroll { + flex: 1; + overflow-y: auto; + padding: var(--space-5) var(--space-6); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .content-scroll::-webkit-scrollbar { width: 6px; } + .content-scroll::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .content-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* ========================================================================= + SETTINGS SECTIONS + ========================================================================= */ + + .settings-section { + margin-bottom: var(--space-8); + } + + .settings-section__header { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + padding-bottom: var(--space-3); + border-bottom: 1px solid var(--color-border); + } + + .settings-section__icon { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .settings-section__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .settings-section__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + } + + [data-theme="industrial"] .settings-section__title { + text-transform: uppercase; + } + + .settings-section__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* ========================================================================= + SETTINGS CARD + ========================================================================= */ + + .settings-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + box-shadow: var(--shadow-sm); + margin-bottom: var(--space-4); + } + + [data-theme="modern"] .settings-card { + background: var(--color-bg-overlay); + } + + .settings-card__title { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-4); + font-size: var(--text-body); + } + + /* ========================================================================= + FORM ELEMENTS + ========================================================================= */ + + .form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .form-group { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .form-group--full { + grid-column: 1 / -1; + } + + .form-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .form-input { + height: 38px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + transition: var(--transition-fast); + outline: none; + } + + [data-theme="modern"] .form-input { + background: var(--color-bg-base); + } + + .form-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-input::placeholder { + color: var(--color-text-muted); + } + + .form-select { + height: 38px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .form-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-textarea { + padding: var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + resize: vertical; + min-height: 80px; + outline: none; + transition: var(--transition-fast); + } + + .form-textarea:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-hint { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* ========================================================================= + TOGGLE SWITCH + ========================================================================= */ + + .toggle-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) 0; + border-bottom: 1px solid var(--color-border); + } + + .toggle-row:last-child { + border-bottom: none; + } + + .toggle-row__info { + display: flex; + flex-direction: column; + gap: 2px; + } + + .toggle-row__label { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + font-size: var(--text-body-sm); + } + + .toggle-row__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .toggle { + position: relative; + width: 44px; + height: 24px; + flex-shrink: 0; + } + + .toggle input { + opacity: 0; + width: 0; + height: 0; + } + + .toggle__slider { + position: absolute; + cursor: pointer; + inset: 0; + background: var(--color-border-strong); + border-radius: var(--radius-full); + transition: var(--transition-normal); + } + + .toggle__slider::before { + content: ''; + position: absolute; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background: white; + border-radius: var(--radius-full); + transition: var(--transition-normal); + box-shadow: var(--shadow-sm); + } + + .toggle input:checked + .toggle__slider { + background: var(--color-primary); + } + + .toggle input:checked + .toggle__slider::before { + transform: translateX(20px); + } + + .toggle input:focus + .toggle__slider { + box-shadow: var(--shadow-focus); + } + + /* ========================================================================= + THEME SELECTOR (in-app) + ========================================================================= */ + + .theme-selector { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .theme-option { + background: var(--color-bg-base); + border: 2px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4); + cursor: pointer; + transition: var(--transition-normal); + position: relative; + } + + .theme-option:hover { + border-color: var(--color-border-strong); + } + + .theme-option.is-selected { + border-color: var(--color-primary); + box-shadow: var(--shadow-accent); + } + + .theme-option__check { + position: absolute; + top: var(--space-3); + right: var(--space-3); + width: 22px; + height: 22px; + border-radius: var(--radius-full); + background: var(--color-primary); + display: none; + align-items: center; + justify-content: center; + } + + .theme-option.is-selected .theme-option__check { + display: flex; + } + + .theme-option__check svg { + width: 14px; + height: 14px; + stroke: var(--color-text-inverse); + fill: none; + stroke-width: 2.5; + stroke-linecap: round; + stroke-linejoin: round; + } + + .theme-option__preview { + height: 100px; + border-radius: var(--radius-md); + margin-bottom: var(--space-3); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + position: relative; + overflow: hidden; + } + + .theme-option__preview--dark { + background: #0d0d0d; + border: 1px solid #333; + } + + .theme-option__preview--light { + background: #FFFFFF; + border: 1px solid #e2e4f0; + background-image: radial-gradient(circle, rgba(26,26,46,0.07) 1px, transparent 1px); + background-size: 12px 12px; + } + + .theme-option__preview-logo { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.875rem; + } + + .theme-option__preview-logo--dark { + background: #F5A623; + color: #000; + clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); + } + + .theme-option__preview-logo--light { + background: #FF6B35; + color: #fff; + border-radius: var(--radius-sm); + } + + .theme-option__preview-text { + display: flex; + flex-direction: column; + gap: 4px; + } + + .theme-option__preview-bar { + height: 4px; + border-radius: 2px; + } + + .theme-option__preview--dark .theme-option__preview-bar:nth-child(1) { width: 60px; background: #fff; } + .theme-option__preview--dark .theme-option__preview-bar:nth-child(2) { width: 40px; background: #888; } + .theme-option__preview--dark .theme-option__preview-bar:nth-child(3) { width: 50px; background: #F5A623; } + + .theme-option__preview--light .theme-option__preview-bar:nth-child(1) { width: 60px; background: #1a1a2e; } + .theme-option__preview--light .theme-option__preview-bar:nth-child(2) { width: 40px; background: #8080a0; } + .theme-option__preview--light .theme-option__preview-bar:nth-child(3) { width: 50px; background: #FF6B35; } + + .theme-option__name { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body); + color: var(--color-text-primary); + margin-bottom: 2px; + } + + .theme-option__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .theme-option__colors { + display: flex; + gap: var(--space-2); + margin-top: var(--space-3); + } + + .theme-option__swatch { + width: 20px; + height: 20px; + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); + } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--danger { + background: var(--btn-danger-bg); + color: var(--btn-danger-text); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + .btn-group { + display: flex; + gap: var(--space-3); + margin-top: var(--space-5); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { border-bottom: none; } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + /* ========================================================================= + BADGES + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + .badge--ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--pending { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--inactive { + background: rgba(115, 115, 115, 0.15); + color: var(--color-text-muted); + } + + .badge--admin { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + /* ========================================================================= + USER AVATAR (table) + ========================================================================= */ + + .user-cell { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .user-cell__avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .user-cell__name { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + /* ========================================================================= + PRINTER/DEVICE CARDS + ========================================================================= */ + + .device-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--space-4); + } + + .device-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-4); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + [data-theme="modern"] .device-card { + background: var(--color-bg-overlay); + } + + .device-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + .device-card__icon { + width: 40px; + height: 40px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .device-card__icon svg { + width: 22px; + height: 22px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .device-card__body { flex: 1; } + + .device-card__name { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: 2px; + } + + .device-card__detail { + font-size: var(--text-caption); + color: var(--color-text-muted); + display: flex; + align-items: center; + gap: var(--space-1); + } + + .device-card__detail + .device-card__detail { + margin-top: 2px; + } + + .device-card__actions { + margin-top: var(--space-3); + display: flex; + gap: var(--space-2); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .sidebar { width: 60px; } + .brand-name__primary, + .brand-name__sub, + .nav-section-label, + .sidebar__user-info { display: none; } + .sidebar__brand { justify-content: center; padding: var(--space-3); } + .nav-item { justify-content: center; padding: var(--space-2); border-left: none; border-bottom: 3px solid transparent; } + .nav-item.is-active { border-left: none; border-bottom-color: var(--color-primary); } + .sidebar__footer { justify-content: center; } + .form-grid { grid-template-columns: 1fr; } + .theme-selector { grid-template-columns: 1fr; } + } + + @media (max-width: 768px) { + .device-grid { grid-template-columns: 1fr; } + } + +/* Modal styles */ + .cfg-modal-overlay { + position: fixed; + inset: 0; + z-index: 9999; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn var(--duration-fast) var(--ease-in-out); + } + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + + .cfg-modal { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + width: 520px; + max-width: 90vw; + max-height: 80vh; + overflow-y: auto; + box-shadow: var(--shadow-lg); + } + .cfg-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + .cfg-modal__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h5); + color: var(--color-text-primary); + } + .cfg-modal__close { + background: none; + border: none; + font-size: 1.5rem; + color: var(--color-text-muted); + cursor: pointer; + line-height: 1; + } + .cfg-modal__close:hover { color: var(--color-text-primary); } + .cfg-modal__body { padding: var(--space-5); } + .cfg-modal__footer { + display: flex; + justify-content: flex-end; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + } + + /* Extra badge colors for roles */ + .badge--owner { background: rgba(245,166,35,0.15); color: var(--color-primary); } + .badge--blue { background: rgba(99,102,241,0.15); color: #818cf8; } + .badge--green { background: rgba(34,197,94,0.15); color: var(--color-success); } + .badge--yellow { background: rgba(234,179,8,0.15); color: #eab308; } + .badge--purple { background: rgba(168,85,247,0.15); color: #a855f7; } + + /* Toast notification */ + .cfg-toast { + position: fixed; + bottom: var(--space-5); + right: var(--space-5); + z-index: 10000; + padding: var(--space-3) var(--space-5); + border-radius: var(--radius-md); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-inverse); + animation: slideUp var(--duration-normal) var(--ease-in-out); + box-shadow: var(--shadow-lg); + } + .cfg-toast--ok { background: var(--color-success); } + .cfg-toast--error { background: var(--color-error, #ef4444); } + @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } diff --git a/pos/static/css/customers.css b/pos/static/css/customers.css new file mode 100644 index 0000000..8495a30 --- /dev/null +++ b/pos/static/css/customers.css @@ -0,0 +1,1552 @@ +/* Extracted from customers.html */ + +/* ===================================================================== + BASE RESET & BODY + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + background-color: var(--color-bg-base); + color: var(--color-text-primary); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + display: flex; + flex-direction: column; + overflow: hidden; + } + + /* Dot-grid on body for modern theme */ + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ===================================================================== + THEME SWITCHER BAR (fixed, 36px) + ===================================================================== */ + + .theme-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 36px; + padding: 0 var(--space-5); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + flex-shrink: 0; + z-index: var(--z-sticky); + } + + [data-theme="industrial"] .theme-bar { + background-color: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + color: var(--color-text-accent); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + letter-spacing: var(--tracking-widest); + } + + .theme-bar__brand-dot { + width: 7px; + height: 7px; + background-color: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: pulse-dot 2.5s ease-in-out infinite; + } + + @keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } + } + + .theme-bar__center { + display: flex; + align-items: center; + gap: var(--space-6); + color: var(--color-text-muted); + font-size: var(--text-caption); + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .theme-bar__user { + display: flex; + align-items: center; + gap: var(--space-2); + color: var(--color-text-secondary); + } + + .theme-bar__user-avatar { + width: 20px; + height: 20px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + } + + [data-theme="industrial"] .theme-bar__user-avatar { + color: #000; + } + + /* Theme switcher pill */ + .theme-switcher { + display: flex; + align-items: center; + background-color: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + gap: 2px; + } + + .theme-btn { + display: flex; + align-items: center; + gap: var(--space-1); + padding: 3px var(--space-3); + border: none; + border-radius: var(--radius-full); + font-family: var(--font-body); + font-size: 0.68rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-fast); + background: transparent; + color: var(--color-text-muted); + } + + .theme-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + box-shadow: var(--shadow-sm); + } + + [data-theme="industrial"] .theme-btn.active { + color: #000; + } + + /* ===================================================================== + APP SHELL — below theme bar + ===================================================================== */ + + .app-shell { + display: flex; + flex: 1; + overflow: hidden; + } + + /* ===================================================================== + SIDEBAR NAVIGATION (~220px) + ===================================================================== */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background-color: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + [data-theme="industrial"] .sidebar { + background-color: #161616; + border-right-color: var(--color-border); + } + + .sidebar__logo { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + } + + .sidebar__logo-icon { + width: 32px; + height: 32px; + background-color: var(--color-primary); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + [data-theme="industrial"] .sidebar__logo-icon { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + .sidebar__logo-icon svg { + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .sidebar__logo-icon svg { + color: #000; + } + + .sidebar__logo-text { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.95rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1.1; + } + + .sidebar__logo-sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-regular); + letter-spacing: var(--tracking-wide); + } + + .sidebar__section-label { + padding: var(--space-4) var(--space-5) var(--space-2); + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-disabled); + } + + .sidebar__nav { + list-style: none; + padding: var(--space-2) 0; + flex: 1; + } + + .nav-item { + display: block; + } + + .nav-link { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-5); + height: 38px; + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + white-space: nowrap; + } + + .nav-link:hover { + background-color: var(--color-primary-muted); + color: var(--color-text-primary); + } + + .nav-link.active { + background-color: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + [data-theme="industrial"] .nav-link.active { + background-color: rgba(245, 166, 35, 0.10); + } + + .nav-link__icon { + width: 16px; + height: 16px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-link.active .nav-link__icon { + opacity: 1; + } + + .nav-link__badge { + margin-left: auto; + background-color: var(--color-primary); + color: var(--color-text-inverse); + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + padding: 1px 6px; + border-radius: var(--radius-full); + min-width: 18px; + text-align: center; + } + + [data-theme="industrial"] .nav-link__badge { + color: #000; + } + + .sidebar__footer { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ===================================================================== + MAIN CONTENT AREA + ===================================================================== */ + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* Page header */ + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-5) var(--space-6); + background-color: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background-color: var(--color-surface-1); + border-bottom-color: var(--color-border); + } + + [data-theme="modern"] .page-header { + background-color: rgba(255,255,255,0.92); + backdrop-filter: blur(8px); + } + + .page-header__title { + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + letter-spacing: var(--heading-tracking-h5); + color: var(--color-text-primary); + text-transform: uppercase; + } + + .page-header__subtitle { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + font-weight: var(--font-weight-regular); + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-5); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + border: 1.5px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + letter-spacing: var(--tracking-normal); + } + + .btn-primary { + background-color: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn-primary:hover { + background-color: var(--btn-primary-bg-hover); + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .btn-primary:active { + background-color: var(--btn-primary-bg-active); + transform: translateY(0); + } + + .btn-secondary { + background-color: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn-secondary:hover { + background-color: var(--btn-secondary-bg-hover); + } + + .btn-ghost { + background-color: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn-ghost:hover { + background-color: var(--color-primary-muted); + color: var(--color-primary); + border-color: var(--color-primary); + } + + .btn-sm { + height: 30px; + padding: 0 var(--space-4); + font-size: var(--text-caption); + } + + [data-theme="modern"] .btn { + border-radius: var(--radius-lg); + } + + /* ===================================================================== + SUMMARY CARDS + ===================================================================== */ + + .summary-bar { + display: flex; + gap: var(--space-4); + padding: var(--space-5) var(--space-6); + background-color: transparent; + flex-shrink: 0; + overflow-x: auto; + } + + .summary-card { + flex: 1; + min-width: 160px; + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-2); + transition: var(--transition-normal); + } + + [data-theme="industrial"] .summary-card { + background-color: var(--color-surface-1); + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + } + + .summary-card:hover { + border-color: var(--color-border-accent); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .summary-card:hover { + box-shadow: var(--shadow-accent); + } + + .summary-card__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + font-weight: var(--font-weight-semibold); + } + + .summary-card__value { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--tracking-snug); + line-height: 1; + } + + .summary-card__delta { + display: flex; + align-items: center; + gap: var(--space-1); + font-size: var(--text-caption); + color: var(--color-success); + } + + .summary-card__delta.neg { + color: var(--color-error); + } + + .summary-card__icon { + width: 32px; + height: 32px; + border-radius: var(--radius-md); + background-color: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + align-self: flex-start; + margin-bottom: var(--space-1); + } + + [data-theme="industrial"] .summary-card__icon { + border-radius: 0; + } + + /* ===================================================================== + CONTENT SPLIT (list + detail) + ===================================================================== */ + + .content-split { + display: flex; + flex: 1; + overflow: hidden; + gap: 0; + } + + /* ===================================================================== + LEFT PANEL — Customer List (60%) + ===================================================================== */ + + .panel-list { + display: flex; + flex-direction: column; + width: 60%; + min-width: 0; + border-right: 1px solid var(--color-border); + overflow: hidden; + } + + /* Search & filter row */ + .list-toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + background-color: var(--color-surface-1); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .list-toolbar { + background-color: rgba(248, 249, 255, 0.95); + } + + .search-wrap { + position: relative; + flex: 1; + } + + .search-icon { + position: absolute; + left: var(--space-3); + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + pointer-events: none; + } + + .search-input { + width: 100%; + height: 38px; + padding: 0 var(--space-4) 0 38px; + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + outline: none; + transition: var(--transition-fast); + } + + .search-input::placeholder { + color: var(--color-text-muted); + } + + .search-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-lg); + background-color: #fff; + } + + .filter-select { + height: 38px; + padding: 0 var(--space-4); + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + outline: none; + cursor: pointer; + transition: var(--transition-fast); + } + + .filter-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + [data-theme="modern"] .filter-select { + border-radius: var(--radius-lg); + background-color: #fff; + } + + /* Customer Table */ + .table-wrap { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .customers-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .customers-table thead { + position: sticky; + top: 0; + z-index: 2; + } + + .customers-table thead tr { + background-color: var(--color-surface-2); + border-bottom: 2px solid var(--color-border-strong); + } + + [data-theme="industrial"] .customers-table thead tr { + background-color: #1d1d1d; + } + + .customers-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .customers-table th:first-child { padding-left: var(--space-5); } + .customers-table th:last-child { padding-right: var(--space-5); } + + .customers-table tbody tr { + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: var(--transition-fast); + } + + .customers-table tbody tr:hover { + background-color: var(--color-primary-muted); + } + + .customers-table tbody tr.selected { + background-color: var(--color-primary-muted); + border-left: 3px solid var(--color-primary); + } + + .customers-table td { + padding: var(--space-3) var(--space-4); + vertical-align: middle; + color: var(--color-text-primary); + white-space: nowrap; + } + + .customers-table td:first-child { padding-left: var(--space-5); } + .customers-table td:last-child { padding-right: var(--space-5); } + + .cell-num { + color: var(--color-text-muted); + font-size: var(--text-caption); + } + + .cell-name { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .cell-name-sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-regular); + } + + .cell-rfc { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-secondary); + letter-spacing: 0.03em; + } + + .cell-credit { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-success); + } + + .cell-credit.low { + color: var(--color-warning); + } + + .cell-credit.none { + color: var(--color-error); + } + + .cell-date { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* Status badges */ + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + border-radius: var(--radius-full); + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + white-space: nowrap; + } + + .badge--active { + background-color: rgba(34, 197, 94, 0.15); + color: var(--color-success); + border: 1px solid rgba(34, 197, 94, 0.3); + } + + .badge--inactive { + background-color: rgba(163, 163, 163, 0.15); + color: var(--color-text-muted); + border: 1px solid var(--color-border); + } + + .badge--warning { + background-color: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + border: 1px solid rgba(234, 179, 8, 0.3); + } + + .badge-dot { + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background-color: currentColor; + } + + /* Tipo chip */ + .tipo-chip { + display: inline-block; + padding: 2px 7px; + border-radius: var(--radius-sm); + font-size: 0.62rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .tipo-chip--taller { + background-color: rgba(245, 166, 35, 0.12); + color: var(--color-warning); + border: 1px solid rgba(245, 166, 35, 0.3); + } + + [data-theme="modern"] .tipo-chip--taller { + background-color: rgba(255, 107, 53, 0.10); + color: var(--color-primary); + border-color: rgba(255, 107, 53, 0.25); + } + + .tipo-chip--mostrador { + background-color: rgba(99, 102, 241, 0.12); + color: #818cf8; + border: 1px solid rgba(99, 102, 241, 0.3); + } + + .tipo-chip--mayoreo { + background-color: rgba(34, 197, 94, 0.10); + color: var(--color-success); + border: 1px solid rgba(34, 197, 94, 0.3); + } + + /* Table pagination footer */ + .table-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + background-color: var(--color-surface-1); + border-top: 1px solid var(--color-border); + flex-shrink: 0; + } + + .table-footer__info { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .page-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + cursor: pointer; + transition: var(--transition-fast); + } + + .page-btn:hover { + background-color: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + } + + .page-btn.active { + background-color: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-semibold); + } + + [data-theme="industrial"] .page-btn.active { + color: #000; + } + + /* ===================================================================== + RIGHT PANEL — Customer Detail (40%) + ===================================================================== */ + + .panel-detail { + width: 40%; + min-width: 0; + display: flex; + flex-direction: column; + background-color: var(--color-bg-elevated); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + [data-theme="industrial"] .panel-detail { + background-color: var(--color-surface-1); + } + + [data-theme="modern"] .panel-detail { + background-color: rgba(248, 249, 255, 0.95); + } + + /* Empty state */ + .detail-empty { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-4); + color: var(--color-text-disabled); + padding: var(--space-10); + text-align: center; + } + + .detail-empty__icon { + width: 56px; + height: 56px; + border-radius: var(--radius-xl); + border: 2px dashed var(--color-border-strong); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-disabled); + } + + .detail-empty__text { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + } + + /* Detail header */ + .detail-header { + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + background-color: var(--color-surface-2); + display: flex; + align-items: flex-start; + gap: var(--space-4); + } + + [data-theme="industrial"] .detail-header { + background-color: #1d1d1d; + } + + [data-theme="modern"] .detail-header { + background-color: rgba(240, 242, 255, 0.8); + } + + /* Customer Avatar */ + .customer-avatar { + width: 56px; + height: 56px; + border-radius: var(--radius-lg); + background-color: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.3rem; + color: var(--color-text-inverse); + flex-shrink: 0; + letter-spacing: -0.02em; + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .customer-avatar { + border-radius: 0; + color: #000; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + } + + .detail-header__info { + flex: 1; + min-width: 0; + } + + .detail-header__name { + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + text-transform: uppercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .detail-header__rfc { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-accent); + letter-spacing: 0.06em; + margin-top: 2px; + } + + .detail-header__meta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-2); + margin-top: var(--space-2); + } + + .detail-header__actions { + display: flex; + flex-direction: column; + gap: var(--space-2); + align-items: flex-end; + flex-shrink: 0; + } + + /* Detail body sections */ + .detail-section { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + + .detail-section:last-child { + border-bottom: none; + } + + .detail-section__title { + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-3); + } + + /* Info rows */ + .info-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3); + } + + .info-row { + display: flex; + flex-direction: column; + gap: 2px; + } + + .info-row--full { + grid-column: 1 / -1; + } + + .info-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + font-weight: var(--font-weight-semibold); + } + + .info-value { + font-size: var(--text-body-sm); + color: var(--color-text-primary); + font-weight: var(--font-weight-regular); + } + + .info-value--mono { + font-family: var(--font-mono); + font-size: var(--text-caption); + letter-spacing: 0.04em; + } + + .info-value--accent { + color: var(--color-text-accent); + font-weight: var(--font-weight-semibold); + } + + /* Credit block */ + .credit-block { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + .credit-metrics { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .credit-metric { + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-3); + text-align: center; + } + + [data-theme="industrial"] .credit-metric { + border-radius: 0; + } + + .credit-metric__label { + font-size: 0.62rem; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + font-weight: var(--font-weight-semibold); + } + + .credit-metric__value { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + margin-top: 3px; + } + + .credit-metric__value.available { color: var(--color-success); } + .credit-metric__value.used { color: var(--color-warning); } + + /* Credit progress bar */ + .credit-progress { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .credit-progress__labels { + display: flex; + justify-content: space-between; + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .progress-bar { + height: 8px; + background-color: var(--color-surface-3); + border-radius: var(--radius-full); + overflow: hidden; + } + + .progress-bar__fill { + height: 100%; + background-color: var(--color-warning); + border-radius: var(--radius-full); + transition: width var(--duration-slow) var(--ease-out); + } + + .progress-bar__fill.low { background-color: var(--color-success); } + .progress-bar__fill.high { background-color: var(--color-error); } + + /* Quick action buttons */ + .quick-actions { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-2); + } + + .action-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-1); + padding: var(--space-3) var(--space-2); + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + cursor: pointer; + transition: var(--transition-fast); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + text-align: center; + } + + [data-theme="industrial"] .action-btn { + border-radius: 0; + } + + .action-btn:hover { + background-color: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + } + + .action-btn--primary { + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-bg); + color: var(--btn-primary-text); + } + + [data-theme="industrial"] .action-btn--primary { + color: #000; + } + + .action-btn--primary:hover { + background-color: var(--btn-primary-bg-hover); + border-color: var(--btn-primary-bg-hover); + color: var(--btn-primary-text); + } + + [data-theme="industrial"] .action-btn--primary:hover { + color: #000; + } + + .action-btn__icon { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + /* Purchase history mini table */ + .history-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-caption); + } + + .history-table thead tr { + background-color: var(--color-surface-2); + border-bottom: 1px solid var(--color-border-strong); + } + + .history-table th { + padding: var(--space-2) var(--space-3); + text-align: left; + font-size: 0.6rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .history-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + } + + .history-table tbody tr:hover { + background-color: var(--color-primary-muted); + } + + .history-table td { + padding: var(--space-2) var(--space-3); + vertical-align: middle; + } + + .history-table td.folio { + font-family: var(--font-mono); + font-size: 0.7rem; + color: var(--color-text-accent); + letter-spacing: 0.04em; + } + + .history-table td.total { + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .history-table td.date { + color: var(--color-text-muted); + } + + /* Status mini badges */ + .mbadge { + display: inline-flex; + align-items: center; + padding: 1px 6px; + border-radius: var(--radius-full); + font-size: 0.6rem; + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: 0.03em; + } + + .mbadge--paid { + background-color: rgba(34,197,94,0.12); + color: var(--color-success); + } + + .mbadge--pending { + background-color: rgba(234,179,8,0.12); + color: var(--color-warning); + } + + .mbadge--overdue { + background-color: rgba(239,68,68,0.12); + color: var(--color-error); + } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + + @media (max-width: 1024px) { + .sidebar { + width: 56px; + overflow: visible; + } + + .sidebar__logo-text, + .sidebar__logo-sub, + .sidebar__section-label, + .nav-link__badge { + display: none; + } + + .nav-link { + justify-content: center; + padding: var(--space-2); + border-left: none; + border-bottom: 3px solid transparent; + } + + .nav-link.active { + border-left: none; + border-bottom-color: var(--color-primary); + } + + .sidebar__logo { + justify-content: center; + padding: var(--space-4) var(--space-2); + } + + .summary-card__delta { display: none; } + } + + @media (max-width: 900px) { + .content-split { + flex-direction: column; + } + + .panel-list { + width: 100%; + border-right: none; + border-bottom: 1px solid var(--color-border); + max-height: 55%; + } + + .panel-detail { + width: 100%; + max-height: 45%; + } + + .summary-bar { + padding: var(--space-3) var(--space-4); + gap: var(--space-3); + } + } + + @media (max-width: 640px) { + .page-header__actions .btn:not(.btn-primary) { + display: none; + } + + .summary-card { + min-width: 140px; + } + + .customers-table th.hide-mobile, + .customers-table td.hide-mobile { + display: none; + } + + .info-grid { + grid-template-columns: 1fr; + } + + .credit-metrics { + grid-template-columns: 1fr 1fr; + } + } + + /* ===================================================================== + SLIDE PANEL (panel deslizante) + ===================================================================== */ + + .panel-overlay { + position: fixed; inset: 0; + background: var(--overlay-backdrop, rgba(0,0,0,0.5)); + z-index: var(--z-modal, 1000); + opacity: 0; visibility: hidden; + transition: opacity var(--duration-normal, .25s) var(--ease-out, ease-out), + visibility var(--duration-normal, .25s) var(--ease-out, ease-out); + } + .panel-overlay.open { opacity: 1; visibility: visible; } + + .slide-panel { + position: fixed; top: 0; right: 0; + width: 380px; max-width: 90vw; height: 100vh; + background: var(--color-bg-elevated); + border-left: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); + z-index: calc(var(--z-modal, 1000) + 1); + transform: translateX(100%); + transition: transform var(--duration-slow, .35s) var(--ease-out, ease-out); + display: flex; flex-direction: column; overflow: hidden; + } + .slide-panel.open { transform: translateX(0); } + + .panel-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .panel-header h3 { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-secondary); color: var(--color-text-primary); + } + .btn-close { + width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px solid var(--color-border); + border-radius: var(--radius-md); color: var(--color-text-muted); + cursor: pointer; font-size: 18px; transition: var(--transition-fast); + } + .btn-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } + + .panel-body { + flex: 1; overflow-y: auto; padding: var(--space-5); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .client-avatar-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); } + .client-avatar { + width: 56px; height: 56px; border-radius: var(--radius-full); + background: var(--color-primary-muted); + display: flex; align-items: center; justify-content: center; + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-accent); + border: 2px solid var(--color-border-accent); flex-shrink: 0; + } + .client-info-main .client-name { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + } + .client-info-main .client-rfc { + font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--color-text-muted); + } + + .panel-section { margin-bottom: var(--space-5); } + .panel-section-title { + font-size: var(--text-caption); text-transform: uppercase; + letter-spacing: var(--tracking-widest); color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); + } + + .credit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } + .credit-item { + text-align: center; padding: var(--space-3); + background: var(--color-surface-1); border-radius: var(--radius-md); + border: 1px solid var(--color-border); + } + .credit-item .credit-label { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-1); } + .credit-item .credit-value { + font-family: var(--font-mono); font-size: var(--text-body); + font-weight: var(--font-weight-bold); color: var(--color-text-primary); + } + .credit-item .credit-value.success { color: var(--color-success); } + .credit-item .credit-value.warning { color: var(--color-warning); } + + .credit-bar-track { height: 8px; background: var(--color-surface-2); border-radius: var(--radius-full); overflow: hidden; } + .credit-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: var(--transition-normal); } + + .vehicle-item { + display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); + background: var(--color-surface-1); border: 1px solid var(--color-border); + border-radius: var(--radius-md); margin-bottom: var(--space-2); + } + + .panel-footer { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + display: flex; gap: var(--space-2); flex-shrink: 0; + } + .panel-footer button { + flex: 1; padding: var(--space-3); border-radius: var(--radius-md); + font-family: var(--font-body); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); cursor: pointer; + transition: var(--transition-fast); border: 1px solid; + } + .panel-footer .btn-edit { + background: var(--btn-secondary-bg); color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + .panel-footer .btn-edit:hover { background: var(--btn-secondary-bg-hover); } + .panel-footer .btn-sale { + background: var(--btn-primary-bg); color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + .panel-footer .btn-sale:hover { background: var(--btn-primary-bg-hover); } + + /* ===================================================================== + OFFLINE BANNER + ===================================================================== */ + + @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + @keyframes slideUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } + + .banner { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: 500; line-height: 1.4; + } + .banner--warning { + background: var(--color-warning-light, #fef9c3); color: var(--color-warning-dark, #854d0e); + border: 1px solid var(--color-warning, #eab308); + } + .banner--success { + background: var(--color-success-light, #dcfce7); color: var(--color-success-dark, #166534); + border: 1px solid var(--color-success, #22c55e); + } + .banner--error { + background: var(--color-error-light, #fef2f2); color: var(--color-error-dark, #991b1b); + border: 1px solid var(--color-error, #ef4444); + } + .banner--dismissing { animation: slideUp 0.3s ease-in forwards; } + .banner__icon { font-size: 18px; flex-shrink: 0; } + .banner__text { flex: 1; } + .banner__text strong { font-weight: 700; } + .banner__dismiss { + background: none; border: none; cursor: pointer; font-size: 18px; + padding: var(--space-1); opacity: 0.7; color: inherit; + } + .banner__dismiss:hover { opacity: 1; } + + .purchases-table { + width: 100%; border-collapse: collapse; + } + .purchases-table th, .purchases-table td { + padding: var(--space-2); text-align: left; font-size: var(--text-caption); + border-bottom: 1px solid var(--color-border); + } + .purchases-table th { + color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-wide); font-weight: var(--font-weight-semibold); + } + .purchases-table .amount-cell { + font-family: var(--font-mono); text-align: right; font-weight: var(--font-weight-semibold); + } + .purchases-table th:last-child { text-align: right; } diff --git a/pos/static/css/customers.min.css b/pos/static/css/customers.min.css new file mode 100644 index 0000000..8495a30 --- /dev/null +++ b/pos/static/css/customers.min.css @@ -0,0 +1,1552 @@ +/* Extracted from customers.html */ + +/* ===================================================================== + BASE RESET & BODY + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + background-color: var(--color-bg-base); + color: var(--color-text-primary); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + display: flex; + flex-direction: column; + overflow: hidden; + } + + /* Dot-grid on body for modern theme */ + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ===================================================================== + THEME SWITCHER BAR (fixed, 36px) + ===================================================================== */ + + .theme-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 36px; + padding: 0 var(--space-5); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + flex-shrink: 0; + z-index: var(--z-sticky); + } + + [data-theme="industrial"] .theme-bar { + background-color: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + color: var(--color-text-accent); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + letter-spacing: var(--tracking-widest); + } + + .theme-bar__brand-dot { + width: 7px; + height: 7px; + background-color: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: pulse-dot 2.5s ease-in-out infinite; + } + + @keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } + } + + .theme-bar__center { + display: flex; + align-items: center; + gap: var(--space-6); + color: var(--color-text-muted); + font-size: var(--text-caption); + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .theme-bar__user { + display: flex; + align-items: center; + gap: var(--space-2); + color: var(--color-text-secondary); + } + + .theme-bar__user-avatar { + width: 20px; + height: 20px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + } + + [data-theme="industrial"] .theme-bar__user-avatar { + color: #000; + } + + /* Theme switcher pill */ + .theme-switcher { + display: flex; + align-items: center; + background-color: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + gap: 2px; + } + + .theme-btn { + display: flex; + align-items: center; + gap: var(--space-1); + padding: 3px var(--space-3); + border: none; + border-radius: var(--radius-full); + font-family: var(--font-body); + font-size: 0.68rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-fast); + background: transparent; + color: var(--color-text-muted); + } + + .theme-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + box-shadow: var(--shadow-sm); + } + + [data-theme="industrial"] .theme-btn.active { + color: #000; + } + + /* ===================================================================== + APP SHELL — below theme bar + ===================================================================== */ + + .app-shell { + display: flex; + flex: 1; + overflow: hidden; + } + + /* ===================================================================== + SIDEBAR NAVIGATION (~220px) + ===================================================================== */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background-color: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + [data-theme="industrial"] .sidebar { + background-color: #161616; + border-right-color: var(--color-border); + } + + .sidebar__logo { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + } + + .sidebar__logo-icon { + width: 32px; + height: 32px; + background-color: var(--color-primary); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + [data-theme="industrial"] .sidebar__logo-icon { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + .sidebar__logo-icon svg { + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .sidebar__logo-icon svg { + color: #000; + } + + .sidebar__logo-text { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.95rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1.1; + } + + .sidebar__logo-sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-regular); + letter-spacing: var(--tracking-wide); + } + + .sidebar__section-label { + padding: var(--space-4) var(--space-5) var(--space-2); + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-disabled); + } + + .sidebar__nav { + list-style: none; + padding: var(--space-2) 0; + flex: 1; + } + + .nav-item { + display: block; + } + + .nav-link { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-5); + height: 38px; + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + white-space: nowrap; + } + + .nav-link:hover { + background-color: var(--color-primary-muted); + color: var(--color-text-primary); + } + + .nav-link.active { + background-color: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + [data-theme="industrial"] .nav-link.active { + background-color: rgba(245, 166, 35, 0.10); + } + + .nav-link__icon { + width: 16px; + height: 16px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-link.active .nav-link__icon { + opacity: 1; + } + + .nav-link__badge { + margin-left: auto; + background-color: var(--color-primary); + color: var(--color-text-inverse); + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + padding: 1px 6px; + border-radius: var(--radius-full); + min-width: 18px; + text-align: center; + } + + [data-theme="industrial"] .nav-link__badge { + color: #000; + } + + .sidebar__footer { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ===================================================================== + MAIN CONTENT AREA + ===================================================================== */ + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* Page header */ + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-5) var(--space-6); + background-color: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background-color: var(--color-surface-1); + border-bottom-color: var(--color-border); + } + + [data-theme="modern"] .page-header { + background-color: rgba(255,255,255,0.92); + backdrop-filter: blur(8px); + } + + .page-header__title { + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + letter-spacing: var(--heading-tracking-h5); + color: var(--color-text-primary); + text-transform: uppercase; + } + + .page-header__subtitle { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + font-weight: var(--font-weight-regular); + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* Buttons */ + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-5); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + border: 1.5px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + letter-spacing: var(--tracking-normal); + } + + .btn-primary { + background-color: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn-primary:hover { + background-color: var(--btn-primary-bg-hover); + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .btn-primary:active { + background-color: var(--btn-primary-bg-active); + transform: translateY(0); + } + + .btn-secondary { + background-color: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn-secondary:hover { + background-color: var(--btn-secondary-bg-hover); + } + + .btn-ghost { + background-color: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn-ghost:hover { + background-color: var(--color-primary-muted); + color: var(--color-primary); + border-color: var(--color-primary); + } + + .btn-sm { + height: 30px; + padding: 0 var(--space-4); + font-size: var(--text-caption); + } + + [data-theme="modern"] .btn { + border-radius: var(--radius-lg); + } + + /* ===================================================================== + SUMMARY CARDS + ===================================================================== */ + + .summary-bar { + display: flex; + gap: var(--space-4); + padding: var(--space-5) var(--space-6); + background-color: transparent; + flex-shrink: 0; + overflow-x: auto; + } + + .summary-card { + flex: 1; + min-width: 160px; + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-2); + transition: var(--transition-normal); + } + + [data-theme="industrial"] .summary-card { + background-color: var(--color-surface-1); + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + } + + .summary-card:hover { + border-color: var(--color-border-accent); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .summary-card:hover { + box-shadow: var(--shadow-accent); + } + + .summary-card__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + font-weight: var(--font-weight-semibold); + } + + .summary-card__value { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--tracking-snug); + line-height: 1; + } + + .summary-card__delta { + display: flex; + align-items: center; + gap: var(--space-1); + font-size: var(--text-caption); + color: var(--color-success); + } + + .summary-card__delta.neg { + color: var(--color-error); + } + + .summary-card__icon { + width: 32px; + height: 32px; + border-radius: var(--radius-md); + background-color: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + align-self: flex-start; + margin-bottom: var(--space-1); + } + + [data-theme="industrial"] .summary-card__icon { + border-radius: 0; + } + + /* ===================================================================== + CONTENT SPLIT (list + detail) + ===================================================================== */ + + .content-split { + display: flex; + flex: 1; + overflow: hidden; + gap: 0; + } + + /* ===================================================================== + LEFT PANEL — Customer List (60%) + ===================================================================== */ + + .panel-list { + display: flex; + flex-direction: column; + width: 60%; + min-width: 0; + border-right: 1px solid var(--color-border); + overflow: hidden; + } + + /* Search & filter row */ + .list-toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + background-color: var(--color-surface-1); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .list-toolbar { + background-color: rgba(248, 249, 255, 0.95); + } + + .search-wrap { + position: relative; + flex: 1; + } + + .search-icon { + position: absolute; + left: var(--space-3); + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + pointer-events: none; + } + + .search-input { + width: 100%; + height: 38px; + padding: 0 var(--space-4) 0 38px; + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + outline: none; + transition: var(--transition-fast); + } + + .search-input::placeholder { + color: var(--color-text-muted); + } + + .search-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-lg); + background-color: #fff; + } + + .filter-select { + height: 38px; + padding: 0 var(--space-4); + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + outline: none; + cursor: pointer; + transition: var(--transition-fast); + } + + .filter-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + [data-theme="modern"] .filter-select { + border-radius: var(--radius-lg); + background-color: #fff; + } + + /* Customer Table */ + .table-wrap { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .customers-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .customers-table thead { + position: sticky; + top: 0; + z-index: 2; + } + + .customers-table thead tr { + background-color: var(--color-surface-2); + border-bottom: 2px solid var(--color-border-strong); + } + + [data-theme="industrial"] .customers-table thead tr { + background-color: #1d1d1d; + } + + .customers-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .customers-table th:first-child { padding-left: var(--space-5); } + .customers-table th:last-child { padding-right: var(--space-5); } + + .customers-table tbody tr { + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: var(--transition-fast); + } + + .customers-table tbody tr:hover { + background-color: var(--color-primary-muted); + } + + .customers-table tbody tr.selected { + background-color: var(--color-primary-muted); + border-left: 3px solid var(--color-primary); + } + + .customers-table td { + padding: var(--space-3) var(--space-4); + vertical-align: middle; + color: var(--color-text-primary); + white-space: nowrap; + } + + .customers-table td:first-child { padding-left: var(--space-5); } + .customers-table td:last-child { padding-right: var(--space-5); } + + .cell-num { + color: var(--color-text-muted); + font-size: var(--text-caption); + } + + .cell-name { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .cell-name-sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-regular); + } + + .cell-rfc { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-secondary); + letter-spacing: 0.03em; + } + + .cell-credit { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-success); + } + + .cell-credit.low { + color: var(--color-warning); + } + + .cell-credit.none { + color: var(--color-error); + } + + .cell-date { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* Status badges */ + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + border-radius: var(--radius-full); + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + white-space: nowrap; + } + + .badge--active { + background-color: rgba(34, 197, 94, 0.15); + color: var(--color-success); + border: 1px solid rgba(34, 197, 94, 0.3); + } + + .badge--inactive { + background-color: rgba(163, 163, 163, 0.15); + color: var(--color-text-muted); + border: 1px solid var(--color-border); + } + + .badge--warning { + background-color: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + border: 1px solid rgba(234, 179, 8, 0.3); + } + + .badge-dot { + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background-color: currentColor; + } + + /* Tipo chip */ + .tipo-chip { + display: inline-block; + padding: 2px 7px; + border-radius: var(--radius-sm); + font-size: 0.62rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .tipo-chip--taller { + background-color: rgba(245, 166, 35, 0.12); + color: var(--color-warning); + border: 1px solid rgba(245, 166, 35, 0.3); + } + + [data-theme="modern"] .tipo-chip--taller { + background-color: rgba(255, 107, 53, 0.10); + color: var(--color-primary); + border-color: rgba(255, 107, 53, 0.25); + } + + .tipo-chip--mostrador { + background-color: rgba(99, 102, 241, 0.12); + color: #818cf8; + border: 1px solid rgba(99, 102, 241, 0.3); + } + + .tipo-chip--mayoreo { + background-color: rgba(34, 197, 94, 0.10); + color: var(--color-success); + border: 1px solid rgba(34, 197, 94, 0.3); + } + + /* Table pagination footer */ + .table-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + background-color: var(--color-surface-1); + border-top: 1px solid var(--color-border); + flex-shrink: 0; + } + + .table-footer__info { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .page-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + cursor: pointer; + transition: var(--transition-fast); + } + + .page-btn:hover { + background-color: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + } + + .page-btn.active { + background-color: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-semibold); + } + + [data-theme="industrial"] .page-btn.active { + color: #000; + } + + /* ===================================================================== + RIGHT PANEL — Customer Detail (40%) + ===================================================================== */ + + .panel-detail { + width: 40%; + min-width: 0; + display: flex; + flex-direction: column; + background-color: var(--color-bg-elevated); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + [data-theme="industrial"] .panel-detail { + background-color: var(--color-surface-1); + } + + [data-theme="modern"] .panel-detail { + background-color: rgba(248, 249, 255, 0.95); + } + + /* Empty state */ + .detail-empty { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-4); + color: var(--color-text-disabled); + padding: var(--space-10); + text-align: center; + } + + .detail-empty__icon { + width: 56px; + height: 56px; + border-radius: var(--radius-xl); + border: 2px dashed var(--color-border-strong); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-text-disabled); + } + + .detail-empty__text { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + } + + /* Detail header */ + .detail-header { + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + background-color: var(--color-surface-2); + display: flex; + align-items: flex-start; + gap: var(--space-4); + } + + [data-theme="industrial"] .detail-header { + background-color: #1d1d1d; + } + + [data-theme="modern"] .detail-header { + background-color: rgba(240, 242, 255, 0.8); + } + + /* Customer Avatar */ + .customer-avatar { + width: 56px; + height: 56px; + border-radius: var(--radius-lg); + background-color: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.3rem; + color: var(--color-text-inverse); + flex-shrink: 0; + letter-spacing: -0.02em; + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .customer-avatar { + border-radius: 0; + color: #000; + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + } + + .detail-header__info { + flex: 1; + min-width: 0; + } + + .detail-header__name { + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h5); + text-transform: uppercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .detail-header__rfc { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-accent); + letter-spacing: 0.06em; + margin-top: 2px; + } + + .detail-header__meta { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: var(--space-2); + margin-top: var(--space-2); + } + + .detail-header__actions { + display: flex; + flex-direction: column; + gap: var(--space-2); + align-items: flex-end; + flex-shrink: 0; + } + + /* Detail body sections */ + .detail-section { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + + .detail-section:last-child { + border-bottom: none; + } + + .detail-section__title { + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-3); + } + + /* Info rows */ + .info-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3); + } + + .info-row { + display: flex; + flex-direction: column; + gap: 2px; + } + + .info-row--full { + grid-column: 1 / -1; + } + + .info-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + font-weight: var(--font-weight-semibold); + } + + .info-value { + font-size: var(--text-body-sm); + color: var(--color-text-primary); + font-weight: var(--font-weight-regular); + } + + .info-value--mono { + font-family: var(--font-mono); + font-size: var(--text-caption); + letter-spacing: 0.04em; + } + + .info-value--accent { + color: var(--color-text-accent); + font-weight: var(--font-weight-semibold); + } + + /* Credit block */ + .credit-block { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + .credit-metrics { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .credit-metric { + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-3); + text-align: center; + } + + [data-theme="industrial"] .credit-metric { + border-radius: 0; + } + + .credit-metric__label { + font-size: 0.62rem; + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + font-weight: var(--font-weight-semibold); + } + + .credit-metric__value { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + margin-top: 3px; + } + + .credit-metric__value.available { color: var(--color-success); } + .credit-metric__value.used { color: var(--color-warning); } + + /* Credit progress bar */ + .credit-progress { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .credit-progress__labels { + display: flex; + justify-content: space-between; + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .progress-bar { + height: 8px; + background-color: var(--color-surface-3); + border-radius: var(--radius-full); + overflow: hidden; + } + + .progress-bar__fill { + height: 100%; + background-color: var(--color-warning); + border-radius: var(--radius-full); + transition: width var(--duration-slow) var(--ease-out); + } + + .progress-bar__fill.low { background-color: var(--color-success); } + .progress-bar__fill.high { background-color: var(--color-error); } + + /* Quick action buttons */ + .quick-actions { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-2); + } + + .action-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-1); + padding: var(--space-3) var(--space-2); + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + cursor: pointer; + transition: var(--transition-fast); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + text-align: center; + } + + [data-theme="industrial"] .action-btn { + border-radius: 0; + } + + .action-btn:hover { + background-color: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + } + + .action-btn--primary { + background-color: var(--btn-primary-bg); + border-color: var(--btn-primary-bg); + color: var(--btn-primary-text); + } + + [data-theme="industrial"] .action-btn--primary { + color: #000; + } + + .action-btn--primary:hover { + background-color: var(--btn-primary-bg-hover); + border-color: var(--btn-primary-bg-hover); + color: var(--btn-primary-text); + } + + [data-theme="industrial"] .action-btn--primary:hover { + color: #000; + } + + .action-btn__icon { + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + /* Purchase history mini table */ + .history-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-caption); + } + + .history-table thead tr { + background-color: var(--color-surface-2); + border-bottom: 1px solid var(--color-border-strong); + } + + .history-table th { + padding: var(--space-2) var(--space-3); + text-align: left; + font-size: 0.6rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .history-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + } + + .history-table tbody tr:hover { + background-color: var(--color-primary-muted); + } + + .history-table td { + padding: var(--space-2) var(--space-3); + vertical-align: middle; + } + + .history-table td.folio { + font-family: var(--font-mono); + font-size: 0.7rem; + color: var(--color-text-accent); + letter-spacing: 0.04em; + } + + .history-table td.total { + font-family: var(--font-mono); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .history-table td.date { + color: var(--color-text-muted); + } + + /* Status mini badges */ + .mbadge { + display: inline-flex; + align-items: center; + padding: 1px 6px; + border-radius: var(--radius-full); + font-size: 0.6rem; + font-weight: var(--font-weight-semibold); + text-transform: uppercase; + letter-spacing: 0.03em; + } + + .mbadge--paid { + background-color: rgba(34,197,94,0.12); + color: var(--color-success); + } + + .mbadge--pending { + background-color: rgba(234,179,8,0.12); + color: var(--color-warning); + } + + .mbadge--overdue { + background-color: rgba(239,68,68,0.12); + color: var(--color-error); + } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + + @media (max-width: 1024px) { + .sidebar { + width: 56px; + overflow: visible; + } + + .sidebar__logo-text, + .sidebar__logo-sub, + .sidebar__section-label, + .nav-link__badge { + display: none; + } + + .nav-link { + justify-content: center; + padding: var(--space-2); + border-left: none; + border-bottom: 3px solid transparent; + } + + .nav-link.active { + border-left: none; + border-bottom-color: var(--color-primary); + } + + .sidebar__logo { + justify-content: center; + padding: var(--space-4) var(--space-2); + } + + .summary-card__delta { display: none; } + } + + @media (max-width: 900px) { + .content-split { + flex-direction: column; + } + + .panel-list { + width: 100%; + border-right: none; + border-bottom: 1px solid var(--color-border); + max-height: 55%; + } + + .panel-detail { + width: 100%; + max-height: 45%; + } + + .summary-bar { + padding: var(--space-3) var(--space-4); + gap: var(--space-3); + } + } + + @media (max-width: 640px) { + .page-header__actions .btn:not(.btn-primary) { + display: none; + } + + .summary-card { + min-width: 140px; + } + + .customers-table th.hide-mobile, + .customers-table td.hide-mobile { + display: none; + } + + .info-grid { + grid-template-columns: 1fr; + } + + .credit-metrics { + grid-template-columns: 1fr 1fr; + } + } + + /* ===================================================================== + SLIDE PANEL (panel deslizante) + ===================================================================== */ + + .panel-overlay { + position: fixed; inset: 0; + background: var(--overlay-backdrop, rgba(0,0,0,0.5)); + z-index: var(--z-modal, 1000); + opacity: 0; visibility: hidden; + transition: opacity var(--duration-normal, .25s) var(--ease-out, ease-out), + visibility var(--duration-normal, .25s) var(--ease-out, ease-out); + } + .panel-overlay.open { opacity: 1; visibility: visible; } + + .slide-panel { + position: fixed; top: 0; right: 0; + width: 380px; max-width: 90vw; height: 100vh; + background: var(--color-bg-elevated); + border-left: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); + z-index: calc(var(--z-modal, 1000) + 1); + transform: translateX(100%); + transition: transform var(--duration-slow, .35s) var(--ease-out, ease-out); + display: flex; flex-direction: column; overflow: hidden; + } + .slide-panel.open { transform: translateX(0); } + + .panel-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .panel-header h3 { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-secondary); color: var(--color-text-primary); + } + .btn-close { + width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px solid var(--color-border); + border-radius: var(--radius-md); color: var(--color-text-muted); + cursor: pointer; font-size: 18px; transition: var(--transition-fast); + } + .btn-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } + + .panel-body { + flex: 1; overflow-y: auto; padding: var(--space-5); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .client-avatar-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); } + .client-avatar { + width: 56px; height: 56px; border-radius: var(--radius-full); + background: var(--color-primary-muted); + display: flex; align-items: center; justify-content: center; + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-accent); + border: 2px solid var(--color-border-accent); flex-shrink: 0; + } + .client-info-main .client-name { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + } + .client-info-main .client-rfc { + font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--color-text-muted); + } + + .panel-section { margin-bottom: var(--space-5); } + .panel-section-title { + font-size: var(--text-caption); text-transform: uppercase; + letter-spacing: var(--tracking-widest); color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); + } + + .credit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); } + .credit-item { + text-align: center; padding: var(--space-3); + background: var(--color-surface-1); border-radius: var(--radius-md); + border: 1px solid var(--color-border); + } + .credit-item .credit-label { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-1); } + .credit-item .credit-value { + font-family: var(--font-mono); font-size: var(--text-body); + font-weight: var(--font-weight-bold); color: var(--color-text-primary); + } + .credit-item .credit-value.success { color: var(--color-success); } + .credit-item .credit-value.warning { color: var(--color-warning); } + + .credit-bar-track { height: 8px; background: var(--color-surface-2); border-radius: var(--radius-full); overflow: hidden; } + .credit-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: var(--transition-normal); } + + .vehicle-item { + display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); + background: var(--color-surface-1); border: 1px solid var(--color-border); + border-radius: var(--radius-md); margin-bottom: var(--space-2); + } + + .panel-footer { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + display: flex; gap: var(--space-2); flex-shrink: 0; + } + .panel-footer button { + flex: 1; padding: var(--space-3); border-radius: var(--radius-md); + font-family: var(--font-body); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); cursor: pointer; + transition: var(--transition-fast); border: 1px solid; + } + .panel-footer .btn-edit { + background: var(--btn-secondary-bg); color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + .panel-footer .btn-edit:hover { background: var(--btn-secondary-bg-hover); } + .panel-footer .btn-sale { + background: var(--btn-primary-bg); color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + .panel-footer .btn-sale:hover { background: var(--btn-primary-bg-hover); } + + /* ===================================================================== + OFFLINE BANNER + ===================================================================== */ + + @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + @keyframes slideUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } + + .banner { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: 500; line-height: 1.4; + } + .banner--warning { + background: var(--color-warning-light, #fef9c3); color: var(--color-warning-dark, #854d0e); + border: 1px solid var(--color-warning, #eab308); + } + .banner--success { + background: var(--color-success-light, #dcfce7); color: var(--color-success-dark, #166534); + border: 1px solid var(--color-success, #22c55e); + } + .banner--error { + background: var(--color-error-light, #fef2f2); color: var(--color-error-dark, #991b1b); + border: 1px solid var(--color-error, #ef4444); + } + .banner--dismissing { animation: slideUp 0.3s ease-in forwards; } + .banner__icon { font-size: 18px; flex-shrink: 0; } + .banner__text { flex: 1; } + .banner__text strong { font-weight: 700; } + .banner__dismiss { + background: none; border: none; cursor: pointer; font-size: 18px; + padding: var(--space-1); opacity: 0.7; color: inherit; + } + .banner__dismiss:hover { opacity: 1; } + + .purchases-table { + width: 100%; border-collapse: collapse; + } + .purchases-table th, .purchases-table td { + padding: var(--space-2); text-align: left; font-size: var(--text-caption); + border-bottom: 1px solid var(--color-border); + } + .purchases-table th { + color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-wide); font-weight: var(--font-weight-semibold); + } + .purchases-table .amount-cell { + font-family: var(--font-mono); text-align: right; font-weight: var(--font-weight-semibold); + } + .purchases-table th:last-child { text-align: right; } diff --git a/pos/static/css/dashboard.css b/pos/static/css/dashboard.css new file mode 100644 index 0000000..240b732 --- /dev/null +++ b/pos/static/css/dashboard.css @@ -0,0 +1,1237 @@ +/* Extracted from dashboard.html */ + +/* ========================================================================== + BASE RESET + ========================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + background-color: var(--color-bg-base); + color: var(--color-text-primary); + min-height: 100vh; + display: flex; + flex-direction: column; + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + } + + /* Modern theme dot-grid on body */ + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + a { + text-decoration: none; + color: inherit; + } + + /* ========================================================================== + THEME SWITCHER BAR (fixed top, 36px) + ========================================================================== */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 36px; + z-index: var(--z-sticky); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + font-size: var(--text-caption); + font-family: var(--font-body); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + } + + .theme-bar__brand { + font-family: var(--font-heading); + font-weight: var(--font-weight-bold); + font-size: 0.8125rem; + color: var(--color-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + .theme-bar__controls { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .theme-switcher { + display: flex; + align-items: center; + gap: var(--space-1); + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + } + + .theme-btn { + height: 22px; + padding: 0 var(--space-3); + border-radius: var(--radius-full); + border: none; + cursor: pointer; + font-family: var(--font-body); + font-size: 11px; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + background: transparent; + color: var(--color-text-muted); + transition: var(--transition-fast); + } + + .theme-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn:not(.active):hover { + color: var(--color-text-primary); + } + + /* ========================================================================== + APP SHELL — sidebar + main + ========================================================================== */ + + .app-shell { + display: flex; + flex: 1; + margin-top: 36px; /* offset for fixed theme bar */ + min-height: calc(100vh - 36px); + position: relative; + } + + /* ========================================================================== + SIDEBAR + ========================================================================== */ + + .sidebar { + width: 260px; + flex-shrink: 0; + background-color: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + display: flex; + flex-direction: column; + position: fixed; + top: 36px; + left: 0; + bottom: 0; + z-index: var(--z-dropdown); + transition: transform var(--duration-normal) var(--ease-in-out); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar__logo { + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + } + + .sidebar__logo-text { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-primary); + line-height: 1; + } + + .sidebar__logo-sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .sidebar__nav { + flex: 1; + padding: var(--space-4) 0; + } + + .sidebar__section-label { + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + padding: var(--space-3) var(--space-5) var(--space-2); + margin-top: var(--space-2); + } + + .nav-link { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-5); + color: var(--color-text-secondary); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + transition: var(--transition-fast); + border-left: 3px solid transparent; + position: relative; + } + + .nav-link:hover { + background-color: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-link.active { + background-color: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-link__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + display: flex; + align-items: center; + justify-content: center; + } + + .nav-link.active .nav-link__icon { + opacity: 1; + } + + .sidebar__footer { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + } + + .user-chip { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .user-chip__avatar { + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--font-weight-bold); + font-size: 13px; + flex-shrink: 0; + } + + .user-chip__info { + flex: 1; + min-width: 0; + } + + .user-chip__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .user-chip__role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================== + SIDEBAR OVERLAY (mobile backdrop) + ========================================================================== */ + + .sidebar-overlay { + display: none; + position: fixed; + inset: 0; + top: 36px; + background-color: var(--overlay-backdrop); + z-index: calc(var(--z-dropdown) - 1); + } + + /* ========================================================================== + MAIN CONTENT + ========================================================================== */ + + .main { + flex: 1; + margin-left: 220px; + min-width: 0; + display: flex; + flex-direction: column; + } + + /* ========================================================================== + TOP HEADER BAR + ========================================================================== */ + + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background-color: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + gap: var(--space-4); + flex-shrink: 0; + } + + .header__left { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .hamburger-btn { + display: none; + width: 36px; + height: 36px; + background: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + color: var(--color-text-secondary); + align-items: center; + justify-content: center; + transition: var(--transition-fast); + } + + .hamburger-btn:hover { + background-color: var(--color-surface-2); + color: var(--color-text-primary); + } + + .header__greeting { + display: flex; + flex-direction: column; + } + + .header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + letter-spacing: var(--heading-tracking-h5); + color: var(--color-text-primary); + line-height: 1.2; + } + + .header__subtitle { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 1px; + } + + .header__right { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .header__store-badge { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background-color: var(--color-primary-muted); + border: 1px solid var(--color-border-accent); + border-radius: var(--radius-md); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); + letter-spacing: var(--tracking-wide); + } + + .icon-btn { + width: 36px; + height: 36px; + background: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + color: var(--color-text-secondary); + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-fast); + position: relative; + } + + .icon-btn:hover { + background-color: var(--color-surface-2); + color: var(--color-text-primary); + } + + .notif-dot { + position: absolute; + top: 6px; + right: 6px; + width: 7px; + height: 7px; + border-radius: var(--radius-full); + background-color: var(--color-error); + border: 1.5px solid var(--color-bg-elevated); + } + + /* ========================================================================== + DASHBOARD CONTENT AREA + ========================================================================== */ + + .dashboard { + flex: 1; + padding: var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-6); + overflow-y: auto; + } + + /* ========================================================================== + SECTION TITLE + ========================================================================== */ + + .section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .section-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + color: var(--color-text-secondary); + } + + .section-action { + font-size: var(--text-caption); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + cursor: pointer; + letter-spacing: var(--tracking-wide); + } + + .section-action:hover { + text-decoration: underline; + } + + /* ========================================================================== + KPI CARDS ROW + ========================================================================== */ + + .kpi-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .kpi-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-3); + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .kpi-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .kpi-card { + box-shadow: var(--shadow-md); + } + + .kpi-card:hover { + border-color: var(--color-border-strong); + transform: translateY(-1px); + } + + .kpi-card__accent-bar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background-color: var(--color-primary); + } + + .kpi-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + display: flex; + align-items: center; + justify-content: space-between; + } + + .kpi-card__icon { + width: 28px; + height: 28px; + border-radius: var(--radius-md); + background-color: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + } + + .kpi-card__value { + font-family: var(--font-mono); + font-size: 1.625rem; + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + line-height: 1; + letter-spacing: var(--tracking-tight); + } + + .kpi-card__meta { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + } + + .kpi-tag { + display: inline-flex; + align-items: center; + gap: 2px; + font-size: 11px; + font-weight: var(--font-weight-semibold); + padding: 2px var(--space-2); + border-radius: var(--radius-full); + } + + .kpi-tag--up { + background-color: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .kpi-tag--neutral { + background-color: var(--color-surface-2); + color: var(--color-text-muted); + } + + .kpi-meta-text { + color: var(--color-text-muted); + } + + /* Progress bar inside KPI */ + .kpi-progress { + margin-top: var(--space-1); + } + + .kpi-progress__track { + height: 4px; + background-color: var(--color-surface-3); + border-radius: var(--radius-full); + overflow: hidden; + } + + .kpi-progress__fill { + height: 100%; + background-color: var(--color-primary); + border-radius: var(--radius-full); + transition: width var(--duration-slow) var(--ease-out); + } + + .kpi-progress__label { + display: flex; + justify-content: space-between; + font-size: 10px; + color: var(--color-text-muted); + margin-top: var(--space-1); + } + + /* ========================================================================== + SALES CHART SECTION + ========================================================================== */ + + .chart-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + } + + [data-theme="industrial"] .chart-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .chart-card { + box-shadow: var(--shadow-md); + } + + .chart-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-5); + flex-wrap: wrap; + gap: var(--space-3); + } + + .period-selector { + display: flex; + gap: var(--space-1); + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 3px; + } + + .period-btn { + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-sm); + border: none; + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + background: transparent; + color: var(--color-text-muted); + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .period-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .period-btn:not(.active):hover { + color: var(--color-text-primary); + background-color: var(--color-surface-3); + } + + /* Bar chart */ + .bar-chart { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--space-2); + height: 140px; + padding-bottom: var(--space-6); + position: relative; + } + + /* Horizontal grid lines */ + .bar-chart::before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: var(--space-6); + background-image: + linear-gradient(to bottom, + var(--color-border) 1px, + transparent 1px, + transparent 33%, + var(--color-border) 33%, + transparent 34%, + transparent 66%, + var(--color-border) 66%, + transparent 67% + ); + pointer-events: none; + } + + .bar-chart__col { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + min-width: 0; + position: relative; + height: 100%; + justify-content: flex-end; + } + + .bar-chart__bar-wrap { + width: 100%; + display: flex; + align-items: flex-end; + justify-content: center; + flex: 1; + } + + .bar-chart__bar { + width: 70%; + max-width: 36px; + background-color: var(--color-primary); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + opacity: 0.85; + transition: opacity var(--transition-fast), transform var(--transition-fast); + cursor: pointer; + position: relative; + } + + .bar-chart__bar.today { + opacity: 1; + box-shadow: 0 0 12px rgba(0,0,0,0.3); + } + + .bar-chart__bar:hover { + opacity: 1; + transform: scaleX(1.1); + } + + /* Tooltip on hover */ + .bar-chart__bar::after { + content: attr(data-value); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background-color: var(--color-surface-3); + color: var(--color-text-primary); + font-size: 10px; + font-family: var(--font-mono); + padding: 3px var(--space-2); + border-radius: var(--radius-sm); + white-space: nowrap; + opacity: 0; + pointer-events: none; + margin-bottom: 4px; + border: 1px solid var(--color-border); + transition: opacity var(--transition-fast); + } + + .bar-chart__bar:hover::after { + opacity: 1; + } + + .bar-chart__label { + font-size: 11px; + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: absolute; + bottom: 0; + } + + .chart-legend { + display: flex; + gap: var(--space-5); + margin-top: var(--space-3); + flex-wrap: wrap; + } + + .legend-item { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .legend-dot { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + flex-shrink: 0; + } + + .legend-dot--success { + background-color: var(--color-success); + } + + /* ========================================================================== + TWO-COLUMN SECTION (Top Productos / Top Clientes) + ========================================================================== */ + + .two-col-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); + } + + .rank-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + } + + [data-theme="industrial"] .rank-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .rank-card { + box-shadow: var(--shadow-md); + } + + .rank-list { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .rank-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-3); + border-radius: var(--radius-md); + transition: var(--transition-fast); + } + + .rank-item:hover { + background-color: var(--color-surface-2); + } + + .rank-num { + width: 22px; + height: 22px; + border-radius: var(--radius-full); + background-color: var(--color-surface-3); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: var(--font-weight-bold); + color: var(--color-text-muted); + flex-shrink: 0; + } + + .rank-num--1 { + background-color: rgba(234, 179, 8, 0.2); + color: var(--color-warning); + } + + .rank-num--2 { + background-color: var(--color-surface-3); + color: var(--color-text-secondary); + } + + .rank-item__info { + flex: 1; + min-width: 0; + } + + .rank-item__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .rank-item__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 1px; + } + + .rank-item__value { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + flex-shrink: 0; + text-align: right; + } + + .rank-item__bar-bg { + position: relative; + height: 3px; + background-color: var(--color-surface-3); + border-radius: var(--radius-full); + margin-top: var(--space-1); + overflow: hidden; + } + + .rank-item__bar-fill { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--color-primary); + border-radius: var(--radius-full); + opacity: 0.6; + } + + /* ========================================================================== + ALERTS SECTION + ========================================================================== */ + + .alerts-grid { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + .alert-item { + display: flex; + align-items: flex-start; + gap: var(--space-4); + padding: var(--space-4); + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + transition: var(--transition-fast); + } + + .alert-item:hover { + border-color: var(--color-border-strong); + } + + .alert-item--error { + border-left: 4px solid var(--color-error); + } + + .alert-item--warning { + border-left: 4px solid var(--color-warning); + } + + .alert-item--orange { + border-left: 4px solid var(--color-primary); + } + + .alert-badge { + flex-shrink: 0; + min-width: 24px; + height: 24px; + padding: 0 var(--space-2); + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + } + + .alert-badge--error { + background-color: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .alert-badge--warning { + background-color: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .alert-badge--orange { + background-color: var(--color-primary-muted); + color: var(--color-primary); + } + + .alert-icon-wrap { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .alert-icon-wrap--error { + background-color: rgba(239, 68, 68, 0.1); + color: var(--color-error); + } + + .alert-icon-wrap--warning { + background-color: rgba(234, 179, 8, 0.1); + color: var(--color-warning); + } + + .alert-icon-wrap--orange { + background-color: var(--color-primary-muted); + color: var(--color-primary); + } + + .alert-content { + flex: 1; + min-width: 0; + } + + .alert-title { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .alert-desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .alert-action { + font-size: var(--text-caption); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; + align-self: center; + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-border-accent); + border-radius: var(--radius-sm); + transition: var(--transition-fast); + } + + .alert-action:hover { + background-color: var(--color-primary-muted); + } + + /* ========================================================================== + RECENT SALES TABLE + ========================================================================== */ + + .table-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + } + + [data-theme="industrial"] .table-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-card { + box-shadow: var(--shadow-md); + } + + .table-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + + .table-wrap { + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + min-width: 520px; + } + + thead { + background-color: var(--color-surface-2); + } + + th { + padding: var(--space-3) var(--space-5); + text-align: left; + font-size: 11px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + td { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + color: var(--color-text-secondary); + vertical-align: middle; + } + + tr:last-child td { + border-bottom: none; + } + + tr:hover td { + background-color: var(--color-surface-1); + } + + .td-mono { + font-family: var(--font-mono); + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .td-time { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .td-client { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .td-products { + font-size: var(--text-caption); + color: var(--color-text-muted); + max-width: 180px; + } + + .pago-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px var(--space-3); + border-radius: var(--radius-full); + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .pago-badge--efectivo { + background-color: rgba(34, 197, 94, 0.12); + color: var(--color-success); + } + + .pago-badge--tarjeta { + background-color: rgba(99, 102, 241, 0.12); + color: #818cf8; + } + + .pago-badge--transferencia { + background-color: rgba(234, 179, 8, 0.12); + color: var(--color-warning); + } + + .pago-badge--credito { + background-color: var(--color-primary-muted); + color: var(--color-primary); + } + + /* ========================================================================== + MOBILE — Hamburger Menu & Responsive + ========================================================================== */ + + @media (max-width: 767px) { + .sidebar { + transform: translateX(-100%); + } + + .sidebar.open { + transform: translateX(0); + box-shadow: var(--shadow-xl); + } + + .sidebar-overlay.open { + display: block; + } + + .main { + margin-left: 0; + } + + .hamburger-btn { + display: flex; + } + + .header__store-badge { + display: none; + } + + .dashboard { + padding: var(--space-4); + gap: var(--space-5); + } + + .kpi-card__value { + font-size: 1.25rem; + } + + .header { + padding: var(--space-3) var(--space-4); + } + } + + @media (min-width: 768px) { + .two-col-grid { + grid-template-columns: 1fr 1fr; + } + + .alerts-grid { + display: grid; + grid-template-columns: 1fr; + } + } + + @media (min-width: 1024px) { + .kpi-grid { + grid-template-columns: repeat(4, 1fr); + } + + .alerts-grid { + grid-template-columns: repeat(3, 1fr); + } + } + + @media (min-width: 1280px) { + .dashboard { + padding: var(--space-8); + gap: var(--space-8); + } + } + + /* ========================================================================== + SVG ICONS — Inline utility + ========================================================================== */ + + svg { + display: block; + } diff --git a/pos/static/css/dashboard.min.css b/pos/static/css/dashboard.min.css new file mode 100644 index 0000000..240b732 --- /dev/null +++ b/pos/static/css/dashboard.min.css @@ -0,0 +1,1237 @@ +/* Extracted from dashboard.html */ + +/* ========================================================================== + BASE RESET + ========================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + background-color: var(--color-bg-base); + color: var(--color-text-primary); + min-height: 100vh; + display: flex; + flex-direction: column; + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + } + + /* Modern theme dot-grid on body */ + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + a { + text-decoration: none; + color: inherit; + } + + /* ========================================================================== + THEME SWITCHER BAR (fixed top, 36px) + ========================================================================== */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + height: 36px; + z-index: var(--z-sticky); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + font-size: var(--text-caption); + font-family: var(--font-body); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + } + + .theme-bar__brand { + font-family: var(--font-heading); + font-weight: var(--font-weight-bold); + font-size: 0.8125rem; + color: var(--color-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + .theme-bar__controls { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .theme-switcher { + display: flex; + align-items: center; + gap: var(--space-1); + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + } + + .theme-btn { + height: 22px; + padding: 0 var(--space-3); + border-radius: var(--radius-full); + border: none; + cursor: pointer; + font-family: var(--font-body); + font-size: 11px; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + background: transparent; + color: var(--color-text-muted); + transition: var(--transition-fast); + } + + .theme-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn:not(.active):hover { + color: var(--color-text-primary); + } + + /* ========================================================================== + APP SHELL — sidebar + main + ========================================================================== */ + + .app-shell { + display: flex; + flex: 1; + margin-top: 36px; /* offset for fixed theme bar */ + min-height: calc(100vh - 36px); + position: relative; + } + + /* ========================================================================== + SIDEBAR + ========================================================================== */ + + .sidebar { + width: 260px; + flex-shrink: 0; + background-color: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + display: flex; + flex-direction: column; + position: fixed; + top: 36px; + left: 0; + bottom: 0; + z-index: var(--z-dropdown); + transition: transform var(--duration-normal) var(--ease-in-out); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar__logo { + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); + } + + .sidebar__logo-text { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-primary); + line-height: 1; + } + + .sidebar__logo-sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .sidebar__nav { + flex: 1; + padding: var(--space-4) 0; + } + + .sidebar__section-label { + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + padding: var(--space-3) var(--space-5) var(--space-2); + margin-top: var(--space-2); + } + + .nav-link { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-5); + color: var(--color-text-secondary); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + transition: var(--transition-fast); + border-left: 3px solid transparent; + position: relative; + } + + .nav-link:hover { + background-color: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-link.active { + background-color: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-link__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + display: flex; + align-items: center; + justify-content: center; + } + + .nav-link.active .nav-link__icon { + opacity: 1; + } + + .sidebar__footer { + padding: var(--space-4) var(--space-5); + border-top: 1px solid var(--color-border); + } + + .user-chip { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .user-chip__avatar { + width: 32px; + height: 32px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--font-weight-bold); + font-size: 13px; + flex-shrink: 0; + } + + .user-chip__info { + flex: 1; + min-width: 0; + } + + .user-chip__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .user-chip__role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================== + SIDEBAR OVERLAY (mobile backdrop) + ========================================================================== */ + + .sidebar-overlay { + display: none; + position: fixed; + inset: 0; + top: 36px; + background-color: var(--overlay-backdrop); + z-index: calc(var(--z-dropdown) - 1); + } + + /* ========================================================================== + MAIN CONTENT + ========================================================================== */ + + .main { + flex: 1; + margin-left: 220px; + min-width: 0; + display: flex; + flex-direction: column; + } + + /* ========================================================================== + TOP HEADER BAR + ========================================================================== */ + + .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background-color: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + gap: var(--space-4); + flex-shrink: 0; + } + + .header__left { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .hamburger-btn { + display: none; + width: 36px; + height: 36px; + background: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + color: var(--color-text-secondary); + align-items: center; + justify-content: center; + transition: var(--transition-fast); + } + + .hamburger-btn:hover { + background-color: var(--color-surface-2); + color: var(--color-text-primary); + } + + .header__greeting { + display: flex; + flex-direction: column; + } + + .header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + letter-spacing: var(--heading-tracking-h5); + color: var(--color-text-primary); + line-height: 1.2; + } + + .header__subtitle { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 1px; + } + + .header__right { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .header__store-badge { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + background-color: var(--color-primary-muted); + border: 1px solid var(--color-border-accent); + border-radius: var(--radius-md); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); + letter-spacing: var(--tracking-wide); + } + + .icon-btn { + width: 36px; + height: 36px; + background: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; + color: var(--color-text-secondary); + display: flex; + align-items: center; + justify-content: center; + transition: var(--transition-fast); + position: relative; + } + + .icon-btn:hover { + background-color: var(--color-surface-2); + color: var(--color-text-primary); + } + + .notif-dot { + position: absolute; + top: 6px; + right: 6px; + width: 7px; + height: 7px; + border-radius: var(--radius-full); + background-color: var(--color-error); + border: 1.5px solid var(--color-bg-elevated); + } + + /* ========================================================================== + DASHBOARD CONTENT AREA + ========================================================================== */ + + .dashboard { + flex: 1; + padding: var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-6); + overflow-y: auto; + } + + /* ========================================================================== + SECTION TITLE + ========================================================================== */ + + .section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-4); + } + + .section-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + color: var(--color-text-secondary); + } + + .section-action { + font-size: var(--text-caption); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + cursor: pointer; + letter-spacing: var(--tracking-wide); + } + + .section-action:hover { + text-decoration: underline; + } + + /* ========================================================================== + KPI CARDS ROW + ========================================================================== */ + + .kpi-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .kpi-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-3); + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .kpi-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .kpi-card { + box-shadow: var(--shadow-md); + } + + .kpi-card:hover { + border-color: var(--color-border-strong); + transform: translateY(-1px); + } + + .kpi-card__accent-bar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background-color: var(--color-primary); + } + + .kpi-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + display: flex; + align-items: center; + justify-content: space-between; + } + + .kpi-card__icon { + width: 28px; + height: 28px; + border-radius: var(--radius-md); + background-color: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + } + + .kpi-card__value { + font-family: var(--font-mono); + font-size: 1.625rem; + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + line-height: 1; + letter-spacing: var(--tracking-tight); + } + + .kpi-card__meta { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + } + + .kpi-tag { + display: inline-flex; + align-items: center; + gap: 2px; + font-size: 11px; + font-weight: var(--font-weight-semibold); + padding: 2px var(--space-2); + border-radius: var(--radius-full); + } + + .kpi-tag--up { + background-color: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .kpi-tag--neutral { + background-color: var(--color-surface-2); + color: var(--color-text-muted); + } + + .kpi-meta-text { + color: var(--color-text-muted); + } + + /* Progress bar inside KPI */ + .kpi-progress { + margin-top: var(--space-1); + } + + .kpi-progress__track { + height: 4px; + background-color: var(--color-surface-3); + border-radius: var(--radius-full); + overflow: hidden; + } + + .kpi-progress__fill { + height: 100%; + background-color: var(--color-primary); + border-radius: var(--radius-full); + transition: width var(--duration-slow) var(--ease-out); + } + + .kpi-progress__label { + display: flex; + justify-content: space-between; + font-size: 10px; + color: var(--color-text-muted); + margin-top: var(--space-1); + } + + /* ========================================================================== + SALES CHART SECTION + ========================================================================== */ + + .chart-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + } + + [data-theme="industrial"] .chart-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .chart-card { + box-shadow: var(--shadow-md); + } + + .chart-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-5); + flex-wrap: wrap; + gap: var(--space-3); + } + + .period-selector { + display: flex; + gap: var(--space-1); + background-color: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 3px; + } + + .period-btn { + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-sm); + border: none; + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + background: transparent; + color: var(--color-text-muted); + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .period-btn.active { + background-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .period-btn:not(.active):hover { + color: var(--color-text-primary); + background-color: var(--color-surface-3); + } + + /* Bar chart */ + .bar-chart { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: var(--space-2); + height: 140px; + padding-bottom: var(--space-6); + position: relative; + } + + /* Horizontal grid lines */ + .bar-chart::before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: var(--space-6); + background-image: + linear-gradient(to bottom, + var(--color-border) 1px, + transparent 1px, + transparent 33%, + var(--color-border) 33%, + transparent 34%, + transparent 66%, + var(--color-border) 66%, + transparent 67% + ); + pointer-events: none; + } + + .bar-chart__col { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + min-width: 0; + position: relative; + height: 100%; + justify-content: flex-end; + } + + .bar-chart__bar-wrap { + width: 100%; + display: flex; + align-items: flex-end; + justify-content: center; + flex: 1; + } + + .bar-chart__bar { + width: 70%; + max-width: 36px; + background-color: var(--color-primary); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + opacity: 0.85; + transition: opacity var(--transition-fast), transform var(--transition-fast); + cursor: pointer; + position: relative; + } + + .bar-chart__bar.today { + opacity: 1; + box-shadow: 0 0 12px rgba(0,0,0,0.3); + } + + .bar-chart__bar:hover { + opacity: 1; + transform: scaleX(1.1); + } + + /* Tooltip on hover */ + .bar-chart__bar::after { + content: attr(data-value); + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background-color: var(--color-surface-3); + color: var(--color-text-primary); + font-size: 10px; + font-family: var(--font-mono); + padding: 3px var(--space-2); + border-radius: var(--radius-sm); + white-space: nowrap; + opacity: 0; + pointer-events: none; + margin-bottom: 4px; + border: 1px solid var(--color-border); + transition: opacity var(--transition-fast); + } + + .bar-chart__bar:hover::after { + opacity: 1; + } + + .bar-chart__label { + font-size: 11px; + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: absolute; + bottom: 0; + } + + .chart-legend { + display: flex; + gap: var(--space-5); + margin-top: var(--space-3); + flex-wrap: wrap; + } + + .legend-item { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .legend-dot { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + flex-shrink: 0; + } + + .legend-dot--success { + background-color: var(--color-success); + } + + /* ========================================================================== + TWO-COLUMN SECTION (Top Productos / Top Clientes) + ========================================================================== */ + + .two-col-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-4); + } + + .rank-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + } + + [data-theme="industrial"] .rank-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .rank-card { + box-shadow: var(--shadow-md); + } + + .rank-list { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .rank-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-3); + border-radius: var(--radius-md); + transition: var(--transition-fast); + } + + .rank-item:hover { + background-color: var(--color-surface-2); + } + + .rank-num { + width: 22px; + height: 22px; + border-radius: var(--radius-full); + background-color: var(--color-surface-3); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: var(--font-weight-bold); + color: var(--color-text-muted); + flex-shrink: 0; + } + + .rank-num--1 { + background-color: rgba(234, 179, 8, 0.2); + color: var(--color-warning); + } + + .rank-num--2 { + background-color: var(--color-surface-3); + color: var(--color-text-secondary); + } + + .rank-item__info { + flex: 1; + min-width: 0; + } + + .rank-item__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .rank-item__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 1px; + } + + .rank-item__value { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + flex-shrink: 0; + text-align: right; + } + + .rank-item__bar-bg { + position: relative; + height: 3px; + background-color: var(--color-surface-3); + border-radius: var(--radius-full); + margin-top: var(--space-1); + overflow: hidden; + } + + .rank-item__bar-fill { + position: absolute; + left: 0; + top: 0; + height: 100%; + background-color: var(--color-primary); + border-radius: var(--radius-full); + opacity: 0.6; + } + + /* ========================================================================== + ALERTS SECTION + ========================================================================== */ + + .alerts-grid { + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + .alert-item { + display: flex; + align-items: flex-start; + gap: var(--space-4); + padding: var(--space-4); + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + transition: var(--transition-fast); + } + + .alert-item:hover { + border-color: var(--color-border-strong); + } + + .alert-item--error { + border-left: 4px solid var(--color-error); + } + + .alert-item--warning { + border-left: 4px solid var(--color-warning); + } + + .alert-item--orange { + border-left: 4px solid var(--color-primary); + } + + .alert-badge { + flex-shrink: 0; + min-width: 24px; + height: 24px; + padding: 0 var(--space-2); + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + } + + .alert-badge--error { + background-color: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .alert-badge--warning { + background-color: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .alert-badge--orange { + background-color: var(--color-primary-muted); + color: var(--color-primary); + } + + .alert-icon-wrap { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .alert-icon-wrap--error { + background-color: rgba(239, 68, 68, 0.1); + color: var(--color-error); + } + + .alert-icon-wrap--warning { + background-color: rgba(234, 179, 8, 0.1); + color: var(--color-warning); + } + + .alert-icon-wrap--orange { + background-color: var(--color-primary-muted); + color: var(--color-primary); + } + + .alert-content { + flex: 1; + min-width: 0; + } + + .alert-title { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .alert-desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .alert-action { + font-size: var(--text-caption); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; + align-self: center; + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-border-accent); + border-radius: var(--radius-sm); + transition: var(--transition-fast); + } + + .alert-action:hover { + background-color: var(--color-primary-muted); + } + + /* ========================================================================== + RECENT SALES TABLE + ========================================================================== */ + + .table-card { + background-color: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + } + + [data-theme="industrial"] .table-card { + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-card { + box-shadow: var(--shadow-md); + } + + .table-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + + .table-wrap { + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + min-width: 520px; + } + + thead { + background-color: var(--color-surface-2); + } + + th { + padding: var(--space-3) var(--space-5); + text-align: left; + font-size: 11px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + td { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + color: var(--color-text-secondary); + vertical-align: middle; + } + + tr:last-child td { + border-bottom: none; + } + + tr:hover td { + background-color: var(--color-surface-1); + } + + .td-mono { + font-family: var(--font-mono); + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .td-time { + font-family: var(--font-mono); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .td-client { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .td-products { + font-size: var(--text-caption); + color: var(--color-text-muted); + max-width: 180px; + } + + .pago-badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 3px var(--space-3); + border-radius: var(--radius-full); + font-size: 10px; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .pago-badge--efectivo { + background-color: rgba(34, 197, 94, 0.12); + color: var(--color-success); + } + + .pago-badge--tarjeta { + background-color: rgba(99, 102, 241, 0.12); + color: #818cf8; + } + + .pago-badge--transferencia { + background-color: rgba(234, 179, 8, 0.12); + color: var(--color-warning); + } + + .pago-badge--credito { + background-color: var(--color-primary-muted); + color: var(--color-primary); + } + + /* ========================================================================== + MOBILE — Hamburger Menu & Responsive + ========================================================================== */ + + @media (max-width: 767px) { + .sidebar { + transform: translateX(-100%); + } + + .sidebar.open { + transform: translateX(0); + box-shadow: var(--shadow-xl); + } + + .sidebar-overlay.open { + display: block; + } + + .main { + margin-left: 0; + } + + .hamburger-btn { + display: flex; + } + + .header__store-badge { + display: none; + } + + .dashboard { + padding: var(--space-4); + gap: var(--space-5); + } + + .kpi-card__value { + font-size: 1.25rem; + } + + .header { + padding: var(--space-3) var(--space-4); + } + } + + @media (min-width: 768px) { + .two-col-grid { + grid-template-columns: 1fr 1fr; + } + + .alerts-grid { + display: grid; + grid-template-columns: 1fr; + } + } + + @media (min-width: 1024px) { + .kpi-grid { + grid-template-columns: repeat(4, 1fr); + } + + .alerts-grid { + grid-template-columns: repeat(3, 1fr); + } + } + + @media (min-width: 1280px) { + .dashboard { + padding: var(--space-8); + gap: var(--space-8); + } + } + + /* ========================================================================== + SVG ICONS — Inline utility + ========================================================================== */ + + svg { + display: block; + } diff --git a/pos/static/css/diagrams.css b/pos/static/css/diagrams.css new file mode 100644 index 0000000..9df11e0 --- /dev/null +++ b/pos/static/css/diagrams.css @@ -0,0 +1,460 @@ +/* Extracted from diagrams.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { height: 100%; } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { display: flex; height: 100vh; padding-top: 36px; } + + /* ========================================================================= + SIDEBAR (shared pattern) + ========================================================================= */ + + .sidebar { + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; + background: var(--color-bg-elevated); border-right: 1px solid var(--color-border); + overflow-y: auto; transition: var(--transition-normal); + } + .sidebar__brand { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .brand-logo { + width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: 1.375rem; letter-spacing: var(--tracking-tight); flex-shrink: 0; + } + [data-theme="industrial"] .brand-logo { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); border-radius: 0; } + [data-theme="modern"] .brand-logo { border-radius: var(--radius-md); } + .brand-name { display: flex; flex-direction: column; line-height: 1; } + .brand-name__primary { font-family: var(--font-heading); font-weight: var(--heading-weight-primary); font-size: 1.125rem; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); text-transform: uppercase; } + .brand-name__sub { font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 2px; } + + .sidebar__nav { flex: 1; padding: var(--space-3) 0; } + .nav-section-label { padding: var(--space-3) var(--space-5) var(--space-1); font-size: var(--text-caption); font-family: var(--font-body); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: var(--tracking-widest); text-transform: uppercase; } + .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: var(--transition-fast); border-left: 3px solid transparent; } + .nav-item:hover { background: var(--color-primary-muted); color: var(--color-text-primary); border-left-color: var(--color-primary); } + .nav-item.is-active { background: var(--color-primary-muted); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-left-color: var(--color-primary); } + [data-theme="industrial"] .nav-item.is-active { background: rgba(245, 166, 35, 0.12); } + .nav-item__icon { width: 18px; height: 18px; opacity: 0.75; flex-shrink: 0; } + .nav-item.is-active .nav-item__icon, .nav-item:hover .nav-item__icon { opacity: 1; } + + .sidebar__profile { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } + .profile-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary-muted); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-body-sm); flex-shrink: 0; } + .profile-info { overflow: hidden; } + .profile-info__name { font-weight: var(--font-weight-semibold); font-size: var(--text-body-sm); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .profile-info__role { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main-content { + flex: 1; display: flex; flex-direction: column; overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; align-items: center; gap: var(--space-4); + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + } + + .page-header__title { + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: 1.25rem; color: var(--color-text-primary); + } + + .page-header__filter { + margin-left: auto; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: var(--color-bg-base); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + min-width: 220px; + outline: none; + transition: var(--transition-fast); + } + .page-header__filter:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-muted); + } + + .page-body { + flex: 1; overflow-y: auto; padding: var(--space-5); + } + + /* ========================================================================= + LOADING & EMPTY + ========================================================================= */ + + .loading { + display: none; align-items: center; justify-content: center; + padding: var(--space-8); flex: 1; + } + .spinner { + width: 40px; height: 40px; border: 3px solid var(--color-border); + border-top-color: var(--color-primary); border-radius: 50%; + animation: spin 0.7s linear infinite; + } + @keyframes spin { to { transform: rotate(360deg); } } + + .empty-state { + display: none; flex-direction: column; align-items: center; + justify-content: center; gap: var(--space-3); padding: var(--space-8); + color: var(--color-text-muted); text-align: center; + } + .empty-state__title { font-weight: var(--font-weight-semibold); font-size: 1.1rem; } + .empty-state__subtitle { font-size: var(--text-body-sm); } + + /* ========================================================================= + DIAGRAM LIST VIEW + ========================================================================= */ + + .diagram-category { margin-bottom: var(--space-6); } + + .category-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1rem; + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + padding-bottom: var(--space-2); + border-bottom: 2px solid var(--color-primary); + margin-bottom: var(--space-4); + } + + .diagram-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--space-4); + } + + .diagram-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + cursor: pointer; + transition: var(--transition-fast); + } + .diagram-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + [data-theme="industrial"] .diagram-card { + border-radius: var(--radius-sm); + } + + .diagram-card__preview { + width: 100%; + height: 180px; + background: #f8f8f8; + display: flex; align-items: center; justify-content: center; + overflow: hidden; + border-bottom: 1px solid var(--color-border); + } + [data-theme="modern"] .diagram-card__preview { + background: var(--color-bg-base); + } + .diagram-card__preview img { + width: 100%; height: 100%; + object-fit: contain; + padding: var(--space-3); + } + + .diagram-card__info { + padding: var(--space-3) var(--space-4); + } + .diagram-card__name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + margin-bottom: 2px; + } + .diagram-card__group { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + DIAGRAM VIEWER + ========================================================================= */ + + .diagram-viewer { + display: none; flex: 1; flex-direction: row; overflow: hidden; + } + + .viewer-main { + flex: 1; display: flex; flex-direction: column; overflow: hidden; + min-width: 0; + } + + .viewer-toolbar { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + } + + .viewer-toolbar .btn-icon { + width: 36px; height: 36px; + display: flex; align-items: center; justify-content: center; + background: var(--color-bg-base); border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; + color: var(--color-text-secondary); + transition: var(--transition-fast); + } + .viewer-toolbar .btn-icon:hover { + background: var(--color-primary-muted); + color: var(--color-primary); + border-color: var(--color-primary); + } + + .viewer-toolbar__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1rem; + color: var(--color-text-primary); + flex: 1; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + + .zoom-controls { + display: flex; gap: var(--space-1); margin-left: auto; + } + + .svg-container { + flex: 1; overflow: hidden; position: relative; + background: var(--color-bg-base); + cursor: grab; + } + .svg-container:active { cursor: grabbing; } + + .svg-wrapper { + width: 100%; height: 100%; + transform-origin: center center; + transition: none; + display: flex; align-items: center; justify-content: center; + } + .svg-wrapper svg { + max-width: 100%; max-height: 100%; + } + + .svg-loading, .svg-error { + color: var(--color-text-muted); + font-size: var(--text-body); + padding: var(--space-6); + } + + /* ---- Parts list sidebar ---- */ + .parts-sidebar { + width: 280px; flex-shrink: 0; + background: var(--color-bg-elevated); + border-left: 1px solid var(--color-border); + overflow-y: auto; + display: flex; flex-direction: column; + } + + .parts-list__title { + padding: var(--space-4); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-body-sm); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border); + } + + .part-item { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); + cursor: pointer; border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + border-left: 3px solid transparent; + } + .part-item:hover, .part-item.is-highlighted { + background: var(--color-primary-muted); + border-left-color: var(--color-primary); + } + .part-item.is-active { + background: rgba(245, 166, 35, 0.15); + border-left-color: var(--color-primary); + } + + .part-item__callout { + width: 28px; height: 28px; + display: flex; align-items: center; justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); + font-size: var(--text-body-sm); + border-radius: var(--radius-full); + flex-shrink: 0; + } + + .part-item__info { min-width: 0; } + .part-item__name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .part-item__number { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-family: var(--font-mono, monospace); + } + + .parts-list__empty { + padding: var(--space-6); + text-align: center; + color: var(--color-text-muted); + font-size: var(--text-body-sm); + } + + /* ---- Hotspot detail panel ---- */ + .hotspot-panel { + position: fixed; + bottom: 0; left: 260px; right: 280px; + background: var(--color-bg-elevated); + border-top: 2px solid var(--color-primary); + box-shadow: var(--shadow-lg); + padding: var(--space-4) var(--space-5); + transform: translateY(100%); + transition: transform var(--duration-normal) var(--ease-in-out); + z-index: 50; + } + .hotspot-panel.is-open { + transform: translateY(0); + } + + .hotspot-panel__close { + position: absolute; top: var(--space-3); right: var(--space-4); + background: none; border: none; cursor: pointer; + font-size: 1.3rem; color: var(--color-text-muted); + padding: var(--space-1); + } + .hotspot-panel__close:hover { color: var(--color-text-primary); } + + .hotspot-detail { + display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; + } + + .hotspot-callout { + width: 40px; height: 40px; + display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); font-size: 1.2rem; + border-radius: var(--radius-full); flex-shrink: 0; + } + + .hotspot-name { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.1rem; + color: var(--color-text-primary); + margin: 0; + } + .hotspot-partnumber { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-family: var(--font-mono, monospace); + } + .hotspot-desc { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + max-width: 400px; + margin: 0; + } + + .hotspot-actions { + display: flex; gap: var(--space-2); margin-left: auto; + } + + /* ---- Buttons ---- */ + .btn { + display: inline-flex; align-items: center; gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + text-decoration: none; + } + .btn-primary { + background: var(--color-primary); + color: var(--color-text-inverse); + border-color: var(--color-primary); + } + .btn-primary:hover { opacity: 0.9; } + .btn-accent { + background: var(--color-success, #22c55e); + color: white; + border-color: var(--color-success, #22c55e); + } + .btn-accent:hover { opacity: 0.9; } + .btn-sm { + padding: var(--space-1) var(--space-3); + font-size: var(--text-caption); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 900px) { + .sidebar { width: 56px; overflow: hidden; } + .sidebar__brand { padding: var(--space-3); justify-content: center; } + .brand-name { display: none; } + .nav-section-label { display: none; } + .nav-item { padding: var(--space-2) var(--space-3); justify-content: center; } + .nav-item span:not(.nav-item__icon) { display: none; } + + .parts-sidebar { width: 200px; } + .hotspot-panel { left: 56px; right: 200px; } + } + + @media (max-width: 640px) { + .parts-sidebar { display: none; } + .hotspot-panel { left: 56px; right: 0; } + .diagram-grid { grid-template-columns: 1fr; } + } diff --git a/pos/static/css/diagrams.min.css b/pos/static/css/diagrams.min.css new file mode 100644 index 0000000..9df11e0 --- /dev/null +++ b/pos/static/css/diagrams.min.css @@ -0,0 +1,460 @@ +/* Extracted from diagrams.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { height: 100%; } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient(circle, var(--dot-grid-color) 1px, transparent 1px); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { display: flex; height: 100vh; padding-top: 36px; } + + /* ========================================================================= + SIDEBAR (shared pattern) + ========================================================================= */ + + .sidebar { + width: 260px; flex-shrink: 0; display: flex; flex-direction: column; + background: var(--color-bg-elevated); border-right: 1px solid var(--color-border); + overflow-y: auto; transition: var(--transition-normal); + } + .sidebar__brand { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-5) var(--space-5) var(--space-4); + border-bottom: 1px solid var(--color-border); flex-shrink: 0; + } + .brand-logo { + width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: 1.375rem; letter-spacing: var(--tracking-tight); flex-shrink: 0; + } + [data-theme="industrial"] .brand-logo { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); border-radius: 0; } + [data-theme="modern"] .brand-logo { border-radius: var(--radius-md); } + .brand-name { display: flex; flex-direction: column; line-height: 1; } + .brand-name__primary { font-family: var(--font-heading); font-weight: var(--heading-weight-primary); font-size: 1.125rem; letter-spacing: var(--tracking-wide); color: var(--color-text-primary); text-transform: uppercase; } + .brand-name__sub { font-family: var(--font-body); font-size: var(--text-caption); color: var(--color-text-muted); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 2px; } + + .sidebar__nav { flex: 1; padding: var(--space-3) 0; } + .nav-section-label { padding: var(--space-3) var(--space-5) var(--space-1); font-size: var(--text-caption); font-family: var(--font-body); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); letter-spacing: var(--tracking-widest); text-transform: uppercase; } + .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--font-weight-regular); text-decoration: none; cursor: pointer; border: none; background: none; width: 100%; text-align: left; transition: var(--transition-fast); border-left: 3px solid transparent; } + .nav-item:hover { background: var(--color-primary-muted); color: var(--color-text-primary); border-left-color: var(--color-primary); } + .nav-item.is-active { background: var(--color-primary-muted); color: var(--color-primary); font-weight: var(--font-weight-semibold); border-left-color: var(--color-primary); } + [data-theme="industrial"] .nav-item.is-active { background: rgba(245, 166, 35, 0.12); } + .nav-item__icon { width: 18px; height: 18px; opacity: 0.75; flex-shrink: 0; } + .nav-item.is-active .nav-item__icon, .nav-item:hover .nav-item__icon { opacity: 1; } + + .sidebar__profile { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } + .profile-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-primary-muted); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-body-sm); flex-shrink: 0; } + .profile-info { overflow: hidden; } + .profile-info__name { font-weight: var(--font-weight-semibold); font-size: var(--text-body-sm); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .profile-info__role { font-size: var(--text-caption); color: var(--color-text-muted); } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main-content { + flex: 1; display: flex; flex-direction: column; overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; align-items: center; gap: var(--space-4); + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + } + + .page-header__title { + font-family: var(--font-heading); font-weight: var(--heading-weight-primary); + font-size: 1.25rem; color: var(--color-text-primary); + } + + .page-header__filter { + margin-left: auto; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + background: var(--color-bg-base); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + min-width: 220px; + outline: none; + transition: var(--transition-fast); + } + .page-header__filter:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-muted); + } + + .page-body { + flex: 1; overflow-y: auto; padding: var(--space-5); + } + + /* ========================================================================= + LOADING & EMPTY + ========================================================================= */ + + .loading { + display: none; align-items: center; justify-content: center; + padding: var(--space-8); flex: 1; + } + .spinner { + width: 40px; height: 40px; border: 3px solid var(--color-border); + border-top-color: var(--color-primary); border-radius: 50%; + animation: spin 0.7s linear infinite; + } + @keyframes spin { to { transform: rotate(360deg); } } + + .empty-state { + display: none; flex-direction: column; align-items: center; + justify-content: center; gap: var(--space-3); padding: var(--space-8); + color: var(--color-text-muted); text-align: center; + } + .empty-state__title { font-weight: var(--font-weight-semibold); font-size: 1.1rem; } + .empty-state__subtitle { font-size: var(--text-body-sm); } + + /* ========================================================================= + DIAGRAM LIST VIEW + ========================================================================= */ + + .diagram-category { margin-bottom: var(--space-6); } + + .category-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1rem; + color: var(--color-text-primary); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + padding-bottom: var(--space-2); + border-bottom: 2px solid var(--color-primary); + margin-bottom: var(--space-4); + } + + .diagram-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: var(--space-4); + } + + .diagram-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + cursor: pointer; + transition: var(--transition-fast); + } + .diagram-card:hover { + border-color: var(--color-primary); + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + [data-theme="industrial"] .diagram-card { + border-radius: var(--radius-sm); + } + + .diagram-card__preview { + width: 100%; + height: 180px; + background: #f8f8f8; + display: flex; align-items: center; justify-content: center; + overflow: hidden; + border-bottom: 1px solid var(--color-border); + } + [data-theme="modern"] .diagram-card__preview { + background: var(--color-bg-base); + } + .diagram-card__preview img { + width: 100%; height: 100%; + object-fit: contain; + padding: var(--space-3); + } + + .diagram-card__info { + padding: var(--space-3) var(--space-4); + } + .diagram-card__name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + margin-bottom: 2px; + } + .diagram-card__group { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + DIAGRAM VIEWER + ========================================================================= */ + + .diagram-viewer { + display: none; flex: 1; flex-direction: row; overflow: hidden; + } + + .viewer-main { + flex: 1; display: flex; flex-direction: column; overflow: hidden; + min-width: 0; + } + + .viewer-toolbar { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + } + + .viewer-toolbar .btn-icon { + width: 36px; height: 36px; + display: flex; align-items: center; justify-content: center; + background: var(--color-bg-base); border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; + color: var(--color-text-secondary); + transition: var(--transition-fast); + } + .viewer-toolbar .btn-icon:hover { + background: var(--color-primary-muted); + color: var(--color-primary); + border-color: var(--color-primary); + } + + .viewer-toolbar__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1rem; + color: var(--color-text-primary); + flex: 1; + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + + .zoom-controls { + display: flex; gap: var(--space-1); margin-left: auto; + } + + .svg-container { + flex: 1; overflow: hidden; position: relative; + background: var(--color-bg-base); + cursor: grab; + } + .svg-container:active { cursor: grabbing; } + + .svg-wrapper { + width: 100%; height: 100%; + transform-origin: center center; + transition: none; + display: flex; align-items: center; justify-content: center; + } + .svg-wrapper svg { + max-width: 100%; max-height: 100%; + } + + .svg-loading, .svg-error { + color: var(--color-text-muted); + font-size: var(--text-body); + padding: var(--space-6); + } + + /* ---- Parts list sidebar ---- */ + .parts-sidebar { + width: 280px; flex-shrink: 0; + background: var(--color-bg-elevated); + border-left: 1px solid var(--color-border); + overflow-y: auto; + display: flex; flex-direction: column; + } + + .parts-list__title { + padding: var(--space-4); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-body-sm); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border); + } + + .part-item { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); + cursor: pointer; border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + border-left: 3px solid transparent; + } + .part-item:hover, .part-item.is-highlighted { + background: var(--color-primary-muted); + border-left-color: var(--color-primary); + } + .part-item.is-active { + background: rgba(245, 166, 35, 0.15); + border-left-color: var(--color-primary); + } + + .part-item__callout { + width: 28px; height: 28px; + display: flex; align-items: center; justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); + font-size: var(--text-body-sm); + border-radius: var(--radius-full); + flex-shrink: 0; + } + + .part-item__info { min-width: 0; } + .part-item__name { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .part-item__number { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-family: var(--font-mono, monospace); + } + + .parts-list__empty { + padding: var(--space-6); + text-align: center; + color: var(--color-text-muted); + font-size: var(--text-body-sm); + } + + /* ---- Hotspot detail panel ---- */ + .hotspot-panel { + position: fixed; + bottom: 0; left: 260px; right: 280px; + background: var(--color-bg-elevated); + border-top: 2px solid var(--color-primary); + box-shadow: var(--shadow-lg); + padding: var(--space-4) var(--space-5); + transform: translateY(100%); + transition: transform var(--duration-normal) var(--ease-in-out); + z-index: 50; + } + .hotspot-panel.is-open { + transform: translateY(0); + } + + .hotspot-panel__close { + position: absolute; top: var(--space-3); right: var(--space-4); + background: none; border: none; cursor: pointer; + font-size: 1.3rem; color: var(--color-text-muted); + padding: var(--space-1); + } + .hotspot-panel__close:hover { color: var(--color-text-primary); } + + .hotspot-detail { + display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; + } + + .hotspot-callout { + width: 40px; height: 40px; + display: flex; align-items: center; justify-content: center; + background: var(--color-primary); color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); font-size: 1.2rem; + border-radius: var(--radius-full); flex-shrink: 0; + } + + .hotspot-name { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.1rem; + color: var(--color-text-primary); + margin: 0; + } + .hotspot-partnumber { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-family: var(--font-mono, monospace); + } + .hotspot-desc { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + max-width: 400px; + margin: 0; + } + + .hotspot-actions { + display: flex; gap: var(--space-2); margin-left: auto; + } + + /* ---- Buttons ---- */ + .btn { + display: inline-flex; align-items: center; gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + text-decoration: none; + } + .btn-primary { + background: var(--color-primary); + color: var(--color-text-inverse); + border-color: var(--color-primary); + } + .btn-primary:hover { opacity: 0.9; } + .btn-accent { + background: var(--color-success, #22c55e); + color: white; + border-color: var(--color-success, #22c55e); + } + .btn-accent:hover { opacity: 0.9; } + .btn-sm { + padding: var(--space-1) var(--space-3); + font-size: var(--text-caption); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 900px) { + .sidebar { width: 56px; overflow: hidden; } + .sidebar__brand { padding: var(--space-3); justify-content: center; } + .brand-name { display: none; } + .nav-section-label { display: none; } + .nav-item { padding: var(--space-2) var(--space-3); justify-content: center; } + .nav-item span:not(.nav-item__icon) { display: none; } + + .parts-sidebar { width: 200px; } + .hotspot-panel { left: 56px; right: 200px; } + } + + @media (max-width: 640px) { + .parts-sidebar { display: none; } + .hotspot-panel { left: 56px; right: 0; } + .diagram-grid { grid-template-columns: 1fr; } + } diff --git a/pos/static/css/fleet.css b/pos/static/css/fleet.css new file mode 100644 index 0000000..643e939 --- /dev/null +++ b/pos/static/css/fleet.css @@ -0,0 +1,670 @@ +/* Extracted from fleet.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + LAYOUT + ========================================================================= */ + + .page-shell { + display: flex; + height: 100vh; + overflow: hidden; + } + + .main-area { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + border-bottom: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + gap: var(--space-4); + } + + .page-header h1 { + font-family: var(--font-heading); + font-size: var(--text-h3); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + white-space: nowrap; + } + + .page-header__actions { + display: flex; + gap: var(--space-3); + align-items: center; + } + + .page-content { + flex: 1; + overflow-y: auto; + padding: var(--space-5) var(--space-6); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, #222); + } + + /* ========================================================================= + STATS ROW + ========================================================================= */ + + .stats-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + .stat-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + padding: var(--space-4) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + [data-theme="industrial"] .stat-card { + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .stat-card { + border-radius: var(--radius-lg); + } + + .stat-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .stat-card__value { + font-family: var(--font-heading); + font-size: var(--text-h2); + font-weight: var(--font-weight-extrabold); + color: var(--color-text-primary); + } + + .stat-card__value--warn { + color: var(--color-warning, #E3B341); + } + + .stat-card__value--danger { + color: var(--color-error, #F85149); + } + + /* ========================================================================= + TABS + ========================================================================= */ + + .tabs { + display: flex; + gap: 0; + border-bottom: 2px solid var(--color-border); + margin-bottom: var(--space-5); + flex-shrink: 0; + } + + .tab-btn { + padding: var(--space-3) var(--space-5); + background: none; + border: none; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + cursor: pointer; + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-muted); + transition: all var(--duration-fast) var(--ease-in-out); + } + + .tab-btn:hover { + color: var(--color-text-primary); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-panel { + display: none; + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TABLE + ========================================================================= */ + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table th { + text-align: left; + padding: var(--space-3) var(--space-4); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border); + background: var(--color-surface-2); + white-space: nowrap; + } + + .data-table td { + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table tr:hover td { + background: var(--color-surface-2); + } + + .data-table .mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + } + + /* ========================================================================= + BADGES + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + border: 1px solid; + } + + [data-theme="modern"] .badge { + border-radius: var(--radius-full); + } + + .badge--active { + background: rgba(63, 185, 80, 0.15); + border-color: rgba(63, 185, 80, 0.3); + color: #3FB950; + } + + .badge--inactive { + background: rgba(139, 148, 158, 0.15); + border-color: rgba(139, 148, 158, 0.3); + color: #8B949E; + } + + .badge--overdue { + background: rgba(248, 81, 73, 0.15); + border-color: rgba(248, 81, 73, 0.3); + color: #F85149; + } + + .badge--upcoming { + background: rgba(227, 179, 65, 0.15); + border-color: rgba(227, 179, 65, 0.3); + color: #E3B341; + } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + border: 1px solid var(--color-border); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-in-out); + white-space: nowrap; + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + [data-theme="modern"] .btn { + border-radius: var(--radius-md); + } + + .btn--primary { + background: var(--color-primary); + color: var(--color-text-inverse, #000); + border-color: var(--color-primary); + } + + .btn--primary:hover { + opacity: 0.85; + } + + .btn--ghost { + background: none; + border-color: transparent; + color: var(--color-text-secondary); + } + + .btn--ghost:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .btn--sm { + padding: var(--space-1) var(--space-3); + font-size: var(--text-caption); + } + + .btn--danger { + background: rgba(248, 81, 73, 0.15); + border-color: rgba(248, 81, 73, 0.3); + color: #F85149; + } + + .btn--danger:hover { + background: rgba(248, 81, 73, 0.25); + } + + /* ========================================================================= + SEARCH BAR + ========================================================================= */ + + .search-input { + padding: var(--space-2) var(--space-4); + border: 1px solid var(--color-border); + background: var(--color-surface-2); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + width: 280px; + transition: border-color var(--duration-fast); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-md); + } + + .search-input:focus { + outline: none; + border-color: var(--color-primary); + } + + .search-input::placeholder { + color: var(--color-text-muted); + } + + /* ========================================================================= + VEHICLE GRID (alternative view) + ========================================================================= */ + + .vehicle-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + } + + .vehicle-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + padding: var(--space-4) var(--space-5); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-in-out); + } + + [data-theme="industrial"] .vehicle-card { + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .vehicle-card { + border-radius: var(--radius-lg); + } + + .vehicle-card:hover { + border-color: var(--color-primary); + box-shadow: 0 0 0 1px var(--color-primary); + } + + .vehicle-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: var(--space-3); + } + + .vehicle-card__plate { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--font-weight-extrabold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-primary); + } + + .vehicle-card__info { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + line-height: 1.6; + } + + .vehicle-card__info strong { + color: var(--color-text-primary); + } + + .vehicle-card__footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--space-3); + padding-top: var(--space-3); + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MODAL + ========================================================================= */ + + .modal-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 500; + align-items: center; + justify-content: center; + } + + .modal-overlay.is-open { + display: flex; + } + + .modal { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + width: 90%; + max-width: 560px; + max-height: 90vh; + display: flex; + flex-direction: column; + overflow: hidden; + } + + [data-theme="modern"] .modal { + border-radius: var(--radius-lg); + } + + .modal__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-4) var(--space-6); + border-bottom: 1px solid var(--color-border); + } + + .modal__title { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .modal__close { + background: none; + border: none; + color: var(--color-text-muted); + cursor: pointer; + font-size: 1.25rem; + padding: var(--space-1); + } + + .modal__close:hover { + color: var(--color-text-primary); + } + + .modal__body { + padding: var(--space-5) var(--space-6); + overflow-y: auto; + flex: 1; + } + + .modal__footer { + padding: var(--space-4) var(--space-6); + border-top: 1px solid var(--color-border); + display: flex; + justify-content: flex-end; + gap: var(--space-3); + } + + /* ========================================================================= + FORM + ========================================================================= */ + + .form-group { + margin-bottom: var(--space-4); + } + + .form-group label { + display: block; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .form-group input, + .form-group select, + .form-group textarea { + width: 100%; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--color-border); + background: var(--color-surface-2); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + [data-theme="modern"] .form-group input, + [data-theme="modern"] .form-group select, + [data-theme="modern"] .form-group textarea { + border-radius: var(--radius-md); + } + + .form-group input:focus, + .form-group select:focus, + .form-group textarea:focus { + outline: none; + border-color: var(--color-primary); + } + + .form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + /* ========================================================================= + ALERT CARD + ========================================================================= */ + + .alert-card { + background: var(--color-bg-elevated); + border: 1px solid rgba(248, 81, 73, 0.3); + border-left: 4px solid #F85149; + padding: var(--space-4) var(--space-5); + margin-bottom: var(--space-3); + display: flex; + justify-content: space-between; + align-items: center; + } + + [data-theme="modern"] .alert-card { + border-radius: var(--radius-md); + } + + .alert-card__info { + flex: 1; + } + + .alert-card__vehicle { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-1); + } + + .alert-card__detail { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: var(--space-4) 0; + } + + .pagination__btn { + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-border); + background: var(--color-surface-2); + color: var(--color-text-secondary); + cursor: pointer; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + } + + [data-theme="modern"] .pagination__btn { + border-radius: var(--radius-sm); + } + + .pagination__btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .pagination__btn:disabled { + opacity: 0.4; + cursor: not-allowed; + } + + .pagination__info { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + EMPTY STATE + ========================================================================= */ + + .empty-state { + text-align: center; + padding: var(--space-8) var(--space-4); + color: var(--color-text-muted); + } + + .empty-state__icon { + font-size: 3rem; + margin-bottom: var(--space-3); + opacity: 0.4; + } + + .empty-state__text { + font-size: var(--text-body); + margin-bottom: var(--space-4); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 768px) { + .page-header { + padding: var(--space-3) var(--space-4); + flex-wrap: wrap; + } + .page-content { + padding: var(--space-4); + } + .search-input { + width: 100%; + } + .form-row { + grid-template-columns: 1fr; + } + .vehicle-grid { + grid-template-columns: 1fr; + } + .stats-row { + grid-template-columns: 1fr 1fr; + } + } diff --git a/pos/static/css/fleet.min.css b/pos/static/css/fleet.min.css new file mode 100644 index 0000000..643e939 --- /dev/null +++ b/pos/static/css/fleet.min.css @@ -0,0 +1,670 @@ +/* Extracted from fleet.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + LAYOUT + ========================================================================= */ + + .page-shell { + display: flex; + height: 100vh; + overflow: hidden; + } + + .main-area { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + border-bottom: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + gap: var(--space-4); + } + + .page-header h1 { + font-family: var(--font-heading); + font-size: var(--text-h3); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + white-space: nowrap; + } + + .page-header__actions { + display: flex; + gap: var(--space-3); + align-items: center; + } + + .page-content { + flex: 1; + overflow-y: auto; + padding: var(--space-5) var(--space-6); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, #222); + } + + /* ========================================================================= + STATS ROW + ========================================================================= */ + + .stats-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + .stat-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + padding: var(--space-4) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + [data-theme="industrial"] .stat-card { + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .stat-card { + border-radius: var(--radius-lg); + } + + .stat-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .stat-card__value { + font-family: var(--font-heading); + font-size: var(--text-h2); + font-weight: var(--font-weight-extrabold); + color: var(--color-text-primary); + } + + .stat-card__value--warn { + color: var(--color-warning, #E3B341); + } + + .stat-card__value--danger { + color: var(--color-error, #F85149); + } + + /* ========================================================================= + TABS + ========================================================================= */ + + .tabs { + display: flex; + gap: 0; + border-bottom: 2px solid var(--color-border); + margin-bottom: var(--space-5); + flex-shrink: 0; + } + + .tab-btn { + padding: var(--space-3) var(--space-5); + background: none; + border: none; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + cursor: pointer; + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-muted); + transition: all var(--duration-fast) var(--ease-in-out); + } + + .tab-btn:hover { + color: var(--color-text-primary); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-panel { + display: none; + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TABLE + ========================================================================= */ + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table th { + text-align: left; + padding: var(--space-3) var(--space-4); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + border-bottom: 1px solid var(--color-border); + background: var(--color-surface-2); + white-space: nowrap; + } + + .data-table td { + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table tr:hover td { + background: var(--color-surface-2); + } + + .data-table .mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + } + + /* ========================================================================= + BADGES + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + border: 1px solid; + } + + [data-theme="modern"] .badge { + border-radius: var(--radius-full); + } + + .badge--active { + background: rgba(63, 185, 80, 0.15); + border-color: rgba(63, 185, 80, 0.3); + color: #3FB950; + } + + .badge--inactive { + background: rgba(139, 148, 158, 0.15); + border-color: rgba(139, 148, 158, 0.3); + color: #8B949E; + } + + .badge--overdue { + background: rgba(248, 81, 73, 0.15); + border-color: rgba(248, 81, 73, 0.3); + color: #F85149; + } + + .badge--upcoming { + background: rgba(227, 179, 65, 0.15); + border-color: rgba(227, 179, 65, 0.3); + color: #E3B341; + } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + border: 1px solid var(--color-border); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-in-out); + white-space: nowrap; + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + [data-theme="modern"] .btn { + border-radius: var(--radius-md); + } + + .btn--primary { + background: var(--color-primary); + color: var(--color-text-inverse, #000); + border-color: var(--color-primary); + } + + .btn--primary:hover { + opacity: 0.85; + } + + .btn--ghost { + background: none; + border-color: transparent; + color: var(--color-text-secondary); + } + + .btn--ghost:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .btn--sm { + padding: var(--space-1) var(--space-3); + font-size: var(--text-caption); + } + + .btn--danger { + background: rgba(248, 81, 73, 0.15); + border-color: rgba(248, 81, 73, 0.3); + color: #F85149; + } + + .btn--danger:hover { + background: rgba(248, 81, 73, 0.25); + } + + /* ========================================================================= + SEARCH BAR + ========================================================================= */ + + .search-input { + padding: var(--space-2) var(--space-4); + border: 1px solid var(--color-border); + background: var(--color-surface-2); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + width: 280px; + transition: border-color var(--duration-fast); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-md); + } + + .search-input:focus { + outline: none; + border-color: var(--color-primary); + } + + .search-input::placeholder { + color: var(--color-text-muted); + } + + /* ========================================================================= + VEHICLE GRID (alternative view) + ========================================================================= */ + + .vehicle-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + } + + .vehicle-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + padding: var(--space-4) var(--space-5); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-in-out); + } + + [data-theme="industrial"] .vehicle-card { + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .vehicle-card { + border-radius: var(--radius-lg); + } + + .vehicle-card:hover { + border-color: var(--color-primary); + box-shadow: 0 0 0 1px var(--color-primary); + } + + .vehicle-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: var(--space-3); + } + + .vehicle-card__plate { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--font-weight-extrabold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-primary); + } + + .vehicle-card__info { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + line-height: 1.6; + } + + .vehicle-card__info strong { + color: var(--color-text-primary); + } + + .vehicle-card__footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: var(--space-3); + padding-top: var(--space-3); + border-top: 1px solid var(--color-border); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MODAL + ========================================================================= */ + + .modal-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.6); + z-index: 500; + align-items: center; + justify-content: center; + } + + .modal-overlay.is-open { + display: flex; + } + + .modal { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + width: 90%; + max-width: 560px; + max-height: 90vh; + display: flex; + flex-direction: column; + overflow: hidden; + } + + [data-theme="modern"] .modal { + border-radius: var(--radius-lg); + } + + .modal__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-4) var(--space-6); + border-bottom: 1px solid var(--color-border); + } + + .modal__title { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .modal__close { + background: none; + border: none; + color: var(--color-text-muted); + cursor: pointer; + font-size: 1.25rem; + padding: var(--space-1); + } + + .modal__close:hover { + color: var(--color-text-primary); + } + + .modal__body { + padding: var(--space-5) var(--space-6); + overflow-y: auto; + flex: 1; + } + + .modal__footer { + padding: var(--space-4) var(--space-6); + border-top: 1px solid var(--color-border); + display: flex; + justify-content: flex-end; + gap: var(--space-3); + } + + /* ========================================================================= + FORM + ========================================================================= */ + + .form-group { + margin-bottom: var(--space-4); + } + + .form-group label { + display: block; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .form-group input, + .form-group select, + .form-group textarea { + width: 100%; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--color-border); + background: var(--color-surface-2); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + [data-theme="modern"] .form-group input, + [data-theme="modern"] .form-group select, + [data-theme="modern"] .form-group textarea { + border-radius: var(--radius-md); + } + + .form-group input:focus, + .form-group select:focus, + .form-group textarea:focus { + outline: none; + border-color: var(--color-primary); + } + + .form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + /* ========================================================================= + ALERT CARD + ========================================================================= */ + + .alert-card { + background: var(--color-bg-elevated); + border: 1px solid rgba(248, 81, 73, 0.3); + border-left: 4px solid #F85149; + padding: var(--space-4) var(--space-5); + margin-bottom: var(--space-3); + display: flex; + justify-content: space-between; + align-items: center; + } + + [data-theme="modern"] .alert-card { + border-radius: var(--radius-md); + } + + .alert-card__info { + flex: 1; + } + + .alert-card__vehicle { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + margin-bottom: var(--space-1); + } + + .alert-card__detail { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + PAGINATION + ========================================================================= */ + + .pagination { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + padding: var(--space-4) 0; + } + + .pagination__btn { + padding: var(--space-1) var(--space-3); + border: 1px solid var(--color-border); + background: var(--color-surface-2); + color: var(--color-text-secondary); + cursor: pointer; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + } + + [data-theme="modern"] .pagination__btn { + border-radius: var(--radius-sm); + } + + .pagination__btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .pagination__btn:disabled { + opacity: 0.4; + cursor: not-allowed; + } + + .pagination__info { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + EMPTY STATE + ========================================================================= */ + + .empty-state { + text-align: center; + padding: var(--space-8) var(--space-4); + color: var(--color-text-muted); + } + + .empty-state__icon { + font-size: 3rem; + margin-bottom: var(--space-3); + opacity: 0.4; + } + + .empty-state__text { + font-size: var(--text-body); + margin-bottom: var(--space-4); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 768px) { + .page-header { + padding: var(--space-3) var(--space-4); + flex-wrap: wrap; + } + .page-content { + padding: var(--space-4); + } + .search-input { + width: 100%; + } + .form-row { + grid-template-columns: 1fr; + } + .vehicle-grid { + grid-template-columns: 1fr; + } + .stats-row { + grid-template-columns: 1fr 1fr; + } + } diff --git a/pos/static/css/inventory.css b/pos/static/css/inventory.css new file mode 100644 index 0000000..c15920c --- /dev/null +++ b/pos/static/css/inventory.css @@ -0,0 +1,1302 @@ +/* Extracted from inventory.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* Brand */ + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* Navigation */ + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + /* Sidebar footer */ + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* ---- Page Header ---- */ + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ---- Summary Cards ---- */ + + .summary-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .summary-strip { + background: transparent; + } + + .summary-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-3); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + .summary-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + [data-theme="industrial"] .summary-card { + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .summary-card { + background: var(--color-bg-overlay); + } + + .summary-card__icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .summary-card__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .summary-card__icon--alert { background: rgba(239,68,68,.12); } + .summary-card__icon--alert svg { stroke: var(--color-error); } + .summary-card__icon--value { background: rgba(34,197,94,.12); } + .summary-card__icon--value svg { stroke: var(--color-success); } + .summary-card__icon--time { background: var(--color-primary-muted); } + .summary-card__icon--time svg { stroke: var(--color-primary); } + + .summary-card__body { flex: 1; min-width: 0; } + + .summary-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .summary-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + color: var(--color-text-primary); + line-height: 1.1; + } + + .summary-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .summary-card__delta { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + margin-top: 2px; + } + + .summary-card__delta--up { color: var(--color-success); } + .summary-card__delta--down { color: var(--color-error); } + + /* ---- Tabs Row ---- */ + + .tabs-row { + display: flex; + align-items: stretch; + gap: 0; + padding: 0 var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + } + + .tabs-row::-webkit-scrollbar { display: none; } + + [data-theme="industrial"] .tabs-row { + background: var(--color-surface-1); + } + + .tab-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: relative; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 var(--space-1); + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + } + + .tab-btn.is-active .tab-btn__badge { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + .tab-btn__badge--alert { + background: rgba(239,68,68,.15); + color: var(--color-error); + } + + .tab-btn.is-active .tab-btn__badge--alert { + background: var(--color-error); + color: #fff; + } + + /* ---- Tab Panels ---- */ + + .tab-panels { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .tab-panels::-webkit-scrollbar { width: 6px; } + .tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .tab-panel { + display: none; + padding: var(--space-5) var(--space-6); + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TOOLBAR (search, filters, actions) + ========================================================================= */ + + .toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + flex-wrap: wrap; + } + + .search-box { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + flex: 1; + min-width: 200px; + max-width: 360px; + transition: var(--transition-fast); + } + + .search-box:focus-within { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .search-box svg { + width: 15px; + height: 15px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .search-box input { + flex: 1; + background: transparent; + border: none; + outline: none; + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .search-box input::placeholder { + color: var(--color-text-muted); + } + + .select-filter { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .select-filter:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .toolbar__spacer { flex: 1; } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { + border-bottom: none; + } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-accent); + } + + .data-table .td--amount { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + /* ========================================================================= + BADGES / STATUS PILLS + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + .badge--ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--low { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--over { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--pending { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--complete { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--transit { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + .badge--cancelled { + background: rgba(115, 115, 115, 0.15); + color: var(--color-text-muted); + } + + .badge--damage { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--shrinkage { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--correction { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--partial { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + /* ========================================================================= + ALERT CARDS (Tab Alertas) + ========================================================================= */ + + .alerts-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + } + + .alert-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + gap: var(--space-4); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="modern"] .alert-card { + background: var(--color-bg-overlay); + } + + .alert-card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + } + + .alert-card--critical::before { background: var(--color-error); } + .alert-card--warning::before { background: var(--color-warning); } + .alert-card--info::before { background: #818cf8; } + .alert-card--accent::before { background: var(--color-primary); } + + .alert-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .alert-card__icon { + width: 40px; + height: 40px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .alert-card__icon svg { + width: 22px; + height: 22px; + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .alert-card--critical .alert-card__icon { background: rgba(239,68,68,.15); } + .alert-card--critical .alert-card__icon svg { stroke: var(--color-error); } + .alert-card--warning .alert-card__icon { background: rgba(234,179,8,.15); } + .alert-card--warning .alert-card__icon svg { stroke: var(--color-warning); } + .alert-card--info .alert-card__icon { background: rgba(99,102,241,.15); } + .alert-card--info .alert-card__icon svg { stroke: #818cf8; } + .alert-card--accent .alert-card__icon { background: var(--color-primary-muted); } + .alert-card--accent .alert-card__icon svg { stroke: var(--color-primary); } + + .alert-card__body { flex: 1; min-width: 0; } + + .alert-card__title { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + margin-bottom: 2px; + } + + .alert-card__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-bottom: var(--space-3); + line-height: var(--leading-caption); + } + + .alert-card__meta { + display: flex; + align-items: center; + gap: var(--space-3); + flex-wrap: wrap; + } + + .alert-card__count { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + line-height: 1; + } + + .alert-card--critical .alert-card__count { color: var(--color-error); } + .alert-card--warning .alert-card__count { color: var(--color-warning); } + .alert-card--info .alert-card__count { color: #818cf8; } + .alert-card--accent .alert-card__count { color: var(--color-primary); } + + .alert-card__count-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + ALERTS SECTION HEADER + ========================================================================= */ + + .section-heading { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + } + + .section-heading__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + color: var(--color-text-secondary); + } + + .section-heading__line { + flex: 1; + height: 1px; + background: var(--color-border); + } + + /* ========================================================================= + TABLE FOOTER / PAGINATION ROW + ========================================================================= */ + + .table-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + background: var(--color-surface-1); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .page-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + font-family: var(--font-body); + cursor: pointer; + transition: var(--transition-fast); + } + + .page-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .page-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + } + + .sidebar { + width: 60px; + overflow: visible; + } + + .brand-name, .nav-item span, .sidebar__user-info, + .nav-section-label { display: none; } + + .nav-item { + justify-content: center; + padding: var(--space-3); + border-left: none; + border-bottom: 2px solid transparent; + } + + .nav-item.is-active { + border-left: none; + border-bottom-color: var(--color-primary); + } + } + + @media (max-width: 768px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + padding: var(--space-3) var(--space-4); + gap: var(--space-3); + } + + .page-header { padding: var(--space-3) var(--space-4); } + .tabs-row { padding: 0 var(--space-4); } + .tab-panel { padding: var(--space-4); } + .toolbar { gap: var(--space-2); } + .search-box { max-width: 100%; } + + .page-header__actions { display: none; } + } + + /* ===================================================================== + OFFLINE BANNER + ===================================================================== */ + + @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + @keyframes slideUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } + + .banner { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: 500; line-height: 1.4; + } + .banner--warning { + background: var(--color-warning-light, #fef9c3); color: var(--color-warning-dark, #854d0e); + border: 1px solid var(--color-warning, #eab308); + } + .banner--success { + background: var(--color-success-light, #dcfce7); color: var(--color-success-dark, #166534); + border: 1px solid var(--color-success, #22c55e); + } + .banner--error { + background: var(--color-error-light, #fef2f2); color: var(--color-error-dark, #991b1b); + border: 1px solid var(--color-error, #ef4444); + } + .banner--dismissing { animation: slideUp 0.3s ease-in forwards; } + .banner__icon { font-size: 18px; flex-shrink: 0; } + .banner__text { flex: 1; } + .banner__text strong { font-weight: 700; } + .banner__dismiss { + background: none; border: none; cursor: pointer; font-size: 18px; + padding: var(--space-1); opacity: 0.7; color: inherit; + } + .banner__dismiss:hover { opacity: 1; } + + /* ========================================================================= + INVENTORY MODALS + ========================================================================= */ + + .inv-modal-overlay { + display: none; + position: fixed; + inset: 0; + z-index: 9000; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(4px); + align-items: center; + justify-content: center; + } + + .inv-modal-overlay.is-open { + display: flex; + } + + .inv-modal { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + width: 520px; + max-height: 85vh; + overflow-y: auto; + box-shadow: 0 20px 60px rgba(0,0,0,0.4); + } + + .inv-modal--wide { + width: 700px; + } + + .inv-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + + .inv-modal__header h3 { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + color: var(--color-text-primary); + margin: 0; + } + + .inv-modal__close { + background: none; + border: none; + font-size: 1.5rem; + color: var(--color-text-muted); + cursor: pointer; + padding: 0 var(--space-1); + line-height: 1; + } + + .inv-modal__close:hover { + color: var(--color-text-primary); + } + + .inv-modal__body { + padding: var(--space-4) var(--space-5); + } + + .inv-modal__footer { + display: flex; + justify-content: flex-end; + gap: var(--space-3); + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + } + + .inv-form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3); + } + + .inv-field { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .inv-field--full { + grid-column: 1 / -1; + } + + .inv-field label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .inv-field input { + padding: var(--space-2) var(--space-3); + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .inv-field input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-muted); + } + + .count-row { + display: flex; + gap: var(--space-2); + align-items: center; + margin-bottom: var(--space-2); + } + + .count-row input { + padding: var(--space-2) var(--space-3); + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + /* History table inside modal */ + .inv-modal .data-table { width: 100%; } diff --git a/pos/static/css/inventory.min.css b/pos/static/css/inventory.min.css new file mode 100644 index 0000000..c15920c --- /dev/null +++ b/pos/static/css/inventory.min.css @@ -0,0 +1,1302 @@ +/* Extracted from inventory.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* Brand */ + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* Navigation */ + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + /* Sidebar footer */ + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* ---- Page Header ---- */ + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ---- Summary Cards ---- */ + + .summary-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .summary-strip { + background: transparent; + } + + .summary-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-3); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + .summary-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + [data-theme="industrial"] .summary-card { + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .summary-card { + background: var(--color-bg-overlay); + } + + .summary-card__icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .summary-card__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .summary-card__icon--alert { background: rgba(239,68,68,.12); } + .summary-card__icon--alert svg { stroke: var(--color-error); } + .summary-card__icon--value { background: rgba(34,197,94,.12); } + .summary-card__icon--value svg { stroke: var(--color-success); } + .summary-card__icon--time { background: var(--color-primary-muted); } + .summary-card__icon--time svg { stroke: var(--color-primary); } + + .summary-card__body { flex: 1; min-width: 0; } + + .summary-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .summary-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + color: var(--color-text-primary); + line-height: 1.1; + } + + .summary-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .summary-card__delta { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + margin-top: 2px; + } + + .summary-card__delta--up { color: var(--color-success); } + .summary-card__delta--down { color: var(--color-error); } + + /* ---- Tabs Row ---- */ + + .tabs-row { + display: flex; + align-items: stretch; + gap: 0; + padding: 0 var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + } + + .tabs-row::-webkit-scrollbar { display: none; } + + [data-theme="industrial"] .tabs-row { + background: var(--color-surface-1); + } + + .tab-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: relative; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 var(--space-1); + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + } + + .tab-btn.is-active .tab-btn__badge { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + .tab-btn__badge--alert { + background: rgba(239,68,68,.15); + color: var(--color-error); + } + + .tab-btn.is-active .tab-btn__badge--alert { + background: var(--color-error); + color: #fff; + } + + /* ---- Tab Panels ---- */ + + .tab-panels { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .tab-panels::-webkit-scrollbar { width: 6px; } + .tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .tab-panel { + display: none; + padding: var(--space-5) var(--space-6); + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TOOLBAR (search, filters, actions) + ========================================================================= */ + + .toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + flex-wrap: wrap; + } + + .search-box { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + flex: 1; + min-width: 200px; + max-width: 360px; + transition: var(--transition-fast); + } + + .search-box:focus-within { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .search-box svg { + width: 15px; + height: 15px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .search-box input { + flex: 1; + background: transparent; + border: none; + outline: none; + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .search-box input::placeholder { + color: var(--color-text-muted); + } + + .select-filter { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .select-filter:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .toolbar__spacer { flex: 1; } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { + border-bottom: none; + } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-accent); + } + + .data-table .td--amount { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + /* ========================================================================= + BADGES / STATUS PILLS + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + .badge--ok { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--low { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--over { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--pending { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--complete { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--transit { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + .badge--cancelled { + background: rgba(115, 115, 115, 0.15); + color: var(--color-text-muted); + } + + .badge--damage { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--shrinkage { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--correction { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--partial { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + /* ========================================================================= + ALERT CARDS (Tab Alertas) + ========================================================================= */ + + .alerts-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + } + + .alert-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + gap: var(--space-4); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="modern"] .alert-card { + background: var(--color-bg-overlay); + } + + .alert-card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + } + + .alert-card--critical::before { background: var(--color-error); } + .alert-card--warning::before { background: var(--color-warning); } + .alert-card--info::before { background: #818cf8; } + .alert-card--accent::before { background: var(--color-primary); } + + .alert-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .alert-card__icon { + width: 40px; + height: 40px; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .alert-card__icon svg { + width: 22px; + height: 22px; + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .alert-card--critical .alert-card__icon { background: rgba(239,68,68,.15); } + .alert-card--critical .alert-card__icon svg { stroke: var(--color-error); } + .alert-card--warning .alert-card__icon { background: rgba(234,179,8,.15); } + .alert-card--warning .alert-card__icon svg { stroke: var(--color-warning); } + .alert-card--info .alert-card__icon { background: rgba(99,102,241,.15); } + .alert-card--info .alert-card__icon svg { stroke: #818cf8; } + .alert-card--accent .alert-card__icon { background: var(--color-primary-muted); } + .alert-card--accent .alert-card__icon svg { stroke: var(--color-primary); } + + .alert-card__body { flex: 1; min-width: 0; } + + .alert-card__title { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + margin-bottom: 2px; + } + + .alert-card__desc { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-bottom: var(--space-3); + line-height: var(--leading-caption); + } + + .alert-card__meta { + display: flex; + align-items: center; + gap: var(--space-3); + flex-wrap: wrap; + } + + .alert-card__count { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + line-height: 1; + } + + .alert-card--critical .alert-card__count { color: var(--color-error); } + .alert-card--warning .alert-card__count { color: var(--color-warning); } + .alert-card--info .alert-card__count { color: #818cf8; } + .alert-card--accent .alert-card__count { color: var(--color-primary); } + + .alert-card__count-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + ALERTS SECTION HEADER + ========================================================================= */ + + .section-heading { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + } + + .section-heading__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + color: var(--color-text-secondary); + } + + .section-heading__line { + flex: 1; + height: 1px; + background: var(--color-border); + } + + /* ========================================================================= + TABLE FOOTER / PAGINATION ROW + ========================================================================= */ + + .table-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + background: var(--color-surface-1); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .page-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + font-family: var(--font-body); + cursor: pointer; + transition: var(--transition-fast); + } + + .page-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .page-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1024px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + } + + .sidebar { + width: 60px; + overflow: visible; + } + + .brand-name, .nav-item span, .sidebar__user-info, + .nav-section-label { display: none; } + + .nav-item { + justify-content: center; + padding: var(--space-3); + border-left: none; + border-bottom: 2px solid transparent; + } + + .nav-item.is-active { + border-left: none; + border-bottom-color: var(--color-primary); + } + } + + @media (max-width: 768px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + padding: var(--space-3) var(--space-4); + gap: var(--space-3); + } + + .page-header { padding: var(--space-3) var(--space-4); } + .tabs-row { padding: 0 var(--space-4); } + .tab-panel { padding: var(--space-4); } + .toolbar { gap: var(--space-2); } + .search-box { max-width: 100%; } + + .page-header__actions { display: none; } + } + + /* ===================================================================== + OFFLINE BANNER + ===================================================================== */ + + @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } + @keyframes slideUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } + + .banner { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: 500; line-height: 1.4; + } + .banner--warning { + background: var(--color-warning-light, #fef9c3); color: var(--color-warning-dark, #854d0e); + border: 1px solid var(--color-warning, #eab308); + } + .banner--success { + background: var(--color-success-light, #dcfce7); color: var(--color-success-dark, #166534); + border: 1px solid var(--color-success, #22c55e); + } + .banner--error { + background: var(--color-error-light, #fef2f2); color: var(--color-error-dark, #991b1b); + border: 1px solid var(--color-error, #ef4444); + } + .banner--dismissing { animation: slideUp 0.3s ease-in forwards; } + .banner__icon { font-size: 18px; flex-shrink: 0; } + .banner__text { flex: 1; } + .banner__text strong { font-weight: 700; } + .banner__dismiss { + background: none; border: none; cursor: pointer; font-size: 18px; + padding: var(--space-1); opacity: 0.7; color: inherit; + } + .banner__dismiss:hover { opacity: 1; } + + /* ========================================================================= + INVENTORY MODALS + ========================================================================= */ + + .inv-modal-overlay { + display: none; + position: fixed; + inset: 0; + z-index: 9000; + background: rgba(0,0,0,0.6); + backdrop-filter: blur(4px); + align-items: center; + justify-content: center; + } + + .inv-modal-overlay.is-open { + display: flex; + } + + .inv-modal { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + width: 520px; + max-height: 85vh; + overflow-y: auto; + box-shadow: 0 20px 60px rgba(0,0,0,0.4); + } + + .inv-modal--wide { + width: 700px; + } + + .inv-modal__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + } + + .inv-modal__header h3 { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + color: var(--color-text-primary); + margin: 0; + } + + .inv-modal__close { + background: none; + border: none; + font-size: 1.5rem; + color: var(--color-text-muted); + cursor: pointer; + padding: 0 var(--space-1); + line-height: 1; + } + + .inv-modal__close:hover { + color: var(--color-text-primary); + } + + .inv-modal__body { + padding: var(--space-4) var(--space-5); + } + + .inv-modal__footer { + display: flex; + justify-content: flex-end; + gap: var(--space-3); + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + } + + .inv-form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3); + } + + .inv-field { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .inv-field--full { + grid-column: 1 / -1; + } + + .inv-field label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .inv-field input { + padding: var(--space-2) var(--space-3); + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .inv-field input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-muted); + } + + .count-row { + display: flex; + gap: var(--space-2); + align-items: center; + margin-bottom: var(--space-2); + } + + .count-row input { + padding: var(--space-2) var(--space-3); + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + /* History table inside modal */ + .inv-modal .data-table { width: 100%; } diff --git a/pos/static/css/invoicing.css b/pos/static/css/invoicing.css new file mode 100644 index 0000000..a93e282 --- /dev/null +++ b/pos/static/css/invoicing.css @@ -0,0 +1,1340 @@ +/* Extracted from invoicing.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* Brand */ + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* Navigation */ + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + /* Sidebar footer */ + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* ---- Page Header ---- */ + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ---- Summary Cards ---- */ + + .summary-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .summary-strip { + background: transparent; + } + + .summary-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-3); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + .summary-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + [data-theme="industrial"] .summary-card { + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .summary-card { + background: var(--color-bg-overlay); + } + + .summary-card__icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .summary-card__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .summary-card__icon--money { background: rgba(34,197,94,.12); } + .summary-card__icon--money svg { stroke: var(--color-success); } + .summary-card__icon--pending { background: rgba(234,179,8,.12); } + .summary-card__icon--pending svg { stroke: var(--color-warning); } + .summary-card__icon--cancelled { background: rgba(239,68,68,.12); } + .summary-card__icon--cancelled svg { stroke: var(--color-error); } + + .summary-card__body { flex: 1; min-width: 0; } + + .summary-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .summary-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + color: var(--color-text-primary); + line-height: 1.1; + } + + .summary-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .summary-card__delta { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + margin-top: 2px; + } + + .summary-card__delta--up { color: var(--color-success); } + .summary-card__delta--down { color: var(--color-error); } + + /* ---- Tabs Row ---- */ + + .tabs-row { + display: flex; + align-items: stretch; + gap: 0; + padding: 0 var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + } + + .tabs-row::-webkit-scrollbar { display: none; } + + [data-theme="industrial"] .tabs-row { + background: var(--color-surface-1); + } + + .tab-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: relative; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 var(--space-1); + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + } + + .tab-btn.is-active .tab-btn__badge { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + .tab-btn__badge--warn { + background: rgba(234,179,8,.15); + color: var(--color-warning); + } + + .tab-btn.is-active .tab-btn__badge--warn { + background: var(--color-warning); + color: #000; + } + + /* ---- Tab Panels ---- */ + + .tab-panels { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .tab-panels::-webkit-scrollbar { width: 6px; } + .tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .tab-panel { + display: none; + padding: var(--space-5) var(--space-6); + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TOOLBAR (search, filters, actions) + ========================================================================= */ + + .toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + flex-wrap: wrap; + } + + .search-box { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + flex: 1; + min-width: 200px; + max-width: 320px; + transition: var(--transition-fast); + } + + .search-box:focus-within { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .search-box svg { + width: 15px; + height: 15px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .search-box input { + flex: 1; + background: transparent; + border: none; + outline: none; + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .search-box input::placeholder { + color: var(--color-text-muted); + } + + .select-filter { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .select-filter:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .date-range { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + } + + .date-range:hover { + border-color: var(--color-border-strong); + } + + .date-range svg { + width: 14px; + height: 14px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .toolbar__spacer { flex: 1; } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + .btn--danger { + background: rgba(239,68,68,.1); + color: var(--color-error); + border-color: rgba(239,68,68,.25); + } + + .btn--danger:hover { + background: rgba(239,68,68,.2); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { + border-bottom: none; + } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-accent); + } + + .data-table .td--amount { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + text-align: right; + } + + /* ========================================================================= + BADGES / STATUS PILLS + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + /* CFDI-specific statuses */ + .badge--timbrada { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--pendiente { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--cancelada { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--ppd { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + .badge--proceso { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--aceptada { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--rechazada { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--vigente { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--por-vencer { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + /* ========================================================================= + TABLE FOOTER / PAGINATION ROW + ========================================================================= */ + + .table-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + background: var(--color-surface-1); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .page-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + font-family: var(--font-body); + cursor: pointer; + transition: var(--transition-fast); + } + + .page-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .page-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); + } + + /* ========================================================================= + CANCELLATION CARDS (Tab Cancelaciones) + ========================================================================= */ + + .cancel-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + } + + .cancel-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="modern"] .cancel-card { + background: var(--color-bg-overlay); + } + + .cancel-card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + } + + .cancel-card--proceso::before { background: var(--color-primary); } + .cancel-card--aceptada::before { background: var(--color-success); } + .cancel-card--rechazada::before { background: var(--color-error); } + + .cancel-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .cancel-card__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-3); + } + + .cancel-card__folio { + font-family: var(--font-mono); + font-size: 0.875rem; + font-weight: var(--font-weight-semibold); + color: var(--color-text-accent); + } + + .cancel-card__body { + display: flex; + flex-direction: column; + gap: var(--space-2); + } + + .cancel-card__row { + display: flex; + align-items: flex-start; + gap: var(--space-2); + } + + .cancel-card__row-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + font-weight: var(--font-weight-semibold); + min-width: 80px; + flex-shrink: 0; + padding-top: 1px; + } + + .cancel-card__row-value { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + line-height: var(--leading-caption); + } + + .cancel-card__footer { + margin-top: var(--space-3); + padding-top: var(--space-3); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + } + + /* ========================================================================= + CONFIG FORM (Tab Configuración CFDI) + ========================================================================= */ + + .config-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-5); + } + + .config-section { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .config-section { + background: var(--color-bg-overlay); + } + + [data-theme="industrial"] .config-section { + border-left: 3px solid var(--color-primary); + } + + .config-section__header { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + background: var(--color-surface-2); + display: flex; + align-items: center; + gap: var(--space-3); + } + + [data-theme="industrial"] .config-section__header { + background: var(--color-surface-3); + } + + .config-section__header svg { + width: 18px; + height: 18px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .config-section__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body-sm); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-secondary); + flex: 1; + } + + .config-section__body { + padding: var(--space-5); + } + + .form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .form-field { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .form-field--span2 { + grid-column: span 2; + } + + .form-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .form-input { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + transition: var(--transition-fast); + } + + .form-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-select { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + cursor: pointer; + transition: var(--transition-fast); + } + + .form-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-hint { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .cert-status { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--space-4); + } + + [data-theme="industrial"] .cert-status { + background: var(--color-surface-3); + } + + .cert-status__icon { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + background: rgba(34,197,94,.12); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .cert-status__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-success); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .cert-status__info { flex: 1; } + + .cert-status__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .cert-status__detail { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* Section headings */ + + .section-heading { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + } + + .section-heading__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + color: var(--color-text-secondary); + white-space: nowrap; + } + + .section-heading__line { + flex: 1; + height: 1px; + background: var(--color-border); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1200px) { + .config-grid { + grid-template-columns: 1fr; + } + + .config-section[style*="span 2"] { + grid-column: span 1; + } + } + + @media (max-width: 1024px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + } + + .sidebar { + width: 60px; + overflow: visible; + } + + .brand-name, .nav-item span, .sidebar__user-info, + .nav-section-label { display: none; } + + .nav-item { + justify-content: center; + padding: var(--space-3); + border-left: none; + border-bottom: 2px solid transparent; + } + + .nav-item.is-active { + border-left: none; + border-bottom-color: var(--color-primary); + } + } + + @media (max-width: 768px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + padding: var(--space-3) var(--space-4); + gap: var(--space-3); + } + + .page-header { padding: var(--space-3) var(--space-4); } + .tabs-row { padding: 0 var(--space-4); } + .tab-panel { padding: var(--space-4); } + .toolbar { gap: var(--space-2); } + .search-box { max-width: 100%; } + + .page-header__actions { display: none; } + .form-grid { grid-template-columns: 1fr; } + .form-field--span2 { grid-column: span 1; } + } diff --git a/pos/static/css/invoicing.min.css b/pos/static/css/invoicing.min.css new file mode 100644 index 0000000..a93e282 --- /dev/null +++ b/pos/static/css/invoicing.min.css @@ -0,0 +1,1340 @@ +/* Extracted from invoicing.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(10px); + height: 36px; + } + + [data-theme="industrial"] .theme-bar { + background: rgba(13, 13, 13, 0.95); + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__store { + display: flex; + align-items: center; + gap: var(--space-2); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__dot { + width: 6px; + height: 6px; + background: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: blink 2.5s ease-in-out infinite; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.35; } + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + } + + .theme-btn__swatch { + width: 8px; + height: 8px; + border-radius: var(--radius-full); + } + + .theme-btn--industrial .theme-btn__swatch { background: #F5A623; } + .theme-btn--modern .theme-btn__swatch { background: #FF6B35; } + + /* ========================================================================= + APP LAYOUT + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* Brand */ + + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.125rem; + letter-spacing: -0.04em; + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.9375rem; + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* Navigation */ + + .sidebar__nav { + flex: 1; + padding: var(--space-3) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.6875rem; + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + text-decoration: none; + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + border-left: 3px solid transparent; + transition: var(--transition-fast); + cursor: pointer; + } + + .nav-item:hover { + background: var(--color-surface-2); + color: var(--color-text-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + border-left-color: var(--color-primary); + font-weight: var(--font-weight-semibold); + } + + .nav-item__icon { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; + } + + .nav-item.is-active .nav-item__icon { + opacity: 1; + } + + /* Sidebar footer */ + + .sidebar__footer { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .sidebar__user-avatar { + width: 28px; + height: 28px; + border-radius: var(--radius-full); + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + flex-shrink: 0; + } + + .sidebar__user-info { flex: 1; overflow: hidden; } + + .sidebar__user-name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .sidebar__user-role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* ---- Page Header ---- */ + + .page-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="industrial"] .page-header { + background: var(--color-surface-1); + } + + .page-header__title-group { display: flex; flex-direction: column; gap: 2px; } + + .page-header__eyebrow { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .page-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .page-header__title { + text-transform: uppercase; + } + + .page-header__actions { + display: flex; + align-items: center; + gap: var(--space-3); + } + + /* ---- Summary Cards ---- */ + + .summary-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + [data-theme="modern"] .summary-strip { + background: transparent; + } + + .summary-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + align-items: flex-start; + gap: var(--space-3); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + } + + .summary-card:hover { + box-shadow: var(--shadow-md); + border-color: var(--color-border-strong); + } + + [data-theme="industrial"] .summary-card { + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .summary-card { + background: var(--color-bg-overlay); + } + + .summary-card__icon { + width: 38px; + height: 38px; + border-radius: var(--radius-md); + background: var(--color-primary-muted); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .summary-card__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .summary-card__icon--money { background: rgba(34,197,94,.12); } + .summary-card__icon--money svg { stroke: var(--color-success); } + .summary-card__icon--pending { background: rgba(234,179,8,.12); } + .summary-card__icon--pending svg { stroke: var(--color-warning); } + .summary-card__icon--cancelled { background: rgba(239,68,68,.12); } + .summary-card__icon--cancelled svg { stroke: var(--color-error); } + + .summary-card__body { flex: 1; min-width: 0; } + + .summary-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-1); + } + + .summary-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.5rem; + color: var(--color-text-primary); + line-height: 1.1; + } + + .summary-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + .summary-card__delta { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + margin-top: 2px; + } + + .summary-card__delta--up { color: var(--color-success); } + .summary-card__delta--down { color: var(--color-error); } + + /* ---- Tabs Row ---- */ + + .tabs-row { + display: flex; + align-items: stretch; + gap: 0; + padding: 0 var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; + } + + .tabs-row::-webkit-scrollbar { display: none; } + + [data-theme="industrial"] .tabs-row { + background: var(--color-surface-1); + } + + .tab-btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border: none; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + white-space: nowrap; + transition: var(--transition-fast); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + position: relative; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-surface-2); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn__badge { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 18px; + height: 18px; + padding: 0 var(--space-1); + border-radius: var(--radius-full); + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + } + + .tab-btn.is-active .tab-btn__badge { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + .tab-btn__badge--warn { + background: rgba(234,179,8,.15); + color: var(--color-warning); + } + + .tab-btn.is-active .tab-btn__badge--warn { + background: var(--color-warning); + color: #000; + } + + /* ---- Tab Panels ---- */ + + .tab-panels { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .tab-panels::-webkit-scrollbar { width: 6px; } + .tab-panels::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .tab-panels::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .tab-panel { + display: none; + padding: var(--space-5) var(--space-6); + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + TOOLBAR (search, filters, actions) + ========================================================================= */ + + .toolbar { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + flex-wrap: wrap; + } + + .search-box { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + flex: 1; + min-width: 200px; + max-width: 320px; + transition: var(--transition-fast); + } + + .search-box:focus-within { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .search-box svg { + width: 15px; + height: 15px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .search-box input { + flex: 1; + background: transparent; + border: none; + outline: none; + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + } + + .search-box input::placeholder { + color: var(--color-text-muted); + } + + .select-filter { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + cursor: pointer; + outline: none; + transition: var(--transition-fast); + } + + .select-filter:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .date-range { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0 var(--space-3); + height: 36px; + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + } + + .date-range:hover { + border-color: var(--color-border-strong); + } + + .date-range svg { + width: 14px; + height: 14px; + stroke: var(--color-text-muted); + fill: none; + stroke-width: 2; + stroke-linecap: round; + flex-shrink: 0; + } + + .toolbar__spacer { flex: 1; } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: 0 var(--space-4); + height: 36px; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + cursor: pointer; + border: 1px solid transparent; + transition: var(--transition-fast); + text-decoration: none; + white-space: nowrap; + } + + .btn svg { + width: 15px; + height: 15px; + stroke: currentColor; + fill: none; + stroke-width: 2; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .btn--primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn--primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn--secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn--secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn--ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn--ghost:hover { + background: var(--color-surface-2); + border-color: var(--color-border-strong); + color: var(--color-text-primary); + } + + .btn--sm { + height: 28px; + padding: 0 var(--space-3); + font-size: var(--text-caption); + } + + .btn--danger { + background: rgba(239,68,68,.1); + color: var(--color-error); + border-color: rgba(239,68,68,.25); + } + + .btn--danger:hover { + background: rgba(239,68,68,.2); + } + + /* ========================================================================= + DATA TABLE + ========================================================================= */ + + .table-wrapper { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .table-wrapper { + background: var(--color-bg-overlay); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-2); + border-bottom: 1px solid var(--color-border); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-3); + } + + .data-table th { + padding: var(--space-3) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + } + + .data-table th:first-child { padding-left: var(--space-5); } + .data-table th:last-child { padding-right: var(--space-5); } + + .data-table tbody tr { + border-bottom: 1px solid var(--color-border); + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:last-child { + border-bottom: none; + } + + .data-table tbody tr:hover { + background: var(--color-surface-2); + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + vertical-align: middle; + } + + .data-table td:first-child { padding-left: var(--space-5); } + .data-table td:last-child { padding-right: var(--space-5); } + + .data-table .td--primary { + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + } + + .data-table .td--mono { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-accent); + } + + .data-table .td--amount { + font-family: var(--font-mono); + font-size: 0.8125rem; + color: var(--color-text-primary); + font-weight: var(--font-weight-semibold); + text-align: right; + } + + /* ========================================================================= + BADGES / STATUS PILLS + ========================================================================= */ + + .badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: 0.6875rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .badge::before { + content: ''; + width: 5px; + height: 5px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + /* CFDI-specific statuses */ + .badge--timbrada { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--pendiente { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .badge--cancelada { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--ppd { + background: rgba(99, 102, 241, 0.15); + color: #818cf8; + } + + .badge--proceso { + background: var(--color-primary-muted); + color: var(--color-primary); + } + + .badge--aceptada { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--rechazada { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .badge--vigente { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .badge--por-vencer { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + /* ========================================================================= + TABLE FOOTER / PAGINATION ROW + ========================================================================= */ + + .table-footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-top: 1px solid var(--color-border); + background: var(--color-surface-1); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .pagination { + display: flex; + align-items: center; + gap: var(--space-1); + } + + .page-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + background: transparent; + color: var(--color-text-secondary); + font-size: var(--text-caption); + font-family: var(--font-body); + cursor: pointer; + transition: var(--transition-fast); + } + + .page-btn:hover { + border-color: var(--color-primary); + color: var(--color-primary); + } + + .page-btn.is-active { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-inverse); + font-weight: var(--font-weight-bold); + } + + /* ========================================================================= + CANCELLATION CARDS (Tab Cancelaciones) + ========================================================================= */ + + .cancel-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--space-4); + } + + .cancel-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + box-shadow: var(--shadow-sm); + transition: var(--transition-normal); + position: relative; + overflow: hidden; + } + + [data-theme="modern"] .cancel-card { + background: var(--color-bg-overlay); + } + + .cancel-card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; + } + + .cancel-card--proceso::before { background: var(--color-primary); } + .cancel-card--aceptada::before { background: var(--color-success); } + .cancel-card--rechazada::before { background: var(--color-error); } + + .cancel-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-1px); + } + + .cancel-card__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-3); + } + + .cancel-card__folio { + font-family: var(--font-mono); + font-size: 0.875rem; + font-weight: var(--font-weight-semibold); + color: var(--color-text-accent); + } + + .cancel-card__body { + display: flex; + flex-direction: column; + gap: var(--space-2); + } + + .cancel-card__row { + display: flex; + align-items: flex-start; + gap: var(--space-2); + } + + .cancel-card__row-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + font-weight: var(--font-weight-semibold); + min-width: 80px; + flex-shrink: 0; + padding-top: 1px; + } + + .cancel-card__row-value { + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + line-height: var(--leading-caption); + } + + .cancel-card__footer { + margin-top: var(--space-3); + padding-top: var(--space-3); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + } + + /* ========================================================================= + CONFIG FORM (Tab Configuración CFDI) + ========================================================================= */ + + .config-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-5); + } + + .config-section { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); + } + + [data-theme="modern"] .config-section { + background: var(--color-bg-overlay); + } + + [data-theme="industrial"] .config-section { + border-left: 3px solid var(--color-primary); + } + + .config-section__header { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + background: var(--color-surface-2); + display: flex; + align-items: center; + gap: var(--space-3); + } + + [data-theme="industrial"] .config-section__header { + background: var(--color-surface-3); + } + + .config-section__header svg { + width: 18px; + height: 18px; + stroke: var(--color-primary); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + flex-shrink: 0; + } + + .config-section__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body-sm); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-secondary); + flex: 1; + } + + .config-section__body { + padding: var(--space-5); + } + + .form-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + .form-field { + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .form-field--span2 { + grid-column: span 2; + } + + .form-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-muted); + } + + .form-input { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + transition: var(--transition-fast); + } + + .form-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-select { + height: 36px; + padding: 0 var(--space-3); + background: var(--color-bg-base); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + cursor: pointer; + transition: var(--transition-fast); + } + + .form-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-accent); + } + + .form-hint { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .cert-status { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-surface-2); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--space-4); + } + + [data-theme="industrial"] .cert-status { + background: var(--color-surface-3); + } + + .cert-status__icon { + width: 36px; + height: 36px; + border-radius: var(--radius-md); + background: rgba(34,197,94,.12); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .cert-status__icon svg { + width: 20px; + height: 20px; + stroke: var(--color-success); + fill: none; + stroke-width: 1.75; + stroke-linecap: round; + stroke-linejoin: round; + } + + .cert-status__info { flex: 1; } + + .cert-status__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .cert-status__detail { + font-size: var(--text-caption); + color: var(--color-text-muted); + margin-top: 2px; + } + + /* Section headings */ + + .section-heading { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + } + + .section-heading__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + color: var(--color-text-secondary); + white-space: nowrap; + } + + .section-heading__line { + flex: 1; + height: 1px; + background: var(--color-border); + } + + /* ========================================================================= + RESPONSIVE + ========================================================================= */ + + @media (max-width: 1200px) { + .config-grid { + grid-template-columns: 1fr; + } + + .config-section[style*="span 2"] { + grid-column: span 1; + } + } + + @media (max-width: 1024px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + } + + .sidebar { + width: 60px; + overflow: visible; + } + + .brand-name, .nav-item span, .sidebar__user-info, + .nav-section-label { display: none; } + + .nav-item { + justify-content: center; + padding: var(--space-3); + border-left: none; + border-bottom: 2px solid transparent; + } + + .nav-item.is-active { + border-left: none; + border-bottom-color: var(--color-primary); + } + } + + @media (max-width: 768px) { + .summary-strip { + grid-template-columns: repeat(2, 1fr); + padding: var(--space-3) var(--space-4); + gap: var(--space-3); + } + + .page-header { padding: var(--space-3) var(--space-4); } + .tabs-row { padding: 0 var(--space-4); } + .tab-panel { padding: var(--space-4); } + .toolbar { gap: var(--space-2); } + .search-box { max-width: 100%; } + + .page-header__actions { display: none; } + .form-grid { grid-template-columns: 1fr; } + .form-field--span2 { grid-column: span 1; } + } diff --git a/pos/static/css/login.css b/pos/static/css/login.css new file mode 100644 index 0000000..d6348a6 --- /dev/null +++ b/pos/static/css/login.css @@ -0,0 +1,832 @@ +/* Extracted from login.html */ + +/* ===================================================================== + RESET & BASE + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-slow) var(--ease-in-out), + color var(--duration-slow) var(--ease-in-out); + min-height: 100vh; + } + + /* Modern theme dot-grid on body */ + [data-theme="modern"] body, + [data-theme="modern"].theme-root { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + button { + cursor: pointer; + border: none; + background: none; + font-family: inherit; + } + + /* ===================================================================== + THEME SWITCHER BAR (sticky top) + ===================================================================== */ + + .theme-bar { + position: sticky; + top: 0; + z-index: var(--z-sticky); + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-2); + padding: var(--space-2) var(--space-6); + background-color: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + box-shadow: var(--shadow-sm); + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out); + } + + .theme-bar__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-right: var(--space-2); + } + + .theme-btn { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-full); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + border: 1.5px solid var(--color-border); + background: transparent; + transition: var(--transition-normal); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + color: var(--color-primary); + border-color: var(--color-primary); + background: var(--color-primary-muted); + } + + .theme-btn.active { + color: var(--color-text-inverse); + background: var(--color-primary); + border-color: var(--color-primary); + } + + [data-theme="industrial"] .theme-btn.active { + color: #000; + } + + .theme-btn__dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: currentColor; + flex-shrink: 0; + } + + .theme-btn[data-theme-target="industrial"] .theme-btn__dot { + background: #F5A623; + } + + .theme-btn[data-theme-target="industrial"].active .theme-btn__dot { + background: #000; + } + + .theme-btn[data-theme-target="modern"] .theme-btn__dot { + background: #FF6B35; + } + + .theme-btn[data-theme-target="modern"].active .theme-btn__dot { + background: #fff; + } + + /* ===================================================================== + LAYOUT — centered login screen + ===================================================================== */ + + .login-screen { + min-height: calc(100vh - 49px); /* subtract theme bar height */ + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-8) var(--space-4); + } + + /* ===================================================================== + LOGIN CARD + ===================================================================== */ + + .login-card { + width: 100%; + max-width: 480px; + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); + overflow: hidden; + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out), + box-shadow var(--duration-slow) var(--ease-in-out); + } + + /* Industrial theme: angular clip-path on the card */ + [data-theme="industrial"] .login-card { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); + } + + /* Modern theme: smooth rounded corners */ + [data-theme="modern"] .login-card { + border-radius: var(--radius-xl); + } + + /* ===================================================================== + CARD HEADER — brand / logo + ===================================================================== */ + + .card-header { + padding: var(--space-8) var(--space-8) var(--space-6); + text-align: center; + border-bottom: 1px solid var(--color-border); + position: relative; + overflow: hidden; + } + + /* Industrial: amber accent bar at top of header */ + [data-theme="industrial"] .card-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--color-primary), transparent); + } + + /* Modern: subtle gradient wash */ + [data-theme="modern"] .card-header { + background: linear-gradient( + 135deg, + rgba(255, 107, 53, 0.04) 0%, + rgba(255, 107, 53, 0.01) 100% + ); + } + + .brand { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + } + + .brand-logo { + width: 52px; + height: 52px; + background: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 1.75rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-inverse); + flex-shrink: 0; + transition: background var(--duration-normal) var(--ease-in-out); + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); + border-radius: 0; + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .brand-logo { + color: #000; + } + + .brand-text { + text-align: left; + } + + .brand-name { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h4); + line-height: var(--leading-h4); + text-transform: uppercase; + } + + [data-theme="industrial"] .brand-name { + letter-spacing: var(--tracking-wider); + } + + .brand-sub { + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-accent); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + margin-top: var(--space-1); + } + + /* ===================================================================== + CARD BODY + ===================================================================== */ + + .card-body { + padding: var(--space-6) var(--space-8); + display: flex; + flex-direction: column; + gap: var(--space-6); + } + + /* ===================================================================== + SECTION LABEL + ===================================================================== */ + + .section-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-3); + } + + /* ===================================================================== + USER SELECTION + ===================================================================== */ + + .users-section {} + + .users-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .user-avatar-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-2); + background: var(--color-surface-1); + border: 1.5px solid var(--color-border); + cursor: pointer; + transition: var(--transition-normal); + position: relative; + } + + [data-theme="industrial"] .user-avatar-btn { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); + } + + [data-theme="modern"] .user-avatar-btn { + border-radius: var(--radius-lg); + } + + .user-avatar-btn:hover { + border-color: var(--color-primary); + background: var(--color-primary-muted); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .user-avatar-btn.selected { + border-color: var(--color-primary); + background: var(--color-primary-muted); + box-shadow: var(--shadow-accent); + } + + [data-theme="industrial"] .user-avatar-btn.selected { + background: rgba(245, 166, 35, 0.10); + } + + .user-avatar-btn.selected .user-initials { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .user-avatar-btn.selected .user-initials { + color: #000; + } + + /* Selected check indicator */ + .user-avatar-btn.selected::after { + content: '✓'; + position: absolute; + top: 4px; + right: 6px; + font-size: 10px; + font-weight: bold; + color: var(--color-primary); + line-height: 1; + } + + .user-initials { + width: 44px; + height: 44px; + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 0.9rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-secondary); + letter-spacing: var(--tracking-wide); + transition: var(--transition-normal); + flex-shrink: 0; + } + + [data-theme="industrial"] .user-initials { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); + } + + [data-theme="modern"] .user-initials { + border-radius: var(--radius-full); + } + + .user-name { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + text-align: center; + line-height: 1.3; + transition: color var(--duration-normal); + } + + .user-avatar-btn.selected .user-name { + color: var(--color-text-accent); + } + + .user-role { + font-size: 10px; + color: var(--color-text-muted); + text-align: center; + letter-spacing: var(--tracking-wide); + } + + /* ===================================================================== + PIN DISPLAY (dots) + ===================================================================== */ + + .pin-section {} + + .pin-display { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + margin-bottom: var(--space-4); + transition: border-color var(--duration-normal), box-shadow var(--duration-normal); + min-height: 64px; + } + + [data-theme="industrial"] .pin-display { + border-radius: 0; + } + + [data-theme="modern"] .pin-display { + border-radius: var(--radius-lg); + } + + .pin-display.has-digits { + border-color: var(--color-border-accent); + } + + .pin-display.error { + border-color: var(--color-error); + animation: pin-shake 0.4s var(--ease-in-out); + } + + @keyframes pin-shake { + 0%, 100% { transform: translateX(0); } + 20% { transform: translateX(-8px); } + 40% { transform: translateX(8px); } + 60% { transform: translateX(-5px); } + 80% { transform: translateX(5px); } + } + + .pin-dot { + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid var(--color-border-strong); + background: transparent; + transition: all var(--duration-fast) var(--ease-out); + flex-shrink: 0; + } + + .pin-dot.filled { + background: var(--color-primary); + border-color: var(--color-primary); + transform: scale(1.1); + box-shadow: 0 0 8px var(--color-primary); + } + + /* PIN placeholder text when no user selected */ + .pin-placeholder { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-style: italic; + } + + /* ===================================================================== + PIN PAD + ===================================================================== */ + + .pin-pad { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .pin-key { + position: relative; + padding: 0; + height: 64px; + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition-fast); + user-select: none; + -webkit-tap-highlight-color: transparent; + overflow: hidden; + } + + [data-theme="industrial"] .pin-key { + border-radius: 0; + letter-spacing: var(--tracking-normal); + } + + [data-theme="modern"] .pin-key { + border-radius: var(--radius-md); + letter-spacing: var(--tracking-snug); + } + + .pin-key:hover { + background: var(--color-surface-3); + border-color: var(--color-border-strong); + transform: translateY(-1px); + box-shadow: var(--shadow-sm); + } + + .pin-key:active { + transform: translateY(1px) scale(0.97); + box-shadow: none; + background: var(--color-primary-muted); + border-color: var(--color-primary); + } + + /* Ripple effect */ + .pin-key::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: var(--color-primary); + opacity: 0; + border-radius: inherit; + transform: scale(0); + transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); + } + + .pin-key.ripple::after { + transform: scale(2.5); + opacity: 0.12; + } + + /* Backspace key */ + .pin-key--backspace { + font-size: 1.1rem; + color: var(--color-text-muted); + } + + .pin-key--backspace:hover { + color: var(--color-error); + border-color: var(--color-error); + background: rgba(239, 68, 68, 0.06); + } + + .pin-key--backspace:active { + border-color: var(--color-error); + background: rgba(239, 68, 68, 0.12); + } + + /* Enter key */ + .pin-key--enter { + background: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + font-size: 1rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + } + + .pin-key--enter:hover { + background: var(--color-primary); + color: var(--color-text-inverse); + transform: translateY(-1px); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .pin-key--enter:hover { + color: #000; + } + + .pin-key--enter:active { + background: var(--color-primary-active, var(--color-primary)); + color: var(--color-text-inverse); + transform: translateY(1px) scale(0.97); + } + + /* ===================================================================== + SUBMIT BUTTON + ===================================================================== */ + + .btn-login { + width: 100%; + padding: var(--space-4) var(--space-6); + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border: 1.5px solid var(--btn-primary-border, transparent); + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-normal); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-3); + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .btn-login { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); + } + + [data-theme="modern"] .btn-login { + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + } + + .btn-login:hover:not(:disabled) { + background: var(--btn-primary-bg-hover); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + } + + .btn-login:active:not(:disabled) { + background: var(--btn-primary-bg-active); + transform: translateY(0); + box-shadow: var(--shadow-sm); + } + + .btn-login:disabled { + opacity: 0.45; + cursor: not-allowed; + transform: none; + } + + .btn-login__icon { + font-size: 1.1rem; + line-height: 1; + } + + /* ===================================================================== + CARD FOOTER + ===================================================================== */ + + .card-footer { + padding: var(--space-4) var(--space-8); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + background: var(--color-surface-1); + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out); + } + + .footer-version { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + font-family: var(--font-mono); + } + + .footer-status { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-success); + animation: status-pulse 2.5s infinite ease-in-out; + flex-shrink: 0; + } + + @keyframes status-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.85); } + } + + /* ===================================================================== + INDUSTRIAL THEME EXTRAS — accent border line on card + ===================================================================== */ + + [data-theme="industrial"] .login-card { + border-color: #2a2a2a; + position: relative; + } + + [data-theme="industrial"] .login-card::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + /* Simulated angular highlight on top-left edge */ + border-top: 1px solid rgba(245, 166, 35, 0.15); + border-left: 1px solid rgba(245, 166, 35, 0.08); + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); + z-index: 1; + } + + /* ===================================================================== + NOTIFICATION / TOAST for error feedback + ===================================================================== */ + + .toast { + position: fixed; + bottom: var(--space-8); + left: 50%; + transform: translateX(-50%) translateY(120%); + background: var(--color-error); + color: #fff; + padding: var(--space-3) var(--space-6); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + border-radius: var(--radius-full); + box-shadow: var(--shadow-lg); + z-index: var(--z-toast); + transition: transform 0.3s var(--ease-out); + white-space: nowrap; + pointer-events: none; + } + + .toast.show { + transform: translateX(-50%) translateY(0); + } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + + @media (max-width: 640px) { + .theme-bar { + padding: var(--space-2) var(--space-4); + } + + .theme-bar__label { + display: none; + } + + .login-screen { + padding: var(--space-4) var(--space-3); + align-items: flex-start; + padding-top: var(--space-6); + } + + .card-body { + padding: var(--space-5) var(--space-5); + gap: var(--space-5); + } + + .card-header { + padding: var(--space-6) var(--space-5) var(--space-5); + } + + .card-footer { + padding: var(--space-3) var(--space-5); + } + + .brand-logo { + width: 44px; + height: 44px; + font-size: 1.4rem; + } + + .brand-name { + font-size: 1.25rem; + } + + .users-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--space-2); + } + + .pin-key { + height: 56px; + font-size: 1.35rem; + } + + .pin-dot { + width: 12px; + height: 12px; + } + } + + @media (max-width: 360px) { + .users-grid { + grid-template-columns: repeat(3, 1fr); + } + + .user-initials { + width: 36px; + height: 36px; + font-size: 0.75rem; + } + + .pin-key { + height: 50px; + font-size: 1.2rem; + } + } + + /* ===================================================================== + ACCESSIBILITY + ===================================================================== */ + + .pin-key:focus-visible, + .user-avatar-btn:focus-visible, + .theme-btn:focus-visible, + .btn-login:focus-visible { + outline: 2px solid var(--color-border-focus); + outline-offset: 3px; + } + + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } + } diff --git a/pos/static/css/login.min.css b/pos/static/css/login.min.css new file mode 100644 index 0000000..d6348a6 --- /dev/null +++ b/pos/static/css/login.min.css @@ -0,0 +1,832 @@ +/* Extracted from login.html */ + +/* ===================================================================== + RESET & BASE + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-slow) var(--ease-in-out), + color var(--duration-slow) var(--ease-in-out); + min-height: 100vh; + } + + /* Modern theme dot-grid on body */ + [data-theme="modern"] body, + [data-theme="modern"].theme-root { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + button { + cursor: pointer; + border: none; + background: none; + font-family: inherit; + } + + /* ===================================================================== + THEME SWITCHER BAR (sticky top) + ===================================================================== */ + + .theme-bar { + position: sticky; + top: 0; + z-index: var(--z-sticky); + display: flex; + align-items: center; + justify-content: flex-end; + gap: var(--space-2); + padding: var(--space-2) var(--space-6); + background-color: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + box-shadow: var(--shadow-sm); + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out); + } + + .theme-bar__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-right: var(--space-2); + } + + .theme-btn { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border-radius: var(--radius-full); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + border: 1.5px solid var(--color-border); + background: transparent; + transition: var(--transition-normal); + letter-spacing: var(--tracking-wide); + } + + .theme-btn:hover { + color: var(--color-primary); + border-color: var(--color-primary); + background: var(--color-primary-muted); + } + + .theme-btn.active { + color: var(--color-text-inverse); + background: var(--color-primary); + border-color: var(--color-primary); + } + + [data-theme="industrial"] .theme-btn.active { + color: #000; + } + + .theme-btn__dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: currentColor; + flex-shrink: 0; + } + + .theme-btn[data-theme-target="industrial"] .theme-btn__dot { + background: #F5A623; + } + + .theme-btn[data-theme-target="industrial"].active .theme-btn__dot { + background: #000; + } + + .theme-btn[data-theme-target="modern"] .theme-btn__dot { + background: #FF6B35; + } + + .theme-btn[data-theme-target="modern"].active .theme-btn__dot { + background: #fff; + } + + /* ===================================================================== + LAYOUT — centered login screen + ===================================================================== */ + + .login-screen { + min-height: calc(100vh - 49px); /* subtract theme bar height */ + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-8) var(--space-4); + } + + /* ===================================================================== + LOGIN CARD + ===================================================================== */ + + .login-card { + width: 100%; + max-width: 480px; + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + box-shadow: var(--shadow-xl); + overflow: hidden; + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out), + box-shadow var(--duration-slow) var(--ease-in-out); + } + + /* Industrial theme: angular clip-path on the card */ + [data-theme="industrial"] .login-card { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); + } + + /* Modern theme: smooth rounded corners */ + [data-theme="modern"] .login-card { + border-radius: var(--radius-xl); + } + + /* ===================================================================== + CARD HEADER — brand / logo + ===================================================================== */ + + .card-header { + padding: var(--space-8) var(--space-8) var(--space-6); + text-align: center; + border-bottom: 1px solid var(--color-border); + position: relative; + overflow: hidden; + } + + /* Industrial: amber accent bar at top of header */ + [data-theme="industrial"] .card-header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--color-primary), transparent); + } + + /* Modern: subtle gradient wash */ + [data-theme="modern"] .card-header { + background: linear-gradient( + 135deg, + rgba(255, 107, 53, 0.04) 0%, + rgba(255, 107, 53, 0.01) 100% + ); + } + + .brand { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + } + + .brand-logo { + width: 52px; + height: 52px; + background: var(--color-primary); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 1.75rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-inverse); + flex-shrink: 0; + transition: background var(--duration-normal) var(--ease-in-out); + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); + border-radius: 0; + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .brand-logo { + color: #000; + } + + .brand-text { + text-align: left; + } + + .brand-name { + font-family: var(--font-heading); + font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h4); + line-height: var(--leading-h4); + text-transform: uppercase; + } + + [data-theme="industrial"] .brand-name { + letter-spacing: var(--tracking-wider); + } + + .brand-sub { + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-accent); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + margin-top: var(--space-1); + } + + /* ===================================================================== + CARD BODY + ===================================================================== */ + + .card-body { + padding: var(--space-6) var(--space-8); + display: flex; + flex-direction: column; + gap: var(--space-6); + } + + /* ===================================================================== + SECTION LABEL + ===================================================================== */ + + .section-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-muted); + margin-bottom: var(--space-3); + } + + /* ===================================================================== + USER SELECTION + ===================================================================== */ + + .users-section {} + + .users-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .user-avatar-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-2); + background: var(--color-surface-1); + border: 1.5px solid var(--color-border); + cursor: pointer; + transition: var(--transition-normal); + position: relative; + } + + [data-theme="industrial"] .user-avatar-btn { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); + } + + [data-theme="modern"] .user-avatar-btn { + border-radius: var(--radius-lg); + } + + .user-avatar-btn:hover { + border-color: var(--color-primary); + background: var(--color-primary-muted); + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .user-avatar-btn.selected { + border-color: var(--color-primary); + background: var(--color-primary-muted); + box-shadow: var(--shadow-accent); + } + + [data-theme="industrial"] .user-avatar-btn.selected { + background: rgba(245, 166, 35, 0.10); + } + + .user-avatar-btn.selected .user-initials { + background: var(--color-primary); + color: var(--color-text-inverse); + } + + [data-theme="industrial"] .user-avatar-btn.selected .user-initials { + color: #000; + } + + /* Selected check indicator */ + .user-avatar-btn.selected::after { + content: '✓'; + position: absolute; + top: 4px; + right: 6px; + font-size: 10px; + font-weight: bold; + color: var(--color-primary); + line-height: 1; + } + + .user-initials { + width: 44px; + height: 44px; + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-size: 0.9rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-secondary); + letter-spacing: var(--tracking-wide); + transition: var(--transition-normal); + flex-shrink: 0; + } + + [data-theme="industrial"] .user-initials { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); + } + + [data-theme="modern"] .user-initials { + border-radius: var(--radius-full); + } + + .user-name { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + text-align: center; + line-height: 1.3; + transition: color var(--duration-normal); + } + + .user-avatar-btn.selected .user-name { + color: var(--color-text-accent); + } + + .user-role { + font-size: 10px; + color: var(--color-text-muted); + text-align: center; + letter-spacing: var(--tracking-wide); + } + + /* ===================================================================== + PIN DISPLAY (dots) + ===================================================================== */ + + .pin-section {} + + .pin-display { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + padding: var(--space-4) var(--space-6); + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + margin-bottom: var(--space-4); + transition: border-color var(--duration-normal), box-shadow var(--duration-normal); + min-height: 64px; + } + + [data-theme="industrial"] .pin-display { + border-radius: 0; + } + + [data-theme="modern"] .pin-display { + border-radius: var(--radius-lg); + } + + .pin-display.has-digits { + border-color: var(--color-border-accent); + } + + .pin-display.error { + border-color: var(--color-error); + animation: pin-shake 0.4s var(--ease-in-out); + } + + @keyframes pin-shake { + 0%, 100% { transform: translateX(0); } + 20% { transform: translateX(-8px); } + 40% { transform: translateX(8px); } + 60% { transform: translateX(-5px); } + 80% { transform: translateX(5px); } + } + + .pin-dot { + width: 14px; + height: 14px; + border-radius: 50%; + border: 2px solid var(--color-border-strong); + background: transparent; + transition: all var(--duration-fast) var(--ease-out); + flex-shrink: 0; + } + + .pin-dot.filled { + background: var(--color-primary); + border-color: var(--color-primary); + transform: scale(1.1); + box-shadow: 0 0 8px var(--color-primary); + } + + /* PIN placeholder text when no user selected */ + .pin-placeholder { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + font-style: italic; + } + + /* ===================================================================== + PIN PAD + ===================================================================== */ + + .pin-pad { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-3); + } + + .pin-key { + position: relative; + padding: 0; + height: 64px; + background: var(--color-surface-2); + border: 1.5px solid var(--color-border); + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: var(--heading-weight-primary); + color: var(--color-text-primary); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition-fast); + user-select: none; + -webkit-tap-highlight-color: transparent; + overflow: hidden; + } + + [data-theme="industrial"] .pin-key { + border-radius: 0; + letter-spacing: var(--tracking-normal); + } + + [data-theme="modern"] .pin-key { + border-radius: var(--radius-md); + letter-spacing: var(--tracking-snug); + } + + .pin-key:hover { + background: var(--color-surface-3); + border-color: var(--color-border-strong); + transform: translateY(-1px); + box-shadow: var(--shadow-sm); + } + + .pin-key:active { + transform: translateY(1px) scale(0.97); + box-shadow: none; + background: var(--color-primary-muted); + border-color: var(--color-primary); + } + + /* Ripple effect */ + .pin-key::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: var(--color-primary); + opacity: 0; + border-radius: inherit; + transform: scale(0); + transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); + } + + .pin-key.ripple::after { + transform: scale(2.5); + opacity: 0.12; + } + + /* Backspace key */ + .pin-key--backspace { + font-size: 1.1rem; + color: var(--color-text-muted); + } + + .pin-key--backspace:hover { + color: var(--color-error); + border-color: var(--color-error); + background: rgba(239, 68, 68, 0.06); + } + + .pin-key--backspace:active { + border-color: var(--color-error); + background: rgba(239, 68, 68, 0.12); + } + + /* Enter key */ + .pin-key--enter { + background: var(--color-primary-muted); + border-color: var(--color-primary); + color: var(--color-primary); + font-size: 1rem; + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + } + + .pin-key--enter:hover { + background: var(--color-primary); + color: var(--color-text-inverse); + transform: translateY(-1px); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .pin-key--enter:hover { + color: #000; + } + + .pin-key--enter:active { + background: var(--color-primary-active, var(--color-primary)); + color: var(--color-text-inverse); + transform: translateY(1px) scale(0.97); + } + + /* ===================================================================== + SUBMIT BUTTON + ===================================================================== */ + + .btn-login { + width: 100%; + padding: var(--space-4) var(--space-6); + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border: 1.5px solid var(--btn-primary-border, transparent); + font-family: var(--font-heading); + font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-normal); + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-3); + position: relative; + overflow: hidden; + } + + [data-theme="industrial"] .btn-login { + border-radius: 0; + clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); + } + + [data-theme="modern"] .btn-login { + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + } + + .btn-login:hover:not(:disabled) { + background: var(--btn-primary-bg-hover); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); + } + + .btn-login:active:not(:disabled) { + background: var(--btn-primary-bg-active); + transform: translateY(0); + box-shadow: var(--shadow-sm); + } + + .btn-login:disabled { + opacity: 0.45; + cursor: not-allowed; + transform: none; + } + + .btn-login__icon { + font-size: 1.1rem; + line-height: 1; + } + + /* ===================================================================== + CARD FOOTER + ===================================================================== */ + + .card-footer { + padding: var(--space-4) var(--space-8); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + background: var(--color-surface-1); + transition: background-color var(--duration-slow) var(--ease-in-out), + border-color var(--duration-slow) var(--ease-in-out); + } + + .footer-version { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + font-family: var(--font-mono); + } + + .footer-status { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-success); + animation: status-pulse 2.5s infinite ease-in-out; + flex-shrink: 0; + } + + @keyframes status-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(0.85); } + } + + /* ===================================================================== + INDUSTRIAL THEME EXTRAS — accent border line on card + ===================================================================== */ + + [data-theme="industrial"] .login-card { + border-color: #2a2a2a; + position: relative; + } + + [data-theme="industrial"] .login-card::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + /* Simulated angular highlight on top-left edge */ + border-top: 1px solid rgba(245, 166, 35, 0.15); + border-left: 1px solid rgba(245, 166, 35, 0.08); + clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); + z-index: 1; + } + + /* ===================================================================== + NOTIFICATION / TOAST for error feedback + ===================================================================== */ + + .toast { + position: fixed; + bottom: var(--space-8); + left: 50%; + transform: translateX(-50%) translateY(120%); + background: var(--color-error); + color: #fff; + padding: var(--space-3) var(--space-6); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + border-radius: var(--radius-full); + box-shadow: var(--shadow-lg); + z-index: var(--z-toast); + transition: transform 0.3s var(--ease-out); + white-space: nowrap; + pointer-events: none; + } + + .toast.show { + transform: translateX(-50%) translateY(0); + } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + + @media (max-width: 640px) { + .theme-bar { + padding: var(--space-2) var(--space-4); + } + + .theme-bar__label { + display: none; + } + + .login-screen { + padding: var(--space-4) var(--space-3); + align-items: flex-start; + padding-top: var(--space-6); + } + + .card-body { + padding: var(--space-5) var(--space-5); + gap: var(--space-5); + } + + .card-header { + padding: var(--space-6) var(--space-5) var(--space-5); + } + + .card-footer { + padding: var(--space-3) var(--space-5); + } + + .brand-logo { + width: 44px; + height: 44px; + font-size: 1.4rem; + } + + .brand-name { + font-size: 1.25rem; + } + + .users-grid { + grid-template-columns: repeat(3, 1fr); + gap: var(--space-2); + } + + .pin-key { + height: 56px; + font-size: 1.35rem; + } + + .pin-dot { + width: 12px; + height: 12px; + } + } + + @media (max-width: 360px) { + .users-grid { + grid-template-columns: repeat(3, 1fr); + } + + .user-initials { + width: 36px; + height: 36px; + font-size: 0.75rem; + } + + .pin-key { + height: 50px; + font-size: 1.2rem; + } + } + + /* ===================================================================== + ACCESSIBILITY + ===================================================================== */ + + .pin-key:focus-visible, + .user-avatar-btn:focus-visible, + .theme-btn:focus-visible, + .btn-login:focus-visible { + outline: 2px solid var(--color-border-focus); + outline-offset: 3px; + } + + @media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } + } diff --git a/pos/static/css/marketplace.css b/pos/static/css/marketplace.css new file mode 100644 index 0000000..8296a1e --- /dev/null +++ b/pos/static/css/marketplace.css @@ -0,0 +1,224 @@ +/* Extracted from marketplace.html */ + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { height: 100%; } + body { + font-family: var(--font-body); font-size: var(--text-body-sm); + background: var(--color-bg-base); color: var(--color-text-primary); + min-height: 100vh; display: flex; flex-direction: column; + } + + /* ── Page header ── */ + .page-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--glass-bg-strong); backdrop-filter: blur(16px); + border-bottom: 1px solid var(--glass-border); + } + .page-title { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-accent); + text-transform: uppercase; letter-spacing: var(--tracking-wide); + } + .page-title::before { content: '// '; opacity: 0.5; font-family: var(--font-mono); } + .user-role { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-widest); + padding: var(--space-1) var(--space-3); + border: 1px dashed var(--glass-border); border-radius: var(--radius-sm); + } + + /* ── Tab bar ── */ + .tab-bar { + display: flex; gap: var(--space-1); + padding: 0 var(--space-6); background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + } + .tab-btn { + background: transparent; border: none; + padding: var(--space-3) var(--space-5); + color: var(--color-text-muted); cursor: pointer; + font-family: var(--font-body); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + border-bottom: 2px solid transparent; + transition: all 0.2s ease; + } + .tab-btn:hover { color: var(--color-text-accent); } + .tab-btn.active { + color: var(--color-text-accent); + border-bottom-color: var(--color-primary); + } + .tab-panel { display: none; padding: var(--space-6); flex: 1; overflow-y: auto; } + .tab-panel.active { display: block; } + + /* ── Search bar ── */ + .search-row { + display: flex; gap: var(--space-3); margin-bottom: var(--space-5); + flex-wrap: wrap; + } + .search-row input { + flex: 1; min-width: 240px; + padding: var(--space-3) var(--space-4); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + color: var(--color-text-primary); + font-family: var(--font-body); font-size: var(--text-body); + border-radius: var(--radius-md); + } + .search-row button { + padding: var(--space-3) var(--space-6); + background: var(--gradient-accent); color: var(--btn-primary-text); + border: none; border-radius: var(--radius-md); + font-weight: var(--font-weight-semibold); cursor: pointer; + } + + /* ── Results table/grid ── */ + .results-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-4); + } + .part-card { + background: var(--glass-bg); backdrop-filter: blur(12px); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-4); cursor: pointer; + transition: all 0.25s ease; + } + .part-card:hover { + border-color: var(--color-border-accent); + box-shadow: 0 4px 20px var(--glow-color-soft); + transform: translateY(-2px); + } + .part-card__oem { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-accent); font-weight: var(--font-weight-bold); + } + .part-card__name { + font-size: var(--text-body); font-weight: var(--font-weight-semibold); + margin-top: var(--space-1); + } + .part-card__meta { + display: flex; justify-content: space-between; align-items: center; + margin-top: var(--space-3); padding-top: var(--space-3); + border-top: 1px dashed var(--glass-border); + font-size: var(--text-caption); + } + .price-range { + font-family: var(--font-mono); color: var(--color-text-accent); + font-weight: var(--font-weight-bold); + } + .bodega-count { + color: var(--color-text-muted); + } + .stock-pill { + display: inline-block; padding: 2px 8px; + background: rgba(63,185,80,0.15); color: #3FB950; + border: 1px solid rgba(63,185,80,0.3); + border-radius: var(--radius-full); + font-size: 11px; font-weight: var(--font-weight-bold); + } + + /* ── PO list table ── */ + .po-table { + width: 100%; border-collapse: collapse; + background: var(--glass-bg); backdrop-filter: blur(12px); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + overflow: hidden; + } + .po-table th, .po-table td { + padding: var(--space-3) var(--space-4); + text-align: left; + border-bottom: 1px solid var(--glass-border); + } + .po-table th { + background: var(--glass-bg-strong); + font-family: var(--font-mono); font-size: var(--text-caption); + text-transform: uppercase; letter-spacing: var(--tracking-widest); + color: var(--color-text-muted); + } + .po-table tbody tr { cursor: pointer; transition: background 0.15s; } + .po-table tbody tr:hover { background: var(--glass-highlight); } + + /* ── Status badges ── */ + .status-badge { + display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); + font-size: 11px; font-weight: var(--font-weight-bold); + text-transform: uppercase; letter-spacing: var(--tracking-wider); + } + .status-draft { background: rgba(130,130,130,0.2); color: #888; } + .status-submitted { background: rgba(245,166,35,0.15); color: #F5A623; border: 1px solid rgba(245,166,35,0.3); } + .status-confirmed { background: rgba(0,212,255,0.15); color: #00D4FF; border: 1px solid rgba(0,212,255,0.3); } + .status-ready { background: rgba(167,139,250,0.15); color: #A78BFA; border: 1px solid rgba(167,139,250,0.3); } + .status-delivered { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); } + .status-closed { background: rgba(255,255,255,0.05); color: #888; } + .status-rejected { background: rgba(248,81,73,0.15); color: #F85149; border: 1px solid rgba(248,81,73,0.3); } + + /* ── Modals ── */ + .modal-overlay { + display: none; position: fixed; inset: 0; z-index: 1000; + background: var(--overlay-backdrop); backdrop-filter: blur(4px); + align-items: flex-start; justify-content: center; + padding: var(--space-8) var(--space-4); overflow-y: auto; + } + .modal-overlay.open { display: flex; } + .modal-content { + background: var(--glass-bg-strong); backdrop-filter: blur(24px); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + max-width: 700px; width: 100%; + padding: var(--space-6); position: relative; + } + .modal-close { + position: absolute; top: var(--space-3); right: var(--space-3); + background: none; border: none; color: var(--color-text-muted); + font-size: 1.4rem; cursor: pointer; + } + .modal-title { + font-family: var(--font-heading); font-size: var(--text-h5); + margin-bottom: var(--space-4); + } + + .empty-state { + text-align: center; padding: var(--space-12); + color: var(--color-text-muted); + } + .empty-state h3 { margin-bottom: var(--space-2); font-family: var(--font-heading); } + + /* ── CSV upload box ── */ + .upload-box { + background: var(--glass-bg); border: 1px dashed var(--glass-border); + border-radius: var(--radius-lg); padding: var(--space-5); + margin-bottom: var(--space-5); + } + .upload-box label { + display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); + } + .upload-box textarea { + width: 100%; height: 160px; + padding: var(--space-3); font-family: var(--font-mono); font-size: 12px; + background: var(--glass-bg); border: 1px solid var(--glass-border); + color: var(--color-text-primary); border-radius: var(--radius-md); + resize: vertical; + } + .upload-box .hint { + font-size: var(--text-caption); color: var(--color-text-muted); + margin-top: var(--space-1); + } + + /* Item list inside the create-PO modal */ + .cart-items { + border: 1px solid var(--glass-border); border-radius: var(--radius-md); + margin: var(--space-3) 0; + max-height: 260px; overflow-y: auto; + } + .cart-row { + display: flex; gap: var(--space-3); align-items: center; + padding: var(--space-2) var(--space-3); + border-bottom: 1px solid var(--glass-border); + } + .cart-row:last-child { border-bottom: none; } + .cart-row input[type="number"] { width: 70px; } + .cart-row .remove-btn { + background: none; border: none; color: #F85149; cursor: pointer; + font-size: 1.2rem; + } diff --git a/pos/static/css/marketplace.min.css b/pos/static/css/marketplace.min.css new file mode 100644 index 0000000..8296a1e --- /dev/null +++ b/pos/static/css/marketplace.min.css @@ -0,0 +1,224 @@ +/* Extracted from marketplace.html */ + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + html, body { height: 100%; } + body { + font-family: var(--font-body); font-size: var(--text-body-sm); + background: var(--color-bg-base); color: var(--color-text-primary); + min-height: 100vh; display: flex; flex-direction: column; + } + + /* ── Page header ── */ + .page-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--glass-bg-strong); backdrop-filter: blur(16px); + border-bottom: 1px solid var(--glass-border); + } + .page-title { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-accent); + text-transform: uppercase; letter-spacing: var(--tracking-wide); + } + .page-title::before { content: '// '; opacity: 0.5; font-family: var(--font-mono); } + .user-role { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-widest); + padding: var(--space-1) var(--space-3); + border: 1px dashed var(--glass-border); border-radius: var(--radius-sm); + } + + /* ── Tab bar ── */ + .tab-bar { + display: flex; gap: var(--space-1); + padding: 0 var(--space-6); background: var(--color-bg-base); + border-bottom: 1px solid var(--color-border); + } + .tab-btn { + background: transparent; border: none; + padding: var(--space-3) var(--space-5); + color: var(--color-text-muted); cursor: pointer; + font-family: var(--font-body); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + border-bottom: 2px solid transparent; + transition: all 0.2s ease; + } + .tab-btn:hover { color: var(--color-text-accent); } + .tab-btn.active { + color: var(--color-text-accent); + border-bottom-color: var(--color-primary); + } + .tab-panel { display: none; padding: var(--space-6); flex: 1; overflow-y: auto; } + .tab-panel.active { display: block; } + + /* ── Search bar ── */ + .search-row { + display: flex; gap: var(--space-3); margin-bottom: var(--space-5); + flex-wrap: wrap; + } + .search-row input { + flex: 1; min-width: 240px; + padding: var(--space-3) var(--space-4); + background: var(--glass-bg); + border: 1px solid var(--glass-border); + color: var(--color-text-primary); + font-family: var(--font-body); font-size: var(--text-body); + border-radius: var(--radius-md); + } + .search-row button { + padding: var(--space-3) var(--space-6); + background: var(--gradient-accent); color: var(--btn-primary-text); + border: none; border-radius: var(--radius-md); + font-weight: var(--font-weight-semibold); cursor: pointer; + } + + /* ── Results table/grid ── */ + .results-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-4); + } + .part-card { + background: var(--glass-bg); backdrop-filter: blur(12px); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + padding: var(--space-4); cursor: pointer; + transition: all 0.25s ease; + } + .part-card:hover { + border-color: var(--color-border-accent); + box-shadow: 0 4px 20px var(--glow-color-soft); + transform: translateY(-2px); + } + .part-card__oem { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-accent); font-weight: var(--font-weight-bold); + } + .part-card__name { + font-size: var(--text-body); font-weight: var(--font-weight-semibold); + margin-top: var(--space-1); + } + .part-card__meta { + display: flex; justify-content: space-between; align-items: center; + margin-top: var(--space-3); padding-top: var(--space-3); + border-top: 1px dashed var(--glass-border); + font-size: var(--text-caption); + } + .price-range { + font-family: var(--font-mono); color: var(--color-text-accent); + font-weight: var(--font-weight-bold); + } + .bodega-count { + color: var(--color-text-muted); + } + .stock-pill { + display: inline-block; padding: 2px 8px; + background: rgba(63,185,80,0.15); color: #3FB950; + border: 1px solid rgba(63,185,80,0.3); + border-radius: var(--radius-full); + font-size: 11px; font-weight: var(--font-weight-bold); + } + + /* ── PO list table ── */ + .po-table { + width: 100%; border-collapse: collapse; + background: var(--glass-bg); backdrop-filter: blur(12px); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + overflow: hidden; + } + .po-table th, .po-table td { + padding: var(--space-3) var(--space-4); + text-align: left; + border-bottom: 1px solid var(--glass-border); + } + .po-table th { + background: var(--glass-bg-strong); + font-family: var(--font-mono); font-size: var(--text-caption); + text-transform: uppercase; letter-spacing: var(--tracking-widest); + color: var(--color-text-muted); + } + .po-table tbody tr { cursor: pointer; transition: background 0.15s; } + .po-table tbody tr:hover { background: var(--glass-highlight); } + + /* ── Status badges ── */ + .status-badge { + display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); + font-size: 11px; font-weight: var(--font-weight-bold); + text-transform: uppercase; letter-spacing: var(--tracking-wider); + } + .status-draft { background: rgba(130,130,130,0.2); color: #888; } + .status-submitted { background: rgba(245,166,35,0.15); color: #F5A623; border: 1px solid rgba(245,166,35,0.3); } + .status-confirmed { background: rgba(0,212,255,0.15); color: #00D4FF; border: 1px solid rgba(0,212,255,0.3); } + .status-ready { background: rgba(167,139,250,0.15); color: #A78BFA; border: 1px solid rgba(167,139,250,0.3); } + .status-delivered { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); } + .status-closed { background: rgba(255,255,255,0.05); color: #888; } + .status-rejected { background: rgba(248,81,73,0.15); color: #F85149; border: 1px solid rgba(248,81,73,0.3); } + + /* ── Modals ── */ + .modal-overlay { + display: none; position: fixed; inset: 0; z-index: 1000; + background: var(--overlay-backdrop); backdrop-filter: blur(4px); + align-items: flex-start; justify-content: center; + padding: var(--space-8) var(--space-4); overflow-y: auto; + } + .modal-overlay.open { display: flex; } + .modal-content { + background: var(--glass-bg-strong); backdrop-filter: blur(24px); + border: 1px solid var(--glass-border); border-radius: var(--radius-lg); + max-width: 700px; width: 100%; + padding: var(--space-6); position: relative; + } + .modal-close { + position: absolute; top: var(--space-3); right: var(--space-3); + background: none; border: none; color: var(--color-text-muted); + font-size: 1.4rem; cursor: pointer; + } + .modal-title { + font-family: var(--font-heading); font-size: var(--text-h5); + margin-bottom: var(--space-4); + } + + .empty-state { + text-align: center; padding: var(--space-12); + color: var(--color-text-muted); + } + .empty-state h3 { margin-bottom: var(--space-2); font-family: var(--font-heading); } + + /* ── CSV upload box ── */ + .upload-box { + background: var(--glass-bg); border: 1px dashed var(--glass-border); + border-radius: var(--radius-lg); padding: var(--space-5); + margin-bottom: var(--space-5); + } + .upload-box label { + display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); + } + .upload-box textarea { + width: 100%; height: 160px; + padding: var(--space-3); font-family: var(--font-mono); font-size: 12px; + background: var(--glass-bg); border: 1px solid var(--glass-border); + color: var(--color-text-primary); border-radius: var(--radius-md); + resize: vertical; + } + .upload-box .hint { + font-size: var(--text-caption); color: var(--color-text-muted); + margin-top: var(--space-1); + } + + /* Item list inside the create-PO modal */ + .cart-items { + border: 1px solid var(--glass-border); border-radius: var(--radius-md); + margin: var(--space-3) 0; + max-height: 260px; overflow-y: auto; + } + .cart-row { + display: flex; gap: var(--space-3); align-items: center; + padding: var(--space-2) var(--space-3); + border-bottom: 1px solid var(--glass-border); + } + .cart-row:last-child { border-bottom: none; } + .cart-row input[type="number"] { width: 70px; } + .cart-row .remove-btn { + background: none; border: none; color: #F85149; cursor: pointer; + font-size: 1.2rem; + } diff --git a/pos/static/css/pos.css b/pos/static/css/pos.css new file mode 100644 index 0000000..c038aef --- /dev/null +++ b/pos/static/css/pos.css @@ -0,0 +1,985 @@ +/* Extracted from pos.html */ + +/* ===================================================================== + BASE RESET & LAYOUT SHELL + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + overflow: hidden; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + font-weight: var(--font-weight-regular); + background-color: var(--color-bg-base); + color: var(--color-text-primary); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + display: flex; + flex-direction: column; + } + + /* Dot-grid for modern theme */ + [data-theme="modern"] body, + [data-theme="modern"].pos-shell { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ===================================================================== + STATUS BAR (very top) + ===================================================================== */ + + .status-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 36px; + padding: 0 var(--space-5); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + flex-shrink: 0; + z-index: var(--z-sticky); + } + + [data-theme="industrial"] .status-bar { + background-color: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .status-bar__store { + display: flex; + align-items: center; + gap: var(--space-3); + color: var(--color-text-accent); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + letter-spacing: var(--tracking-widest); + } + + .status-bar__store-dot { + width: 7px; + height: 7px; + background-color: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: pulse-dot 2.5s ease-in-out infinite; + } + + @keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } + } + + .status-bar__center { + display: flex; + align-items: center; + gap: var(--space-6); + } + + .status-bar__right { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .status-bar__user { + display: flex; + align-items: center; + gap: var(--space-2); + color: var(--color-text-secondary); + } + + .status-bar__user-avatar { + width: 20px; + height: 20px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + } + + /* ===================================================================== + MAIN CONTENT -- split layout + ===================================================================== */ + + .pos-shell { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + } + + .pos-main { + display: flex; + flex: 1; + overflow: hidden; + gap: 0; + } + + /* ===================================================================== + LEFT PANEL -- Product Browser (60%) + ===================================================================== */ + + .panel-products { + display: flex; + flex-direction: column; + width: 60%; + min-width: 0; + border-right: 1px solid var(--color-border); + background-color: var(--color-bg-base); + overflow: hidden; + } + + [data-theme="modern"] .panel-products { + background-color: transparent; + } + + /* Search bar row */ + .search-row { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + background-color: var(--color-surface-1); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .search-wrap { + position: relative; + flex: 1; + } + + .search-icon { + position: absolute; + left: var(--space-4); + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + pointer-events: none; + } + + .search-input { + width: 100%; + height: 48px; + padding: 0 var(--space-4) 0 44px; + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-lg); + font-weight: var(--font-weight-regular); + color: var(--color-text-primary); + outline: none; + transition: var(--transition-fast); + } + + .search-input::placeholder { color: var(--color-text-muted); } + + .search-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + background-color: var(--color-bg-overlay); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-lg); + background-color: #fff; + } + + .btn-scan { + width: 48px; height: 48px; + display: flex; align-items: center; justify-content: center; + background-color: var(--btn-secondary-bg); + border: 1.5px solid var(--btn-secondary-border); + border-radius: var(--radius-md); + color: var(--color-primary); + cursor: pointer; + transition: var(--transition-fast); + flex-shrink: 0; + } + + .btn-scan:hover { + background-color: var(--btn-secondary-bg-hover); + box-shadow: var(--shadow-accent); + } + + /* Quick category buttons */ + .categories-row { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-3) var(--space-5); + border-bottom: 1px solid var(--color-border); + overflow-x: auto; flex-shrink: 0; scrollbar-width: none; + } + .categories-row::-webkit-scrollbar { display: none; } + + .category-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + margin-right: var(--space-1); + } + + .cat-btn { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-sm); + background-color: transparent; + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + cursor: pointer; white-space: nowrap; + transition: var(--transition-fast); + } + .cat-btn:hover { + border-color: var(--color-primary); color: var(--color-primary); + background-color: var(--color-primary-muted); + } + .cat-btn.active { + border-color: var(--color-primary); background-color: var(--color-primary); + color: var(--color-text-inverse); + } + [data-theme="industrial"] .cat-btn.active { color: #000; } + [data-theme="modern"] .cat-btn { border-radius: var(--radius-full); } + + /* Product grid */ + .product-grid-wrap { + flex: 1; overflow-y: auto; + padding: var(--space-4) var(--space-5); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + .product-grid-wrap::-webkit-scrollbar { width: 6px; } + .product-grid-wrap::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .product-grid-wrap::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .product-grid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); + } + @media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } + + /* Product card */ + .product-card { + position: relative; display: flex; flex-direction: column; + padding: var(--space-4); + background-color: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; transition: var(--transition-fast); overflow: hidden; + } + .product-card:hover { + border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); + } + .product-card:hover .product-card__add { opacity: 1; transform: scale(1); } + + [data-theme="industrial"] .product-card { background-color: var(--color-surface-1); border-color: #2a2a2a; } + [data-theme="industrial"] .product-card:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); } + [data-theme="modern"] .product-card { border-radius: var(--radius-lg); background-color: #fff; box-shadow: var(--shadow-sm); } + [data-theme="modern"] .product-card:hover { box-shadow: var(--shadow-lg); } + + .product-card__category { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); text-transform: uppercase; + color: var(--color-primary); margin-bottom: var(--space-1); + } + .product-card__name { + font-family: var(--font-heading); font-size: var(--text-body); + font-weight: var(--heading-weight-primary); line-height: var(--leading-h5); + color: var(--color-text-primary); margin-bottom: var(--space-1); + } + .product-card__oem { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-muted); margin-bottom: var(--space-3); + } + .product-card__footer { + display: flex; align-items: flex-end; justify-content: space-between; + margin-top: auto; gap: var(--space-2); + } + .product-card__price { + font-family: var(--font-mono); font-size: 1.1rem; + font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; + } + .product-card__stock { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: 2px; } + .product-card__stock.low { color: var(--color-warning); } + .product-card__stock.out { color: var(--color-error); } + + .product-card__add { + width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); + background-color: var(--color-primary); color: var(--color-text-inverse); + font-size: 1.2rem; font-weight: var(--font-weight-bold); + display: flex; align-items: center; justify-content: center; + cursor: pointer; opacity: 0.75; transform: scale(0.95); + transition: var(--transition-fast); flex-shrink: 0; + } + .product-card__add:hover { background-color: var(--color-primary-hover); opacity: 1; transform: scale(1.08) !important; } + [data-theme="industrial"] .product-card__add { color: #000; } + [data-theme="modern"] .product-card__add { border-radius: var(--radius-md); } + + @keyframes card-flash { + 0% { background-color: var(--color-primary-muted); } + 100% { background-color: transparent; } + } + .product-card.added { animation: card-flash 0.4s ease forwards; } + + /* ===================================================================== + RIGHT PANEL -- Cart / Ticket (40%) + ===================================================================== */ + + .panel-cart { + display: flex; flex-direction: column; width: 40%; min-width: 320px; + background-color: var(--color-surface-1); overflow: hidden; position: relative; + } + [data-theme="modern"] .panel-cart { background-color: #fff; box-shadow: -4px 0 20px rgba(26,26,46,0.06); } + [data-theme="industrial"] .panel-cart { background-color: #141414; border-left: 1px solid #2a2a2a; } + + /* Cart header */ + .cart-header { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; background-color: var(--color-surface-2); + } + [data-theme="industrial"] .cart-header { background-color: #1a1a1a; border-bottom-color: var(--color-primary-muted); } + + .cart-header__top { + display: flex; align-items: center; justify-content: space-between; + margin-bottom: var(--space-3); + } + + .cart-header__sale-id { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + display: flex; align-items: center; gap: var(--space-2); + } + .cart-header__sale-id::before { + content: ''; display: block; width: 4px; height: 20px; + background-color: var(--color-primary); border-radius: 2px; flex-shrink: 0; + } + + .cart-header__status { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); text-transform: uppercase; + color: var(--color-success); background-color: rgba(34,197,94,0.12); + padding: 3px var(--space-3); border-radius: var(--radius-full); + border: 1px solid rgba(34,197,94,0.25); + } + + /* Customer row */ + .customer-row { + display: flex; align-items: center; gap: var(--space-3); + } + .customer-icon { + width: 34px; height: 34px; border-radius: var(--radius-full); + background-color: var(--color-primary-muted); border: 1.5px solid var(--color-primary); + display: flex; align-items: center; justify-content: center; + color: var(--color-primary); flex-shrink: 0; + } + .customer-info { flex: 1; min-width: 0; } + .customer-info__name { + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .customer-info__label { font-size: var(--text-caption); color: var(--color-text-muted); } + .btn-change-customer { + padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); + border-radius: var(--radius-full); background: transparent; + font-family: var(--font-body); font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); color: var(--color-text-muted); + cursor: pointer; transition: var(--transition-fast); white-space: nowrap; + } + .btn-change-customer:hover { border-color: var(--color-primary); color: var(--color-primary); } + + /* Banner Cliente */ + .banner-cliente { + padding: var(--space-3) var(--space-4); + border-bottom: 2px solid var(--color-primary); + background: var(--color-primary-muted); + display: none; + } + .banner-cliente.visible { display: block; } + .banner-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } + .banner-avatar { + width: 36px; height: 36px; border-radius: var(--radius-full); + background: var(--color-primary); display: flex; align-items: center; justify-content: center; + font-family: var(--font-heading); font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); color: var(--color-text-inverse); flex-shrink: 0; + } + .banner-name-block { flex: 1; min-width: 0; } + .banner-name { + font-family: var(--font-heading); font-size: var(--text-body); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .banner-rfc { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-muted); letter-spacing: var(--tracking-wide); + } + .banner-close { + width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; + color: var(--color-text-muted); font-size: 14px; transition: var(--transition-fast); flex-shrink: 0; + } + .banner-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } + .banner-info { + display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); + } + .banner-info-item { + padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); + border: 1px solid var(--color-border); border-radius: var(--radius-md); + } + .banner-info-label { + font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold); + } + .banner-info-value { + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); margin-top: 1px; + } + .banner-info-value.credit-ok { color: var(--color-success); } + .banner-info-value.credit-low { color: var(--color-warning-dark); } + .banner-info-value.credit-none { color: var(--color-error); } + + /* Cart items list */ + .cart-items { + flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); + scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + .cart-items::-webkit-scrollbar { width: 4px; } + .cart-items::-webkit-scrollbar-track { background: transparent; } + .cart-items::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .cart-empty { + display: flex; flex-direction: column; align-items: center; justify-content: center; + height: 120px; color: var(--color-text-muted); font-size: var(--text-body-sm); gap: var(--space-2); opacity: 0.6; + } + + .cart-item { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + animation: item-slide-in 0.2s ease; + } + @keyframes item-slide-in { + from { opacity: 0; transform: translateX(10px); } + to { opacity: 1; transform: translateX(0); } + } + .cart-item:hover { background-color: var(--color-primary-muted); border-radius: var(--radius-sm); } + .cart-item:last-child { border-bottom: none; } + + .cart-item__qty-ctrl { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; } + .qty-btn { + width: 26px; height: 26px; border: 1px solid var(--color-border-strong); + border-radius: var(--radius-sm); background-color: var(--color-surface-3); + color: var(--color-text-primary); font-size: 0.9rem; font-weight: var(--font-weight-bold); + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: var(--transition-fast); line-height: 1; + } + .qty-btn:hover { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-text-inverse); } + [data-theme="industrial"] .qty-btn:hover { color: #000; } + .qty-display { + font-family: var(--font-mono); font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); color: var(--color-text-primary); min-width: 24px; text-align: center; + } + + .cart-item__info { flex: 1; min-width: 0; } + .cart-item__name { + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .cart-item__unit { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); } + .cart-item__total { + font-family: var(--font-mono); font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); color: var(--color-text-primary); text-align: right; min-width: 72px; + } + .cart-item__remove { + width: 24px; height: 24px; border: none; border-radius: var(--radius-sm); + background: transparent; color: var(--color-text-muted); font-size: 1rem; + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: var(--transition-fast); flex-shrink: 0; line-height: 1; + } + .cart-item__remove:hover { background-color: rgba(239,68,68,0.15); color: var(--color-error); } + + /* Columnas Costo/Margen (hidden by default, visible with permission) */ + .cart-item__cost, .cart-item__margin { + display: none; font-family: var(--font-mono); font-size: var(--text-caption); + text-align: right; min-width: 56px; flex-shrink: 0; + } + .cart-item__cost { color: var(--color-text-muted); } + .cart-item__margin { font-weight: var(--font-weight-bold); } + .cart-item__margin.margin-high { color: var(--color-success); } + .cart-item__margin.margin-mid { color: var(--color-warning); } + .cart-item__margin.margin-low { color: var(--color-error); } + + body.show-cost-columns .cart-item__cost, + body.show-cost-columns .cart-item__margin { display: block; } + + .margin-summary { + display: none; padding: var(--space-2) var(--space-5); + border-top: 1px dashed var(--color-border); + font-size: var(--text-caption); color: var(--color-text-muted); + } + body.show-cost-columns .margin-summary { display: flex; justify-content: space-between; } + .margin-summary__value { font-family: var(--font-mono); font-weight: var(--font-weight-bold); } + + .cost-toggle { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); + border-radius: var(--radius-sm); background: transparent; + color: var(--color-text-muted); font-size: 10px; font-family: var(--font-body); + letter-spacing: var(--tracking-wide); text-transform: uppercase; + cursor: pointer; transition: var(--transition-fast); + } + .cost-toggle:hover { border-color: var(--color-primary); color: var(--color-text-accent); } + .cost-toggle.active { background: var(--color-primary-muted); border-color: var(--color-primary); color: var(--color-text-accent); } + + /* Cart footer (totals + payment) */ + .cart-footer { + flex-shrink: 0; border-top: 1px solid var(--color-border); + background-color: var(--color-surface-2); + } + [data-theme="industrial"] .cart-footer { background-color: #1a1a1a; border-top-color: var(--color-primary-muted); } + + .totals-block { padding: var(--space-3) var(--space-5) var(--space-2); } + .totals-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) 0; } + .totals-row__label { font-size: var(--text-body-sm); color: var(--color-text-muted); } + .totals-row__value { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--color-text-secondary); } + + .totals-row--total { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); } + .totals-row--total .totals-row__label { + font-family: var(--font-heading); font-size: var(--text-body-lg); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + letter-spacing: var(--tracking-wide); text-transform: uppercase; + } + .totals-row--total .totals-row__value { + font-family: var(--font-mono); font-size: 1.5rem; + font-weight: var(--font-weight-bold); color: var(--color-primary); + } + + /* COBRAR Button */ + .btn-cobrar { + display: flex; align-items: center; justify-content: center; gap: var(--space-3); + width: calc(100% - var(--space-10)); margin: var(--space-3) var(--space-5); + height: 56px; background-color: var(--btn-primary-bg); border: none; + border-radius: var(--radius-md); + font-family: var(--font-heading); font-size: 1.2rem; + font-weight: var(--heading-weight-primary); + letter-spacing: var(--tracking-widest); text-transform: uppercase; + color: var(--btn-primary-text); cursor: pointer; + transition: var(--transition-fast); box-shadow: var(--shadow-md); + } + .btn-cobrar:hover { background-color: var(--btn-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); } + .btn-cobrar:active { background-color: var(--btn-primary-bg-active); transform: translateY(0); } + .btn-cobrar:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } + [data-theme="industrial"] .btn-cobrar { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } + [data-theme="modern"] .btn-cobrar { border-radius: var(--radius-lg); } + + /* Secondary actions row */ + .secondary-actions { + display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); + } + .btn-secondary-action { + flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1); + height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); + background: transparent; font-family: var(--font-body); font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); + text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; + transition: var(--transition-fast); + } + .btn-secondary-action:hover { border-color: var(--color-border-strong); color: var(--color-text-secondary); background-color: var(--color-surface-3); } + .btn-secondary-action.danger:hover { border-color: var(--color-error); color: var(--color-error); background-color: rgba(239,68,68,0.08); } + [data-theme="modern"] .btn-secondary-action { border-radius: var(--radius-md); } + + /* ===================================================================== + F-KEYS FOOTER BAR + ===================================================================== */ + .fkeys-footer { + position: fixed; bottom: 0; left: 0; right: 0; + background: var(--color-surface-2); border-top: 2px solid var(--color-primary); + padding: var(--space-2) var(--space-4); + display: flex; align-items: center; justify-content: center; gap: var(--space-1); + z-index: var(--z-sticky); box-shadow: var(--shadow-lg); + } + .fkey { + display: flex; align-items: center; gap: var(--space-1); + padding: var(--space-2) var(--space-3); background: transparent; + border: 1px solid var(--color-border); border-radius: var(--radius-md); + cursor: pointer; transition: var(--transition-fast); white-space: nowrap; flex-shrink: 0; + } + .fkey:hover { background: var(--color-primary-muted); border-color: var(--color-primary); } + .fkey:active { background: var(--color-primary); transform: scale(0.96); } + .fkey:active .fkey-label { color: var(--color-text-inverse); } + .fkey:active .fkey-key { background: rgba(0,0,0,0.2); color: var(--color-text-inverse); border-color: transparent; } + .fkey-key { + display: inline-flex; align-items: center; justify-content: center; + min-width: 28px; height: 22px; padding: 0 var(--space-2); + background: var(--color-bg-base); border: 1px solid var(--color-border-strong); + border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; + font-weight: var(--font-weight-bold); color: var(--color-text-accent); line-height: 1; + } + .fkey-label { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + } + .fkey-sep { width: 1px; height: 24px; background: var(--color-border); margin: 0 var(--space-1); flex-shrink: 0; } + .fkey.highlight { + background: var(--color-primary-muted); border-color: var(--color-primary); + } + .fkey.highlight .fkey-key { + background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); + } + .fkey.highlight .fkey-label { color: var(--color-text-accent); font-weight: var(--font-weight-bold); } + + /* ===================================================================== + MODAL DE PAGO + ===================================================================== */ + .modal-overlay { + position: fixed; inset: 0; + background: var(--overlay-backdrop); + display: flex; align-items: center; justify-content: center; + z-index: var(--z-modal); + opacity: 0; pointer-events: none; + transition: var(--transition-normal); + } + .modal-overlay.open { opacity: 1; pointer-events: auto; } + + .modal-pago { + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); + width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; + transform: translateY(20px); transition: var(--transition-normal); + } + .modal-overlay.open .modal-pago { transform: translateY(0); } + + .modal-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); + } + .modal-header h3 { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + } + .modal-close { + width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; + color: var(--color-text-muted); font-size: 18px; transition: var(--transition-fast); + } + .modal-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } + + .total-banner { + background: var(--color-primary-muted); border-bottom: 2px solid var(--color-primary); + padding: var(--space-4) var(--space-6); + display: flex; align-items: center; justify-content: space-between; + } + .total-label { + font-size: var(--text-body); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); + } + .total-amount { + font-family: var(--font-mono); font-size: var(--text-h3); + font-weight: var(--font-weight-bold); color: var(--color-text-accent); + } + + .items-summary { + padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); + font-size: var(--text-body-sm); color: var(--color-text-muted); display: flex; gap: var(--space-4); + } + + .pago-tabs { + display: flex; border-bottom: 2px solid var(--color-border); padding: 0 var(--space-6); + } + .pago-tab { + padding: var(--space-3) var(--space-5); font-family: var(--font-body); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + background: transparent; border: none; color: var(--color-text-muted); + cursor: pointer; border-bottom: 2px solid transparent; + margin-bottom: -2px; transition: var(--transition-fast); + display: flex; align-items: center; gap: var(--space-2); + } + .pago-tab:hover { color: var(--color-text-primary); } + .pago-tab.active { color: var(--color-text-accent); border-bottom-color: var(--color-primary); } + + .tab-content { padding: var(--space-6); display: none; } + .tab-content.active { display: block; } + + .form-group { margin-bottom: var(--space-4); } + .form-label { + display: block; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); margin-bottom: var(--space-2); + text-transform: uppercase; letter-spacing: var(--tracking-wide); + } + .form-input { + width: 100%; padding: var(--space-3) var(--space-4); + font-family: var(--font-body); font-size: var(--text-body); + background: var(--color-bg-base); color: var(--color-text-primary); + border: 1px solid var(--color-border); border-radius: var(--radius-md); + transition: var(--transition-fast); + } + .form-input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } + .form-input-lg { + font-family: var(--font-mono); font-size: var(--text-h3); + font-weight: var(--font-weight-bold); text-align: right; + padding: var(--space-4) var(--space-5); + } + + .cambio-display { + background: var(--color-surface-2); border: 1px solid var(--color-border); + border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); + display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); + } + .cambio-label { font-size: var(--text-body-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); } + .cambio-amount { font-family: var(--font-mono); font-size: var(--text-h4); font-weight: var(--font-weight-bold); } + .cambio-amount.positive { color: var(--color-success); } + .cambio-amount.negative { color: var(--color-error); } + + .quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-3); } + .quick-btn { + padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); background: var(--color-surface-2); + color: var(--color-text-primary); border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); text-align: center; + } + .quick-btn:hover { background: var(--color-primary-muted); border-color: var(--color-primary); } + + .split-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; margin-bottom: var(--space-3); } + .split-method { + padding: var(--space-2) var(--space-3); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); background: var(--color-surface-2); + color: var(--color-text-secondary); border-radius: var(--radius-md); + text-align: center; border: 1px solid var(--color-border); + } + .split-remaining { + background: var(--color-surface-2); border-radius: var(--radius-md); + padding: var(--space-3) var(--space-4); + display: flex; align-items: center; justify-content: space-between; + font-size: var(--text-body-sm); margin-top: var(--space-3); + } + .split-remaining .amount { font-family: var(--font-mono); font-weight: var(--font-weight-bold); color: var(--color-text-accent); } + + .cfdi-check { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); + background: var(--color-surface-1); + } + .cfdi-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); cursor: pointer; } + .cfdi-check label { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; } + .cfdi-check .cfdi-hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-left: auto; } + + .modal-footer { + padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); + display: flex; gap: var(--space-3); justify-content: flex-end; + } + + .btn { + display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); + padding: var(--space-3) var(--space-6); font-family: var(--font-body); font-size: var(--text-body); + font-weight: var(--font-weight-semibold); line-height: 1; + border: 2px solid transparent; border-radius: var(--radius-md); + cursor: pointer; transition: var(--transition-fast); white-space: nowrap; + } + .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } + .btn:active { transform: scale(0.97); } + .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } + .btn-primary:hover { background: var(--btn-primary-bg-hover); } + .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } + .btn-ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } + .btn-ghost:hover { background: var(--color-surface-2); } + .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); } + + .ref-field { display: flex; gap: var(--space-3); align-items: end; } + .ref-field .form-group { flex: 1; } + .form-hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); } + .status-indicator { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + } + .status-indicator.pending { background: var(--color-warning-light); color: var(--color-warning-dark); } + .status-indicator.confirmed { background: var(--color-success-light); color: var(--color-success-dark); } + + .terminal-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } + .terminal-card { + padding: var(--space-4); background: var(--color-surface-2); border: 2px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); text-align: center; + } + .terminal-card:hover { border-color: var(--color-primary); } + .terminal-card.selected { border-color: var(--color-primary); background: var(--color-primary-muted); } + .terminal-card .terminal-name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } + .terminal-card .terminal-type { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); } + + /* ===================================================================== + MODAL CONFIRMACION + ===================================================================== */ + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + @keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } + @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } + @keyframes scaleOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } } + + .confirm-overlay { + position: fixed; inset: 0; background: var(--overlay-backdrop); + z-index: calc(var(--z-modal) + 1); display: none; animation: fadeIn 0.2s ease-out forwards; + } + .confirm-overlay.active { display: block; } + .confirm-overlay.closing { animation: fadeOut 0.2s ease-in forwards; } + + .confirm-dialog { + position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); + z-index: calc(var(--z-modal) + 2); + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); + width: 90%; max-width: 420px; padding: var(--space-6); text-align: center; + display: none; animation: scaleIn 0.25s ease-out forwards; + } + .confirm-dialog.active { display: block; } + .confirm-dialog.closing { animation: scaleOut 0.2s ease-in forwards; } + + .modal__icon { + width: 56px; height: 56px; border-radius: var(--radius-full); + display: flex; align-items: center; justify-content: center; + font-size: 26px; margin: 0 auto var(--space-4); + } + .modal__icon--warning { background: var(--color-warning-light); } + .modal__title { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); margin-bottom: var(--space-2); + } + .modal__desc { + font-size: var(--text-body-sm); color: var(--color-text-muted); + line-height: 1.6; margin-bottom: var(--space-6); padding: 0 var(--space-2); + } + .modal__actions { display: flex; gap: var(--space-3); justify-content: center; } + .modal__btn { + flex: 1; max-width: 180px; padding: var(--space-3) var(--space-4); + font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 600; + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); + border: 1px solid transparent; + } + .modal__btn--secondary { + background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); + } + .modal__btn--secondary:hover { background: var(--btn-secondary-bg-hover); } + .modal__btn--danger { + background: var(--btn-danger-bg, var(--color-error)); color: var(--btn-danger-text, #fff); + border-color: var(--btn-danger-bg, var(--color-error)); + } + .modal__btn--danger:hover { opacity: 0.9; } + + /* ===================================================================== + TICKET TERMICO (hidden, for print) + ===================================================================== */ + .ticket-print-area { display: none; } + + .ticket { + background: #ffffff; color: #000000; + font-family: 'Courier New', 'Consolas', monospace; + font-size: 11px; line-height: 1.4; padding: 12px; text-align: left; + border: 1px dashed #ccc; + } + .ticket-80 { width: 302px; } + .ticket .store-name { font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 2px; } + .ticket .store-tagline { font-size: 9px; text-align: center; color: #555; margin-bottom: 4px; } + .ticket .store-info { font-size: 9px; text-align: center; color: #333; margin-bottom: 6px; line-height: 1.3; } + .ticket .divider { border: none; border-top: 1px dashed #999; margin: 6px 0; } + .ticket .divider-double { border: none; border-top: 2px solid #333; margin: 6px 0; } + .ticket .ticket-row { display: flex; justify-content: space-between; } + .ticket .folio-line { font-size: 10px; font-weight: bold; display: flex; justify-content: space-between; margin-bottom: 4px; } + .ticket .total-section { margin-top: 4px; } + .ticket .total-line { display: flex; justify-content: space-between; font-size: 11px; } + .ticket .total-line.grand { font-size: 14px; font-weight: bold; margin-top: 2px; padding-top: 2px; border-top: 1px solid #333; } + .ticket .payment-section { margin-top: 4px; font-size: 10px; } + .ticket .footer-section { text-align: center; margin-top: 8px; font-size: 9px; color: #555; } + .ticket .footer-section .thanks { font-size: 11px; font-weight: bold; color: #000; margin-bottom: 2px; } + .ticket-80 .item-line-wide { + display: grid; grid-template-columns: auto 1fr auto auto; + gap: 8px; align-items: baseline; font-size: 10px; margin-bottom: 3px; + } + .ticket-80 .item-line-wide .qty { font-weight: bold; min-width: 24px; text-align: right; } + .ticket-80 .item-line-wide .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .ticket-80 .item-line-wide .price { text-align: right; min-width: 55px; } + .ticket-80 .item-line-wide .subtotal { text-align: right; font-weight: bold; min-width: 60px; } + + @media print { + body * { display: none !important; } + .ticket-print-area, .ticket-print-area * { display: block !important; } + .ticket-print-area { position: fixed; top: 0; left: 0; } + .ticket { border: none; box-shadow: none; padding: 4px; } + .ticket .item-line-wide { display: grid !important; } + .ticket .ticket-row, .ticket .folio-line, .ticket .total-line { display: flex !important; } + } + + /* ===================================================================== + TOAST NOTIFICATION + ===================================================================== */ + .toast-container { + position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); + z-index: var(--z-toast); display: flex; flex-direction: column; + gap: var(--space-2); pointer-events: none; + } + .toast { + padding: var(--space-3) var(--space-5); + background-color: var(--color-surface-3); border: 1px solid var(--color-border); + border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); box-shadow: var(--shadow-lg); white-space: nowrap; + animation: toast-in 0.25s ease, toast-out 0.3s ease 1.7s forwards; + } + @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } + @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + @media (max-width: 900px) { + .pos-main { flex-direction: column; } + .panel-products, .panel-cart { width: 100%; min-width: 0; } + .panel-products { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 55%; } + .panel-cart { max-height: 45%; } + .product-grid { grid-template-columns: repeat(2, 1fr); } + .status-bar__center { display: none; } + .fkeys-footer { flex-wrap: wrap; } + } + + @media (max-width: 768px) { + .fkeys-footer { flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2); } + .fkey { padding: var(--space-1) var(--space-2); } + .fkey-label { font-size: 10px; } + .fkey-key { min-width: 24px; height: 20px; font-size: 10px; } + .fkey-sep { display: none; } + } + + .sr-only { + position: absolute; width: 1px; height: 1px; padding: 0; + margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; + } + + /* Add padding at bottom so content isn't hidden by fixed fkeys bar */ + body { padding-bottom: 50px; } diff --git a/pos/static/css/pos.min.css b/pos/static/css/pos.min.css new file mode 100644 index 0000000..c038aef --- /dev/null +++ b/pos/static/css/pos.min.css @@ -0,0 +1,985 @@ +/* Extracted from pos.html */ + +/* ===================================================================== + BASE RESET & LAYOUT SHELL + ===================================================================== */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + overflow: hidden; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + font-weight: var(--font-weight-regular); + background-color: var(--color-bg-base); + color: var(--color-text-primary); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + display: flex; + flex-direction: column; + } + + /* Dot-grid for modern theme */ + [data-theme="modern"] body, + [data-theme="modern"].pos-shell { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ===================================================================== + STATUS BAR (very top) + ===================================================================== */ + + .status-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 36px; + padding: 0 var(--space-5); + background-color: var(--color-surface-3); + border-bottom: 1px solid var(--color-border); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + flex-shrink: 0; + z-index: var(--z-sticky); + } + + [data-theme="industrial"] .status-bar { + background-color: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .status-bar__store { + display: flex; + align-items: center; + gap: var(--space-3); + color: var(--color-text-accent); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + letter-spacing: var(--tracking-widest); + } + + .status-bar__store-dot { + width: 7px; + height: 7px; + background-color: var(--color-success); + border-radius: var(--radius-full); + box-shadow: 0 0 6px var(--color-success); + animation: pulse-dot 2.5s ease-in-out infinite; + } + + @keyframes pulse-dot { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.4; } + } + + .status-bar__center { + display: flex; + align-items: center; + gap: var(--space-6); + } + + .status-bar__right { + display: flex; + align-items: center; + gap: var(--space-4); + } + + .status-bar__user { + display: flex; + align-items: center; + gap: var(--space-2); + color: var(--color-text-secondary); + } + + .status-bar__user-avatar { + width: 20px; + height: 20px; + border-radius: var(--radius-full); + background-color: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + } + + /* ===================================================================== + MAIN CONTENT -- split layout + ===================================================================== */ + + .pos-shell { + display: flex; + flex-direction: column; + flex: 1; + overflow: hidden; + } + + .pos-main { + display: flex; + flex: 1; + overflow: hidden; + gap: 0; + } + + /* ===================================================================== + LEFT PANEL -- Product Browser (60%) + ===================================================================== */ + + .panel-products { + display: flex; + flex-direction: column; + width: 60%; + min-width: 0; + border-right: 1px solid var(--color-border); + background-color: var(--color-bg-base); + overflow: hidden; + } + + [data-theme="modern"] .panel-products { + background-color: transparent; + } + + /* Search bar row */ + .search-row { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + background-color: var(--color-surface-1); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .search-wrap { + position: relative; + flex: 1; + } + + .search-icon { + position: absolute; + left: var(--space-4); + top: 50%; + transform: translateY(-50%); + color: var(--color-text-muted); + pointer-events: none; + } + + .search-input { + width: 100%; + height: 48px; + padding: 0 var(--space-4) 0 44px; + background-color: var(--color-bg-overlay); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-lg); + font-weight: var(--font-weight-regular); + color: var(--color-text-primary); + outline: none; + transition: var(--transition-fast); + } + + .search-input::placeholder { color: var(--color-text-muted); } + + .search-input:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + background-color: var(--color-bg-overlay); + } + + [data-theme="modern"] .search-input { + border-radius: var(--radius-lg); + background-color: #fff; + } + + .btn-scan { + width: 48px; height: 48px; + display: flex; align-items: center; justify-content: center; + background-color: var(--btn-secondary-bg); + border: 1.5px solid var(--btn-secondary-border); + border-radius: var(--radius-md); + color: var(--color-primary); + cursor: pointer; + transition: var(--transition-fast); + flex-shrink: 0; + } + + .btn-scan:hover { + background-color: var(--btn-secondary-bg-hover); + box-shadow: var(--shadow-accent); + } + + /* Quick category buttons */ + .categories-row { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-3) var(--space-5); + border-bottom: 1px solid var(--color-border); + overflow-x: auto; flex-shrink: 0; scrollbar-width: none; + } + .categories-row::-webkit-scrollbar { display: none; } + + .category-label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + color: var(--color-text-muted); + white-space: nowrap; + margin-right: var(--space-1); + } + + .cat-btn { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1.5px solid var(--color-border); + border-radius: var(--radius-sm); + background-color: transparent; + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + cursor: pointer; white-space: nowrap; + transition: var(--transition-fast); + } + .cat-btn:hover { + border-color: var(--color-primary); color: var(--color-primary); + background-color: var(--color-primary-muted); + } + .cat-btn.active { + border-color: var(--color-primary); background-color: var(--color-primary); + color: var(--color-text-inverse); + } + [data-theme="industrial"] .cat-btn.active { color: #000; } + [data-theme="modern"] .cat-btn { border-radius: var(--radius-full); } + + /* Product grid */ + .product-grid-wrap { + flex: 1; overflow-y: auto; + padding: var(--space-4) var(--space-5); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + .product-grid-wrap::-webkit-scrollbar { width: 6px; } + .product-grid-wrap::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .product-grid-wrap::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .product-grid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); + } + @media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } + + /* Product card */ + .product-card { + position: relative; display: flex; flex-direction: column; + padding: var(--space-4); + background-color: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + cursor: pointer; transition: var(--transition-fast); overflow: hidden; + } + .product-card:hover { + border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); + } + .product-card:hover .product-card__add { opacity: 1; transform: scale(1); } + + [data-theme="industrial"] .product-card { background-color: var(--color-surface-1); border-color: #2a2a2a; } + [data-theme="industrial"] .product-card:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); } + [data-theme="modern"] .product-card { border-radius: var(--radius-lg); background-color: #fff; box-shadow: var(--shadow-sm); } + [data-theme="modern"] .product-card:hover { box-shadow: var(--shadow-lg); } + + .product-card__category { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-widest); text-transform: uppercase; + color: var(--color-primary); margin-bottom: var(--space-1); + } + .product-card__name { + font-family: var(--font-heading); font-size: var(--text-body); + font-weight: var(--heading-weight-primary); line-height: var(--leading-h5); + color: var(--color-text-primary); margin-bottom: var(--space-1); + } + .product-card__oem { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-muted); margin-bottom: var(--space-3); + } + .product-card__footer { + display: flex; align-items: flex-end; justify-content: space-between; + margin-top: auto; gap: var(--space-2); + } + .product-card__price { + font-family: var(--font-mono); font-size: 1.1rem; + font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; + } + .product-card__stock { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: 2px; } + .product-card__stock.low { color: var(--color-warning); } + .product-card__stock.out { color: var(--color-error); } + + .product-card__add { + width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); + background-color: var(--color-primary); color: var(--color-text-inverse); + font-size: 1.2rem; font-weight: var(--font-weight-bold); + display: flex; align-items: center; justify-content: center; + cursor: pointer; opacity: 0.75; transform: scale(0.95); + transition: var(--transition-fast); flex-shrink: 0; + } + .product-card__add:hover { background-color: var(--color-primary-hover); opacity: 1; transform: scale(1.08) !important; } + [data-theme="industrial"] .product-card__add { color: #000; } + [data-theme="modern"] .product-card__add { border-radius: var(--radius-md); } + + @keyframes card-flash { + 0% { background-color: var(--color-primary-muted); } + 100% { background-color: transparent; } + } + .product-card.added { animation: card-flash 0.4s ease forwards; } + + /* ===================================================================== + RIGHT PANEL -- Cart / Ticket (40%) + ===================================================================== */ + + .panel-cart { + display: flex; flex-direction: column; width: 40%; min-width: 320px; + background-color: var(--color-surface-1); overflow: hidden; position: relative; + } + [data-theme="modern"] .panel-cart { background-color: #fff; box-shadow: -4px 0 20px rgba(26,26,46,0.06); } + [data-theme="industrial"] .panel-cart { background-color: #141414; border-left: 1px solid #2a2a2a; } + + /* Cart header */ + .cart-header { + padding: var(--space-4) var(--space-5); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; background-color: var(--color-surface-2); + } + [data-theme="industrial"] .cart-header { background-color: #1a1a1a; border-bottom-color: var(--color-primary-muted); } + + .cart-header__top { + display: flex; align-items: center; justify-content: space-between; + margin-bottom: var(--space-3); + } + + .cart-header__sale-id { + font-family: var(--font-heading); font-size: var(--text-h5); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + display: flex; align-items: center; gap: var(--space-2); + } + .cart-header__sale-id::before { + content: ''; display: block; width: 4px; height: 20px; + background-color: var(--color-primary); border-radius: 2px; flex-shrink: 0; + } + + .cart-header__status { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wider); text-transform: uppercase; + color: var(--color-success); background-color: rgba(34,197,94,0.12); + padding: 3px var(--space-3); border-radius: var(--radius-full); + border: 1px solid rgba(34,197,94,0.25); + } + + /* Customer row */ + .customer-row { + display: flex; align-items: center; gap: var(--space-3); + } + .customer-icon { + width: 34px; height: 34px; border-radius: var(--radius-full); + background-color: var(--color-primary-muted); border: 1.5px solid var(--color-primary); + display: flex; align-items: center; justify-content: center; + color: var(--color-primary); flex-shrink: 0; + } + .customer-info { flex: 1; min-width: 0; } + .customer-info__name { + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .customer-info__label { font-size: var(--text-caption); color: var(--color-text-muted); } + .btn-change-customer { + padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); + border-radius: var(--radius-full); background: transparent; + font-family: var(--font-body); font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); color: var(--color-text-muted); + cursor: pointer; transition: var(--transition-fast); white-space: nowrap; + } + .btn-change-customer:hover { border-color: var(--color-primary); color: var(--color-primary); } + + /* Banner Cliente */ + .banner-cliente { + padding: var(--space-3) var(--space-4); + border-bottom: 2px solid var(--color-primary); + background: var(--color-primary-muted); + display: none; + } + .banner-cliente.visible { display: block; } + .banner-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } + .banner-avatar { + width: 36px; height: 36px; border-radius: var(--radius-full); + background: var(--color-primary); display: flex; align-items: center; justify-content: center; + font-family: var(--font-heading); font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); color: var(--color-text-inverse); flex-shrink: 0; + } + .banner-name-block { flex: 1; min-width: 0; } + .banner-name { + font-family: var(--font-heading); font-size: var(--text-body); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .banner-rfc { + font-family: var(--font-mono); font-size: var(--text-caption); + color: var(--color-text-muted); letter-spacing: var(--tracking-wide); + } + .banner-close { + width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; + color: var(--color-text-muted); font-size: 14px; transition: var(--transition-fast); flex-shrink: 0; + } + .banner-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } + .banner-info { + display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); + } + .banner-info-item { + padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); + border: 1px solid var(--color-border); border-radius: var(--radius-md); + } + .banner-info-label { + font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; + letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold); + } + .banner-info-value { + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); margin-top: 1px; + } + .banner-info-value.credit-ok { color: var(--color-success); } + .banner-info-value.credit-low { color: var(--color-warning-dark); } + .banner-info-value.credit-none { color: var(--color-error); } + + /* Cart items list */ + .cart-items { + flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4); + scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + .cart-items::-webkit-scrollbar { width: 4px; } + .cart-items::-webkit-scrollbar-track { background: transparent; } + .cart-items::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + .cart-empty { + display: flex; flex-direction: column; align-items: center; justify-content: center; + height: 120px; color: var(--color-text-muted); font-size: var(--text-body-sm); gap: var(--space-2); opacity: 0.6; + } + + .cart-item { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); + transition: var(--transition-fast); + animation: item-slide-in 0.2s ease; + } + @keyframes item-slide-in { + from { opacity: 0; transform: translateX(10px); } + to { opacity: 1; transform: translateX(0); } + } + .cart-item:hover { background-color: var(--color-primary-muted); border-radius: var(--radius-sm); } + .cart-item:last-child { border-bottom: none; } + + .cart-item__qty-ctrl { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; } + .qty-btn { + width: 26px; height: 26px; border: 1px solid var(--color-border-strong); + border-radius: var(--radius-sm); background-color: var(--color-surface-3); + color: var(--color-text-primary); font-size: 0.9rem; font-weight: var(--font-weight-bold); + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: var(--transition-fast); line-height: 1; + } + .qty-btn:hover { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-text-inverse); } + [data-theme="industrial"] .qty-btn:hover { color: #000; } + .qty-display { + font-family: var(--font-mono); font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); color: var(--color-text-primary); min-width: 24px; text-align: center; + } + + .cart-item__info { flex: 1; min-width: 0; } + .cart-item__name { + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + } + .cart-item__unit { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); } + .cart-item__total { + font-family: var(--font-mono); font-size: var(--text-body-sm); + font-weight: var(--font-weight-bold); color: var(--color-text-primary); text-align: right; min-width: 72px; + } + .cart-item__remove { + width: 24px; height: 24px; border: none; border-radius: var(--radius-sm); + background: transparent; color: var(--color-text-muted); font-size: 1rem; + cursor: pointer; display: flex; align-items: center; justify-content: center; + transition: var(--transition-fast); flex-shrink: 0; line-height: 1; + } + .cart-item__remove:hover { background-color: rgba(239,68,68,0.15); color: var(--color-error); } + + /* Columnas Costo/Margen (hidden by default, visible with permission) */ + .cart-item__cost, .cart-item__margin { + display: none; font-family: var(--font-mono); font-size: var(--text-caption); + text-align: right; min-width: 56px; flex-shrink: 0; + } + .cart-item__cost { color: var(--color-text-muted); } + .cart-item__margin { font-weight: var(--font-weight-bold); } + .cart-item__margin.margin-high { color: var(--color-success); } + .cart-item__margin.margin-mid { color: var(--color-warning); } + .cart-item__margin.margin-low { color: var(--color-error); } + + body.show-cost-columns .cart-item__cost, + body.show-cost-columns .cart-item__margin { display: block; } + + .margin-summary { + display: none; padding: var(--space-2) var(--space-5); + border-top: 1px dashed var(--color-border); + font-size: var(--text-caption); color: var(--color-text-muted); + } + body.show-cost-columns .margin-summary { display: flex; justify-content: space-between; } + .margin-summary__value { font-family: var(--font-mono); font-weight: var(--font-weight-bold); } + + .cost-toggle { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); + border-radius: var(--radius-sm); background: transparent; + color: var(--color-text-muted); font-size: 10px; font-family: var(--font-body); + letter-spacing: var(--tracking-wide); text-transform: uppercase; + cursor: pointer; transition: var(--transition-fast); + } + .cost-toggle:hover { border-color: var(--color-primary); color: var(--color-text-accent); } + .cost-toggle.active { background: var(--color-primary-muted); border-color: var(--color-primary); color: var(--color-text-accent); } + + /* Cart footer (totals + payment) */ + .cart-footer { + flex-shrink: 0; border-top: 1px solid var(--color-border); + background-color: var(--color-surface-2); + } + [data-theme="industrial"] .cart-footer { background-color: #1a1a1a; border-top-color: var(--color-primary-muted); } + + .totals-block { padding: var(--space-3) var(--space-5) var(--space-2); } + .totals-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) 0; } + .totals-row__label { font-size: var(--text-body-sm); color: var(--color-text-muted); } + .totals-row__value { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--color-text-secondary); } + + .totals-row--total { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); } + .totals-row--total .totals-row__label { + font-family: var(--font-heading); font-size: var(--text-body-lg); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + letter-spacing: var(--tracking-wide); text-transform: uppercase; + } + .totals-row--total .totals-row__value { + font-family: var(--font-mono); font-size: 1.5rem; + font-weight: var(--font-weight-bold); color: var(--color-primary); + } + + /* COBRAR Button */ + .btn-cobrar { + display: flex; align-items: center; justify-content: center; gap: var(--space-3); + width: calc(100% - var(--space-10)); margin: var(--space-3) var(--space-5); + height: 56px; background-color: var(--btn-primary-bg); border: none; + border-radius: var(--radius-md); + font-family: var(--font-heading); font-size: 1.2rem; + font-weight: var(--heading-weight-primary); + letter-spacing: var(--tracking-widest); text-transform: uppercase; + color: var(--btn-primary-text); cursor: pointer; + transition: var(--transition-fast); box-shadow: var(--shadow-md); + } + .btn-cobrar:hover { background-color: var(--btn-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); } + .btn-cobrar:active { background-color: var(--btn-primary-bg-active); transform: translateY(0); } + .btn-cobrar:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } + [data-theme="industrial"] .btn-cobrar { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } + [data-theme="modern"] .btn-cobrar { border-radius: var(--radius-lg); } + + /* Secondary actions row */ + .secondary-actions { + display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); + } + .btn-secondary-action { + flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1); + height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); + background: transparent; font-family: var(--font-body); font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide); + text-transform: uppercase; color: var(--color-text-muted); cursor: pointer; + transition: var(--transition-fast); + } + .btn-secondary-action:hover { border-color: var(--color-border-strong); color: var(--color-text-secondary); background-color: var(--color-surface-3); } + .btn-secondary-action.danger:hover { border-color: var(--color-error); color: var(--color-error); background-color: rgba(239,68,68,0.08); } + [data-theme="modern"] .btn-secondary-action { border-radius: var(--radius-md); } + + /* ===================================================================== + F-KEYS FOOTER BAR + ===================================================================== */ + .fkeys-footer { + position: fixed; bottom: 0; left: 0; right: 0; + background: var(--color-surface-2); border-top: 2px solid var(--color-primary); + padding: var(--space-2) var(--space-4); + display: flex; align-items: center; justify-content: center; gap: var(--space-1); + z-index: var(--z-sticky); box-shadow: var(--shadow-lg); + } + .fkey { + display: flex; align-items: center; gap: var(--space-1); + padding: var(--space-2) var(--space-3); background: transparent; + border: 1px solid var(--color-border); border-radius: var(--radius-md); + cursor: pointer; transition: var(--transition-fast); white-space: nowrap; flex-shrink: 0; + } + .fkey:hover { background: var(--color-primary-muted); border-color: var(--color-primary); } + .fkey:active { background: var(--color-primary); transform: scale(0.96); } + .fkey:active .fkey-label { color: var(--color-text-inverse); } + .fkey:active .fkey-key { background: rgba(0,0,0,0.2); color: var(--color-text-inverse); border-color: transparent; } + .fkey-key { + display: inline-flex; align-items: center; justify-content: center; + min-width: 28px; height: 22px; padding: 0 var(--space-2); + background: var(--color-bg-base); border: 1px solid var(--color-border-strong); + border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; + font-weight: var(--font-weight-bold); color: var(--color-text-accent); line-height: 1; + } + .fkey-label { + font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + } + .fkey-sep { width: 1px; height: 24px; background: var(--color-border); margin: 0 var(--space-1); flex-shrink: 0; } + .fkey.highlight { + background: var(--color-primary-muted); border-color: var(--color-primary); + } + .fkey.highlight .fkey-key { + background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); + } + .fkey.highlight .fkey-label { color: var(--color-text-accent); font-weight: var(--font-weight-bold); } + + /* ===================================================================== + MODAL DE PAGO + ===================================================================== */ + .modal-overlay { + position: fixed; inset: 0; + background: var(--overlay-backdrop); + display: flex; align-items: center; justify-content: center; + z-index: var(--z-modal); + opacity: 0; pointer-events: none; + transition: var(--transition-normal); + } + .modal-overlay.open { opacity: 1; pointer-events: auto; } + + .modal-pago { + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); + width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; + transform: translateY(20px); transition: var(--transition-normal); + } + .modal-overlay.open .modal-pago { transform: translateY(0); } + + .modal-header { + display: flex; align-items: center; justify-content: space-between; + padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); + } + .modal-header h3 { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); + } + .modal-close { + width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; + background: transparent; border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; + color: var(--color-text-muted); font-size: 18px; transition: var(--transition-fast); + } + .modal-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } + + .total-banner { + background: var(--color-primary-muted); border-bottom: 2px solid var(--color-primary); + padding: var(--space-4) var(--space-6); + display: flex; align-items: center; justify-content: space-between; + } + .total-label { + font-size: var(--text-body); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); + } + .total-amount { + font-family: var(--font-mono); font-size: var(--text-h3); + font-weight: var(--font-weight-bold); color: var(--color-text-accent); + } + + .items-summary { + padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); + font-size: var(--text-body-sm); color: var(--color-text-muted); display: flex; gap: var(--space-4); + } + + .pago-tabs { + display: flex; border-bottom: 2px solid var(--color-border); padding: 0 var(--space-6); + } + .pago-tab { + padding: var(--space-3) var(--space-5); font-family: var(--font-body); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + background: transparent; border: none; color: var(--color-text-muted); + cursor: pointer; border-bottom: 2px solid transparent; + margin-bottom: -2px; transition: var(--transition-fast); + display: flex; align-items: center; gap: var(--space-2); + } + .pago-tab:hover { color: var(--color-text-primary); } + .pago-tab.active { color: var(--color-text-accent); border-bottom-color: var(--color-primary); } + + .tab-content { padding: var(--space-6); display: none; } + .tab-content.active { display: block; } + + .form-group { margin-bottom: var(--space-4); } + .form-label { + display: block; font-size: var(--text-caption); font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); margin-bottom: var(--space-2); + text-transform: uppercase; letter-spacing: var(--tracking-wide); + } + .form-input { + width: 100%; padding: var(--space-3) var(--space-4); + font-family: var(--font-body); font-size: var(--text-body); + background: var(--color-bg-base); color: var(--color-text-primary); + border: 1px solid var(--color-border); border-radius: var(--radius-md); + transition: var(--transition-fast); + } + .form-input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } + .form-input-lg { + font-family: var(--font-mono); font-size: var(--text-h3); + font-weight: var(--font-weight-bold); text-align: right; + padding: var(--space-4) var(--space-5); + } + + .cambio-display { + background: var(--color-surface-2); border: 1px solid var(--color-border); + border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); + display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); + } + .cambio-label { font-size: var(--text-body-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); } + .cambio-amount { font-family: var(--font-mono); font-size: var(--text-h4); font-weight: var(--font-weight-bold); } + .cambio-amount.positive { color: var(--color-success); } + .cambio-amount.negative { color: var(--color-error); } + + .quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-3); } + .quick-btn { + padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); background: var(--color-surface-2); + color: var(--color-text-primary); border: 1px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); text-align: center; + } + .quick-btn:hover { background: var(--color-primary-muted); border-color: var(--color-primary); } + + .split-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; margin-bottom: var(--space-3); } + .split-method { + padding: var(--space-2) var(--space-3); font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); background: var(--color-surface-2); + color: var(--color-text-secondary); border-radius: var(--radius-md); + text-align: center; border: 1px solid var(--color-border); + } + .split-remaining { + background: var(--color-surface-2); border-radius: var(--radius-md); + padding: var(--space-3) var(--space-4); + display: flex; align-items: center; justify-content: space-between; + font-size: var(--text-body-sm); margin-top: var(--space-3); + } + .split-remaining .amount { font-family: var(--font-mono); font-weight: var(--font-weight-bold); color: var(--color-text-accent); } + + .cfdi-check { + display: flex; align-items: center; gap: var(--space-3); + padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); + background: var(--color-surface-1); + } + .cfdi-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); cursor: pointer; } + .cfdi-check label { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; } + .cfdi-check .cfdi-hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-left: auto; } + + .modal-footer { + padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); + display: flex; gap: var(--space-3); justify-content: flex-end; + } + + .btn { + display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); + padding: var(--space-3) var(--space-6); font-family: var(--font-body); font-size: var(--text-body); + font-weight: var(--font-weight-semibold); line-height: 1; + border: 2px solid transparent; border-radius: var(--radius-md); + cursor: pointer; transition: var(--transition-fast); white-space: nowrap; + } + .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } + .btn:active { transform: scale(0.97); } + .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } + .btn-primary:hover { background: var(--btn-primary-bg-hover); } + .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } + .btn-ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); } + .btn-ghost:hover { background: var(--color-surface-2); } + .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); } + + .ref-field { display: flex; gap: var(--space-3); align-items: end; } + .ref-field .form-group { flex: 1; } + .form-hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); } + .status-indicator { + display: flex; align-items: center; gap: var(--space-2); + padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + } + .status-indicator.pending { background: var(--color-warning-light); color: var(--color-warning-dark); } + .status-indicator.confirmed { background: var(--color-success-light); color: var(--color-success-dark); } + + .terminal-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } + .terminal-card { + padding: var(--space-4); background: var(--color-surface-2); border: 2px solid var(--color-border); + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); text-align: center; + } + .terminal-card:hover { border-color: var(--color-primary); } + .terminal-card.selected { border-color: var(--color-primary); background: var(--color-primary-muted); } + .terminal-card .terminal-name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } + .terminal-card .terminal-type { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); } + + /* ===================================================================== + MODAL CONFIRMACION + ===================================================================== */ + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } + @keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } + @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } + @keyframes scaleOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } } + + .confirm-overlay { + position: fixed; inset: 0; background: var(--overlay-backdrop); + z-index: calc(var(--z-modal) + 1); display: none; animation: fadeIn 0.2s ease-out forwards; + } + .confirm-overlay.active { display: block; } + .confirm-overlay.closing { animation: fadeOut 0.2s ease-in forwards; } + + .confirm-dialog { + position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); + z-index: calc(var(--z-modal) + 2); + background: var(--color-bg-elevated); border: 1px solid var(--color-border); + border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); + width: 90%; max-width: 420px; padding: var(--space-6); text-align: center; + display: none; animation: scaleIn 0.25s ease-out forwards; + } + .confirm-dialog.active { display: block; } + .confirm-dialog.closing { animation: scaleOut 0.2s ease-in forwards; } + + .modal__icon { + width: 56px; height: 56px; border-radius: var(--radius-full); + display: flex; align-items: center; justify-content: center; + font-size: 26px; margin: 0 auto var(--space-4); + } + .modal__icon--warning { background: var(--color-warning-light); } + .modal__title { + font-family: var(--font-heading); font-size: var(--text-h4); + font-weight: var(--heading-weight-primary); color: var(--color-text-primary); margin-bottom: var(--space-2); + } + .modal__desc { + font-size: var(--text-body-sm); color: var(--color-text-muted); + line-height: 1.6; margin-bottom: var(--space-6); padding: 0 var(--space-2); + } + .modal__actions { display: flex; gap: var(--space-3); justify-content: center; } + .modal__btn { + flex: 1; max-width: 180px; padding: var(--space-3) var(--space-4); + font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 600; + border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); + border: 1px solid transparent; + } + .modal__btn--secondary { + background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); + } + .modal__btn--secondary:hover { background: var(--btn-secondary-bg-hover); } + .modal__btn--danger { + background: var(--btn-danger-bg, var(--color-error)); color: var(--btn-danger-text, #fff); + border-color: var(--btn-danger-bg, var(--color-error)); + } + .modal__btn--danger:hover { opacity: 0.9; } + + /* ===================================================================== + TICKET TERMICO (hidden, for print) + ===================================================================== */ + .ticket-print-area { display: none; } + + .ticket { + background: #ffffff; color: #000000; + font-family: 'Courier New', 'Consolas', monospace; + font-size: 11px; line-height: 1.4; padding: 12px; text-align: left; + border: 1px dashed #ccc; + } + .ticket-80 { width: 302px; } + .ticket .store-name { font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 2px; } + .ticket .store-tagline { font-size: 9px; text-align: center; color: #555; margin-bottom: 4px; } + .ticket .store-info { font-size: 9px; text-align: center; color: #333; margin-bottom: 6px; line-height: 1.3; } + .ticket .divider { border: none; border-top: 1px dashed #999; margin: 6px 0; } + .ticket .divider-double { border: none; border-top: 2px solid #333; margin: 6px 0; } + .ticket .ticket-row { display: flex; justify-content: space-between; } + .ticket .folio-line { font-size: 10px; font-weight: bold; display: flex; justify-content: space-between; margin-bottom: 4px; } + .ticket .total-section { margin-top: 4px; } + .ticket .total-line { display: flex; justify-content: space-between; font-size: 11px; } + .ticket .total-line.grand { font-size: 14px; font-weight: bold; margin-top: 2px; padding-top: 2px; border-top: 1px solid #333; } + .ticket .payment-section { margin-top: 4px; font-size: 10px; } + .ticket .footer-section { text-align: center; margin-top: 8px; font-size: 9px; color: #555; } + .ticket .footer-section .thanks { font-size: 11px; font-weight: bold; color: #000; margin-bottom: 2px; } + .ticket-80 .item-line-wide { + display: grid; grid-template-columns: auto 1fr auto auto; + gap: 8px; align-items: baseline; font-size: 10px; margin-bottom: 3px; + } + .ticket-80 .item-line-wide .qty { font-weight: bold; min-width: 24px; text-align: right; } + .ticket-80 .item-line-wide .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .ticket-80 .item-line-wide .price { text-align: right; min-width: 55px; } + .ticket-80 .item-line-wide .subtotal { text-align: right; font-weight: bold; min-width: 60px; } + + @media print { + body * { display: none !important; } + .ticket-print-area, .ticket-print-area * { display: block !important; } + .ticket-print-area { position: fixed; top: 0; left: 0; } + .ticket { border: none; box-shadow: none; padding: 4px; } + .ticket .item-line-wide { display: grid !important; } + .ticket .ticket-row, .ticket .folio-line, .ticket .total-line { display: flex !important; } + } + + /* ===================================================================== + TOAST NOTIFICATION + ===================================================================== */ + .toast-container { + position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); + z-index: var(--z-toast); display: flex; flex-direction: column; + gap: var(--space-2); pointer-events: none; + } + .toast { + padding: var(--space-3) var(--space-5); + background-color: var(--color-surface-3); border: 1px solid var(--color-border); + border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); + font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); box-shadow: var(--shadow-lg); white-space: nowrap; + animation: toast-in 0.25s ease, toast-out 0.3s ease 1.7s forwards; + } + @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } + @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } + + /* ===================================================================== + RESPONSIVE + ===================================================================== */ + @media (max-width: 900px) { + .pos-main { flex-direction: column; } + .panel-products, .panel-cart { width: 100%; min-width: 0; } + .panel-products { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 55%; } + .panel-cart { max-height: 45%; } + .product-grid { grid-template-columns: repeat(2, 1fr); } + .status-bar__center { display: none; } + .fkeys-footer { flex-wrap: wrap; } + } + + @media (max-width: 768px) { + .fkeys-footer { flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2); } + .fkey { padding: var(--space-1) var(--space-2); } + .fkey-label { font-size: 10px; } + .fkey-key { min-width: 24px; height: 20px; font-size: 10px; } + .fkey-sep { display: none; } + } + + .sr-only { + position: absolute; width: 1px; height: 1px; padding: 0; + margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; + } + + /* Add padding at bottom so content isn't hidden by fixed fkeys bar */ + body { padding-bottom: 50px; } diff --git a/pos/static/css/quotations.css b/pos/static/css/quotations.css new file mode 100644 index 0000000..49b8bb8 --- /dev/null +++ b/pos/static/css/quotations.css @@ -0,0 +1,27 @@ +/* Extracted from quotations.html */ + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + body { font-family: var(--font-body); background: var(--color-bg-base); color: var(--color-text-primary); min-height: 100vh; } + .page { max-width: 1200px; margin: 0 auto; padding: var(--space-6); margin-left: 240px; } + @media (max-width: 1023px) { .page { margin-left: 0; } } + .page-title { font-family: var(--font-heading); font-size: var(--text-h3); margin-bottom: var(--space-6); } + .quote-table { width: 100%; border-collapse: collapse; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; } + .quote-table th, .quote-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--glass-border); } + .quote-table th { background: var(--glass-bg-strong); font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } + .quote-table tbody tr { cursor: pointer; transition: background 0.15s; } + .quote-table tbody tr:hover { background: var(--glass-highlight); } + .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } + .badge--active { background: rgba(63,185,80,0.15); color: #3FB950; } + .badge--converted { background: rgba(0,212,255,0.15); color: #00D4FF; } + .badge--cancelled { background: rgba(248,81,73,0.15); color: #F85149; } + .badge--expired { background: rgba(130,130,130,0.2); color: #888; } + .badge--wa { background: rgba(37,211,102,0.15); color: #25D366; } + .badge--pos { background: var(--color-primary-muted); color: var(--color-text-accent); } + .modal-overlay { display:none; position:fixed; inset:0; z-index:1000; background:var(--overlay-backdrop); backdrop-filter:blur(4px); align-items:flex-start; justify-content:center; padding:var(--space-8) var(--space-4); overflow-y:auto; } + .modal-overlay.open { display:flex; } + .modal-content { background:var(--glass-bg-strong); backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); max-width:650px; width:100%; padding:var(--space-6); position:relative; } + .modal-close { position:absolute; top:var(--space-3); right:var(--space-3); background:none; border:none; color:var(--color-text-muted); font-size:1.4rem; cursor:pointer; } + .detail-table { width:100%; border-collapse:collapse; margin:var(--space-4) 0; } + .detail-table th, .detail-table td { padding:var(--space-2) var(--space-3); text-align:left; border-bottom:1px solid var(--glass-border); font-size:var(--text-body-sm); } + .detail-table th { color:var(--color-text-muted); font-size:var(--text-caption); text-transform:uppercase; } + .empty { text-align:center; padding:var(--space-12); color:var(--color-text-muted); } diff --git a/pos/static/css/quotations.min.css b/pos/static/css/quotations.min.css new file mode 100644 index 0000000..49b8bb8 --- /dev/null +++ b/pos/static/css/quotations.min.css @@ -0,0 +1,27 @@ +/* Extracted from quotations.html */ + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + body { font-family: var(--font-body); background: var(--color-bg-base); color: var(--color-text-primary); min-height: 100vh; } + .page { max-width: 1200px; margin: 0 auto; padding: var(--space-6); margin-left: 240px; } + @media (max-width: 1023px) { .page { margin-left: 0; } } + .page-title { font-family: var(--font-heading); font-size: var(--text-h3); margin-bottom: var(--space-6); } + .quote-table { width: 100%; border-collapse: collapse; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; } + .quote-table th, .quote-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--glass-border); } + .quote-table th { background: var(--glass-bg-strong); font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } + .quote-table tbody tr { cursor: pointer; transition: background 0.15s; } + .quote-table tbody tr:hover { background: var(--glass-highlight); } + .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } + .badge--active { background: rgba(63,185,80,0.15); color: #3FB950; } + .badge--converted { background: rgba(0,212,255,0.15); color: #00D4FF; } + .badge--cancelled { background: rgba(248,81,73,0.15); color: #F85149; } + .badge--expired { background: rgba(130,130,130,0.2); color: #888; } + .badge--wa { background: rgba(37,211,102,0.15); color: #25D366; } + .badge--pos { background: var(--color-primary-muted); color: var(--color-text-accent); } + .modal-overlay { display:none; position:fixed; inset:0; z-index:1000; background:var(--overlay-backdrop); backdrop-filter:blur(4px); align-items:flex-start; justify-content:center; padding:var(--space-8) var(--space-4); overflow-y:auto; } + .modal-overlay.open { display:flex; } + .modal-content { background:var(--glass-bg-strong); backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); max-width:650px; width:100%; padding:var(--space-6); position:relative; } + .modal-close { position:absolute; top:var(--space-3); right:var(--space-3); background:none; border:none; color:var(--color-text-muted); font-size:1.4rem; cursor:pointer; } + .detail-table { width:100%; border-collapse:collapse; margin:var(--space-4) 0; } + .detail-table th, .detail-table td { padding:var(--space-2) var(--space-3); text-align:left; border-bottom:1px solid var(--glass-border); font-size:var(--text-body-sm); } + .detail-table th { color:var(--color-text-muted); font-size:var(--text-caption); text-transform:uppercase; } + .empty { text-align:center; padding:var(--space-12); color:var(--color-text-muted); } diff --git a/pos/static/css/reports.css b/pos/static/css/reports.css new file mode 100644 index 0000000..b869e1f --- /dev/null +++ b/pos/static/css/reports.css @@ -0,0 +1,1535 @@ +/* Extracted from reports.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR (fixed, 36px) + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(8px); + height: 36px; + flex-shrink: 0; + } + + [data-theme="industrial"] .theme-bar { + background: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__brand { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__page { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-switcher { + display: flex; + align-items: center; + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + gap: 2px; + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 3px var(--space-3); + border: none; + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-fast); + } + + .theme-btn:hover { + color: var(--color-text-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + color: var(--color-text-inverse); + box-shadow: var(--shadow-sm); + } + + [data-theme="industrial"] .theme-btn.is-active { + color: #000; + } + + /* ========================================================================= + APP SHELL + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR (~220px) + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + transition: var(--transition-normal); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* Brand */ + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.2rem; + letter-spacing: var(--tracking-tight); + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.95rem; + letter-spacing: var(--tracking-wide); + color: var(--color-text-primary); + text-transform: uppercase; + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* Nav */ + .sidebar__nav { + flex: 1; + padding: var(--space-2) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + text-decoration: none; + cursor: pointer; + border: none; + background: none; + width: 100%; + text-align: left; + transition: var(--transition-fast); + border-left: 3px solid transparent; + } + + .nav-item:hover { + background: var(--color-primary-muted); + color: var(--color-text-primary); + border-left-color: var(--color-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + border-left-color: var(--color-primary); + } + + .nav-item__icon { + width: 16px; + height: 16px; + opacity: 0.7; + flex-shrink: 0; + } + + .nav-item.is-active .nav-item__icon, + .nav-item:hover .nav-item__icon { + opacity: 1; + } + + /* Profile */ + .sidebar__profile { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-3); + flex-shrink: 0; + } + + .profile-avatar { + width: 32px; + height: 32px; + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + flex-shrink: 0; + } + + [data-theme="industrial"] .profile-avatar { + clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .profile-avatar { + border-radius: var(--radius-full); + } + + .profile-info__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .profile-info__role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* Header */ + .content-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + gap: var(--space-4); + } + + [data-theme="industrial"] .content-header { + background: var(--color-surface-1); + } + + .content-header__title-block { + display: flex; + flex-direction: column; + gap: 2px; + } + + .content-header__eyebrow { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .content-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .content-header__title { + text-transform: uppercase; + } + + .content-header__actions { + display: flex; + align-items: center; + gap: var(--space-2); + flex-shrink: 0; + } + + /* Scrollable body */ + .content-body { + flex: 1; + overflow-y: auto; + padding: var(--space-5) var(--space-6); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .content-body::-webkit-scrollbar { width: 6px; } + .content-body::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .content-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + .content-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1px solid transparent; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + text-decoration: none; + } + + [data-theme="industrial"] .btn { + border-radius: 0; + } + + .btn-primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn-primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn-secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn-secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn-ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn-ghost:hover { + background: var(--color-primary-muted); + color: var(--color-primary); + border-color: var(--color-primary); + } + + .btn-sm { + padding: var(--space-1) var(--space-3); + font-size: var(--text-caption); + } + + .btn svg { + width: 14px; + height: 14px; + } + + /* ========================================================================= + TAB NAV + ========================================================================= */ + + .tab-nav { + display: flex; + align-items: flex-end; + gap: 0; + border-bottom: 2px solid var(--color-border); + margin-bottom: var(--space-5); + } + + .tab-btn { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-5); + border: none; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + letter-spacing: var(--tracking-wide); + } + + .tab-btn svg { + width: 15px; + height: 15px; + opacity: 0.7; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-primary-muted); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn.is-active svg { + opacity: 1; + } + + /* Tab panels */ + .tab-panel { + display: none; + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + FILTER BAR + ========================================================================= */ + + .filter-bar { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--space-5); + flex-wrap: wrap; + } + + [data-theme="industrial"] .filter-bar { + border-radius: 0; + border-left: 3px solid var(--color-primary); + } + + .filter-bar__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + white-space: nowrap; + } + + .filter-input, + .filter-select { + padding: var(--space-2) var(--space-3); + background: var(--color-bg-overlay); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + transition: var(--transition-fast); + } + + [data-theme="industrial"] .filter-input, + [data-theme="industrial"] .filter-select { + border-radius: 0; + } + + .filter-input:focus, + .filter-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + .filter-input[type="date"] { + color-scheme: dark; + } + + [data-theme="modern"] .filter-input[type="date"] { + color-scheme: light; + } + + .filter-sep { + color: var(--color-text-muted); + font-size: var(--text-caption); + } + + .filter-bar__spacer { + flex: 1; + } + + /* ========================================================================= + KPI CARDS GRID + ========================================================================= */ + + .kpi-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + @media (max-width: 1024px) { + .kpi-grid { grid-template-columns: repeat(2, 1fr); } + } + + @media (max-width: 640px) { + .kpi-grid { grid-template-columns: 1fr; } + } + + .kpi-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-1); + position: relative; + overflow: hidden; + transition: var(--transition-fast); + } + + [data-theme="industrial"] .kpi-card { + border-radius: 0; + border-top: 2px solid var(--color-primary); + } + + [data-theme="modern"] .kpi-card { + box-shadow: var(--shadow-sm); + } + + .kpi-card:hover { + border-color: var(--color-border-accent); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .kpi-card:hover { + border-top-color: var(--color-primary); + } + + .kpi-card__icon { + position: absolute; + top: var(--space-3); + right: var(--space-4); + width: 32px; + height: 32px; + background: var(--color-primary-muted); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + } + + .kpi-card__icon svg { + width: 16px; + height: 16px; + } + + .kpi-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + .kpi-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + color: var(--color-text-primary); + line-height: 1.1; + } + + .kpi-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + display: flex; + align-items: center; + gap: var(--space-1); + margin-top: var(--space-1); + } + + .kpi-card__delta { + display: inline-flex; + align-items: center; + gap: 2px; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + padding: 1px 6px; + border-radius: var(--radius-full); + } + + .kpi-card__delta--up { + background: var(--color-success-light); + color: var(--color-success-dark); + } + + [data-theme="industrial"] .kpi-card__delta--up { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .kpi-card__delta--down { + background: var(--color-error-light); + color: var(--color-error-dark); + } + + [data-theme="industrial"] .kpi-card__delta--down { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + /* ========================================================================= + SECTION HEADER + ========================================================================= */ + + .section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-3); + gap: var(--space-3); + } + + .section-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + } + + [data-theme="industrial"] .section-title { + color: var(--color-primary); + letter-spacing: var(--tracking-wider); + } + + .section-actions { + display: flex; + align-items: center; + gap: var(--space-2); + } + + /* ========================================================================= + CSS BAR CHART + ========================================================================= */ + + .bar-chart-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + margin-bottom: var(--space-5); + } + + [data-theme="industrial"] .bar-chart-card { + border-radius: 0; + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .bar-chart-card { + box-shadow: var(--shadow-sm); + } + + .bar-chart-card__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-bottom: var(--space-4); + } + + [data-theme="industrial"] .bar-chart-card__title { + color: var(--color-text-accent); + } + + .bar-chart { + display: flex; + align-items: flex-end; + gap: var(--space-3); + height: 140px; + } + + .bar-chart__col { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-1); + flex: 1; + height: 100%; + justify-content: flex-end; + } + + .bar-chart__bar-wrap { + flex: 1; + width: 100%; + display: flex; + align-items: flex-end; + } + + .bar-chart__bar { + width: 100%; + background: var(--color-primary); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + transition: opacity var(--duration-fast) var(--ease-in-out); + position: relative; + min-height: 4px; + } + + [data-theme="industrial"] .bar-chart__bar { + border-radius: 0; + clip-path: polygon(0 6px, 6px 0, 100% 0, 100% 100%, 0 100%); + } + + .bar-chart__bar:hover { + opacity: 0.8; + } + + .bar-chart__bar-val { + position: absolute; + top: -18px; + left: 50%; + transform: translateX(-50%); + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + color: var(--color-text-accent); + white-space: nowrap; + } + + .bar-chart__day { + font-size: 0.65rem; + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + /* ========================================================================= + DATA TABLES + ========================================================================= */ + + .table-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + margin-bottom: var(--space-5); + } + + [data-theme="industrial"] .table-card { + border-radius: 0; + } + + [data-theme="modern"] .table-card { + box-shadow: var(--shadow-sm); + } + + .table-card__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-bottom: 1px solid var(--color-border); + background: var(--color-surface-2); + gap: var(--space-3); + } + + [data-theme="industrial"] .table-card__header { + background: var(--color-surface-3); + } + + .table-card__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + [data-theme="industrial"] .table-card__title { + color: var(--color-text-accent); + } + + .table-wrap { + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-1); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-2); + } + + .data-table th { + padding: var(--space-2) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + white-space: nowrap; + border-bottom: 1px solid var(--color-border); + } + + .data-table th.align-right, + .data-table td.align-right { + text-align: right; + } + + .data-table th.align-center, + .data-table td.align-center { + text-align: center; + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + border-bottom: 1px solid var(--color-border); + vertical-align: middle; + } + + .data-table tr:last-child td { + border-bottom: none; + } + + .data-table tbody tr { + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:hover { + background: var(--color-primary-muted); + } + + .td-strong { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .td-mono { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + } + + .td-mono-accent { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-accent); + font-weight: var(--font-weight-bold); + } + + /* Rank badge */ + .rank-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + border-radius: var(--radius-sm); + } + + [data-theme="industrial"] .rank-badge { + border-radius: 0; + } + + .rank-badge--gold { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + /* Progress bar inline */ + .progress-mini { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .progress-mini__bar { + flex: 1; + height: 4px; + background: var(--color-border); + border-radius: var(--radius-full); + overflow: hidden; + min-width: 60px; + } + + .progress-mini__fill { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + } + + .progress-mini__pct { + font-size: var(--text-caption); + color: var(--color-text-muted); + white-space: nowrap; + min-width: 32px; + text-align: right; + } + + /* Status pills */ + .pill { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + white-space: nowrap; + } + + .pill--warning { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .pill--error { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .pill--success { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .pill--muted { + background: var(--color-surface-3); + color: var(--color-text-muted); + } + + .pill--dot::before { + content: ''; + width: 6px; + height: 6px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + /* Export button group */ + .export-group { + display: flex; + align-items: center; + gap: var(--space-2); + padding-top: var(--space-2); + } + + .export-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + /* ========================================================================= + AGING TABLE (Financieros) + ========================================================================= */ + + .aging-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + @media (max-width: 768px) { + .aging-grid { grid-template-columns: repeat(2, 1fr); } + } + + .aging-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4); + text-align: center; + transition: var(--transition-fast); + } + + [data-theme="industrial"] .aging-card { + border-radius: 0; + } + + [data-theme="modern"] .aging-card { + box-shadow: var(--shadow-sm); + } + + .aging-card:hover { + border-color: var(--color-border-accent); + } + + .aging-card__range { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + margin-bottom: var(--space-2); + } + + .aging-card__amount { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + color: var(--color-text-primary); + margin-bottom: var(--space-1); + } + + .aging-card__count { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .aging-card__bar { + height: 4px; + border-radius: var(--radius-full); + margin-top: var(--space-3); + } + + .aging-card--ok .aging-card__bar { background: var(--color-success); } + .aging-card--warn .aging-card__bar { background: var(--color-warning); } + .aging-card--danger .aging-card__bar { background: var(--color-error); } + .aging-card--critical .aging-card__bar { background: #991b1b; } + + /* ========================================================================= + CASH FLOW SUMMARY + ========================================================================= */ + + .cashflow-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + @media (max-width: 768px) { + .cashflow-grid { grid-template-columns: 1fr; } + } + + .cashflow-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-2); + } + + [data-theme="industrial"] .cashflow-card { + border-radius: 0; + } + + [data-theme="modern"] .cashflow-card { + box-shadow: var(--shadow-sm); + } + + .cashflow-card--inflow { + border-top: 3px solid var(--color-success); + } + + .cashflow-card--outflow { + border-top: 3px solid var(--color-error); + } + + .cashflow-card--net { + border-top: 3px solid var(--color-primary); + } + + .cashflow-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .cashflow-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + } + + .cashflow-card--inflow .cashflow-card__value { color: var(--color-success); } + .cashflow-card--outflow .cashflow-card__value { color: var(--color-error); } + .cashflow-card--net .cashflow-card__value { color: var(--color-primary); } + + .cashflow-card__items { + list-style: none; + margin-top: var(--space-2); + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .cashflow-card__item { + display: flex; + justify-content: space-between; + font-size: var(--text-caption); + color: var(--color-text-secondary); + padding-top: var(--space-1); + border-top: 1px solid var(--color-border); + } + + .cashflow-card__item-val { + font-weight: var(--font-weight-semibold); + font-family: var(--font-mono); + } + + /* ========================================================================= + TWO-COLUMN LAYOUT HELPER + ========================================================================= */ + + .two-col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + @media (max-width: 900px) { + .two-col { grid-template-columns: 1fr; } + } + + /* ========================================================================= + PAYMENT METHOD BARS + ========================================================================= */ + + .pay-method-row { + display: flex; + align-items: center; + gap: var(--space-4); + margin-bottom: var(--space-4); + } + + .pay-method-row:last-child { + margin-bottom: 0; + } + + .pay-method__label { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + min-width: 110px; + white-space: nowrap; + } + + .pay-method__bar-wrap { + flex: 1; + height: 10px; + background: var(--color-border); + border-radius: var(--radius-full); + overflow: hidden; + } + + [data-theme="industrial"] .pay-method__bar-wrap { + border-radius: 0; + } + + .pay-method__bar { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + transition: width 0.6s var(--ease-in-out); + } + + [data-theme="industrial"] .pay-method__bar { + border-radius: 0; + } + + .pay-method__bar--b { background: var(--color-success); } + .pay-method__bar--c { background: var(--color-warning); } + .pay-method__bar--d { background: var(--color-primary-muted); border: 1px solid var(--color-primary); } + + [data-theme="industrial"] .pay-method__bar--d { + background: rgba(245, 166, 35, 0.2); + } + + .pay-method__val { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + min-width: 150px; + text-align: right; + white-space: nowrap; + } + + /* ========================================================================= + DUAL BAR CHART (Ingresos vs Egresos) + ========================================================================= */ + + .dual-bar-chart { + display: flex; + align-items: flex-end; + gap: var(--space-4); + height: 160px; + padding-bottom: var(--space-1); + } + + .dual-bar-group { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-1); + flex: 1; + height: 100%; + justify-content: flex-end; + } + + .dual-bar-cols { + display: flex; + align-items: flex-end; + gap: 3px; + width: 100%; + flex: 1; + } + + .dual-bar { + flex: 1; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + min-height: 4px; + transition: opacity var(--duration-fast) var(--ease-in-out); + } + + [data-theme="industrial"] .dual-bar { + border-radius: 0; + } + + .dual-bar:hover { + opacity: 0.8; + } + + .dual-bar--ingreso { + background: var(--color-success); + } + + .dual-bar--egreso { + background: var(--color-error); + } + + .dual-bar-group__label { + font-size: 0.65rem; + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .dual-chart-legend { + display: flex; + gap: var(--space-4); + margin-top: var(--space-3); + margin-bottom: var(--space-4); + } + + .legend-item { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .legend-dot { + width: 10px; + height: 10px; + border-radius: var(--radius-full); + flex-shrink: 0; + } + + .legend-dot--ingreso { background: var(--color-success); } + .legend-dot--egreso { background: var(--color-error); } + + /* ========================================================================= + MARGIN HELPERS + ========================================================================= */ + + .mb-4 { margin-bottom: var(--space-4); } + .mb-5 { margin-bottom: var(--space-5); } + + /* ========================================================================= + PRINT STYLES + ========================================================================= */ + + @media print { + .theme-bar, + .sidebar, + .tab-nav, + .filter-bar, + .content-header__actions, + .export-group, + .btn { + display: none !important; + } + + body { + overflow: visible !important; + font-size: 11pt; + color: #000; + background: #fff; + } + + .app-shell { + display: block; + padding-top: 0; + height: auto; + } + + .main-content { + overflow: visible; + height: auto; + } + + .content-body { + overflow: visible; + height: auto; + padding: 0; + } + + .tab-panel { + display: block !important; + } + + .kpi-card, + .table-card, + .bar-chart-card { + break-inside: avoid; + border: 1px solid #ccc !important; + box-shadow: none !important; + border-radius: 0 !important; + } + + .kpi-grid { + grid-template-columns: repeat(4, 1fr) !important; + } + + .data-table th, + .data-table td { + border: 1px solid #ddd; + color: #000; + background: #fff !important; + } + + .content-header__title { + color: #000; + font-size: 18pt; + } + + @page { + margin: 1.5cm; + size: A4 landscape; + } + } + + /* ========================================================================= + RESPONSIVE SIDEBAR COLLAPSE + ========================================================================= */ + + @media (max-width: 768px) { + .sidebar { + width: 56px; + } + + .sidebar .brand-name, + .sidebar .nav-item span, + .sidebar .nav-section-label, + .sidebar .profile-info { + display: none; + } + + .sidebar .nav-item { + justify-content: center; + padding: var(--space-3); + border-left: none; + border-bottom: 3px solid transparent; + } + + .sidebar .nav-item.is-active { + border-bottom-color: var(--color-primary); + } + + .sidebar__brand { + justify-content: center; + padding: var(--space-3); + } + + .sidebar__profile { + justify-content: center; + } + + .content-body { + padding: var(--space-4); + } + + .kpi-grid { + grid-template-columns: repeat(2, 1fr); + } + } diff --git a/pos/static/css/reports.min.css b/pos/static/css/reports.min.css new file mode 100644 index 0000000..b869e1f --- /dev/null +++ b/pos/static/css/reports.min.css @@ -0,0 +1,1535 @@ +/* Extracted from reports.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-color: var(--color-bg-base); + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + THEME SWITCHER BAR (fixed, 36px) + ========================================================================= */ + + .theme-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: var(--z-toast); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + background: var(--color-bg-overlay); + border-bottom: 1px solid var(--color-border); + backdrop-filter: blur(8px); + height: 36px; + flex-shrink: 0; + } + + [data-theme="industrial"] .theme-bar { + background: #111111; + border-bottom-color: var(--color-primary-muted); + } + + .theme-bar__left { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__brand { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.75rem; + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + color: var(--color-text-accent); + } + + .theme-bar__sep { + width: 1px; + height: 16px; + background: var(--color-border); + } + + .theme-bar__page { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-bar__right { + display: flex; + align-items: center; + gap: var(--space-3); + } + + .theme-bar__label { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + .theme-switcher { + display: flex; + align-items: center; + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-full); + padding: 2px; + gap: 2px; + } + + .theme-btn { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 3px var(--space-3); + border: none; + border-radius: var(--radius-full); + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + cursor: pointer; + transition: var(--transition-fast); + } + + .theme-btn:hover { + color: var(--color-text-primary); + } + + .theme-btn.is-active { + background: var(--color-primary); + color: var(--color-text-inverse); + box-shadow: var(--shadow-sm); + } + + [data-theme="industrial"] .theme-btn.is-active { + color: #000; + } + + /* ========================================================================= + APP SHELL + ========================================================================= */ + + .app-shell { + display: flex; + height: 100vh; + padding-top: 36px; + } + + /* ========================================================================= + SIDEBAR (~220px) + ========================================================================= */ + + .sidebar { + width: 260px; + flex-shrink: 0; + display: flex; + flex-direction: column; + background: var(--color-bg-elevated); + border-right: 1px solid var(--color-border); + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + transition: var(--transition-normal); + } + + .sidebar::-webkit-scrollbar { width: 4px; } + .sidebar::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + + /* Brand */ + .sidebar__brand { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-4) var(--space-4) var(--space-3); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .brand-logo { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + color: var(--color-text-inverse); + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 1.2rem; + letter-spacing: var(--tracking-tight); + flex-shrink: 0; + } + + [data-theme="industrial"] .brand-logo { + clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .brand-logo { + border-radius: var(--radius-md); + } + + .brand-name__primary { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.95rem; + letter-spacing: var(--tracking-wide); + color: var(--color-text-primary); + text-transform: uppercase; + line-height: 1; + } + + .brand-name__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-top: 2px; + } + + /* Nav */ + .sidebar__nav { + flex: 1; + padding: var(--space-2) 0; + } + + .nav-section-label { + padding: var(--space-3) var(--space-4) var(--space-1); + font-size: 0.65rem; + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .nav-item { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-2) var(--space-4); + color: var(--color-text-secondary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-regular); + text-decoration: none; + cursor: pointer; + border: none; + background: none; + width: 100%; + text-align: left; + transition: var(--transition-fast); + border-left: 3px solid transparent; + } + + .nav-item:hover { + background: var(--color-primary-muted); + color: var(--color-text-primary); + border-left-color: var(--color-primary); + } + + .nav-item.is-active { + background: var(--color-primary-muted); + color: var(--color-primary); + font-weight: var(--font-weight-semibold); + border-left-color: var(--color-primary); + } + + .nav-item__icon { + width: 16px; + height: 16px; + opacity: 0.7; + flex-shrink: 0; + } + + .nav-item.is-active .nav-item__icon, + .nav-item:hover .nav-item__icon { + opacity: 1; + } + + /* Profile */ + .sidebar__profile { + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + display: flex; + align-items: center; + gap: var(--space-3); + flex-shrink: 0; + } + + .profile-avatar { + width: 32px; + height: 32px; + background: var(--color-primary); + color: var(--color-text-inverse); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: 0.8rem; + flex-shrink: 0; + } + + [data-theme="industrial"] .profile-avatar { + clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); + } + + [data-theme="modern"] .profile-avatar { + border-radius: var(--radius-full); + } + + .profile-info__name { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .profile-info__role { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ========================================================================= + MAIN CONTENT + ========================================================================= */ + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + min-width: 0; + } + + /* Header */ + .content-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-4) var(--space-6); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + gap: var(--space-4); + } + + [data-theme="industrial"] .content-header { + background: var(--color-surface-1); + } + + .content-header__title-block { + display: flex; + flex-direction: column; + gap: 2px; + } + + .content-header__eyebrow { + font-size: var(--text-caption); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .content-header__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + letter-spacing: var(--heading-tracking-h4); + color: var(--color-text-primary); + line-height: 1.2; + } + + [data-theme="industrial"] .content-header__title { + text-transform: uppercase; + } + + .content-header__actions { + display: flex; + align-items: center; + gap: var(--space-2); + flex-shrink: 0; + } + + /* Scrollable body */ + .content-body { + flex: 1; + overflow-y: auto; + padding: var(--space-5) var(--space-6); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .content-body::-webkit-scrollbar { width: 6px; } + .content-body::-webkit-scrollbar-track { background: var(--scrollbar-track); } + .content-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); } + .content-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } + + /* ========================================================================= + BUTTONS + ========================================================================= */ + + .btn { + display: inline-flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-2) var(--space-4); + border: 1px solid transparent; + border-radius: var(--radius-md); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + text-decoration: none; + } + + [data-theme="industrial"] .btn { + border-radius: 0; + } + + .btn-primary { + background: var(--btn-primary-bg); + color: var(--btn-primary-text); + border-color: var(--btn-primary-border); + } + + .btn-primary:hover { + background: var(--btn-primary-bg-hover); + } + + .btn-secondary { + background: var(--btn-secondary-bg); + color: var(--btn-secondary-text); + border-color: var(--btn-secondary-border); + } + + .btn-secondary:hover { + background: var(--btn-secondary-bg-hover); + } + + .btn-ghost { + background: var(--btn-ghost-bg); + color: var(--btn-ghost-text); + border-color: var(--btn-ghost-border); + } + + .btn-ghost:hover { + background: var(--color-primary-muted); + color: var(--color-primary); + border-color: var(--color-primary); + } + + .btn-sm { + padding: var(--space-1) var(--space-3); + font-size: var(--text-caption); + } + + .btn svg { + width: 14px; + height: 14px; + } + + /* ========================================================================= + TAB NAV + ========================================================================= */ + + .tab-nav { + display: flex; + align-items: flex-end; + gap: 0; + border-bottom: 2px solid var(--color-border); + margin-bottom: var(--space-5); + } + + .tab-btn { + display: flex; + align-items: center; + gap: var(--space-2); + padding: var(--space-3) var(--space-5); + border: none; + border-bottom: 2px solid transparent; + margin-bottom: -2px; + background: transparent; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: var(--transition-fast); + white-space: nowrap; + letter-spacing: var(--tracking-wide); + } + + .tab-btn svg { + width: 15px; + height: 15px; + opacity: 0.7; + } + + .tab-btn:hover { + color: var(--color-text-primary); + background: var(--color-primary-muted); + } + + .tab-btn.is-active { + color: var(--color-primary); + border-bottom-color: var(--color-primary); + } + + .tab-btn.is-active svg { + opacity: 1; + } + + /* Tab panels */ + .tab-panel { + display: none; + } + + .tab-panel.is-active { + display: block; + } + + /* ========================================================================= + FILTER BAR + ========================================================================= */ + + .filter-bar { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + background: var(--color-surface-1); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + margin-bottom: var(--space-5); + flex-wrap: wrap; + } + + [data-theme="industrial"] .filter-bar { + border-radius: 0; + border-left: 3px solid var(--color-primary); + } + + .filter-bar__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + white-space: nowrap; + } + + .filter-input, + .filter-select { + padding: var(--space-2) var(--space-3); + background: var(--color-bg-overlay); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + outline: none; + transition: var(--transition-fast); + } + + [data-theme="industrial"] .filter-input, + [data-theme="industrial"] .filter-select { + border-radius: 0; + } + + .filter-input:focus, + .filter-select:focus { + border-color: var(--color-border-focus); + box-shadow: var(--shadow-focus); + } + + .filter-input[type="date"] { + color-scheme: dark; + } + + [data-theme="modern"] .filter-input[type="date"] { + color-scheme: light; + } + + .filter-sep { + color: var(--color-text-muted); + font-size: var(--text-caption); + } + + .filter-bar__spacer { + flex: 1; + } + + /* ========================================================================= + KPI CARDS GRID + ========================================================================= */ + + .kpi-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + @media (max-width: 1024px) { + .kpi-grid { grid-template-columns: repeat(2, 1fr); } + } + + @media (max-width: 640px) { + .kpi-grid { grid-template-columns: 1fr; } + } + + .kpi-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-1); + position: relative; + overflow: hidden; + transition: var(--transition-fast); + } + + [data-theme="industrial"] .kpi-card { + border-radius: 0; + border-top: 2px solid var(--color-primary); + } + + [data-theme="modern"] .kpi-card { + box-shadow: var(--shadow-sm); + } + + .kpi-card:hover { + border-color: var(--color-border-accent); + box-shadow: var(--shadow-md); + } + + [data-theme="industrial"] .kpi-card:hover { + border-top-color: var(--color-primary); + } + + .kpi-card__icon { + position: absolute; + top: var(--space-3); + right: var(--space-4); + width: 32px; + height: 32px; + background: var(--color-primary-muted); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + } + + .kpi-card__icon svg { + width: 16px; + height: 16px; + } + + .kpi-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + .kpi-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + color: var(--color-text-primary); + line-height: 1.1; + } + + .kpi-card__sub { + font-size: var(--text-caption); + color: var(--color-text-muted); + display: flex; + align-items: center; + gap: var(--space-1); + margin-top: var(--space-1); + } + + .kpi-card__delta { + display: inline-flex; + align-items: center; + gap: 2px; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + padding: 1px 6px; + border-radius: var(--radius-full); + } + + .kpi-card__delta--up { + background: var(--color-success-light); + color: var(--color-success-dark); + } + + [data-theme="industrial"] .kpi-card__delta--up { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .kpi-card__delta--down { + background: var(--color-error-light); + color: var(--color-error-dark); + } + + [data-theme="industrial"] .kpi-card__delta--down { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + /* ========================================================================= + SECTION HEADER + ========================================================================= */ + + .section-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-3); + gap: var(--space-3); + } + + .section-title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-h6); + color: var(--color-text-primary); + letter-spacing: var(--heading-tracking-h6); + text-transform: uppercase; + } + + [data-theme="industrial"] .section-title { + color: var(--color-primary); + letter-spacing: var(--tracking-wider); + } + + .section-actions { + display: flex; + align-items: center; + gap: var(--space-2); + } + + /* ========================================================================= + CSS BAR CHART + ========================================================================= */ + + .bar-chart-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + margin-bottom: var(--space-5); + } + + [data-theme="industrial"] .bar-chart-card { + border-radius: 0; + border-left: 3px solid var(--color-primary); + } + + [data-theme="modern"] .bar-chart-card { + box-shadow: var(--shadow-sm); + } + + .bar-chart-card__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + margin-bottom: var(--space-4); + } + + [data-theme="industrial"] .bar-chart-card__title { + color: var(--color-text-accent); + } + + .bar-chart { + display: flex; + align-items: flex-end; + gap: var(--space-3); + height: 140px; + } + + .bar-chart__col { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-1); + flex: 1; + height: 100%; + justify-content: flex-end; + } + + .bar-chart__bar-wrap { + flex: 1; + width: 100%; + display: flex; + align-items: flex-end; + } + + .bar-chart__bar { + width: 100%; + background: var(--color-primary); + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + transition: opacity var(--duration-fast) var(--ease-in-out); + position: relative; + min-height: 4px; + } + + [data-theme="industrial"] .bar-chart__bar { + border-radius: 0; + clip-path: polygon(0 6px, 6px 0, 100% 0, 100% 100%, 0 100%); + } + + .bar-chart__bar:hover { + opacity: 0.8; + } + + .bar-chart__bar-val { + position: absolute; + top: -18px; + left: 50%; + transform: translateX(-50%); + font-size: 0.6rem; + font-weight: var(--font-weight-bold); + color: var(--color-text-accent); + white-space: nowrap; + } + + .bar-chart__day { + font-size: 0.65rem; + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + /* ========================================================================= + DATA TABLES + ========================================================================= */ + + .table-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + overflow: hidden; + margin-bottom: var(--space-5); + } + + [data-theme="industrial"] .table-card { + border-radius: 0; + } + + [data-theme="modern"] .table-card { + box-shadow: var(--shadow-sm); + } + + .table-card__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-5); + border-bottom: 1px solid var(--color-border); + background: var(--color-surface-2); + gap: var(--space-3); + } + + [data-theme="industrial"] .table-card__header { + background: var(--color-surface-3); + } + + .table-card__title { + font-family: var(--font-heading); + font-weight: var(--heading-weight-secondary); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + letter-spacing: var(--tracking-wider); + text-transform: uppercase; + } + + [data-theme="industrial"] .table-card__title { + color: var(--color-text-accent); + } + + .table-wrap { + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); + } + + .data-table { + width: 100%; + border-collapse: collapse; + font-size: var(--text-body-sm); + } + + .data-table thead { + background: var(--color-surface-1); + } + + [data-theme="industrial"] .data-table thead { + background: var(--color-surface-2); + } + + .data-table th { + padding: var(--space-2) var(--space-4); + text-align: left; + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + white-space: nowrap; + border-bottom: 1px solid var(--color-border); + } + + .data-table th.align-right, + .data-table td.align-right { + text-align: right; + } + + .data-table th.align-center, + .data-table td.align-center { + text-align: center; + } + + .data-table td { + padding: var(--space-3) var(--space-4); + color: var(--color-text-secondary); + border-bottom: 1px solid var(--color-border); + vertical-align: middle; + } + + .data-table tr:last-child td { + border-bottom: none; + } + + .data-table tbody tr { + transition: background var(--duration-fast) var(--ease-in-out); + } + + .data-table tbody tr:hover { + background: var(--color-primary-muted); + } + + .td-strong { + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + } + + .td-mono { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + } + + .td-mono-accent { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + color: var(--color-text-accent); + font-weight: var(--font-weight-bold); + } + + /* Rank badge */ + .rank-badge { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + background: var(--color-primary-muted); + color: var(--color-primary); + font-size: var(--text-caption); + font-weight: var(--font-weight-bold); + border-radius: var(--radius-sm); + } + + [data-theme="industrial"] .rank-badge { + border-radius: 0; + } + + .rank-badge--gold { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + /* Progress bar inline */ + .progress-mini { + display: flex; + align-items: center; + gap: var(--space-2); + } + + .progress-mini__bar { + flex: 1; + height: 4px; + background: var(--color-border); + border-radius: var(--radius-full); + overflow: hidden; + min-width: 60px; + } + + .progress-mini__fill { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + } + + .progress-mini__pct { + font-size: var(--text-caption); + color: var(--color-text-muted); + white-space: nowrap; + min-width: 32px; + text-align: right; + } + + /* Status pills */ + .pill { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + border-radius: var(--radius-full); + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + white-space: nowrap; + } + + .pill--warning { + background: rgba(234, 179, 8, 0.15); + color: var(--color-warning); + } + + .pill--error { + background: rgba(239, 68, 68, 0.15); + color: var(--color-error); + } + + .pill--success { + background: rgba(34, 197, 94, 0.15); + color: var(--color-success); + } + + .pill--muted { + background: var(--color-surface-3); + color: var(--color-text-muted); + } + + .pill--dot::before { + content: ''; + width: 6px; + height: 6px; + border-radius: var(--radius-full); + background: currentColor; + flex-shrink: 0; + } + + /* Export button group */ + .export-group { + display: flex; + align-items: center; + gap: var(--space-2); + padding-top: var(--space-2); + } + + .export-label { + font-size: var(--text-caption); + color: var(--color-text-muted); + font-weight: var(--font-weight-semibold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + } + + /* ========================================================================= + AGING TABLE (Financieros) + ========================================================================= */ + + .aging-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + @media (max-width: 768px) { + .aging-grid { grid-template-columns: repeat(2, 1fr); } + } + + .aging-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-4); + text-align: center; + transition: var(--transition-fast); + } + + [data-theme="industrial"] .aging-card { + border-radius: 0; + } + + [data-theme="modern"] .aging-card { + box-shadow: var(--shadow-sm); + } + + .aging-card:hover { + border-color: var(--color-border-accent); + } + + .aging-card__range { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + margin-bottom: var(--space-2); + } + + .aging-card__amount { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h5); + color: var(--color-text-primary); + margin-bottom: var(--space-1); + } + + .aging-card__count { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .aging-card__bar { + height: 4px; + border-radius: var(--radius-full); + margin-top: var(--space-3); + } + + .aging-card--ok .aging-card__bar { background: var(--color-success); } + .aging-card--warn .aging-card__bar { background: var(--color-warning); } + .aging-card--danger .aging-card__bar { background: var(--color-error); } + .aging-card--critical .aging-card__bar { background: #991b1b; } + + /* ========================================================================= + CASH FLOW SUMMARY + ========================================================================= */ + + .cashflow-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-5); + } + + @media (max-width: 768px) { + .cashflow-grid { grid-template-columns: 1fr; } + } + + .cashflow-card { + background: var(--color-bg-elevated); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); + padding: var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-2); + } + + [data-theme="industrial"] .cashflow-card { + border-radius: 0; + } + + [data-theme="modern"] .cashflow-card { + box-shadow: var(--shadow-sm); + } + + .cashflow-card--inflow { + border-top: 3px solid var(--color-success); + } + + .cashflow-card--outflow { + border-top: 3px solid var(--color-error); + } + + .cashflow-card--net { + border-top: 3px solid var(--color-primary); + } + + .cashflow-card__label { + font-size: var(--text-caption); + font-weight: var(--font-weight-semibold); + color: var(--color-text-muted); + letter-spacing: var(--tracking-widest); + text-transform: uppercase; + } + + .cashflow-card__value { + font-family: var(--font-heading); + font-weight: var(--heading-weight-primary); + font-size: var(--text-h4); + } + + .cashflow-card--inflow .cashflow-card__value { color: var(--color-success); } + .cashflow-card--outflow .cashflow-card__value { color: var(--color-error); } + .cashflow-card--net .cashflow-card__value { color: var(--color-primary); } + + .cashflow-card__items { + list-style: none; + margin-top: var(--space-2); + display: flex; + flex-direction: column; + gap: var(--space-1); + } + + .cashflow-card__item { + display: flex; + justify-content: space-between; + font-size: var(--text-caption); + color: var(--color-text-secondary); + padding-top: var(--space-1); + border-top: 1px solid var(--color-border); + } + + .cashflow-card__item-val { + font-weight: var(--font-weight-semibold); + font-family: var(--font-mono); + } + + /* ========================================================================= + TWO-COLUMN LAYOUT HELPER + ========================================================================= */ + + .two-col { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-4); + } + + @media (max-width: 900px) { + .two-col { grid-template-columns: 1fr; } + } + + /* ========================================================================= + PAYMENT METHOD BARS + ========================================================================= */ + + .pay-method-row { + display: flex; + align-items: center; + gap: var(--space-4); + margin-bottom: var(--space-4); + } + + .pay-method-row:last-child { + margin-bottom: 0; + } + + .pay-method__label { + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-secondary); + min-width: 110px; + white-space: nowrap; + } + + .pay-method__bar-wrap { + flex: 1; + height: 10px; + background: var(--color-border); + border-radius: var(--radius-full); + overflow: hidden; + } + + [data-theme="industrial"] .pay-method__bar-wrap { + border-radius: 0; + } + + .pay-method__bar { + height: 100%; + background: var(--color-primary); + border-radius: var(--radius-full); + transition: width 0.6s var(--ease-in-out); + } + + [data-theme="industrial"] .pay-method__bar { + border-radius: 0; + } + + .pay-method__bar--b { background: var(--color-success); } + .pay-method__bar--c { background: var(--color-warning); } + .pay-method__bar--d { background: var(--color-primary-muted); border: 1px solid var(--color-primary); } + + [data-theme="industrial"] .pay-method__bar--d { + background: rgba(245, 166, 35, 0.2); + } + + .pay-method__val { + font-family: var(--font-mono); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + color: var(--color-text-primary); + min-width: 150px; + text-align: right; + white-space: nowrap; + } + + /* ========================================================================= + DUAL BAR CHART (Ingresos vs Egresos) + ========================================================================= */ + + .dual-bar-chart { + display: flex; + align-items: flex-end; + gap: var(--space-4); + height: 160px; + padding-bottom: var(--space-1); + } + + .dual-bar-group { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-1); + flex: 1; + height: 100%; + justify-content: flex-end; + } + + .dual-bar-cols { + display: flex; + align-items: flex-end; + gap: 3px; + width: 100%; + flex: 1; + } + + .dual-bar { + flex: 1; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + min-height: 4px; + transition: opacity var(--duration-fast) var(--ease-in-out); + } + + [data-theme="industrial"] .dual-bar { + border-radius: 0; + } + + .dual-bar:hover { + opacity: 0.8; + } + + .dual-bar--ingreso { + background: var(--color-success); + } + + .dual-bar--egreso { + background: var(--color-error); + } + + .dual-bar-group__label { + font-size: 0.65rem; + color: var(--color-text-muted); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + white-space: nowrap; + } + + .dual-chart-legend { + display: flex; + gap: var(--space-4); + margin-top: var(--space-3); + margin-bottom: var(--space-4); + } + + .legend-item { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .legend-dot { + width: 10px; + height: 10px; + border-radius: var(--radius-full); + flex-shrink: 0; + } + + .legend-dot--ingreso { background: var(--color-success); } + .legend-dot--egreso { background: var(--color-error); } + + /* ========================================================================= + MARGIN HELPERS + ========================================================================= */ + + .mb-4 { margin-bottom: var(--space-4); } + .mb-5 { margin-bottom: var(--space-5); } + + /* ========================================================================= + PRINT STYLES + ========================================================================= */ + + @media print { + .theme-bar, + .sidebar, + .tab-nav, + .filter-bar, + .content-header__actions, + .export-group, + .btn { + display: none !important; + } + + body { + overflow: visible !important; + font-size: 11pt; + color: #000; + background: #fff; + } + + .app-shell { + display: block; + padding-top: 0; + height: auto; + } + + .main-content { + overflow: visible; + height: auto; + } + + .content-body { + overflow: visible; + height: auto; + padding: 0; + } + + .tab-panel { + display: block !important; + } + + .kpi-card, + .table-card, + .bar-chart-card { + break-inside: avoid; + border: 1px solid #ccc !important; + box-shadow: none !important; + border-radius: 0 !important; + } + + .kpi-grid { + grid-template-columns: repeat(4, 1fr) !important; + } + + .data-table th, + .data-table td { + border: 1px solid #ddd; + color: #000; + background: #fff !important; + } + + .content-header__title { + color: #000; + font-size: 18pt; + } + + @page { + margin: 1.5cm; + size: A4 landscape; + } + } + + /* ========================================================================= + RESPONSIVE SIDEBAR COLLAPSE + ========================================================================= */ + + @media (max-width: 768px) { + .sidebar { + width: 56px; + } + + .sidebar .brand-name, + .sidebar .nav-item span, + .sidebar .nav-section-label, + .sidebar .profile-info { + display: none; + } + + .sidebar .nav-item { + justify-content: center; + padding: var(--space-3); + border-left: none; + border-bottom: 3px solid transparent; + } + + .sidebar .nav-item.is-active { + border-bottom-color: var(--color-primary); + } + + .sidebar__brand { + justify-content: center; + padding: var(--space-3); + } + + .sidebar__profile { + justify-content: center; + } + + .content-body { + padding: var(--space-4); + } + + .kpi-grid { + grid-template-columns: repeat(2, 1fr); + } + } diff --git a/pos/static/css/whatsapp.css b/pos/static/css/whatsapp.css new file mode 100644 index 0000000..faf275a --- /dev/null +++ b/pos/static/css/whatsapp.css @@ -0,0 +1,506 @@ +/* Extracted from whatsapp.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + LAYOUT: sidebar offset + full-height messenger + ========================================================================= */ + + .page-shell { + display: flex; + height: 100vh; + overflow: hidden; + } + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + } + + /* ========================================================================= + TOP BAR + ========================================================================= */ + + .top-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + padding: 0 var(--space-4); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .top-bar__title { + font-family: var(--font-heading); + font-size: var(--text-body); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .top-bar__title svg { + color: #25D366; + } + + .top-bar__actions { + display: flex; + gap: var(--space-2); + align-items: center; + } + + .top-bar__status { + display: flex; + align-items: center; + gap: 6px; + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-text-muted); + } + + .status-dot--ok { background: var(--color-success); } + .status-dot--warn { background: var(--color-warning); } + .status-dot--error { background: var(--color-error); } + + /* ========================================================================= + MESSENGER LAYOUT: conversations list + chat panel + ========================================================================= */ + + .messenger { + flex: 1; + display: flex; + overflow: hidden; + } + + /* ─── Left panel: conversation list ──────────────────────────────── */ + + .conv-panel { + width: 320px; + min-width: 260px; + display: flex; + flex-direction: column; + border-right: 1px solid var(--color-border); + background: var(--color-bg-elevated); + } + + .conv-panel__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .conv-panel__title { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + } + + .conv-panel__list { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, #222); + } + + .conv-item { + display: flex; + flex-direction: column; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: background var(--duration-fast) var(--ease-in-out); + } + + .conv-item:hover { + background: var(--color-surface-2, rgba(255,255,255,0.04)); + } + + .conv-item.is-active { + background: var(--color-primary-muted, rgba(245,166,35,0.12)); + border-left: 3px solid var(--color-primary); + } + + .conv-item__phone { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + } + + .conv-item__preview { + font-size: var(--text-caption); + color: var(--color-text-muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; + } + + .conv-item__time { + font-size: 0.6875rem; + color: var(--color-text-muted); + margin-top: 2px; + } + + .conv-item__delete { + position: absolute; + top: 8px; + right: 8px; + background: none; + border: none; + color: var(--color-text-muted); + font-size: 16px; + cursor: pointer; + opacity: 0; + transition: opacity 0.15s; + padding: 2px 6px; + border-radius: 4px; + } + .conv-item:hover .conv-item__delete { opacity: 1; } + .conv-item__delete:hover { color: #F85149; background: rgba(248,81,73,0.1); } + .conv-item { position: relative; } + + .conv-empty { + padding: var(--space-6); + text-align: center; + color: var(--color-text-muted); + font-size: var(--text-body-sm); + } + + /* ─── Right panel: chat view ─────────────────────────────────────── */ + + .chat-panel { + flex: 1; + display: flex; + flex-direction: column; + background: var(--color-bg-base); + } + + .chat-panel__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .chat-panel__phone { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body); + color: var(--color-text-primary); + } + + .chat-panel__actions { + display: flex; + gap: var(--space-2); + } + + .chat-panel__messages { + flex: 1; + overflow-y: auto; + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-2); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, #222); + } + + /* ─── Message bubbles ────────────────────────────────────────────── */ + + .msg-bubble { + max-width: 70%; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-md, 8px); + word-wrap: break-word; + line-height: 1.5; + } + + .msg-bubble--in { + align-self: flex-start; + background: var(--color-surface-2, rgba(255,255,255,0.06)); + color: var(--color-text-primary); + border-bottom-left-radius: var(--radius-xs, 2px); + } + + [data-theme="modern"] .msg-bubble--in { + background: var(--color-neutral-100); + } + + .msg-bubble--out { + align-self: flex-end; + background: var(--color-primary-muted, rgba(245,166,35,0.15)); + color: var(--color-text-primary); + border-bottom-right-radius: var(--radius-xs, 2px); + } + + [data-theme="modern"] .msg-bubble--out { + background: #dcf8c6; + color: #111; + } + + .msg-bubble__text { + font-size: var(--text-body-sm); + } + + .msg-bubble__meta { + font-size: 0.6875rem; + color: var(--color-text-muted); + margin-top: 4px; + text-align: right; + } + + .msg-status { + display: inline-block; + font-size: 0.625rem; + padding: 1px 4px; + border-radius: var(--radius-xs, 2px); + background: var(--color-surface-3, rgba(255,255,255,0.04)); + color: var(--color-text-muted); + margin-left: 4px; + } + + .chat-empty { + text-align: center; + color: var(--color-text-muted); + padding: var(--space-8); + } + + /* ─── Chat input bar ─────────────────────────────────────────────── */ + + .chat-input-bar { + display: flex; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + } + + .chat-input-bar textarea { + flex: 1; + resize: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-md, 8px); + background: var(--color-bg-base); + color: var(--color-text-primary); + padding: var(--space-2) var(--space-3); + font-family: var(--font-body); + font-size: var(--text-body-sm); + line-height: 1.4; + min-height: 40px; + max-height: 100px; + } + + .chat-input-bar textarea:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-muted, rgba(245,166,35,0.2)); + } + + .chat-input-bar textarea::placeholder { + color: var(--color-text-muted); + } + + /* ─── Buttons ────────────────────────────────────────────────────── */ + + .btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm, 4px); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-in-out); + white-space: nowrap; + } + + .btn:hover { + background: var(--color-surface-2, rgba(255,255,255,0.06)); + } + + .btn--primary { + background: var(--color-primary); + color: var(--color-text-inverse, #fff); + border-color: var(--color-primary); + } + + .btn--primary:hover { + opacity: 0.9; + } + + .btn--primary:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .btn--sm { + padding: 4px 8px; + font-size: var(--text-caption); + } + + .btn--whatsapp { + background: #25D366; + color: #fff; + border-color: #25D366; + } + + .btn--whatsapp:hover { + background: #1da851; + } + + /* ─── Empty state (no conversation selected) ─────────────────────── */ + + .empty-state { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--color-text-muted); + gap: var(--space-4); + } + + .empty-state svg { + opacity: 0.3; + } + + .empty-state__text { + font-size: var(--text-body); + text-align: center; + } + + .empty-state__hint { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ─── Connection / QR section ────────────────────────────────────── */ + + .connect-section { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-4); + padding: var(--space-6); + text-align: center; + } + + .connect-section__title { + font-family: var(--font-heading); + font-size: var(--text-h3, 1.25rem); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + } + + .connect-section__desc { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + max-width: 400px; + line-height: 1.5; + } + + .connect-section__qr { + border: 2px dashed var(--color-border); + border-radius: var(--radius-md, 8px); + padding: var(--space-4); + background: var(--color-bg-elevated); + min-width: 280px; + min-height: 280px; + display: flex; + align-items: center; + justify-content: center; + } + + .connect-section__qr img { + max-width: 256px; + max-height: 256px; + border-radius: var(--radius-sm, 4px); + } + + .connect-section__qr-placeholder { + color: var(--color-text-muted); + font-size: var(--text-body-sm); + } + + .connect-section__actions { + display: flex; + gap: var(--space-2); + } + + /* ─── Industrial theme cuts ──────────────────────────────────────── */ + + [data-theme="industrial"] .btn--primary { + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + [data-theme="industrial"] .msg-bubble--out { + clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); + } + + /* ─── Responsive ─────────────────────────────────────────────────── */ + + @media (max-width: 768px) { + .conv-panel { width: 100%; min-width: 0; } + .chat-panel { display: none; } + .messenger.has-active-chat .conv-panel { display: none; } + .messenger.has-active-chat .chat-panel { display: flex; } + } diff --git a/pos/static/css/whatsapp.min.css b/pos/static/css/whatsapp.min.css new file mode 100644 index 0000000..faf275a --- /dev/null +++ b/pos/static/css/whatsapp.min.css @@ -0,0 +1,506 @@ +/* Extracted from whatsapp.html */ + +/* ========================================================================= + BASE RESET & SHELL + ========================================================================= */ + + *, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + html, body { + height: 100%; + } + + body { + font-family: var(--font-body); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + background-color: var(--color-bg-base); + transition: background-color var(--duration-normal) var(--ease-in-out), + color var(--duration-normal) var(--ease-in-out); + overflow: hidden; + } + + [data-theme="modern"] body { + background-image: radial-gradient( + circle, + var(--dot-grid-color) 1px, + transparent 1px + ); + background-size: var(--dot-grid-size) var(--dot-grid-size); + } + + /* ========================================================================= + LAYOUT: sidebar offset + full-height messenger + ========================================================================= */ + + .page-shell { + display: flex; + height: 100vh; + overflow: hidden; + } + + .main-content { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; + } + + /* ========================================================================= + TOP BAR + ========================================================================= */ + + .top-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 48px; + padding: 0 var(--space-4); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .top-bar__title { + font-family: var(--font-heading); + font-size: var(--text-body); + font-weight: var(--font-weight-bold); + letter-spacing: var(--tracking-wide); + text-transform: uppercase; + color: var(--color-text-primary); + display: flex; + align-items: center; + gap: var(--space-2); + } + + .top-bar__title svg { + color: #25D366; + } + + .top-bar__actions { + display: flex; + gap: var(--space-2); + align-items: center; + } + + .top-bar__status { + display: flex; + align-items: center; + gap: 6px; + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + .status-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--color-text-muted); + } + + .status-dot--ok { background: var(--color-success); } + .status-dot--warn { background: var(--color-warning); } + .status-dot--error { background: var(--color-error); } + + /* ========================================================================= + MESSENGER LAYOUT: conversations list + chat panel + ========================================================================= */ + + .messenger { + flex: 1; + display: flex; + overflow: hidden; + } + + /* ─── Left panel: conversation list ──────────────────────────────── */ + + .conv-panel { + width: 320px; + min-width: 260px; + display: flex; + flex-direction: column; + border-right: 1px solid var(--color-border); + background: var(--color-bg-elevated); + } + + .conv-panel__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .conv-panel__title { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-secondary); + text-transform: uppercase; + letter-spacing: var(--tracking-wider); + } + + .conv-panel__list { + flex: 1; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, #222); + } + + .conv-item { + display: flex; + flex-direction: column; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--color-border); + cursor: pointer; + transition: background var(--duration-fast) var(--ease-in-out); + } + + .conv-item:hover { + background: var(--color-surface-2, rgba(255,255,255,0.04)); + } + + .conv-item.is-active { + background: var(--color-primary-muted, rgba(245,166,35,0.12)); + border-left: 3px solid var(--color-primary); + } + + .conv-item__phone { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body-sm); + color: var(--color-text-primary); + } + + .conv-item__preview { + font-size: var(--text-caption); + color: var(--color-text-muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-top: 2px; + } + + .conv-item__time { + font-size: 0.6875rem; + color: var(--color-text-muted); + margin-top: 2px; + } + + .conv-item__delete { + position: absolute; + top: 8px; + right: 8px; + background: none; + border: none; + color: var(--color-text-muted); + font-size: 16px; + cursor: pointer; + opacity: 0; + transition: opacity 0.15s; + padding: 2px 6px; + border-radius: 4px; + } + .conv-item:hover .conv-item__delete { opacity: 1; } + .conv-item__delete:hover { color: #F85149; background: rgba(248,81,73,0.1); } + .conv-item { position: relative; } + + .conv-empty { + padding: var(--space-6); + text-align: center; + color: var(--color-text-muted); + font-size: var(--text-body-sm); + } + + /* ─── Right panel: chat view ─────────────────────────────────────── */ + + .chat-panel { + flex: 1; + display: flex; + flex-direction: column; + background: var(--color-bg-base); + } + + .chat-panel__header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + background: var(--color-bg-elevated); + border-bottom: 1px solid var(--color-border); + flex-shrink: 0; + } + + .chat-panel__phone { + font-weight: var(--font-weight-semibold); + font-size: var(--text-body); + color: var(--color-text-primary); + } + + .chat-panel__actions { + display: flex; + gap: var(--space-2); + } + + .chat-panel__messages { + flex: 1; + overflow-y: auto; + padding: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-2); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, #444) var(--scrollbar-track, #222); + } + + /* ─── Message bubbles ────────────────────────────────────────────── */ + + .msg-bubble { + max-width: 70%; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-md, 8px); + word-wrap: break-word; + line-height: 1.5; + } + + .msg-bubble--in { + align-self: flex-start; + background: var(--color-surface-2, rgba(255,255,255,0.06)); + color: var(--color-text-primary); + border-bottom-left-radius: var(--radius-xs, 2px); + } + + [data-theme="modern"] .msg-bubble--in { + background: var(--color-neutral-100); + } + + .msg-bubble--out { + align-self: flex-end; + background: var(--color-primary-muted, rgba(245,166,35,0.15)); + color: var(--color-text-primary); + border-bottom-right-radius: var(--radius-xs, 2px); + } + + [data-theme="modern"] .msg-bubble--out { + background: #dcf8c6; + color: #111; + } + + .msg-bubble__text { + font-size: var(--text-body-sm); + } + + .msg-bubble__meta { + font-size: 0.6875rem; + color: var(--color-text-muted); + margin-top: 4px; + text-align: right; + } + + .msg-status { + display: inline-block; + font-size: 0.625rem; + padding: 1px 4px; + border-radius: var(--radius-xs, 2px); + background: var(--color-surface-3, rgba(255,255,255,0.04)); + color: var(--color-text-muted); + margin-left: 4px; + } + + .chat-empty { + text-align: center; + color: var(--color-text-muted); + padding: var(--space-8); + } + + /* ─── Chat input bar ─────────────────────────────────────────────── */ + + .chat-input-bar { + display: flex; + gap: var(--space-2); + padding: var(--space-3) var(--space-4); + border-top: 1px solid var(--color-border); + background: var(--color-bg-elevated); + flex-shrink: 0; + } + + .chat-input-bar textarea { + flex: 1; + resize: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-md, 8px); + background: var(--color-bg-base); + color: var(--color-text-primary); + padding: var(--space-2) var(--space-3); + font-family: var(--font-body); + font-size: var(--text-body-sm); + line-height: 1.4; + min-height: 40px; + max-height: 100px; + } + + .chat-input-bar textarea:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-muted, rgba(245,166,35,0.2)); + } + + .chat-input-bar textarea::placeholder { + color: var(--color-text-muted); + } + + /* ─── Buttons ────────────────────────────────────────────────────── */ + + .btn { + display: inline-flex; + align-items: center; + gap: 6px; + padding: var(--space-2) var(--space-3); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm, 4px); + background: var(--color-bg-elevated); + color: var(--color-text-primary); + font-family: var(--font-body); + font-size: var(--text-body-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: all var(--duration-fast) var(--ease-in-out); + white-space: nowrap; + } + + .btn:hover { + background: var(--color-surface-2, rgba(255,255,255,0.06)); + } + + .btn--primary { + background: var(--color-primary); + color: var(--color-text-inverse, #fff); + border-color: var(--color-primary); + } + + .btn--primary:hover { + opacity: 0.9; + } + + .btn--primary:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + .btn--sm { + padding: 4px 8px; + font-size: var(--text-caption); + } + + .btn--whatsapp { + background: #25D366; + color: #fff; + border-color: #25D366; + } + + .btn--whatsapp:hover { + background: #1da851; + } + + /* ─── Empty state (no conversation selected) ─────────────────────── */ + + .empty-state { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--color-text-muted); + gap: var(--space-4); + } + + .empty-state svg { + opacity: 0.3; + } + + .empty-state__text { + font-size: var(--text-body); + text-align: center; + } + + .empty-state__hint { + font-size: var(--text-caption); + color: var(--color-text-muted); + } + + /* ─── Connection / QR section ────────────────────────────────────── */ + + .connect-section { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--space-4); + padding: var(--space-6); + text-align: center; + } + + .connect-section__title { + font-family: var(--font-heading); + font-size: var(--text-h3, 1.25rem); + font-weight: var(--font-weight-bold); + color: var(--color-text-primary); + } + + .connect-section__desc { + font-size: var(--text-body-sm); + color: var(--color-text-muted); + max-width: 400px; + line-height: 1.5; + } + + .connect-section__qr { + border: 2px dashed var(--color-border); + border-radius: var(--radius-md, 8px); + padding: var(--space-4); + background: var(--color-bg-elevated); + min-width: 280px; + min-height: 280px; + display: flex; + align-items: center; + justify-content: center; + } + + .connect-section__qr img { + max-width: 256px; + max-height: 256px; + border-radius: var(--radius-sm, 4px); + } + + .connect-section__qr-placeholder { + color: var(--color-text-muted); + font-size: var(--text-body-sm); + } + + .connect-section__actions { + display: flex; + gap: var(--space-2); + } + + /* ─── Industrial theme cuts ──────────────────────────────────────── */ + + [data-theme="industrial"] .btn--primary { + clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); + } + + [data-theme="industrial"] .msg-bubble--out { + clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); + } + + /* ─── Responsive ─────────────────────────────────────────────────── */ + + @media (max-width: 768px) { + .conv-panel { width: 100%; min-width: 0; } + .chat-panel { display: none; } + .messenger.has-active-chat .conv-panel { display: none; } + .messenger.has-active-chat .chat-panel { display: flex; } + } diff --git a/pos/templates/accounting.html b/pos/templates/accounting.html index 8c3e17a..c3b9194 100644 --- a/pos/templates/accounting.html +++ b/pos/templates/accounting.html @@ -10,1253 +10,7 @@ - + diff --git a/pos/templates/catalog.html b/pos/templates/catalog.html index 9fa2b46..92ffb5c 100644 --- a/pos/templates/catalog.html +++ b/pos/templates/catalog.html @@ -13,561 +13,7 @@ - + diff --git a/pos/templates/config.html b/pos/templates/config.html index cd3da0c..17b9450 100644 --- a/pos/templates/config.html +++ b/pos/templates/config.html @@ -10,1128 +10,7 @@ - + @@ -1798,88 +677,6 @@ - - diff --git a/pos/templates/customers.html b/pos/templates/customers.html index 2eafc50..7038bd6 100644 --- a/pos/templates/customers.html +++ b/pos/templates/customers.html @@ -10,1559 +10,7 @@ - + diff --git a/pos/templates/dashboard.html b/pos/templates/dashboard.html index 436e53a..c6d9e46 100644 --- a/pos/templates/dashboard.html +++ b/pos/templates/dashboard.html @@ -10,1243 +10,7 @@ - + diff --git a/pos/templates/diagrams.html b/pos/templates/diagrams.html index 0df8e64..77a5023 100644 --- a/pos/templates/diagrams.html +++ b/pos/templates/diagrams.html @@ -13,466 +13,7 @@ - +
diff --git a/pos/templates/fleet.html b/pos/templates/fleet.html index 0456504..290d8aa 100644 --- a/pos/templates/fleet.html +++ b/pos/templates/fleet.html @@ -10,676 +10,7 @@ - + diff --git a/pos/templates/inventory.html b/pos/templates/inventory.html index e1e2ed3..53c4060 100644 --- a/pos/templates/inventory.html +++ b/pos/templates/inventory.html @@ -10,1308 +10,7 @@ - + diff --git a/pos/templates/invoicing.html b/pos/templates/invoicing.html index a416bc9..7e4f280 100644 --- a/pos/templates/invoicing.html +++ b/pos/templates/invoicing.html @@ -10,1346 +10,7 @@ - + diff --git a/pos/templates/login.html b/pos/templates/login.html index dc84172..3fb2b47 100644 --- a/pos/templates/login.html +++ b/pos/templates/login.html @@ -9,840 +9,7 @@ - + diff --git a/pos/templates/marketplace.html b/pos/templates/marketplace.html index 1e28b50..6344723 100644 --- a/pos/templates/marketplace.html +++ b/pos/templates/marketplace.html @@ -10,230 +10,7 @@ - + diff --git a/pos/templates/pos.html b/pos/templates/pos.html index e98551f..a9f54ab 100644 --- a/pos/templates/pos.html +++ b/pos/templates/pos.html @@ -12,991 +12,7 @@ - + diff --git a/pos/templates/quotations.html b/pos/templates/quotations.html index 036d210..8fa2a17 100644 --- a/pos/templates/quotations.html +++ b/pos/templates/quotations.html @@ -7,33 +7,7 @@ Cotizaciones — Nexus Autoparts POS - + diff --git a/pos/templates/reports.html b/pos/templates/reports.html index ad13820..8fd05bd 100644 --- a/pos/templates/reports.html +++ b/pos/templates/reports.html @@ -10,1541 +10,7 @@ - + diff --git a/pos/templates/whatsapp.html b/pos/templates/whatsapp.html index adb2edd..cdaf3cf 100644 --- a/pos/templates/whatsapp.html +++ b/pos/templates/whatsapp.html @@ -10,512 +10,7 @@ - + diff --git a/scripts/extract-inline-css.py b/scripts/extract-inline-css.py new file mode 100644 index 0000000..e40a99a --- /dev/null +++ b/scripts/extract-inline-css.py @@ -0,0 +1,110 @@ +#!/usr/bin/env python3 +"""Extract inline block with a tag. +This allows browsers to cache CSS across page navigations and dramatically +reduces HTML payload size. + +Usage: + python3 extract-inline-css.py +""" + +import glob +import re +from pathlib import Path + + +def extract_css_from_template(html_path, css_output_dir, css_url_prefix): + """Extract ', + html, + re.DOTALL | re.IGNORECASE + )) + + if not style_blocks: + return html # No inline CSS to extract + + # Extract all CSS content + css_parts = [] + for m in style_blocks: + css = m.group(1).strip() + if css: + css_parts.append(css) + + if not css_parts: + return html + + # Write external CSS file + name = Path(html_path).stem + css_filename = f"{name}.css" + css_path = Path(css_output_dir) / css_filename + css_path.parent.mkdir(parents=True, exist_ok=True) + + combined_css = '\n\n'.join(css_parts) + with open(css_path, 'w', encoding='utf-8') as f: + f.write(f"/* Extracted from {Path(html_path).name} */\n\n") + f.write(combined_css) + f.write('\n') + + # Replace first