build-small-hackathon/Off-Grid-Field-Repair-Logbook

1@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Outfit:wght@300;400;600;700&display=swap');2 3/* P3 Off-Grid Field Repair Logbook — Premium Industrial Terminal UI */4 5:root {6  color-scheme: dark;7  --bg-gradient: linear-gradient(135deg, #020617 0%, #0b1329 50%, #0f172a 100%);8  --accent-color: #10b981; /* Emerald */9  --accent-glow: rgba(16, 185, 129, 0.2);10  --warning-color: #f59e0b; /* Amber */11  --warning-glow: rgba(245, 158, 11, 0.2);12  --border-color: rgba(16, 185, 129, 0.25);13  --card-bg: rgba(15, 23, 42, 0.65);14  --input-bg: rgba(3, 7, 18, 0.85);15  --text-main: #f1f5f9;16  --text-muted: #94a3b8;17  --text-green: #34d399;18}19 20.gradio-container {21  background: var(--bg-gradient) !important;22  color: var(--text-main) !important;23  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif !important;24  font-size: 16px;25  line-height: 1.6;26}27 28.gradio-container span,29.gradio-container label,30.gradio-container .markdown li {31  color: var(--text-main) !important;32}33 34/* Custom Typography */35.gradio-container h1 {36  font-family: 'Outfit', sans-serif;37  font-weight: 700;38  letter-spacing: -0.02em;39  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);40  -webkit-background-clip: text;41  background-clip: text;42  -webkit-text-fill-color: transparent;43  text-transform: uppercase;44}45 46.gradio-container h2, 47.gradio-container h3, 48.gradio-container h4 {49  font-family: 'Outfit', sans-serif;50  font-weight: 600;51  color: var(--text-green);52  letter-spacing: 0.05em;53  text-transform: uppercase;54}55 56/* Monospace overrides for technical details */57.gradio-container code,58.gradio-container pre,59.diagnosis-card,60.pack-info,61.status-bar {62  font-family: 'SFMono-Regular', 'JetBrains Mono', monospace !important;63}64 65/* Glassmorphism Cards */66.gradio-container .block {67  background: var(--card-bg) !important;68  border: 1px solid rgba(255, 255, 255, 0.05) !important;69  backdrop-filter: blur(12px);70  border-radius: 12px !important;71  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;72}73 74/* Inputs & Form Elements */75.gradio-container input,76.gradio-container textarea,77.gradio-container select,78.gradio-container .dropdown {79  background: var(--input-bg) !important;80  color: var(--text-main) !important;81  border: 1px solid var(--border-color) !important;82  border-radius: 8px !important;83  transition: all 0.3s ease;84}85 86.gradio-container input:focus,87.gradio-container textarea:focus,88.gradio-container select:focus {89  border-color: var(--accent-color) !important;90  box-shadow: 0 0 10px var(--accent-glow) !important;91  outline: none;92}93 94/* Table Styling */95.gradio-container table {96  border-collapse: separate;97  border-spacing: 0;98  width: 100%;99}100 101.gradio-container th {102  background: rgba(16, 185, 129, 0.1) !important;103  color: var(--text-green) !important;104  font-family: 'SFMono-Regular', 'JetBrains Mono', monospace;105  font-size: 13px;106  text-transform: uppercase;107  padding: 10px !important;108  border-bottom: 2px solid var(--accent-color) !important;109}110 111.gradio-container td {112  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;113  padding: 10px !important;114  font-size: 14px;115}116 117/* Buttons and Micro-animations */118.gradio-container button {119  border-radius: 8px !important;120  font-family: 'Outfit', sans-serif !important;121  font-weight: 600 !important;122  text-transform: uppercase;123  letter-spacing: 0.05em;124  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;125}126 127.gradio-container button:hover {128  transform: translateY(-2px);129}130 131.gradio-container button.primary {132  background: linear-gradient(135deg, #10b981, #059669) !important;133  color: #020617 !important;134  border: none !important;135  box-shadow: 0 4px 14px var(--accent-glow) !important;136}137 138.gradio-container button.primary:hover {139  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;140}141 142.gradio-container button.secondary {143  background: rgba(16, 185, 129, 0.05) !important;144  color: var(--text-green) !important;145  border: 1px solid var(--accent-color) !important;146}147 148.gradio-container button.secondary:hover {149  background: rgba(16, 185, 129, 0.15) !important;150  box-shadow: 0 0 12px var(--accent-glow) !important;151}152 153/* Custom Components Styles */154 155/* Status Bar styling */156.status-bar {157  background: rgba(16, 185, 129, 0.04) !important;158  border-left: 4px solid var(--accent-color) !important;159  padding: 12px 16px !important;160  border-radius: 6px;161  margin-bottom: 20px;162  color: var(--text-green) !important;163  font-weight: 500;164  box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.05);165}166 167/* Pack Info dashboard widget */168.pack-info {169  background: rgba(245, 158, 11, 0.03) !important;170  border: 1px dashed var(--warning-color) !important;171  padding: 12px 16px !important;172  border-radius: 8px;173  margin-top: 10px;174  margin-bottom: 15px;175  color: var(--warning-color) !important;176}177 178/* Diagnosis card representing a terminal screen */179.diagnosis-card {180  background: rgba(2, 6, 17, 0.9) !important;181  border: 1px solid rgba(16, 185, 129, 0.4) !important;182  padding: 20px !important;183  border-radius: 10px;184  color: #a7f3d0 !important;185  box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.1), 0 0 15px rgba(0, 0, 0, 0.5);186  max-height: 400px;187  overflow-y: auto;188}189 190.diagnosis-card h1, .diagnosis-card h2, .diagnosis-card h3 {191  color: var(--warning-color) !important;192  border-bottom: 1px solid rgba(245, 158, 11, 0.2);193  padding-bottom: 5px;194  margin-top: 15px;195}196 197.diagnosis-card strong {198  color: #f59e0b !important;199}200 201/* File Upload drag-and-drop region styling */202.upload-area {203  border: 2px dashed rgba(16, 185, 129, 0.3) !important;204  background: rgba(16, 185, 129, 0.02) !important;205  border-radius: 10px !important;206  padding: 30px !important;207  text-align: center;208  transition: all 0.3s ease;209}210 211.upload-area:hover {212  border-color: var(--accent-color) !important;213  background: rgba(16, 185, 129, 0.05) !important;214}215 216/* Tab Active states */217.gradio-container .tab-nav button {218  color: var(--text-main) !important;219  background-color: transparent !important;220}221.gradio-container .tab-nav button.selected,222.gradio-container .tabs .tab-button.selected {223  border-bottom: 2px solid var(--accent-color) !important;224  background-color: var(--card-bg) !important;225  color: var(--text-green) !important;226  font-weight: bold;227}228 229/* Fix subtitle/description contrast on dark background */230.gradio-container .markdown p,231.gradio-container .prose p,232.gradio-container p {233  color: var(--text-muted) !important;234}235 236.gradio-container .markdown strong,237.gradio-container .prose strong {238  color: var(--text-main) !important;239}240 241/* Status bar improvements */242.gradio-container .status-bar {243  background: rgba(16, 185, 129, 0.08) !important;244  border: 1px solid rgba(16, 185, 129, 0.2) !important;245  border-radius: 10px;246  padding: 10px 14px !important;247  color: var(--text-green) !important;248  font-family: 'SFMono-Regular', 'JetBrains Mono', monospace !important;249  font-size: 0.85rem;250}251 252/* Dropdown improvements */253.gradio-container .wrap-inner .svelte-select,254.gradio-container .svelte-select-list,255.gradio-container select {256  color: var(--text-main) !important;257  background: var(--input-bg) !important;258}259 260