/** * kTS System Dashboard — A+D Hybrid Light ThemeCorporate + Vibrant Light with design tokens and modern gradients/ :root { /* Background colors/ --bg-deep: #f3f4f8; --bg-panel: #ffffff; --bg-card: #ffffff; --bg-hover: #f0f1f5; --bg-input: #f5f6fa; /* Borders/ --border: #e2e4ea; --border-light: #d0d3dd; /* Text colors/ --text-primary: #111827; --text-secondary: #4b5563; --text-muted: #9ca3af; --text-dim: #d1d5db; /* Brand accents/ --secrets: #ff9800; --herbera: #2563eb; --go: #e91e63; /* Status colors/ --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #2563eb; /* Accent/ --accent: #4f56f6; --accent-hover: #4338ca; --accent-light: rgba(79, 86, 246, 0.27); --accent-gradient: linear-gradient(135deg, #4f56f6, #7c3aed); /* Topbar accent gradient/ --topbar-accent: linear-gradient(90deg, #4f56f6, #7c3aed, #ff9800); } * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================================================ BASE LAYOUT ============================================================================/ body { background-color: var(--bg-deep); color: var(--text-primary); font-family: 'Plus Jakarta Sans', 'Work Sans', -apple-system, system-ui, sans-serif; font-size: 14px; line-height: 1.5; } /* ============================================================================ SIDEBAR NAVIGATION ============================================================================/ .sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; background-color: var(--bg-panel); z-index: 100; overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--border); } .sidebar-header { padding: 20px 16px; background-color: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .sidebar-header::before { content: ''; width: 32px; height: 32px; background: var(--accent-gradient); border-radius: 8px; flex-shrink: 0; } .sidebar-header-text { color: var(--text-primary); font-weight: 600; font-size: 16px; } .sidebar-nav { list-style: none; padding: 12px 0; } .nav-item { padding: 12px 16px; margin: 4px 8px; border-radius: 6px; cursor: pointer; transition: all 200ms ease; color: var(--text-secondary); text-decoration: none; display: flex; align-items: center; gap: 10px; } .nav-item:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nav-item.active { background-color: var(--accent-light); color: var(--accent); font-weight: 500; border-left: 3px solid var(--accent); padding-left: 13px; } .nav-item a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 10px; width: 100%; } .nav-sub { list-style: none; margin-top: 4px; margin-left: 12px; border-left: 1px solid var(--border); padding-left: 12px; } .nav-sub-item { padding: 8px 12px; margin: 2px 0; border-radius: 4px; color: var(--text-muted); font-size: 13px; transition: all 200ms ease; cursor: pointer; } .nav-sub-item:hover { background-color: var(--bg-hover); color: var(--text-secondary); } .nav-sub-item.active { color: var(--accent); font-weight: 500; } .badge { display: inline-block; min-width: 22px; height: 22px; padding: 2px 6px; background-color: var(--accent); color: #fff; border-radius: 11px; font-size: 11px; font-weight: 600; text-align: center; line-height: 18px; margin-left: auto; } /* ============================================================================ MAIN CONTENT ============================================================================/ .main-content { margin-left: 240px; padding: 24px; min-height: 100vh; background-color: var(--bg-deep); } .header { margin-bottom: 32px; } .header h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; } .header p { color: var(--text-muted); font-size: 14px; } .topbar-accent { height: 2px; background: var(--topbar-accent); border-radius: 1px; margin-bottom: 16px; } /* ============================================================================ TABLES & TICKET LISTS ============================================================================/ .table-container { overflow-x: auto; background-color: var(--bg-panel); border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } table { width: 100%; border-collapse: collapse; } thead { background-color: #f9fafb; border-bottom: 1px solid var(--border); } th { padding: 12px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.5px; } td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); } tbody tr { transition: background-color 200ms ease; } tbody tr:hover { background-color: var(--bg-hover); } /* ============================================================================ BRAND-SPECIFIC HIGHLIGHTING (CRITICAL) ============================================================================/ /* Secrets of Tea - Orange/ .brand-secrets { background-color: rgba(255, 152, 0, 0.06); border-left: 3px solid var(--secrets); } .brand-secrets:hover { background-color: rgba(255, 152, 0, 0.1); } .bn-secrets { color: var(--secrets); font-weight: 600; } /* Herb-Era - Blue/ .brand-herbera { background-color: rgba(37, 99, 235, 0.06); border-left: 3px solid var(--herbera); } .brand-herbera:hover { background-color: rgba(37, 99, 235, 0.1); } .bn-herbera { color: var(--herbera); font-weight: 600; } /* Gardenix Decor - Pink/ .brand-gardenix { background-color: rgba(233, 30, 99, 0.06); border-left: 3px solid var(--go); } .brand-gardenix:hover { background-color: rgba(233, 30, 99, 0.1); } .bn-gardenix { color: var(--go); font-weight: 600; } /* Scooby Crafts - Green/ .brand-scooby { background-color: rgba(5, 150, 105, 0.06); border-left: 3px solid var(--success); } .brand-scooby:hover { background-color: rgba(5, 150, 105, 0.1); } .bn-scooby { color: var(--success); font-weight: 600; } /* ============================================================================ BADGES & STATUS ============================================================================/ .status-badge { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .status-open{ background-color: rgba(5, 150, 105, 0.1); color: var(--success); border: 1px solid rgba(5, 150, 105, 0.2); } .status-closed { background-color: rgba(156, 163, 175, 0.1); color: var(--text-muted); border: 1px solid rgba(156, 163, 175, 0.2); } .status-waiting { background-color: rgba(217, 119, 6, 0.1); color: var(--warning); border: 1px solid rgba(217, 119, 6, 0.2); } .status-spam { background-color: rgba(220, 38, 38, 0.1); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.2); } .status-escalated { background-color: rgba(255, 152, 0, 0.1); color: var(--secrets); border: 1px solid rgba(255, 152, 0, 0.2); } .priority-high { color: var(--danger); border: 1px solid var(--danger); padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 11px; } .priority-medium { color: var(--warning); border: 1px solid var(--warning); padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 11px; } .priority-low { color: var(--success); border: 1px solid var(--success); padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 11px; } /* ============================================================================ CARDS & PANELS ============================================================================/ .card { background-color: var(--bg-panel); border-radius: 10px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border: 1px solid var(--border); } .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .detail-grid { display: grid; grid-template-columns: 60% 40%; gap: 20px; margin-bottom: 20px; } @media (max-width: 1024px) { .detail-grid { grid-template-columns: 1fr; } } .detail-field { margin-bottom: 12px; } .detail-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; letter-spacing: 0.5px; } .detail-value{ color: var(--text-primary); word-break: break-word; } .message-thread { list-style: none; display: flex; flex-direction: column; gap: 16px; } .message { padding: 12px 16px; border-radius: 6px; max-width: 80%; word-wrap: break-word; transition: all 200ms ease; } .message.inbound { align-self: flex-start; background-color: rgba(37, 99, 235, 0.06); border-left: 3px solid var(--herbera); color: var(--text-primary); } .message.outbound { align-self: flex-end; background-color: var(--accent-light); border-right: 3px solid var(--accent); color: var(--text-primary); } .message-meta { font-size: 11px; color: var(--text-muted); margin-top: 6px; } /* ============================================================================ FORMS & INPUTS ============================================================================/ input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], textarea, select { width: 100%; padding: 10px 12px; background-color: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 14px; transition: border-color 200ms ease, box-shadow 200ms ease; margin-bottom: 12px; } input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } textarea { resize: vertical; min-height: 100px; } label { display: block; margin-bottom: 6px; color: var(--accent); font-weight: 600; font-size: 13px; } .form-group { margin-bottom: 16px; } /* ============================================================================ BUTTONS ============================================================================/ .btn { display: inline-block; padding: 10px 16px; border: none; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 200ms ease; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent-gradient); color: #fff; } .btn-primary:hover { box-shadow: 0 6px 16px rgba(79, 86, 246, 0.3); } .btn-approve { background-color: var(--success); color: #fff; } .btn-approve:hover { background-color: #047857; } .btn-reject { background-color: var(--danger); color: #fff; } .btn-reject:hover { background-color: #991b1b; } .btn-edit { background-color: var(--herbera); color: #fff; } .btn-edit:hover { background-color: #1d4ed8; } .btn-secondary { background-color: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); } .btn-secondary:hover { background-color: var(--border); color: var(--text-primary); } .btn-sm { padding: 6px 10px; font-size: 11px; } .btn-block { width: 100%; display: block; text-align: center; } /* ============================================================================ FILTERS & CONTROLS ============================================================================/ .filter-bar { display: flex; gap: 12px; padding: 16px; background-color: var(--bg-panel); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; align-items: center; } .filter-group { display: flex; gap: 8px; align-items: center; } .filter-select { min-width: 150px; } .filter-label { color: var(--text-muted); font-size: 13px; font-weight: 500; } /* ============================================================================ PAGINATION ============================================================================/ .pagination { display: flex; justify-content: center; gap: 8px; padding: 16px 0; margin-top: 20px; } .pagination a, .pagination span { padding: 8px 12px; border-radius: 4px; border: 1px solid var(--border); color: var(--accent); text-decoration: none; transition: all 200ms ease; font-weight: 500; cursor: pointer; } .pagination a:hover { background-color: var(--accent-light); } .pagination .current { background-color: var(--accent); color: #fff; border-color: var(--accent); } .pagination .disabled { color: var(--text-muted); border-color: var(--border); cursor: not-allowed; opacity: 0.5; } /* ============================================================================ UTILITIES ============================================================================/ .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: var(--text-muted); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .hidden { display: none !important; } .no-data { text-align: center; padding: 40px 20px; color: var(--text-muted); } .no-data-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } /* ============================================================================ SETTINGS PAGE — Tabs, Forms, Cards, Integrations, Audit ============================================================================/ .settings-page { padding: 28px 32px; max-width: 920px; } .page-header { margin-bottom: 20px; } .page-header h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; margin: 0; } .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; } /* Settings Tabs/ .settings-tabs{ display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 24px; border-bottom: 2px solid var(--border); padding-bottom: 0; } .tab-btn { padding: 10px 18px; border: none; background: transparent; cursor: pointer; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; border-radius: 6px 6px 0 0; } .tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: var(--accent-light); } .tab-panel{ display: none; animation: fadeIn .2s ease; } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Settings Cards/ .settings-card { background: white; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .card-header { padding: 16px 22px; border-bottom: 1px solid var(--border); } .card-header h3 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; } .card-body { padding: 22px; } /* Settings Forms/ .settings-form{ display: flex; flex-direction: column; gap: 18px; } .form-row { display: flex; flex-direction: column; gap: 5px; } .form-row label { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 0; } .form-input { padding: 9px 14px; border: 1px solid var(--border-light); border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 14px; background: var(--bg-input); transition: all .15s; width: 100%; margin-bottom: 0; } .form-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-light); background: white; } .form-help { font-size: 12px; color: var(--text-muted); } .form-actions { padding-top: 6px; } .checkbox-row label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* Config read-only display/ .config-display{ display: flex; flex-direction: column; gap: 8px; } .config-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg-input); border-radius: 8px; } .config-label { font-weight: 600; font-size: 13px; } .config-value{ font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .ro-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #f3f4f6; color: #9ca3af; text-transform: uppercase; letter-spacing: .3px; } /* Mode badges/ .mode-display{ padding: 10px; background: var(--bg-input); border-radius: 8px; } .mode-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; } .mode-badge.shadow-mode { background: #eff6ff; color: #1d4ed8; } .mode-badge.shadow-mode::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; display: inline-block; } .mode-badge.live-mode { background: #f0fdf4; color: #166534; } .mode-badge.live-mode::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Brands/ .brands-list{ display: flex; flex-wrap: wrap; gap: 8px; } .brand-tag{ padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 12px; } .brand-tag.brand-secrets { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; } .brand-tag.brand-herbera { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .brand-tag.brand-gardenix { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .brand-tag.brand-scooby { background: #fdf4ff; color: #86198f; border: 1px solid #f0abfc; } /* Data table (backups etc)/ .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; padding: 12px 16px; background: var(--bg-input); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .data-table td { padding: 12px 16px; border-bottom: 1px solid #f0f1f3; font-size: 13px; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: #fafbfc; } code { background: #f3f4f6; padding: 2px 7px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6b21a8; } /* Integrations Tab/ .category-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .category-section { margin-bottom: 28px; } .integration-card { background: white; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: box-shadow .15s; } .integration-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); } .integration-card.status-connected { border-left: 3px solid #22c55e; } .integration-card.status-partial { border-left: 3px solid #f59e0b; } .integration-card.status-not_configured { border-left: 3px solid #d1d5db; } .intg-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; } .intg-name { font-weight: 700; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif; } .intg-desc { font-size: 12px; color: var(--text-muted); } .intg-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; } .intg-connected { background: #f0fdf4; color: #166534; } .intg-partial { background: #fffbeb; color: #92400e; } .intg-not_configured { background: #f3f4f6; color: #6b7280; } .intg-vars { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 4px; } .var-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg-input); border-radius: 6px; font-size: 12px; } .var-name { font-family: 'JetBrains Mono', monospace; font-weight: 500; min-width: 260px; color: var(--text-primary); } .var-value{ flex: 1; font-family: 'JetBrains Mono', monospace; } .var-set { color: #166534; } .var-missing { color: #dc2626; } .var-badge { padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .var-required { background: #fef2f2; color: #991b1b; } .var-optional { background: #f3f4f6; color: #6b7280; } /* Audit Log Tab/ .action-badge { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: #f3f4f6; color: #374151; } .action-badge.settings { background: #eff6ff; color: #1d4ed8; } .action-badge.user { background: #ede9fe; color: #6d28d9; } .time-cell { white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); } /* Info card / .info-card { background: #f0f8ff; border-color: #bfdbfe; } .info-card .card-body { font-size: 13px; color: var(--text-secondary); } .info-card p { margin: 6px 0; } /* Userspage / .user-table { width: 100%; border-collapse: collapse; } .user-table th { text-align: left; padding: 12px 16px; background: var(--bg-input); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); border-bottom: 1px solid var(--border); } .user-table td { padding: 12px 16px; border-bottom: 1px solid #f0f1f3; font-size: 13px; } .user-table tr:hover td { background: #fafbfc; } .role-badge { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 700; } .role-badge.admin { background: #ede9fe; color: #6d28d9; } .role-badge.agent { background: #eff6ff; color: #1d4ed8; } .role-badge.viewer { background: #f3f4f6; color: #6b7280; } .status-active { color: #166534; } .status-inactive { color: #991b1b; } /* Button refinementsfor settings context/ .btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); } .btn-outline:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); } /* ============================================================================ LOGIN PAGE ============================================================================/ .login-page { display: flex; align-items: center; justify-content: center; min-height: 80vh; } .login-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 40px; max-width: 420px; width: 100%; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .login-header { text-align: center; margin-bottom: 28px; } .login-header h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; } .login-header p { color: var(--text-muted); font-size: 14px; } .login-form.form-group { margin-bottom: 18px; } .login-form.btn-primary { width: 100%; padding: 12px; font-size: 14px; margin-top: 8px; } /* ============================================================================ PAGE-LEVEL CONTAINERS ============================================================================/ .tickets-page, .orders-page, .customers-page, .qa-page, .learning-page, .insights-page, .morning-page, .health-page, .sla-page, .shadow-page, .cutover-page, .accounts-page, .quotes-page, .runs-page, .kb-page, .corrections-page, .ticket-detail-page, .account-detail-page, .quote-detail-page, .kb-detail-page, .order-detail-page { max-width: 1400px; } /* ============================================================================ SEARCH BARS ============================================================================/ .search-bar { margin-bottom: 20px; } .search-form{ display: flex; gap: 10px; align-items: center; } .search-group { display: flex; gap: 8px; flex: 1; max-width: 500px; } .search-group .search-input, .search-group input[type="text"] { flex: 1; margin-bottom: 0; } /* ============================================================================ FILTER FORMS (enhanced) ============================================================================/ .filter-form{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; } .filter-form.filter-group { display: flex; align-items: center; gap: 8px; } .filter-form.filter-group label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 0; white-space: nowrap; } .filter-form.filter-group select, .filter-form.filter-group input { margin-bottom: 0; min-width: 140px; } .filter-form.btn { margin-bottom: 0; } /* ============================================================================ SUMMARY / METRIC CARDS GRID ============================================================================/ .summary-cards, .qa-cards, .sla-cards, .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .summary-card, .qa-card, .sla-card, .metric-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s, transform 0.2s; } .summary-card:hover, .qa-card:hover, .sla-card:hover, .metric-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .summary-card.alert { border-left: 3px solid var(--danger); background: #fef2f2; } .card-number, .qa-number, .sla-number, .stat-value{ font-size: 32px; font-weight: 800; color: var(--text-primary); font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.1; margin-bottom: 6px; } .card-label, .qa-label, .sla-label, .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .qa-subtext, .sla-details { font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* SLA card variants/ .sla-card.breached { border-left: 3px solid var(--danger); } .sla-card.at-risk { border-left: 3px solid var(--warning); } .sla-card.on-track { border-left: 3px solid var(--success); } /* ============================================================================ LARGE METRICS (Learning, Insights) ============================================================================/ .large-metric { text-align: center; padding: 16px 0; } .large-metric .metric-value, .metric-card .metric-value{ font-size: 36px; font-weight: 800; color: var(--accent); font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1.1; } .large-metric .metric-label, .metric-card .metric-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-top: 6px; } .metric-unit { font-size: 14px; color: var(--text-muted); font-weight: 500; } .metric-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f1f3; } .metric-row:last-child { border-bottom: none; } .metric-row .label { font-weight: 500; color: var(--text-secondary); } .metric-row .value{ font-weight: 700; color: var(--text-primary); } /* Accuracy badges/ .accuracy-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; } .accuracy-badge.high { background: #f0fdf4; color: #166534; } .accuracy-badge.medium { background: #fffbeb; color: #92400e; } .accuracy-badge.low { background: #fef2f2; color: #991b1b; } /* ============================================================================ TABS (Insights, shared) ============================================================================/ .tabs-header { margin-bottom: 24px; } .tabs-nav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--border); padding-bottom: 0; } .tab-button { padding: 10px 18px; border: none; background: transparent; cursor: pointer; font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; border-radius: 6px 6px 0 0; } .tab-button:hover { background: var(--bg-hover); color: var(--text-primary); } .tab-button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: var(--accent-light); } .tabs-content .tab-content { display: none; animation: fadeIn .2s ease; } .tabs-content .tab-content.active { display: block; } /* ============================================================================ HEALTH CHECK GRID ============================================================================/ .checks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 20px; } .check-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .check-card .check-name { font-weight: 700; font-size: 14px; margin-bottom: 6px; } .check-card .check-message { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; } .check-card .check-time { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .status-healthy { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; } .status-degraded { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; } .status-unhealthy { color: #991b1b; background: #fef2f2; border: 1px solid #fca5a5; } /* ============================================================================ MORNING REVIEW ============================================================================/ .generated-at { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; } .escalated-row { background-color: rgba(220, 38, 38, 0.05) !important; border-left: 3px solid var(--danger); } .breached-row { background-color: rgba(220, 38, 38, 0.05) !important; border-left: 3px solid var(--danger); } .at-risk-row { background-color: rgba(217, 119, 6, 0.05) !important; border-left: 3px solid var(--warning); } .corrections-note { font-size: 13px; color: var(--text-secondary); padding: 10px 14px; background: #fffbeb; border-radius: 8px; border: 1px solid #fde68a; margin-top: 12px; } /* ============================================================================ TICKET DETAIL ============================================================================/ .ticket-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; margin-top: 16px; } @media (max-width: 1024px) { .ticket-layout { grid-template-columns: 1fr; } } .ticket-metadata { display: flex; flex-direction: column; gap: 16px; } .metadata-card, .draft-card, .response-card, .review-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .metadata-card h3, .draft-card h3, .response-card h3, .review-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-family: 'Plus Jakarta Sans', sans-serif; } .draft-card { border-left: 3px solid var(--warning); } .response-card { border-left: 3px solid var(--accent); } .review-card { border-left: 3px solid var(--success); } .review-actions { display: flex; gap: 10px; margin-top: 12px; } .edit-section { margin-top: 12px; } .notes-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } /* ============================================================================ CUSTOMER DETAIL ============================================================================/ .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } .profile-item { padding: 10px 14px; background: var(--bg-input); border-radius: 8px; } .profile-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; } .profile-value{ font-size: 14px; color: var(--text-primary); font-weight: 500; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } /* ============================================================================ ORDER DETAIL ============================================================================/ .order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } @media (max-width: 768px) { .order-detail-grid { grid-template-columns: 1fr; } } .detail-section { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .detail-section h3 { font-size: 14px; font-weight: 700; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-family: 'Plus Jakarta Sans', sans-serif; } .currency, .currency-format { font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); } .tracking-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #eff6ff; color: #1d4ed8; font-family: 'JetBrains Mono', monospace; } /* ============================================================================ ACTIVITY LOG / TIMELINE ============================================================================/ .activity-log { list-style: none; padding: 0; } .activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f1f3; } .activity-item:last-child { border-bottom: none; } .activity-type { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; background: #f3f4f6; color: #6b7280; white-space: nowrap; flex-shrink: 0; } .activity-body { flex: 1; font-size: 13px; color: var(--text-secondary); } .activity-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; } /* ============================================================================ WHOLESALE CRM ============================================================================/ .contacts-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; } .contact-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .contact-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .contact-role { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 8px; } .contact-email, .contact-phone { font-size: 13px; color: var(--text-secondary); margin-bottom: 2px; } .customer-email-link, .order-id-link { color: var(--accent); text-decoration: none; font-weight: 600; } .customer-email-link:hover, .order-id-link:hover { text-decoration: underline; } /* Quote detail/ .quote-totals { background: var(--bg-input); border-radius: 10px; padding: 18px; margin-top: 16px; } .total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; } .total-row.grand-total { font-size: 18px; font-weight: 800; color: var(--accent); padding-top: 12px; margin-top: 8px; border-top: 2px solid var(--border); } /* Quote status badges/ .status-draft { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; } .status-sent { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .status-accepted { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .status-rejected { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; } .status-pending { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; } .status-processing { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .status-shipped { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .status-delivered { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .status-cancelled { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; } .status-new { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } /* ============================================================================ SHADOW / CUTOVER ============================================================================/ .readiness-badge { display: inline-block; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; } .readiness-badge.ready { background: #f0fdf4; color: #166534; } .readiness-badge.not-ready { background: #fef2f2; color: #991b1b; } .gate-pass { color: #166534; font-weight: 700; } .gate-fail{ color: #dc2626; font-weight: 700; } .daily-trend-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; } .trend-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .match-rate-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 14px; } .match-rate-high { background: #f0fdf4; color: #166534; } .match-rate-medium { background: #fffbeb; color: #92400e; } .match-rate-low { background: #fef2f2; color: #991b1b; } /* Cutover timeline / .cutover-timeline { display: flex; gap: 0; margin: 24px 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); } .timeline-phase { flex: 1; padding: 14px 18px; text-align: center; font-size: 13px; font-weight: 600; border-right: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); } .timeline-phase:last-child { border-right: none; } .timeline-phase.phase-complete { background: #f0fdf4; color: #166534; } .timeline-phase.phase-current { background: var(--accent-light); color: var(--accent); font-weight: 700; } .timeline-phase.phase-pending { background: var(--bg-input); color: var(--text-muted); } /* ============================================================================ HEATMAP TABLE (Insights) ============================================================================/ .heatmap-table { width: 100%; border-collapse: collapse; } .heatmap-table td, .heatmap-table th { padding: 6px 8px; text-align: center; font-size: 11px; } .heatmap-cell { border-radius: 3px; min-width: 32px; transition: opacity 0.2s; } /* ============================================================================ KNOWLEDGE BASE ============================================================================/ .doc-category { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; background: #ede9fe; color: #6d28d9; } .doc-title a { color: var(--accent); text-decoration: none; font-weight: 600; } .doc-title a:hover { text-decoration: underline; } .doc-chunks { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } .chunk { padding: 14px 18px; margin-bottom: 12px; background: var(--bg-input); border-radius: 8px; border-left: 3px solid var(--accent-light); } .chunk-idx { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; } .chunk-text{ font-size: 14px; line-height: 1.7; color: var(--text-primary); } .chunk-metadata { font-size: 11px; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } /* ============================================================================ MODAL DIALOGS ============================================================================/ .modal-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal-card { background: var(--bg-panel); border-radius: 12px; padding: 0; max-width: 520px; width: 90%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); overflow: hidden; } .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-header h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; margin: 0; } .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 4px; line-height: 1; } .modal-close:hover { color: var(--text-primary); } .modal-body { padding: 24px; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } /* ============================================================================ EMPTY STATE & LOADING ============================================================================/ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state::before { content: '📋'; display: block; font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .loading { text-align: center; padding: 40px 20px; color: var(--text-muted); } .loading::after { content: ''; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ ADDITIONAL BADGE VARIANTS ============================================================================/ .badge-info { background: #eff6ff; color: #1d4ed8; } .badge-secondary { background: #f3f4f6; color: #6b7280; } .badge-ai { background: #ede9fe; color: #6d28d9; } .badge-success { background: #f0fdf4; color: #166534; } .badge-warning { background: #fffbeb; color: #92400e; } .badge-danger { background: #fef2f2; color: #991b1b; } /* ============================================================================ BUTTON ENHANCEMENTS ============================================================================/ .btn-success { background-color: var(--success); color: #fff; } .btn-success:hover { background-color: #047857; } .btn-danger { background-color: var(--danger); color: #fff; } .btn-danger:hover { background-color: #991b1b; } /* ============================================================================ TABLE LINK STYLING &KET DETACOUNTS ============================================================================/ .ticket-count, .doc-count { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .ticket-subject { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ticket-subject a { color: var(--text-primary); text-decoration: none; font-weight: 500; } .ticket-subject a:hover { color: var(--accent); text-decoration: underline; } /* Page header enhancements/ .page-header h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; margin: 0; } .page-header .page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; } /* Time range selectors/ .time-range-selector { display: flex; gap: 8px; margin-bottom: 20px; } .time-range-selector select { margin-bottom: 0; min-width: 160px; } /* ============================================================================ PASSWORD CHANGE PAGE ============================================================================/ .password-requirements{ list-style: none; padding: 0; margin: 12px 0; } .requirement-item { padding: 4px 0; font-size: 13px; display: flex; align-items: center; gap: 8px; } .requirement-met { color: #166534; } .requirement-unmet { color: var(--text-muted); } /* ============================================================================ RUNS LIST &KDETAIL ============================================================================/ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; } .summary-item { padding: 14px; background: var(--bg-input); border-radius: 8px; text-align: center; } .summary-counts { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .count-item { padding: 8px 16px; background: var(--bg-input); border-radius: 8px; font-size: 13px; font-weight: 600; } .numeric { text-align: center; font-family: 'JetBrains Mono', monospace; } /* ============================================================================ RESPONSIVEKDETSIGN ============================================================================/ /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ @media (max-width: 768px) { .sidebar { width: 220px; } .main-content { margin-left: 220px; padding: 16px; } .header h1 { font-size: 22px; } .table-container { font-size: 12px; } td, th { padding: 8px; } .filter-bar { flex-direction: column; align-items: stretch; } .filter-select { width: 100%; } .detail-grid { grid-template-columns: 1fr; } .message { max-width: 100%; } .pagination { gap: 4px; } .pagination a, .pagination span { padding: 6px 8px; font-size: 12px; } } @media (max-width: 480px) { .sidebar { width: 200px; font-size: 13px; } .main-content { margin-left: 200px; padding: 12px; } .header h1 { font-size: 18px; } .card { padding: 16px; } .btn { width: 100%; display: block; text-align: center; margin-bottom: 8px; } .badge { min-width: 20px; height: 20px; font-size: 10px; line-height: 16px; } input[type="text"], input[type="email"], textarea, select { font-size: 16px; } }