Hugging Face's logo

Spaces:
sinukarta
/
jjaa
Running

App Files Community
sinukarta commited on
Commit
20206fb
·
verified ·
1 Parent(s): db0a7ec

Upload 4 files

Browse files
Files changed (5) hide show
  1. .gitattributes +1 -0
  2. app.js +0 -0
  3. download-2.png +3 -0
  4. index.html +197 -19
  5. style.css +2014 -15
.gitattributes CHANGED
@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ download-2.png filter=lfs diff=lfs merge=lfs -text
app.js ADDED
The diff for this file is too large to render. See raw diff
 
download-2.png ADDED

Git LFS Details

  • SHA256: 6c9471f35ba84f8fa7f7a130703cd679d37a898250789c70baacd94e723d1fb5
  • Pointer size: 131 Bytes
  • Size of remote file: 172 kB
index.html CHANGED
@@ -1,19 +1,197 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>JJAA ERP System - PT Juang Jaya Abadi Alam</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ </head>
9
+ <body>
10
+ <!-- Header -->
11
+ <header class="header">
12
+ <div class="header-left">
13
+ <button class="menu-toggle" id="menuToggle">
14
+ <span>☰</span>
15
+ </button>
16
+ <div class="logo">
17
+ <a href="#" class="logo-link" data-module="dashboard">
18
+ <img src="download-2.jpg" alt="PT Juang Jaya Abadi Alam Logo" class="jjaa-logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
19
+ <span style="display:none; font-size: 18px; font-weight: 600; color: var(--color-text);">PT JJAA</span>
20
+ </a>
21
+ </div>
22
+ </div>
23
+ <div class="header-center">
24
+ <div class="search-box">
25
+ <input type="text" placeholder="Search anything..." id="globalSearch">
26
+ <span class="search-icon">🔍</span>
27
+ </div>
28
+ </div>
29
+ <div class="header-right">
30
+ <div class="location-selector">
31
+ <select id="locationFilter">
32
+ <option value="all">All Locations</option>
33
+ <option value="lampung">Lampung Selatan (HQ)</option>
34
+ <option value="medan">Medan (Branch)</option>
35
+ <option value="jakarta">Jakarta (Sales Office)</option>
36
+ </select>
37
+ </div>
38
+ <div class="notifications">
39
+ <button class="notification-btn">
40
+ <span>🔔</span>
41
+ <span class="badge">8</span>
42
+ </button>
43
+ </div>
44
+ <div class="user-profile">
45
+ <button class="profile-btn">
46
+ <span class="avatar">👤</span>
47
+ <span class="user-name">Admin</span>
48
+ <span class="dropdown-arrow">▼</span>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </header>
53
+
54
+ <!-- Sidebar -->
55
+ <aside class="sidebar" id="sidebar">
56
+ <nav class="sidebar-nav">
57
+ <a href="#" class="nav-item active" data-module="dashboard">
58
+ <span class="nav-icon">🏠</span>
59
+ <span class="nav-text">Dashboard</span>
60
+ </a>
61
+ <a href="#" class="nav-item" data-module="finance">
62
+ <span class="nav-icon">💰</span>
63
+ <span class="nav-text">Finance &amp; Accounting</span>
64
+ </a>
65
+ <a href="#" class="nav-item" data-module="inventory">
66
+ <span class="nav-icon">📦</span>
67
+ <span class="nav-text">Inventory Management</span>
68
+ </a>
69
+ <a href="#" class="nav-item" data-module="warehouse">
70
+ <span class="nav-icon">🏭</span>
71
+ <span class="nav-text">Warehouse Management</span>
72
+ </a>
73
+ <a href="#" class="nav-item" data-module="procurement">
74
+ <span class="nav-icon">🛒</span>
75
+ <span class="nav-text">Procurement &amp; PPIC</span>
76
+ </a>
77
+ <a href="#" class="nav-item" data-module="hr">
78
+ <span class="nav-icon">👥</span>
79
+ <span class="nav-text">Human Resources</span>
80
+ </a>
81
+ <a href="#" class="nav-item" data-module="crm">
82
+ <span class="nav-icon">🤝</span>
83
+ <span class="nav-text">Customer Relationship</span>
84
+ </a>
85
+ <a href="#" class="nav-item" data-module="scm">
86
+ <span class="nav-icon">🚚</span>
87
+ <span class="nav-text">Supply Chain Management</span>
88
+ </a>
89
+ <a href="#" class="nav-item" data-module="feedlot">
90
+ <span class="nav-icon">🐄</span>
91
+ <span class="nav-text">Feedlot Operations</span>
92
+ </a>
93
+ <a href="#" class="nav-item" data-module="bi">
94
+ <span class="nav-icon">📊</span>
95
+ <span class="nav-text">Business Intelligence</span>
96
+ </a>
97
+ </nav>
98
+ <div class="sidebar-footer">
99
+ <div class="system-status">
100
+ <span class="status-indicator">●</span>
101
+ <span>System Online</span>
102
+ </div>
103
+ <div class="last-sync">
104
+ Last sync: <span id="lastSync">Just now</span>
105
+ </div>
106
+ </div>
107
+ </aside>
108
+
109
+ <!-- Main Content -->
110
+ <main class="main-content" id="mainContent">
111
+ <!-- Content will be dynamically loaded here -->
112
+ </main>
113
+
114
+ <!-- Modal Container -->
115
+ <div class="modal" id="modal">
116
+ <div class="modal-content">
117
+ <div class="modal-header">
118
+ <h3 id="modalTitle">Modal Title</h3>
119
+ <button class="modal-close" id="modalClose">&times;</button>
120
+ </div>
121
+ <div class="modal-body" id="modalBody">
122
+ <!-- Modal content will be loaded here -->
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Toast Notification -->
128
+ <div class="toast" id="toast">
129
+ <span id="toastMessage"></span>
130
+ </div>
131
+
132
+ <!-- AI Chatbot Widget -->
133
+ <div class="chatbot-widget" id="chatbotWidget">
134
+ <div class="chatbot-header">
135
+ <div class="chatbot-header-left">
136
+ <span class="chatbot-icon">🤖</span>
137
+ <div>
138
+ <div class="chatbot-title">JJAA AI Assistant</div>
139
+ <div class="chatbot-status">Online • On-Premise</div>
140
+ </div>
141
+ </div>
142
+ <div class="chatbot-header-actions">
143
+ <button class="chatbot-action-btn" id="chatClearBtn" title="Clear conversation">
144
+ <span>🗑️</span>
145
+ </button>
146
+ <button class="chatbot-action-btn" id="chatMinimizeBtn" title="Minimize">
147
+ <span>−</span>
148
+ </button>
149
+ <button class="chatbot-action-btn" id="chatCloseBtn" title="Close">
150
+ <span>×</span>
151
+ </button>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="chatbot-body" id="chatbotBody">
156
+ <div class="chatbot-welcome">
157
+ <div class="welcome-icon">🤖</div>
158
+ <h3>Selamat datang di JJAA AI Assistant</h3>
159
+ <p>Saya dapat membantu Anda dengan:</p>
160
+ <div class="quick-actions">
161
+ <button class="quick-action-btn" data-action="dashboard">📊 Dashboard Summary</button>
162
+ <button class="quick-action-btn" data-action="inventory">📦 Inventory Status</button>
163
+ <button class="quick-action-btn" data-action="health">🚨 Health Alerts</button>
164
+ <button class="quick-action-btn" data-action="financial">💰 Financial Summary</button>
165
+ </div>
166
+ <div class="suggested-questions">
167
+ <p><strong>Contoh pertanyaan:</strong></p>
168
+ <button class="suggestion-btn">Berapa total sapi di semua lokasi?</button>
169
+ <button class="suggestion-btn">Sapi mana yang sakit minggu ini?</button>
170
+ <button class="suggestion-btn">Status PO pending apa saja?</button>
171
+ <button class="suggestion-btn">Stok jagung berapa?</button>
172
+ <button class="suggestion-btn">Total revenue bulan ini?</button>
173
+ </div>
174
+ </div>
175
+ <div class="chatbot-messages" id="chatbotMessages"></div>
176
+ </div>
177
+
178
+ <div class="chatbot-footer">
179
+ <div class="chatbot-input-wrapper">
180
+ <input type="text" class="chatbot-input" id="chatbotInput" placeholder="Tanya sesuatu... (ID/EN)" autocomplete="off">
181
+ <button class="chatbot-send-btn" id="chatbotSendBtn">
182
+ <span>➤</span>
183
+ </button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Chatbot Toggle Button -->
189
+ <button class="chatbot-toggle" id="chatbotToggle">
190
+ <span class="chat-icon">💬</span>
191
+ <span class="notification-badge" id="chatNotificationBadge">1</span>
192
+ </button>
193
+
194
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
195
+ <script src="app.js"></script>
196
+ </body>
197
+ </html>
style.css CHANGED
@@ -1,28 +1,2027 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
  p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ /* Primitive Color Tokens */
3
+ --color-white: rgba(255, 255, 255, 1);
4
+ --color-black: rgba(0, 0, 0, 1);
5
+ --color-cream-50: rgba(252, 252, 249, 1);
6
+ --color-cream-100: rgba(255, 255, 253, 1);
7
+ --color-gray-200: rgba(245, 245, 245, 1);
8
+ --color-gray-300: rgba(167, 169, 169, 1);
9
+ --color-gray-400: rgba(119, 124, 124, 1);
10
+ --color-slate-500: rgba(98, 108, 113, 1);
11
+ --color-brown-600: rgba(94, 82, 64, 1);
12
+ --color-charcoal-700: rgba(31, 33, 33, 1);
13
+ --color-charcoal-800: rgba(38, 40, 40, 1);
14
+ --color-slate-900: rgba(19, 52, 59, 1);
15
+ --color-teal-300: rgba(50, 184, 198, 1);
16
+ --color-teal-400: rgba(45, 166, 178, 1);
17
+ --color-teal-500: rgba(33, 128, 141, 1);
18
+ --color-teal-600: rgba(29, 116, 128, 1);
19
+ --color-teal-700: rgba(26, 104, 115, 1);
20
+ --color-teal-800: rgba(41, 150, 161, 1);
21
+ --color-red-400: rgba(255, 84, 89, 1);
22
+ --color-red-500: rgba(192, 21, 47, 1);
23
+ --color-orange-400: rgba(230, 129, 97, 1);
24
+ --color-orange-500: rgba(168, 75, 47, 1);
25
+
26
+ /* RGB versions for opacity control */
27
+ --color-brown-600-rgb: 94, 82, 64;
28
+ --color-teal-500-rgb: 33, 128, 141;
29
+ --color-slate-900-rgb: 19, 52, 59;
30
+ --color-slate-500-rgb: 98, 108, 113;
31
+ --color-red-500-rgb: 192, 21, 47;
32
+ --color-red-400-rgb: 255, 84, 89;
33
+ --color-orange-500-rgb: 168, 75, 47;
34
+ --color-orange-400-rgb: 230, 129, 97;
35
+
36
+ /* Background color tokens (Light Mode) */
37
+ --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
38
+ --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
39
+ --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
40
+ --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
41
+ --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
42
+ --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
43
+ --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
44
+ --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */
45
+
46
+ /* Semantic Color Tokens (Light Mode) */
47
+ --color-background: var(--color-cream-50);
48
+ --color-surface: var(--color-cream-100);
49
+ --color-text: var(--color-slate-900);
50
+ --color-text-secondary: var(--color-slate-500);
51
+ --color-primary: var(--color-teal-500);
52
+ --color-primary-hover: var(--color-teal-600);
53
+ --color-primary-active: var(--color-teal-700);
54
+ --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
55
+ --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
56
+ --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
57
+ --color-border: rgba(var(--color-brown-600-rgb), 0.2);
58
+ --color-btn-primary-text: var(--color-cream-50);
59
+ --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
60
+ --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
61
+ --color-error: var(--color-red-500);
62
+ --color-success: var(--color-teal-500);
63
+ --color-warning: var(--color-orange-500);
64
+ --color-info: var(--color-slate-500);
65
+ --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
66
+ --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
67
+
68
+ /* Common style patterns */
69
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
70
+ --focus-outline: 2px solid var(--color-primary);
71
+ --status-bg-opacity: 0.15;
72
+ --status-border-opacity: 0.25;
73
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
74
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
75
+
76
+ /* RGB versions for opacity control */
77
+ --color-success-rgb: 33, 128, 141;
78
+ --color-error-rgb: 192, 21, 47;
79
+ --color-warning-rgb: 168, 75, 47;
80
+ --color-info-rgb: 98, 108, 113;
81
+
82
+ /* Typography */
83
+ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
84
+ BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
85
+ --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
86
+ Monaco, Consolas, monospace;
87
+ --font-size-xs: 11px;
88
+ --font-size-sm: 12px;
89
+ --font-size-base: 14px;
90
+ --font-size-md: 14px;
91
+ --font-size-lg: 16px;
92
+ --font-size-xl: 18px;
93
+ --font-size-2xl: 20px;
94
+ --font-size-3xl: 24px;
95
+ --font-size-4xl: 30px;
96
+ --font-weight-normal: 400;
97
+ --font-weight-medium: 500;
98
+ --font-weight-semibold: 550;
99
+ --font-weight-bold: 600;
100
+ --line-height-tight: 1.2;
101
+ --line-height-normal: 1.5;
102
+ --letter-spacing-tight: -0.01em;
103
+
104
+ /* Spacing */
105
+ --space-0: 0;
106
+ --space-1: 1px;
107
+ --space-2: 2px;
108
+ --space-4: 4px;
109
+ --space-6: 6px;
110
+ --space-8: 8px;
111
+ --space-10: 10px;
112
+ --space-12: 12px;
113
+ --space-16: 16px;
114
+ --space-20: 20px;
115
+ --space-24: 24px;
116
+ --space-32: 32px;
117
+
118
+ /* Border Radius */
119
+ --radius-sm: 6px;
120
+ --radius-base: 8px;
121
+ --radius-md: 10px;
122
+ --radius-lg: 12px;
123
+ --radius-full: 9999px;
124
+
125
+ /* Shadows */
126
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
127
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
128
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
129
+ 0 2px 4px -1px rgba(0, 0, 0, 0.02);
130
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
131
+ 0 4px 6px -2px rgba(0, 0, 0, 0.02);
132
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
133
+ inset 0 -1px 0 rgba(0, 0, 0, 0.03);
134
+
135
+ /* Animation */
136
+ --duration-fast: 150ms;
137
+ --duration-normal: 250ms;
138
+ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
139
+
140
+ /* Layout */
141
+ --container-sm: 640px;
142
+ --container-md: 768px;
143
+ --container-lg: 1024px;
144
+ --container-xl: 1280px;
145
+ }
146
+
147
+ /* Dark mode colors */
148
+ @media (prefers-color-scheme: dark) {
149
+ :root {
150
+ /* RGB versions for opacity control (Dark Mode) */
151
+ --color-gray-400-rgb: 119, 124, 124;
152
+ --color-teal-300-rgb: 50, 184, 198;
153
+ --color-gray-300-rgb: 167, 169, 169;
154
+ --color-gray-200-rgb: 245, 245, 245;
155
+
156
+ /* Background color tokens (Dark Mode) */
157
+ --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
158
+ --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
159
+ --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
160
+ --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
161
+ --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
162
+ --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
163
+ --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
164
+ --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
165
+
166
+ /* Semantic Color Tokens (Dark Mode) */
167
+ --color-background: var(--color-charcoal-700);
168
+ --color-surface: var(--color-charcoal-800);
169
+ --color-text: var(--color-gray-200);
170
+ --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
171
+ --color-primary: var(--color-teal-300);
172
+ --color-primary-hover: var(--color-teal-400);
173
+ --color-primary-active: var(--color-teal-800);
174
+ --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
175
+ --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
176
+ --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
177
+ --color-border: rgba(var(--color-gray-400-rgb), 0.3);
178
+ --color-error: var(--color-red-400);
179
+ --color-success: var(--color-teal-300);
180
+ --color-warning: var(--color-orange-400);
181
+ --color-info: var(--color-gray-300);
182
+ --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
183
+ --color-btn-primary-text: var(--color-slate-900);
184
+ --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
185
+ --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
186
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
187
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
188
+ --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
189
+ --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
190
+ --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
191
+
192
+ /* Common style patterns - updated for dark mode */
193
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
194
+ --focus-outline: 2px solid var(--color-primary);
195
+ --status-bg-opacity: 0.15;
196
+ --status-border-opacity: 0.25;
197
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
198
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
199
+
200
+ /* RGB versions for dark mode */
201
+ --color-success-rgb: var(--color-teal-300-rgb);
202
+ --color-error-rgb: var(--color-red-400-rgb);
203
+ --color-warning-rgb: var(--color-orange-400-rgb);
204
+ --color-info-rgb: var(--color-gray-300-rgb);
205
+ }
206
+ }
207
+
208
+ /* Data attribute for manual theme switching */
209
+ [data-color-scheme="dark"] {
210
+ /* RGB versions for opacity control (dark mode) */
211
+ --color-gray-400-rgb: 119, 124, 124;
212
+ --color-teal-300-rgb: 50, 184, 198;
213
+ --color-gray-300-rgb: 167, 169, 169;
214
+ --color-gray-200-rgb: 245, 245, 245;
215
+
216
+ /* Colorful background palette - Dark Mode */
217
+ --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
218
+ --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
219
+ --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
220
+ --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
221
+ --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
222
+ --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
223
+ --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
224
+ --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
225
+
226
+ /* Semantic Color Tokens (Dark Mode) */
227
+ --color-background: var(--color-charcoal-700);
228
+ --color-surface: var(--color-charcoal-800);
229
+ --color-text: var(--color-gray-200);
230
+ --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
231
+ --color-primary: var(--color-teal-300);
232
+ --color-primary-hover: var(--color-teal-400);
233
+ --color-primary-active: var(--color-teal-800);
234
+ --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
235
+ --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
236
+ --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
237
+ --color-border: rgba(var(--color-gray-400-rgb), 0.3);
238
+ --color-error: var(--color-red-400);
239
+ --color-success: var(--color-teal-300);
240
+ --color-warning: var(--color-orange-400);
241
+ --color-info: var(--color-gray-300);
242
+ --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
243
+ --color-btn-primary-text: var(--color-slate-900);
244
+ --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
245
+ --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
246
+ --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
247
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
248
+ --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
249
+ --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
250
+
251
+ /* Common style patterns - updated for dark mode */
252
+ --focus-ring: 0 0 0 3px var(--color-focus-ring);
253
+ --focus-outline: 2px solid var(--color-primary);
254
+ --status-bg-opacity: 0.15;
255
+ --status-border-opacity: 0.25;
256
+ --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
257
+ --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
258
+
259
+ /* RGB versions for dark mode */
260
+ --color-success-rgb: var(--color-teal-300-rgb);
261
+ --color-error-rgb: var(--color-red-400-rgb);
262
+ --color-warning-rgb: var(--color-orange-400-rgb);
263
+ --color-info-rgb: var(--color-gray-300-rgb);
264
+ }
265
+
266
+ [data-color-scheme="light"] {
267
+ /* RGB versions for opacity control (light mode) */
268
+ --color-brown-600-rgb: 94, 82, 64;
269
+ --color-teal-500-rgb: 33, 128, 141;
270
+ --color-slate-900-rgb: 19, 52, 59;
271
+
272
+ /* Semantic Color Tokens (Light Mode) */
273
+ --color-background: var(--color-cream-50);
274
+ --color-surface: var(--color-cream-100);
275
+ --color-text: var(--color-slate-900);
276
+ --color-text-secondary: var(--color-slate-500);
277
+ --color-primary: var(--color-teal-500);
278
+ --color-primary-hover: var(--color-teal-600);
279
+ --color-primary-active: var(--color-teal-700);
280
+ --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
281
+ --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
282
+ --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
283
+ --color-border: rgba(var(--color-brown-600-rgb), 0.2);
284
+ --color-btn-primary-text: var(--color-cream-50);
285
+ --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
286
+ --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
287
+ --color-error: var(--color-red-500);
288
+ --color-success: var(--color-teal-500);
289
+ --color-warning: var(--color-orange-500);
290
+ --color-info: var(--color-slate-500);
291
+ --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
292
+
293
+ /* RGB versions for light mode */
294
+ --color-success-rgb: var(--color-teal-500-rgb);
295
+ --color-error-rgb: var(--color-red-500-rgb);
296
+ --color-warning-rgb: var(--color-orange-500-rgb);
297
+ --color-info-rgb: var(--color-slate-500-rgb);
298
+ }
299
+
300
+ /* Base styles */
301
+ html {
302
+ font-size: var(--font-size-base);
303
+ font-family: var(--font-family-base);
304
+ line-height: var(--line-height-normal);
305
+ color: var(--color-text);
306
+ background-color: var(--color-background);
307
+ -webkit-font-smoothing: antialiased;
308
+ box-sizing: border-box;
309
+ }
310
+
311
  body {
312
+ margin: 0;
313
+ padding: 0;
314
+ }
315
+
316
+ *,
317
+ *::before,
318
+ *::after {
319
+ box-sizing: inherit;
320
+ }
321
+
322
+ /* Typography */
323
+ h1,
324
+ h2,
325
+ h3,
326
+ h4,
327
+ h5,
328
+ h6 {
329
+ margin: 0;
330
+ font-weight: var(--font-weight-semibold);
331
+ line-height: var(--line-height-tight);
332
+ color: var(--color-text);
333
+ letter-spacing: var(--letter-spacing-tight);
334
  }
335
 
336
  h1 {
337
+ font-size: var(--font-size-4xl);
338
+ }
339
+ h2 {
340
+ font-size: var(--font-size-3xl);
341
+ }
342
+ h3 {
343
+ font-size: var(--font-size-2xl);
344
+ }
345
+ h4 {
346
+ font-size: var(--font-size-xl);
347
+ }
348
+ h5 {
349
+ font-size: var(--font-size-lg);
350
+ }
351
+ h6 {
352
+ font-size: var(--font-size-md);
353
  }
354
 
355
  p {
356
+ margin: 0 0 var(--space-16) 0;
357
+ }
358
+
359
+ a {
360
+ color: var(--color-primary);
361
+ text-decoration: none;
362
+ transition: color var(--duration-fast) var(--ease-standard);
363
+ }
364
+
365
+ a:hover {
366
+ color: var(--color-primary-hover);
367
+ }
368
+
369
+ code,
370
+ pre {
371
+ font-family: var(--font-family-mono);
372
+ font-size: calc(var(--font-size-base) * 0.95);
373
+ background-color: var(--color-secondary);
374
+ border-radius: var(--radius-sm);
375
+ }
376
+
377
+ code {
378
+ padding: var(--space-1) var(--space-4);
379
+ }
380
+
381
+ pre {
382
+ padding: var(--space-16);
383
+ margin: var(--space-16) 0;
384
+ overflow: auto;
385
+ border: 1px solid var(--color-border);
386
+ }
387
+
388
+ pre code {
389
+ background: none;
390
+ padding: 0;
391
+ }
392
+
393
+ /* Buttons */
394
+ .btn {
395
+ display: inline-flex;
396
+ align-items: center;
397
+ justify-content: center;
398
+ padding: var(--space-8) var(--space-16);
399
+ border-radius: var(--radius-base);
400
+ font-size: var(--font-size-base);
401
+ font-weight: 500;
402
+ line-height: 1.5;
403
+ cursor: pointer;
404
+ transition: all var(--duration-normal) var(--ease-standard);
405
+ border: none;
406
+ text-decoration: none;
407
+ position: relative;
408
+ }
409
+
410
+ .btn:focus-visible {
411
+ outline: none;
412
+ box-shadow: var(--focus-ring);
413
+ }
414
+
415
+ .btn--primary {
416
+ background: var(--color-primary);
417
+ color: var(--color-btn-primary-text);
418
+ }
419
+
420
+ .btn--primary:hover {
421
+ background: var(--color-primary-hover);
422
+ }
423
+
424
+ .btn--primary:active {
425
+ background: var(--color-primary-active);
426
  }
427
 
428
+ .btn--secondary {
429
+ background: var(--color-secondary);
430
+ color: var(--color-text);
431
+ }
432
+
433
+ .btn--secondary:hover {
434
+ background: var(--color-secondary-hover);
435
+ }
436
+
437
+ .btn--secondary:active {
438
+ background: var(--color-secondary-active);
439
+ }
440
+
441
+ .btn--outline {
442
+ background: transparent;
443
+ border: 1px solid var(--color-border);
444
+ color: var(--color-text);
445
+ }
446
+
447
+ .btn--outline:hover {
448
+ background: var(--color-secondary);
449
+ }
450
+
451
+ .btn--sm {
452
+ padding: var(--space-4) var(--space-12);
453
+ font-size: var(--font-size-sm);
454
+ border-radius: var(--radius-sm);
455
+ }
456
+
457
+ .btn--lg {
458
+ padding: var(--space-10) var(--space-20);
459
+ font-size: var(--font-size-lg);
460
+ border-radius: var(--radius-md);
461
+ }
462
+
463
+ .btn--full-width {
464
+ width: 100%;
465
+ }
466
+
467
+ .btn:disabled {
468
+ opacity: 0.5;
469
+ cursor: not-allowed;
470
+ }
471
+
472
+ /* Form elements */
473
+ .form-control {
474
+ display: block;
475
+ width: 100%;
476
+ padding: var(--space-8) var(--space-12);
477
+ font-size: var(--font-size-md);
478
+ line-height: 1.5;
479
+ color: var(--color-text);
480
+ background-color: var(--color-surface);
481
+ border: 1px solid var(--color-border);
482
+ border-radius: var(--radius-base);
483
+ transition: border-color var(--duration-fast) var(--ease-standard),
484
+ box-shadow var(--duration-fast) var(--ease-standard);
485
+ }
486
+
487
+ textarea.form-control {
488
+ font-family: var(--font-family-base);
489
+ font-size: var(--font-size-base);
490
+ }
491
+
492
+ select.form-control {
493
+ padding: var(--space-8) var(--space-12);
494
+ -webkit-appearance: none;
495
+ -moz-appearance: none;
496
+ appearance: none;
497
+ background-image: var(--select-caret-light);
498
+ background-repeat: no-repeat;
499
+ background-position: right var(--space-12) center;
500
+ background-size: 16px;
501
+ padding-right: var(--space-32);
502
+ }
503
+
504
+ /* Add a dark mode specific caret */
505
+ @media (prefers-color-scheme: dark) {
506
+ select.form-control {
507
+ background-image: var(--select-caret-dark);
508
+ }
509
+ }
510
+
511
+ /* Also handle data-color-scheme */
512
+ [data-color-scheme="dark"] select.form-control {
513
+ background-image: var(--select-caret-dark);
514
+ }
515
+
516
+ [data-color-scheme="light"] select.form-control {
517
+ background-image: var(--select-caret-light);
518
+ }
519
+
520
+ .form-control:focus {
521
+ border-color: var(--color-primary);
522
+ outline: var(--focus-outline);
523
+ }
524
+
525
+ .form-label {
526
+ display: block;
527
+ margin-bottom: var(--space-8);
528
+ font-weight: var(--font-weight-medium);
529
+ font-size: var(--font-size-sm);
530
+ }
531
+
532
+ .form-group {
533
+ margin-bottom: var(--space-16);
534
+ }
535
+
536
+ /* Card component */
537
  .card {
538
+ background-color: var(--color-surface);
539
+ border-radius: var(--radius-lg);
540
+ border: 1px solid var(--color-card-border);
541
+ box-shadow: var(--shadow-sm);
542
+ overflow: hidden;
543
+ transition: box-shadow var(--duration-normal) var(--ease-standard);
544
+ }
545
+
546
+ .card:hover {
547
+ box-shadow: var(--shadow-md);
548
+ }
549
+
550
+ .card__body {
551
+ padding: var(--space-16);
552
+ }
553
+
554
+ .card__header,
555
+ .card__footer {
556
+ padding: var(--space-16);
557
+ border-bottom: 1px solid var(--color-card-border-inner);
558
+ }
559
+
560
+ /* Status indicators - simplified with CSS variables */
561
+ .status {
562
+ display: inline-flex;
563
+ align-items: center;
564
+ padding: var(--space-6) var(--space-12);
565
+ border-radius: var(--radius-full);
566
+ font-weight: var(--font-weight-medium);
567
+ font-size: var(--font-size-sm);
568
+ }
569
+
570
+ .status--success {
571
+ background-color: rgba(
572
+ var(--color-success-rgb, 33, 128, 141),
573
+ var(--status-bg-opacity)
574
+ );
575
+ color: var(--color-success);
576
+ border: 1px solid
577
+ rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
578
+ }
579
+
580
+ .status--error {
581
+ background-color: rgba(
582
+ var(--color-error-rgb, 192, 21, 47),
583
+ var(--status-bg-opacity)
584
+ );
585
+ color: var(--color-error);
586
+ border: 1px solid
587
+ rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
588
+ }
589
+
590
+ .status--warning {
591
+ background-color: rgba(
592
+ var(--color-warning-rgb, 168, 75, 47),
593
+ var(--status-bg-opacity)
594
+ );
595
+ color: var(--color-warning);
596
+ border: 1px solid
597
+ rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
598
+ }
599
+
600
+ .status--info {
601
+ background-color: rgba(
602
+ var(--color-info-rgb, 98, 108, 113),
603
+ var(--status-bg-opacity)
604
+ );
605
+ color: var(--color-info);
606
+ border: 1px solid
607
+ rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
608
+ }
609
+
610
+ /* Container layout */
611
+ .container {
612
+ width: 100%;
613
+ margin-right: auto;
614
+ margin-left: auto;
615
+ padding-right: var(--space-16);
616
+ padding-left: var(--space-16);
617
+ }
618
+
619
+ @media (min-width: 640px) {
620
+ .container {
621
+ max-width: var(--container-sm);
622
+ }
623
+ }
624
+ @media (min-width: 768px) {
625
+ .container {
626
+ max-width: var(--container-md);
627
+ }
628
+ }
629
+ @media (min-width: 1024px) {
630
+ .container {
631
+ max-width: var(--container-lg);
632
+ }
633
+ }
634
+ @media (min-width: 1280px) {
635
+ .container {
636
+ max-width: var(--container-xl);
637
+ }
638
+ }
639
+
640
+ /* Utility classes */
641
+ .flex {
642
+ display: flex;
643
+ }
644
+ .flex-col {
645
+ flex-direction: column;
646
+ }
647
+ .items-center {
648
+ align-items: center;
649
+ }
650
+ .justify-center {
651
+ justify-content: center;
652
+ }
653
+ .justify-between {
654
+ justify-content: space-between;
655
+ }
656
+ .gap-4 {
657
+ gap: var(--space-4);
658
+ }
659
+ .gap-8 {
660
+ gap: var(--space-8);
661
+ }
662
+ .gap-16 {
663
+ gap: var(--space-16);
664
+ }
665
+
666
+ .m-0 {
667
+ margin: 0;
668
+ }
669
+ .mt-8 {
670
+ margin-top: var(--space-8);
671
+ }
672
+ .mb-8 {
673
+ margin-bottom: var(--space-8);
674
+ }
675
+ .mx-8 {
676
+ margin-left: var(--space-8);
677
+ margin-right: var(--space-8);
678
+ }
679
+ .my-8 {
680
+ margin-top: var(--space-8);
681
+ margin-bottom: var(--space-8);
682
+ }
683
+
684
+ .p-0 {
685
+ padding: 0;
686
+ }
687
+ .py-8 {
688
+ padding-top: var(--space-8);
689
+ padding-bottom: var(--space-8);
690
+ }
691
+ .px-8 {
692
+ padding-left: var(--space-8);
693
+ padding-right: var(--space-8);
694
+ }
695
+ .py-16 {
696
+ padding-top: var(--space-16);
697
+ padding-bottom: var(--space-16);
698
+ }
699
+ .px-16 {
700
+ padding-left: var(--space-16);
701
+ padding-right: var(--space-16);
702
+ }
703
+
704
+ .block {
705
+ display: block;
706
+ }
707
+ .hidden {
708
+ display: none;
709
+ }
710
+
711
+ /* Accessibility */
712
+ .sr-only {
713
+ position: absolute;
714
+ width: 1px;
715
+ height: 1px;
716
+ padding: 0;
717
+ margin: -1px;
718
+ overflow: hidden;
719
+ clip: rect(0, 0, 0, 0);
720
+ white-space: nowrap;
721
+ border-width: 0;
722
+ }
723
+
724
+ :focus-visible {
725
+ outline: var(--focus-outline);
726
+ outline-offset: 2px;
727
+ }
728
+
729
+ /* Dark mode specifics */
730
+ [data-color-scheme="dark"] .btn--outline {
731
+ border: 1px solid var(--color-border-secondary);
732
+ }
733
+
734
+ @font-face {
735
+ font-family: 'FKGroteskNeue';
736
+ src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
737
+ format('woff2');
738
+ }
739
+
740
+ /* END PERPLEXITY DESIGN SYSTEM */
741
+ :root {
742
+ /* Primitive Color Tokens */
743
+ --color-white: rgba(255, 255, 255, 1);
744
+ --color-black: rgba(0, 0, 0, 1);
745
+ --color-cream-50: rgba(252, 252, 249, 1);
746
+ --color-cream-100: rgba(255, 255, 253, 1);
747
+ --color-gray-200: rgba(245, 245, 245, 1);
748
+ --color-gray-300: rgba(167, 169, 169, 1);
749
+ --color-gray-400: rgba(119, 124, 124, 1);
750
+ --color-slate-500: rgba(98, 108, 113, 1);
751
+ --color-brown-600: rgba(94, 82, 64, 1);
752
+ --color-charcoal-700: rgba(31, 33, 33, 1);
753
+ --color-charcoal-800: rgba(38, 40, 40, 1);
754
+ --color-slate-900: rgba(19, 52, 59, 1);
755
+ --color-teal-300: rgba(50, 184, 198, 1);
756
+ --color-teal-400: rgba(45, 166, 178, 1);
757
+ --color-teal-500: rgba(33, 128, 141, 1);
758
+ --color-teal-600: rgba(29, 116, 128, 1);
759
+ --color-teal-700: rgba(26, 104, 115, 1);
760
+ --color-teal-800: rgba(41, 150, 161, 1);
761
+ --color-red-400: rgba(255, 84, 89, 1);
762
+ --color-red-500: rgba(192, 21, 47, 1);
763
+ --color-orange-400: rgba(230, 129, 97, 1);
764
+ --color-orange-500: rgba(168, 75, 47, 1);
765
+
766
+ --color-brown-600-rgb: 94, 82, 64;
767
+ --color-teal-500-rgb: 33, 128, 141;
768
+ --color-slate-900-rgb: 19, 52, 59;
769
+ --color-slate-500-rgb: 98, 108, 113;
770
+ --color-red-500-rgb: 192, 21, 47;
771
+ --color-red-400-rgb: 255, 84, 89;
772
+ --color-orange-500-rgb: 168, 75, 47;
773
+ --color-orange-400-rgb: 230, 129, 97;
774
+
775
+ --color-bg-1: rgba(59, 130, 246, 0.08);
776
+ --color-bg-2: rgba(245, 158, 11, 0.08);
777
+ --color-bg-3: rgba(34, 197, 94, 0.08);
778
+ --color-bg-4: rgba(239, 68, 68, 0.08);
779
+ --color-bg-5: rgba(147, 51, 234, 0.08);
780
+ --color-bg-6: rgba(249, 115, 22, 0.08);
781
+ --color-bg-7: rgba(236, 72, 153, 0.08);
782
+ --color-bg-8: rgba(6, 182, 212, 0.08);
783
+
784
+ --color-background: var(--color-cream-50);
785
+ --color-surface: var(--color-cream-100);
786
+ --color-text: var(--color-slate-900);
787
+ --color-text-secondary: var(--color-slate-500);
788
+ --color-primary: var(--color-teal-500);
789
+ --color-primary-hover: var(--color-teal-600);
790
+ --color-primary-active: var(--color-teal-700);
791
+ --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
792
+ --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
793
+ --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
794
+ --color-border: rgba(var(--color-brown-600-rgb), 0.2);
795
+ --color-btn-primary-text: var(--color-cream-50);
796
+ --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
797
+ --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
798
+ --color-error: var(--color-red-500);
799
+ --color-success: var(--color-teal-500);
800
+ --color-warning: var(--color-orange-500);
801
+ --color-info: var(--color-slate-500);
802
+ --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
803
+ --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
804
+
805
+ --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
806
+ --font-size-xs: 11px;
807
+ --font-size-sm: 12px;
808
+ --font-size-base: 14px;
809
+ --font-size-md: 14px;
810
+ --font-size-lg: 16px;
811
+ --font-size-xl: 18px;
812
+ --font-size-2xl: 20px;
813
+ --font-size-3xl: 24px;
814
+ --font-size-4xl: 30px;
815
+ --font-weight-normal: 400;
816
+ --font-weight-medium: 500;
817
+ --font-weight-semibold: 550;
818
+ --font-weight-bold: 600;
819
+ --line-height-tight: 1.2;
820
+ --line-height-normal: 1.5;
821
+
822
+ --space-4: 4px;
823
+ --space-8: 8px;
824
+ --space-12: 12px;
825
+ --space-16: 16px;
826
+ --space-20: 20px;
827
+ --space-24: 24px;
828
+ --space-32: 32px;
829
+
830
+ --radius-sm: 6px;
831
+ --radius-base: 8px;
832
+ --radius-md: 10px;
833
+ --radius-lg: 12px;
834
+ --radius-full: 9999px;
835
+
836
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
837
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
838
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
839
+
840
+ --sidebar-width: 260px;
841
+ --header-height: 64px;
842
+ }
843
+
844
+ * {
845
+ margin: 0;
846
+ padding: 0;
847
+ box-sizing: border-box;
848
+ }
849
+
850
+ body {
851
+ font-family: var(--font-family-base);
852
+ font-size: var(--font-size-base);
853
+ line-height: var(--line-height-normal);
854
+ color: var(--color-text);
855
+ background-color: var(--color-background);
856
+ overflow-x: hidden;
857
+ }
858
+
859
+ /* Header */
860
+ .header {
861
+ position: fixed;
862
+ top: 0;
863
+ left: 0;
864
+ right: 0;
865
+ height: var(--header-height);
866
+ background-color: var(--color-surface);
867
+ border-bottom: 1px solid var(--color-border);
868
+ display: flex;
869
+ align-items: center;
870
+ justify-content: space-between;
871
+ padding: 0 var(--space-24);
872
+ z-index: 1000;
873
+ box-shadow: var(--shadow-sm);
874
+ }
875
+
876
+ .header-left {
877
+ display: flex;
878
+ align-items: center;
879
+ gap: var(--space-16);
880
+ }
881
+
882
+ .menu-toggle {
883
+ background: none;
884
+ border: none;
885
+ font-size: 24px;
886
+ cursor: pointer;
887
+ color: var(--color-text);
888
+ padding: var(--space-8);
889
+ border-radius: var(--radius-base);
890
+ transition: background-color 0.2s;
891
+ }
892
+
893
+ .menu-toggle:hover {
894
+ background-color: var(--color-secondary);
895
+ }
896
+
897
+ .logo {
898
+ display: flex;
899
+ align-items: center;
900
+ padding: 10px 15px;
901
+ }
902
+
903
+ .logo-link {
904
+ display: block;
905
+ transition: transform 0.3s ease, opacity 0.3s ease;
906
+ }
907
+
908
+ .logo-link:hover {
909
+ transform: scale(1.05);
910
+ opacity: 0.9;
911
+ }
912
+
913
+ .jjaa-logo {
914
+ height: auto;
915
+ width: 200px;
916
+ max-width: 100%;
917
+ display: block;
918
+ object-fit: contain;
919
+ }
920
+
921
+ .header-center {
922
+ flex: 1;
923
+ max-width: 500px;
924
+ margin: 0 var(--space-32);
925
+ }
926
+
927
+ .search-box {
928
+ position: relative;
929
+ width: 100%;
930
+ }
931
+
932
+ .search-box input {
933
+ width: 100%;
934
+ padding: var(--space-8) var(--space-12);
935
+ padding-right: 40px;
936
+ border: 1px solid var(--color-border);
937
+ border-radius: var(--radius-base);
938
+ font-size: var(--font-size-base);
939
+ background-color: var(--color-background);
940
+ color: var(--color-text);
941
+ }
942
+
943
+ .search-icon {
944
+ position: absolute;
945
+ right: var(--space-12);
946
+ top: 50%;
947
+ transform: translateY(-50%);
948
+ color: var(--color-text-secondary);
949
+ }
950
+
951
+ .header-right {
952
+ display: flex;
953
+ align-items: center;
954
+ gap: var(--space-16);
955
+ }
956
+
957
+ .location-selector select {
958
+ padding: var(--space-8) var(--space-12);
959
+ border: 1px solid var(--color-border);
960
+ border-radius: var(--radius-base);
961
+ font-size: var(--font-size-sm);
962
+ background-color: var(--color-surface);
963
+ color: var(--color-text);
964
+ cursor: pointer;
965
+ }
966
+
967
+ .notification-btn {
968
+ position: relative;
969
+ background: none;
970
+ border: none;
971
+ font-size: 20px;
972
+ cursor: pointer;
973
+ padding: var(--space-8);
974
+ border-radius: var(--radius-base);
975
+ transition: background-color 0.2s;
976
+ }
977
+
978
+ .notification-btn:hover {
979
+ background-color: var(--color-secondary);
980
+ }
981
+
982
+ .badge {
983
+ position: absolute;
984
+ top: 4px;
985
+ right: 4px;
986
+ background-color: var(--color-error);
987
+ color: white;
988
+ font-size: 10px;
989
+ padding: 2px 5px;
990
+ border-radius: var(--radius-full);
991
+ font-weight: var(--font-weight-bold);
992
+ }
993
+
994
+ .profile-btn {
995
+ display: flex;
996
+ align-items: center;
997
+ gap: var(--space-8);
998
+ background: none;
999
+ border: none;
1000
+ cursor: pointer;
1001
+ padding: var(--space-8) var(--space-12);
1002
+ border-radius: var(--radius-base);
1003
+ transition: background-color 0.2s;
1004
+ }
1005
+
1006
+ .profile-btn:hover {
1007
+ background-color: var(--color-secondary);
1008
+ }
1009
+
1010
+ .avatar {
1011
+ font-size: 24px;
1012
+ }
1013
+
1014
+ .user-name {
1015
+ font-size: var(--font-size-base);
1016
+ font-weight: var(--font-weight-medium);
1017
+ color: var(--color-text);
1018
+ }
1019
+
1020
+ .dropdown-arrow {
1021
+ font-size: 10px;
1022
+ color: var(--color-text-secondary);
1023
+ }
1024
+
1025
+ /* Sidebar */
1026
+ .sidebar {
1027
+ position: fixed;
1028
+ left: 0;
1029
+ top: var(--header-height);
1030
+ width: var(--sidebar-width);
1031
+ height: calc(100vh - var(--header-height));
1032
+ background-color: var(--color-slate-900);
1033
+ border-right: 1px solid var(--color-border);
1034
+ overflow-y: auto;
1035
+ transition: transform 0.3s ease;
1036
+ z-index: 999;
1037
+ }
1038
+
1039
+ .sidebar.collapsed {
1040
+ transform: translateX(-100%);
1041
+ }
1042
+
1043
+ .sidebar-nav {
1044
+ padding: var(--space-16) 0;
1045
+ }
1046
+
1047
+ .nav-item {
1048
+ display: flex;
1049
+ align-items: center;
1050
+ gap: var(--space-12);
1051
+ padding: var(--space-12) var(--space-24);
1052
+ color: rgba(255, 255, 255, 0.8);
1053
+ text-decoration: none;
1054
+ transition: all 0.2s;
1055
+ border-left: 3px solid transparent;
1056
+ }
1057
+
1058
+ .nav-item:hover {
1059
+ background-color: rgba(255, 255, 255, 0.05);
1060
+ color: rgba(255, 255, 255, 1);
1061
+ }
1062
+
1063
+ .nav-item.active {
1064
+ background-color: rgba(33, 128, 141, 0.15);
1065
+ color: var(--color-teal-300);
1066
+ border-left-color: var(--color-teal-300);
1067
+ }
1068
+
1069
+ .nav-icon {
1070
+ font-size: 20px;
1071
+ width: 24px;
1072
+ text-align: center;
1073
+ }
1074
+
1075
+ .nav-text {
1076
+ font-size: var(--font-size-base);
1077
+ font-weight: var(--font-weight-medium);
1078
+ }
1079
+
1080
+ .sidebar-footer {
1081
+ position: absolute;
1082
+ bottom: 0;
1083
+ left: 0;
1084
+ right: 0;
1085
+ padding: var(--space-16);
1086
+ background-color: rgba(0, 0, 0, 0.2);
1087
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
1088
+ }
1089
+
1090
+ .system-status {
1091
+ display: flex;
1092
+ align-items: center;
1093
+ gap: var(--space-8);
1094
+ color: rgba(255, 255, 255, 0.7);
1095
+ font-size: var(--font-size-sm);
1096
+ margin-bottom: var(--space-8);
1097
+ }
1098
+
1099
+ .status-indicator {
1100
+ color: #22c55e;
1101
+ font-size: 8px;
1102
+ }
1103
+
1104
+ .last-sync {
1105
+ color: rgba(255, 255, 255, 0.5);
1106
+ font-size: var(--font-size-xs);
1107
+ }
1108
+
1109
+ /* Main Content */
1110
+ .main-content {
1111
+ margin-left: var(--sidebar-width);
1112
+ margin-top: var(--header-height);
1113
+ padding: var(--space-24);
1114
+ min-height: calc(100vh - var(--header-height));
1115
+ transition: margin-left 0.3s ease;
1116
+ }
1117
+
1118
+ .main-content.expanded {
1119
+ margin-left: 0;
1120
+ }
1121
+
1122
+ /* Breadcrumb */
1123
+ .breadcrumb {
1124
+ display: flex;
1125
+ align-items: center;
1126
+ gap: var(--space-8);
1127
+ margin-bottom: var(--space-24);
1128
+ font-size: var(--font-size-sm);
1129
+ color: var(--color-text-secondary);
1130
+ }
1131
+
1132
+ .breadcrumb a {
1133
+ color: var(--color-primary);
1134
+ text-decoration: none;
1135
+ }
1136
+
1137
+ .breadcrumb a:hover {
1138
+ text-decoration: underline;
1139
+ }
1140
+
1141
+ /* Page Header */
1142
+ .page-header {
1143
+ margin-bottom: var(--space-24);
1144
  }
1145
 
1146
+ .page-title {
1147
+ font-size: var(--font-size-3xl);
1148
+ font-weight: var(--font-weight-bold);
1149
+ color: var(--color-text);
1150
+ margin-bottom: var(--space-8);
1151
  }
1152
+
1153
+ .page-subtitle {
1154
+ font-size: var(--font-size-base);
1155
+ color: var(--color-text-secondary);
1156
+ }
1157
+
1158
+ /* Cards */
1159
+ .stats-grid {
1160
+ display: grid;
1161
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1162
+ gap: var(--space-20);
1163
+ margin-bottom: var(--space-24);
1164
+ }
1165
+
1166
+ .stat-card {
1167
+ background-color: var(--color-surface);
1168
+ border-radius: var(--radius-lg);
1169
+ border: 1px solid var(--color-card-border);
1170
+ padding: var(--space-20);
1171
+ box-shadow: var(--shadow-sm);
1172
+ transition: transform 0.2s, box-shadow 0.2s;
1173
+ }
1174
+
1175
+ .stat-card:hover {
1176
+ transform: translateY(-2px);
1177
+ box-shadow: var(--shadow-md);
1178
+ }
1179
+
1180
+ .stat-header {
1181
+ display: flex;
1182
+ align-items: center;
1183
+ justify-content: space-between;
1184
+ margin-bottom: var(--space-12);
1185
+ }
1186
+
1187
+ .stat-title {
1188
+ font-size: var(--font-size-sm);
1189
+ color: var(--color-text-secondary);
1190
+ font-weight: var(--font-weight-medium);
1191
+ }
1192
+
1193
+ .stat-icon {
1194
+ font-size: 24px;
1195
+ }
1196
+
1197
+ .stat-value {
1198
+ font-size: var(--font-size-3xl);
1199
+ font-weight: var(--font-weight-bold);
1200
+ color: var(--color-text);
1201
+ margin-bottom: var(--space-4);
1202
+ }
1203
+
1204
+ .stat-change {
1205
+ font-size: var(--font-size-sm);
1206
+ color: var(--color-success);
1207
+ }
1208
+
1209
+ .stat-change.negative {
1210
+ color: var(--color-error);
1211
+ }
1212
+
1213
+ /* Sub Navigation */
1214
+ .sub-nav {
1215
+ display: flex;
1216
+ gap: var(--space-8);
1217
+ margin-bottom: var(--space-24);
1218
+ border-bottom: 1px solid var(--color-border);
1219
+ overflow-x: auto;
1220
+ }
1221
+
1222
+ .sub-nav-item {
1223
+ padding: var(--space-12) var(--space-16);
1224
+ font-size: var(--font-size-base);
1225
+ font-weight: var(--font-weight-medium);
1226
+ color: var(--color-text-secondary);
1227
+ background: none;
1228
+ border: none;
1229
+ border-bottom: 2px solid transparent;
1230
+ cursor: pointer;
1231
+ white-space: nowrap;
1232
+ transition: all 0.2s;
1233
+ }
1234
+
1235
+ .sub-nav-item:hover {
1236
+ color: var(--color-text);
1237
+ }
1238
+
1239
+ .sub-nav-item.active {
1240
+ color: var(--color-primary);
1241
+ border-bottom-color: var(--color-primary);
1242
+ }
1243
+
1244
+ /* Content Section */
1245
+ .content-section {
1246
+ background-color: var(--color-surface);
1247
+ border-radius: var(--radius-lg);
1248
+ border: 1px solid var(--color-card-border);
1249
+ padding: var(--space-24);
1250
+ margin-bottom: var(--space-24);
1251
+ }
1252
+
1253
+ .section-header {
1254
+ display: flex;
1255
+ align-items: center;
1256
+ justify-content: space-between;
1257
+ margin-bottom: var(--space-20);
1258
+ }
1259
+
1260
+ .section-title {
1261
+ font-size: var(--font-size-xl);
1262
+ font-weight: var(--font-weight-semibold);
1263
+ color: var(--color-text);
1264
+ }
1265
+
1266
+ .section-actions {
1267
+ display: flex;
1268
+ gap: var(--space-8);
1269
+ }
1270
+
1271
+ /* Buttons */
1272
+ .btn {
1273
+ display: inline-flex;
1274
+ align-items: center;
1275
+ justify-content: center;
1276
+ gap: var(--space-8);
1277
+ padding: var(--space-8) var(--space-16);
1278
+ border-radius: var(--radius-base);
1279
+ font-size: var(--font-size-base);
1280
+ font-weight: var(--font-weight-medium);
1281
+ cursor: pointer;
1282
+ transition: all 0.2s;
1283
+ border: none;
1284
+ text-decoration: none;
1285
+ }
1286
+
1287
+ .btn-primary {
1288
+ background-color: var(--color-primary);
1289
+ color: var(--color-btn-primary-text);
1290
+ }
1291
+
1292
+ .btn-primary:hover {
1293
+ background-color: var(--color-primary-hover);
1294
+ }
1295
+
1296
+ .btn-secondary {
1297
+ background-color: var(--color-secondary);
1298
+ color: var(--color-text);
1299
+ border: 1px solid var(--color-border);
1300
+ }
1301
+
1302
+ .btn-secondary:hover {
1303
+ background-color: var(--color-secondary-hover);
1304
+ }
1305
+
1306
+ .btn-sm {
1307
+ padding: var(--space-4) var(--space-12);
1308
+ font-size: var(--font-size-sm);
1309
+ }
1310
+
1311
+ /* Table */
1312
+ .table-container {
1313
+ overflow-x: auto;
1314
+ }
1315
+
1316
+ .data-table {
1317
+ width: 100%;
1318
+ border-collapse: collapse;
1319
+ }
1320
+
1321
+ .data-table thead {
1322
+ background-color: var(--color-bg-1);
1323
+ border-bottom: 2px solid var(--color-border);
1324
+ }
1325
+
1326
+ .data-table th {
1327
+ padding: var(--space-12) var(--space-16);
1328
+ text-align: left;
1329
+ font-size: var(--font-size-sm);
1330
+ font-weight: var(--font-weight-semibold);
1331
+ color: var(--color-text);
1332
+ white-space: nowrap;
1333
+ }
1334
+
1335
+ .data-table td {
1336
+ padding: var(--space-12) var(--space-16);
1337
+ border-bottom: 1px solid var(--color-border);
1338
+ font-size: var(--font-size-base);
1339
+ color: var(--color-text);
1340
+ }
1341
+
1342
+ .data-table tbody tr {
1343
+ transition: background-color 0.2s;
1344
+ cursor: pointer;
1345
+ }
1346
+
1347
+ .data-table tbody tr:hover {
1348
+ background-color: var(--color-bg-2);
1349
+ }
1350
+
1351
+ /* Status Badge */
1352
+ .status-badge {
1353
+ display: inline-block;
1354
+ padding: var(--space-4) var(--space-12);
1355
+ border-radius: var(--radius-full);
1356
+ font-size: var(--font-size-sm);
1357
+ font-weight: var(--font-weight-medium);
1358
+ }
1359
+
1360
+ .status-good {
1361
+ background-color: rgba(34, 197, 94, 0.15);
1362
+ color: #16a34a;
1363
+ }
1364
+
1365
+ .status-warning {
1366
+ background-color: rgba(245, 158, 11, 0.15);
1367
+ color: #d97706;
1368
+ }
1369
+
1370
+ .status-error {
1371
+ background-color: rgba(239, 68, 68, 0.15);
1372
+ color: #dc2626;
1373
+ }
1374
+
1375
+ .status-info {
1376
+ background-color: rgba(59, 130, 246, 0.15);
1377
+ color: #2563eb;
1378
+ }
1379
+
1380
+ /* Chart Container */
1381
+ .chart-container {
1382
+ background-color: var(--color-surface);
1383
+ border-radius: var(--radius-lg);
1384
+ border: 1px solid var(--color-card-border);
1385
+ padding: var(--space-24);
1386
+ margin-bottom: var(--space-24);
1387
+ }
1388
+
1389
+ .chart-wrapper {
1390
+ position: relative;
1391
+ height: 300px;
1392
+ }
1393
+
1394
+ /* Modal */
1395
+ .modal {
1396
+ display: none;
1397
+ position: fixed;
1398
+ top: 0;
1399
+ left: 0;
1400
+ right: 0;
1401
+ bottom: 0;
1402
+ background-color: rgba(0, 0, 0, 0.5);
1403
+ z-index: 2000;
1404
+ align-items: center;
1405
+ justify-content: center;
1406
+ }
1407
+
1408
+ .modal.active {
1409
+ display: flex;
1410
+ }
1411
+
1412
+ .modal-content {
1413
+ background-color: var(--color-surface);
1414
+ border-radius: var(--radius-lg);
1415
+ width: 90%;
1416
+ max-width: 800px;
1417
+ max-height: 90vh;
1418
+ overflow-y: auto;
1419
+ box-shadow: var(--shadow-lg);
1420
+ }
1421
+
1422
+ .modal-header {
1423
+ display: flex;
1424
+ align-items: center;
1425
+ justify-content: space-between;
1426
+ padding: var(--space-20);
1427
+ border-bottom: 1px solid var(--color-border);
1428
+ }
1429
+
1430
+ .modal-header h3 {
1431
+ font-size: var(--font-size-xl);
1432
+ font-weight: var(--font-weight-semibold);
1433
+ color: var(--color-text);
1434
+ }
1435
+
1436
+ .modal-close {
1437
+ background: none;
1438
+ border: none;
1439
+ font-size: 28px;
1440
+ cursor: pointer;
1441
+ color: var(--color-text-secondary);
1442
+ line-height: 1;
1443
+ }
1444
+
1445
+ .modal-close:hover {
1446
+ color: var(--color-text);
1447
+ }
1448
+
1449
+ .modal-body {
1450
+ padding: var(--space-24);
1451
+ }
1452
+
1453
+ /* Form */
1454
+ .form-group {
1455
+ margin-bottom: var(--space-16);
1456
+ }
1457
+
1458
+ .form-label {
1459
+ display: block;
1460
+ margin-bottom: var(--space-8);
1461
+ font-size: var(--font-size-sm);
1462
+ font-weight: var(--font-weight-medium);
1463
+ color: var(--color-text);
1464
+ }
1465
+
1466
+ .form-control {
1467
+ width: 100%;
1468
+ padding: var(--space-8) var(--space-12);
1469
+ border: 1px solid var(--color-border);
1470
+ border-radius: var(--radius-base);
1471
+ font-size: var(--font-size-base);
1472
+ color: var(--color-text);
1473
+ background-color: var(--color-background);
1474
+ }
1475
+
1476
+ .form-control:focus {
1477
+ outline: none;
1478
+ border-color: var(--color-primary);
1479
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
1480
+ }
1481
+
1482
+ textarea.form-control {
1483
+ min-height: 100px;
1484
+ resize: vertical;
1485
+ }
1486
+
1487
+ /* Toast */
1488
+ .toast {
1489
+ position: fixed;
1490
+ bottom: var(--space-24);
1491
+ right: var(--space-24);
1492
+ background-color: var(--color-slate-900);
1493
+ color: white;
1494
+ padding: var(--space-16) var(--space-24);
1495
+ border-radius: var(--radius-base);
1496
+ box-shadow: var(--shadow-lg);
1497
+ transform: translateY(200%);
1498
+ transition: transform 0.3s ease;
1499
+ z-index: 3000;
1500
+ }
1501
+
1502
+ .toast.show {
1503
+ transform: translateY(0);
1504
+ }
1505
+
1506
+ /* Grid Layout */
1507
+ .grid-2 {
1508
+ display: grid;
1509
+ grid-template-columns: repeat(2, 1fr);
1510
+ gap: var(--space-20);
1511
+ }
1512
+
1513
+ .grid-3 {
1514
+ display: grid;
1515
+ grid-template-columns: repeat(3, 1fr);
1516
+ gap: var(--space-20);
1517
+ }
1518
+
1519
+ /* Utility Classes */
1520
+ .text-center {
1521
+ text-align: center;
1522
+ }
1523
+
1524
+ .text-right {
1525
+ text-align: right;
1526
+ }
1527
+
1528
+ .mt-16 {
1529
+ margin-top: var(--space-16);
1530
+ }
1531
+
1532
+ .mb-16 {
1533
+ margin-bottom: var(--space-16);
1534
+ }
1535
+
1536
+ .hidden {
1537
+ display: none !important;
1538
+ }
1539
+
1540
+ /* AI Chatbot Widget Styles */
1541
+ .chatbot-toggle {
1542
+ position: fixed;
1543
+ bottom: 24px;
1544
+ right: 24px;
1545
+ width: 60px;
1546
+ height: 60px;
1547
+ border-radius: var(--radius-full);
1548
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-teal-700) 100%);
1549
+ border: none;
1550
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1551
+ cursor: pointer;
1552
+ z-index: 1500;
1553
+ transition: all 0.3s ease;
1554
+ display: flex;
1555
+ align-items: center;
1556
+ justify-content: center;
1557
+ }
1558
+
1559
+ .chatbot-toggle:hover {
1560
+ transform: scale(1.1);
1561
+ box-shadow: 0 6px 20px rgba(33, 128, 141, 0.4);
1562
+ }
1563
+
1564
+ .chatbot-toggle .chat-icon {
1565
+ font-size: 28px;
1566
+ }
1567
+
1568
+ .chatbot-toggle .notification-badge {
1569
+ position: absolute;
1570
+ top: -4px;
1571
+ right: -4px;
1572
+ background-color: var(--color-error);
1573
+ color: white;
1574
+ font-size: 11px;
1575
+ padding: 3px 6px;
1576
+ border-radius: var(--radius-full);
1577
+ font-weight: var(--font-weight-bold);
1578
+ min-width: 20px;
1579
+ text-align: center;
1580
+ }
1581
+
1582
+ .chatbot-widget {
1583
+ position: fixed;
1584
+ bottom: 100px;
1585
+ right: 24px;
1586
+ width: 420px;
1587
+ height: 600px;
1588
+ background-color: var(--color-surface);
1589
+ border-radius: var(--radius-lg);
1590
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
1591
+ display: flex;
1592
+ flex-direction: column;
1593
+ z-index: 1600;
1594
+ transform: scale(0.8) translateY(20px);
1595
+ opacity: 0;
1596
+ pointer-events: none;
1597
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
1598
+ border: 1px solid var(--color-border);
1599
+ }
1600
+
1601
+ .chatbot-widget.active {
1602
+ transform: scale(1) translateY(0);
1603
+ opacity: 1;
1604
+ pointer-events: all;
1605
+ }
1606
+
1607
+ .chatbot-header {
1608
+ background: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-teal-700) 100%);
1609
+ color: white;
1610
+ padding: var(--space-16);
1611
+ border-radius: var(--radius-lg) var(--radius-lg) 0 0;
1612
+ display: flex;
1613
+ align-items: center;
1614
+ justify-content: space-between;
1615
+ }
1616
+
1617
+ .chatbot-header-left {
1618
+ display: flex;
1619
+ align-items: center;
1620
+ gap: var(--space-12);
1621
+ }
1622
+
1623
+ .chatbot-icon {
1624
+ font-size: 28px;
1625
+ }
1626
+
1627
+ .chatbot-title {
1628
+ font-size: var(--font-size-lg);
1629
+ font-weight: var(--font-weight-semibold);
1630
+ line-height: 1.2;
1631
+ }
1632
+
1633
+ .chatbot-status {
1634
+ font-size: var(--font-size-xs);
1635
+ opacity: 0.9;
1636
+ margin-top: 2px;
1637
+ }
1638
+
1639
+ .chatbot-header-actions {
1640
+ display: flex;
1641
+ gap: var(--space-4);
1642
+ }
1643
+
1644
+ .chatbot-action-btn {
1645
+ background: rgba(255, 255, 255, 0.1);
1646
+ border: none;
1647
+ width: 32px;
1648
+ height: 32px;
1649
+ border-radius: var(--radius-base);
1650
+ cursor: pointer;
1651
+ display: flex;
1652
+ align-items: center;
1653
+ justify-content: center;
1654
+ font-size: 18px;
1655
+ color: white;
1656
+ transition: background 0.2s;
1657
+ }
1658
+
1659
+ .chatbot-action-btn:hover {
1660
+ background: rgba(255, 255, 255, 0.2);
1661
+ }
1662
+
1663
+ .chatbot-body {
1664
+ flex: 1;
1665
+ overflow-y: auto;
1666
+ padding: var(--space-16);
1667
+ background-color: var(--color-background);
1668
+ }
1669
+
1670
+ .chatbot-welcome {
1671
+ text-align: center;
1672
+ padding: var(--space-20);
1673
+ }
1674
+
1675
+ .welcome-icon {
1676
+ font-size: 48px;
1677
+ margin-bottom: var(--space-12);
1678
+ }
1679
+
1680
+ .chatbot-welcome h3 {
1681
+ font-size: var(--font-size-xl);
1682
+ margin-bottom: var(--space-8);
1683
+ color: var(--color-text);
1684
+ }
1685
+
1686
+ .chatbot-welcome p {
1687
+ color: var(--color-text-secondary);
1688
+ margin-bottom: var(--space-16);
1689
+ }
1690
+
1691
+ .quick-actions {
1692
+ display: grid;
1693
+ grid-template-columns: 1fr 1fr;
1694
+ gap: var(--space-8);
1695
+ margin-bottom: var(--space-20);
1696
+ }
1697
+
1698
+ .quick-action-btn {
1699
+ padding: var(--space-12);
1700
+ background-color: var(--color-surface);
1701
+ border: 1px solid var(--color-border);
1702
+ border-radius: var(--radius-base);
1703
+ font-size: var(--font-size-sm);
1704
+ font-weight: var(--font-weight-medium);
1705
+ cursor: pointer;
1706
+ transition: all 0.2s;
1707
+ text-align: left;
1708
+ color: var(--color-text);
1709
+ }
1710
+
1711
+ .quick-action-btn:hover {
1712
+ background-color: var(--color-secondary);
1713
+ border-color: var(--color-primary);
1714
+ transform: translateY(-1px);
1715
+ }
1716
+
1717
+ .suggested-questions {
1718
+ text-align: left;
1719
+ margin-top: var(--space-20);
1720
+ }
1721
+
1722
+ .suggested-questions p {
1723
+ font-size: var(--font-size-sm);
1724
+ margin-bottom: var(--space-8);
1725
+ }
1726
+
1727
+ .suggestion-btn {
1728
+ display: block;
1729
+ width: 100%;
1730
+ padding: var(--space-8) var(--space-12);
1731
+ margin-bottom: var(--space-8);
1732
+ background-color: var(--color-surface);
1733
+ border: 1px solid var(--color-border);
1734
+ border-radius: var(--radius-base);
1735
+ text-align: left;
1736
+ font-size: var(--font-size-sm);
1737
+ cursor: pointer;
1738
+ transition: all 0.2s;
1739
+ color: var(--color-text);
1740
+ }
1741
+
1742
+ .suggestion-btn:hover {
1743
+ background-color: var(--color-bg-1);
1744
+ border-color: var(--color-primary);
1745
+ }
1746
+
1747
+ .chatbot-messages {
1748
+ display: flex;
1749
+ flex-direction: column;
1750
+ gap: var(--space-16);
1751
+ }
1752
+
1753
+ .chat-message {
1754
+ display: flex;
1755
+ gap: var(--space-12);
1756
+ animation: messageSlideIn 0.3s ease;
1757
+ }
1758
+
1759
+ @keyframes messageSlideIn {
1760
+ from {
1761
+ opacity: 0;
1762
+ transform: translateY(10px);
1763
+ }
1764
+ to {
1765
+ opacity: 1;
1766
+ transform: translateY(0);
1767
+ }
1768
+ }
1769
+
1770
+ .chat-message.user {
1771
+ flex-direction: row-reverse;
1772
+ }
1773
+
1774
+ .message-avatar {
1775
+ width: 32px;
1776
+ height: 32px;
1777
+ border-radius: var(--radius-full);
1778
+ display: flex;
1779
+ align-items: center;
1780
+ justify-content: center;
1781
+ font-size: 18px;
1782
+ flex-shrink: 0;
1783
+ }
1784
+
1785
+ .message-avatar.bot {
1786
+ background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-teal-700) 100%);
1787
+ }
1788
+
1789
+ .message-avatar.user {
1790
+ background-color: var(--color-secondary);
1791
+ }
1792
+
1793
+ .message-content {
1794
+ max-width: 75%;
1795
+ }
1796
+
1797
+ .message-bubble {
1798
+ padding: var(--space-12) var(--space-16);
1799
+ border-radius: var(--radius-md);
1800
+ font-size: var(--font-size-base);
1801
+ line-height: 1.5;
1802
+ }
1803
+
1804
+ .chat-message.bot .message-bubble {
1805
+ background-color: var(--color-surface);
1806
+ border: 1px solid var(--color-border);
1807
+ color: var(--color-text);
1808
+ }
1809
+
1810
+ .chat-message.user .message-bubble {
1811
+ background-color: var(--color-primary);
1812
+ color: white;
1813
+ }
1814
+
1815
+ .message-time {
1816
+ font-size: var(--font-size-xs);
1817
+ color: var(--color-text-secondary);
1818
+ margin-top: var(--space-4);
1819
+ padding: 0 var(--space-4);
1820
+ }
1821
+
1822
+ .chat-message.user .message-time {
1823
+ text-align: right;
1824
+ }
1825
+
1826
+ .message-actions {
1827
+ display: flex;
1828
+ gap: var(--space-8);
1829
+ margin-top: var(--space-8);
1830
+ flex-wrap: wrap;
1831
+ }
1832
+
1833
+ .action-btn {
1834
+ padding: var(--space-4) var(--space-12);
1835
+ background-color: var(--color-surface);
1836
+ border: 1px solid var(--color-border);
1837
+ border-radius: var(--radius-sm);
1838
+ font-size: var(--font-size-xs);
1839
+ font-weight: var(--font-weight-medium);
1840
+ cursor: pointer;
1841
+ transition: all 0.2s;
1842
+ color: var(--color-text);
1843
+ }
1844
+
1845
+ .action-btn:hover {
1846
+ background-color: var(--color-primary);
1847
+ color: white;
1848
+ border-color: var(--color-primary);
1849
+ }
1850
+
1851
+ .typing-indicator {
1852
+ display: flex;
1853
+ gap: var(--space-4);
1854
+ padding: var(--space-12);
1855
+ background-color: var(--color-surface);
1856
+ border: 1px solid var(--color-border);
1857
+ border-radius: var(--radius-md);
1858
+ width: fit-content;
1859
+ }
1860
+
1861
+ .typing-dot {
1862
+ width: 8px;
1863
+ height: 8px;
1864
+ border-radius: 50%;
1865
+ background-color: var(--color-text-secondary);
1866
+ animation: typingBounce 1.4s infinite;
1867
+ }
1868
+
1869
+ .typing-dot:nth-child(2) {
1870
+ animation-delay: 0.2s;
1871
+ }
1872
+
1873
+ .typing-dot:nth-child(3) {
1874
+ animation-delay: 0.4s;
1875
+ }
1876
+
1877
+ @keyframes typingBounce {
1878
+ 0%, 60%, 100% {
1879
+ transform: translateY(0);
1880
+ }
1881
+ 30% {
1882
+ transform: translateY(-8px);
1883
+ }
1884
+ }
1885
+
1886
+ .data-table-chat {
1887
+ width: 100%;
1888
+ border-collapse: collapse;
1889
+ margin: var(--space-8) 0;
1890
+ font-size: var(--font-size-sm);
1891
+ background-color: var(--color-background);
1892
+ border-radius: var(--radius-base);
1893
+ overflow: hidden;
1894
+ }
1895
+
1896
+ .data-table-chat th {
1897
+ background-color: var(--color-bg-1);
1898
+ padding: var(--space-8);
1899
+ text-align: left;
1900
+ font-weight: var(--font-weight-semibold);
1901
+ border-bottom: 1px solid var(--color-border);
1902
+ }
1903
+
1904
+ .data-table-chat td {
1905
+ padding: var(--space-8);
1906
+ border-bottom: 1px solid var(--color-border);
1907
+ }
1908
+
1909
+ .metric-highlight {
1910
+ font-weight: var(--font-weight-bold);
1911
+ color: var(--color-primary);
1912
+ }
1913
+
1914
+ .alert-icon {
1915
+ margin-right: var(--space-4);
1916
+ }
1917
+
1918
+ .chatbot-footer {
1919
+ padding: var(--space-16);
1920
+ border-top: 1px solid var(--color-border);
1921
+ background-color: var(--color-surface);
1922
+ }
1923
+
1924
+ .chatbot-input-wrapper {
1925
+ display: flex;
1926
+ gap: var(--space-8);
1927
+ }
1928
+
1929
+ .chatbot-input {
1930
+ flex: 1;
1931
+ padding: var(--space-12);
1932
+ border: 1px solid var(--color-border);
1933
+ border-radius: var(--radius-base);
1934
+ font-size: var(--font-size-base);
1935
+ background-color: var(--color-background);
1936
+ color: var(--color-text);
1937
+ }
1938
+
1939
+ .chatbot-input:focus {
1940
+ outline: none;
1941
+ border-color: var(--color-primary);
1942
+ box-shadow: 0 0 0 3px var(--color-focus-ring);
1943
+ }
1944
+
1945
+ .chatbot-send-btn {
1946
+ width: 44px;
1947
+ height: 44px;
1948
+ background-color: var(--color-primary);
1949
+ border: none;
1950
+ border-radius: var(--radius-base);
1951
+ color: white;
1952
+ font-size: 20px;
1953
+ cursor: pointer;
1954
+ display: flex;
1955
+ align-items: center;
1956
+ justify-content: center;
1957
+ transition: all 0.2s;
1958
+ }
1959
+
1960
+ .chatbot-send-btn:hover {
1961
+ background-color: var(--color-primary-hover);
1962
+ transform: scale(1.05);
1963
+ }
1964
+
1965
+ .chatbot-send-btn:active {
1966
+ transform: scale(0.95);
1967
+ }
1968
+
1969
+ /* Responsive */
1970
+ @media (max-width: 1024px) {
1971
+ .grid-3 {
1972
+ grid-template-columns: repeat(2, 1fr);
1973
+ }
1974
+ }
1975
+
1976
+ @media (max-width: 1024px) {
1977
+ .jjaa-logo {
1978
+ width: 160px;
1979
+ }
1980
+ }
1981
+
1982
+ @media (max-width: 768px) {
1983
+ .sidebar {
1984
+ transform: translateX(-100%);
1985
+ }
1986
+
1987
+ .sidebar.active {
1988
+ transform: translateX(0);
1989
+ }
1990
+
1991
+ .main-content {
1992
+ margin-left: 0;
1993
+ }
1994
+
1995
+ .grid-2,
1996
+ .grid-3 {
1997
+ grid-template-columns: 1fr;
1998
+ }
1999
+
2000
+ .header-center {
2001
+ display: none;
2002
+ }
2003
+
2004
+ .stats-grid {
2005
+ grid-template-columns: 1fr;
2006
+ }
2007
+
2008
+ .jjaa-logo {
2009
+ width: 140px;
2010
+ }
2011
+
2012
+ .logo {
2013
+ padding: 8px 12px;
2014
+ }
2015
+
2016
+ .chatbot-widget {
2017
+ width: calc(100vw - 32px);
2018
+ height: calc(100vh - 140px);
2019
+ right: 16px;
2020
+ bottom: 90px;
2021
+ }
2022
+
2023
+ .chatbot-toggle {
2024
+ bottom: 16px;
2025
+ right: 16px;
2026
+ }
2027
+ }