adz235/Reeferworxs

1/* monitor.css - Specific styles for Reefer Monitoring Log */2 3.monitor-dashboard {4  display: flex;5  flex-direction: column;6  gap: 1.5rem;7}8 9.entry-section {10  background: var(--bg-secondary);11  border: 1px solid var(--border-color);12  border-radius: var(--radius-lg);13  padding: 1.5rem;14  backdrop-filter: blur(10px);15}16 17.monitor-form .form-row-grid {18  display: grid;19  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));20  gap: 1rem;21  align-items: flex-end;22}23 24.form-group {25  display: flex;26  flex-direction: column;27  gap: 0.5rem;28}29 30.form-group label {31  font-size: 0.85rem;32  font-weight: 600;33  color: var(--text-secondary);34}35 36.form-group input {37  padding: 0.6rem 0.75rem;38  border-radius: var(--radius-md);39  border: 1px solid rgba(255, 255, 255, 0.1);40  background: rgba(0, 0, 0, 0.2);41  color: #fff;42  font-family: inherit;43  transition: var(--transition);44}45 46.form-group input:focus {47  outline: none;48  border-color: var(--border-focus);49  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);50}51 52.btn-group-align {53  justify-content: flex-end;54}55 56.w-full {57  width: 100%;58}59 60.action-bar {61  display: flex;62  justify-content: space-between;63  align-items: center;64}65 66.stats-overview {67  display: flex;68  gap: 0.5rem;69  align-items: center;70}71 72.variance-normal {73  color: #10b981;74  font-weight: 600;75}76 77.variance-warning {78  color: #f59e0b;79  font-weight: 600;80}81 82.variance-danger {83  color: #ef4444;84  font-weight: 600;85}86 87.btn-delete {88  background: transparent;89  border: none;90  color: var(--text-muted);91  cursor: pointer;92  font-size: 1.2rem;93  transition: var(--transition);94  padding: 0.25rem;95  border-radius: var(--radius-sm);96}97 98.btn-delete:hover {99  color: #ef4444;100  background: rgba(239, 68, 68, 0.1);101}102 103.table-input {104  width: 70px;105  padding: 0.3rem 0.5rem;106  border-radius: var(--radius-sm);107  border: 1px solid rgba(255, 255, 255, 0.2);108  background: rgba(0, 0, 0, 0.3);109  color: #fff;110  font-family: inherit;111  font-size: 0.9rem;112  text-align: center;113  transition: var(--transition);114}115 116.table-input:focus {117  outline: none;118  border-color: var(--border-focus);119  background: rgba(0, 0, 0, 0.5);120}121 122/* Tabs */123.monitor-tabs {124  display: flex;125  gap: 1rem;126  margin-bottom: 1.5rem;127  border-bottom: 1px solid var(--border-color);128  padding-bottom: 1rem;129}130 131.tab-btn {132  background: transparent;133  border: 1px solid var(--border-color);134  color: var(--text-secondary);135  padding: 0.6rem 1.2rem;136  border-radius: var(--radius-sm);137  font-size: 1rem;138  font-weight: 500;139  cursor: pointer;140  transition: var(--transition);141}142 143.tab-btn:hover {144  background: var(--bg-secondary);145  color: var(--text-primary);146}147 148.tab-btn.active {149  background: var(--accent-light);150  color: #a5b4fc;151  border-color: var(--border-focus);152}153 154.tab-content {155  display: none;156  animation: fadeIn 0.3s ease;157}158 159.tab-content.active {160  display: block;161}162 163@keyframes fadeIn {164  from { opacity: 0; transform: translateY(5px); }165  to { opacity: 1; transform: translateY(0); }166}167 168/* History Table */169.history-row {170  background: rgba(0, 0, 0, 0.15);171}172 173.history-container {174  padding: 1rem 2rem 1rem 3rem;175  border-left: 3px solid var(--accent-light);176}177 178.history-table {179  width: 100%;180  border-collapse: collapse;181  font-size: 0.9rem;182}183 184.history-table th {185  color: var(--text-muted);186  text-align: left;187  padding: 0.5rem;188  border-bottom: 1px solid rgba(255,255,255,0.1);189  font-weight: 500;190}191 192.history-table td {193  padding: 0.5rem;194  border-bottom: 1px solid rgba(255,255,255,0.05);195  color: var(--text-secondary);196}197 198.btn-expand {199  background: transparent;200  border: none;201  color: var(--text-primary);202  cursor: pointer;203  width: 24px;204  height: 24px;205  border-radius: 50%;206  display: inline-flex;207  align-items: center;208  justify-content: center;209  transition: var(--transition);210  margin-right: 0.25rem;211  font-size: 0.7rem;212}213 214.btn-expand:hover {215  background: rgba(255, 255, 255, 0.1);216}217 218.btn-expand.open {219  transform: rotate(90deg);220}221 222.quick-log-group {223  display: flex;224  gap: 0.25rem;225  align-items: center;226}227 228.quick-log-input {229  width: 60px;230  padding: 0.3rem;231  border-radius: var(--radius-sm);232  border: 1px solid rgba(255, 255, 255, 0.2);233  background: rgba(0, 0, 0, 0.3);234  color: #fff;235  font-family: inherit;236  font-size: 0.9rem;237  text-align: center;238}239 240.quick-log-input:focus {241  outline: none;242  border-color: var(--border-focus);243}244 245.btn-quick-log {246  background: var(--accent-light);247  border: none;248  color: #fff;249  padding: 0.3rem 0.5rem;250  border-radius: var(--radius-sm);251  cursor: pointer;252  font-weight: 600;253  transition: var(--transition);254}255 256.btn-quick-log:hover {257  background: var(--accent-hover);258}259