@tattvafoundation/upyog-css 1.0.30 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1229 @@
1
+ /* Color Palette - Professional Blue Theme */
2
+ :root {
3
+ --primary-color: #2563eb;
4
+ --primary-hover: #1d4ed8;
5
+ --primary-light: #dbeafe;
6
+ --secondary-color: #64748b;
7
+ --secondary-light: #f1f5f9;
8
+ --success-color: #059669;
9
+ --warning-color: #d97706;
10
+ --danger-color: #dc2626;
11
+ --dark-color: #1e293b;
12
+ --light-color: #f8fafc;
13
+ --border-color: #e2e8f0;
14
+ --text-primary: #0f172a;
15
+ --text-secondary: #64748b;
16
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
17
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
18
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
19
+ }
20
+
21
+ /* Base Styles */
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
30
+ background: linear-gradient(135deg, var(--primary-light) 0%, var(--light-color) 100%);
31
+ color: var(--text-primary);
32
+ line-height: 1.6;
33
+ min-height: 100vh;
34
+ }
35
+
36
+ .inventory_container {
37
+ max-width: 2000px;
38
+ margin: 0 auto;
39
+ padding: 2rem;
40
+ }
41
+
42
+ /* Header Styles */
43
+ .inventory_header {
44
+ text-align: center;
45
+ margin-bottom: 3rem;
46
+ padding: 2rem 0;
47
+ background: white;
48
+ border-radius: 12px;
49
+ box-shadow: var(--shadow-md);
50
+ }
51
+
52
+ .inventory_header h1 {
53
+ color: var(--primary-color);
54
+ font-size: 2.5rem;
55
+ font-weight: 700;
56
+ margin-bottom: 0.5rem;
57
+ }
58
+
59
+ .inventory_header p {
60
+ color: var(--text-secondary);
61
+ font-size: 1.1rem;
62
+ }
63
+
64
+ /* Form Container */
65
+ .inventory_form-container {
66
+ background: white;
67
+ border-radius: 16px;
68
+ box-shadow: var(--shadow-lg);
69
+ overflow: hidden;
70
+ transition: all 0.3s ease;
71
+ }
72
+
73
+ /* Form Header */
74
+ .inventory_form-header {
75
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
76
+ color: white;
77
+ padding: 2rem;
78
+ text-align: center;
79
+ }
80
+
81
+ .inventory_form-header h2 {
82
+ font-size: 1.8rem;
83
+ font-weight: 600;
84
+ margin-bottom: 0.5rem;
85
+ }
86
+
87
+ .inventory_form-header p {
88
+ opacity: 0.9;
89
+ font-size: 1rem;
90
+ }
91
+
92
+ /* Form Body */
93
+ .inventory_form-body {
94
+ padding: 2.5rem;
95
+ }
96
+
97
+ /* Form Groups */
98
+ .inventory_form-grid {
99
+ display: grid;
100
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
101
+ gap: 2rem;
102
+ margin-bottom: 2rem;
103
+ }
104
+
105
+ .inventory_form-group {
106
+ position: relative;
107
+ }
108
+
109
+ .inventory_form-group.full-width {
110
+ grid-column: 1 / -1;
111
+ }
112
+
113
+ /* Labels */
114
+ .inventory_form-label {
115
+ display: block;
116
+ font-weight: 600;
117
+ color: var(--text-primary);
118
+ margin-bottom: 0.5rem;
119
+ font-size: 0.95rem;
120
+ }
121
+
122
+ .inventory_required {
123
+ color: var(--danger-color);
124
+ margin-left: 2px;
125
+ }
126
+
127
+ /* Input Styles */
128
+ .inventory_form-input,
129
+ .inventory_form-select,
130
+ .inventory_form-textarea {
131
+ width: 100%;
132
+ padding: 0.875rem 1rem;
133
+ border: 2px solid var(--border-color);
134
+ border-radius: 8px;
135
+ font-size: 1rem;
136
+ transition: all 0.3s ease;
137
+ background: white;
138
+ color: var(--text-primary);
139
+ line-height: normal;
140
+ }
141
+
142
+ .inventory_form-input:focus,
143
+ .inventory_form-select:focus,
144
+ .inventory_form-textarea:focus {
145
+ outline: none;
146
+ border-color: var(--primary-color);
147
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
148
+ transform: translateY(-1px);
149
+ }
150
+
151
+ .inventory_form-textarea {
152
+ resize: vertical;
153
+ min-height: 100px;
154
+ }
155
+
156
+ /* Radio Group Styles */
157
+ .inventory_radio-group {
158
+ display: flex;
159
+ gap: 1.5rem;
160
+ flex-wrap: wrap;
161
+ margin-top: 0.5rem;
162
+ }
163
+
164
+ .inventory_radio-option {
165
+ display: flex;
166
+ align-items: center;
167
+ cursor: pointer;
168
+ padding: 0.75rem 1rem;
169
+ border: 2px solid var(--border-color);
170
+ border-radius: 8px;
171
+ transition: all 0.3s ease;
172
+ background: white;
173
+ min-width: 140px;
174
+ }
175
+
176
+ .inventory_radio-option:hover {
177
+ border-color: var(--primary-color);
178
+ background: var(--primary-light);
179
+ }
180
+
181
+ .inventory_radio-option input[type="radio"] {
182
+ margin-right: 0.5rem;
183
+ accent-color: var(--primary-color);
184
+ }
185
+
186
+ .inventory_radio-option.selected {
187
+ border-color: var(--primary-color);
188
+ background: var(--primary-light);
189
+ font-weight: 600;
190
+ }
191
+
192
+ /* Section Dividers */
193
+ .inventory_section-divider {
194
+ border: none;
195
+ height: 1px;
196
+ background: linear-gradient(90deg, transparent, var(--border-color), transparent);
197
+ margin: 2.5rem 0;
198
+ }
199
+
200
+ .inventory_section-title {
201
+ font-size: 1.3rem;
202
+ font-weight: 600;
203
+ color: var(--primary-color);
204
+ margin-bottom: 1.5rem;
205
+ padding-bottom: 0.5rem;
206
+ border-bottom: 2px solid var(--primary-light);
207
+ }
208
+
209
+ /* Button Styles */
210
+ .inventory_button-group {
211
+ display: flex;
212
+ gap: 1rem;
213
+ justify-content: flex-end;
214
+ margin-top: 3rem;
215
+ flex-wrap: wrap;
216
+ }
217
+
218
+ .inventory_btn {
219
+ padding: 0.875rem 2rem;
220
+ border: none;
221
+ border-radius: 8px;
222
+ font-size: 1rem;
223
+ font-weight: 600;
224
+ cursor: pointer;
225
+ transition: all 0.3s ease;
226
+ text-transform: uppercase;
227
+ letter-spacing: 0.5px;
228
+ min-width: 120px;
229
+ }
230
+
231
+ .inventory_btn-primary {
232
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
233
+ color: white;
234
+ box-shadow: var(--shadow-md);
235
+ }
236
+
237
+ .inventory_btn-primary:hover {
238
+ transform: translateY(-2px);
239
+ box-shadow: var(--shadow-lg);
240
+ }
241
+
242
+ .inventory_btn-secondary {
243
+ background: var(--secondary-light);
244
+ color: var(--secondary-color);
245
+ border: 2px solid var(--border-color);
246
+ }
247
+
248
+ .inventory_btn-secondary:hover {
249
+ background: var(--border-color);
250
+ transform: translateY(-1px);
251
+ }
252
+
253
+ /* Status indicator */
254
+ .inventory_status-indicator {
255
+ display: inline-block;
256
+ width: 8px;
257
+ height: 8px;
258
+ border-radius: 50%;
259
+ background: var(--success-color);
260
+ margin-left: 0.5rem;
261
+ animation: pulse 2s infinite;
262
+ }
263
+
264
+ @keyframes pulse {
265
+ 0% {
266
+ opacity: 1;
267
+ }
268
+ 50% {
269
+ opacity: 0.5;
270
+ }
271
+ 100% {
272
+ opacity: 1;
273
+ }
274
+ }
275
+
276
+ /* Responsive Design */
277
+ @media (max-width: 768px) {
278
+ .inventory_container {
279
+ padding: 1rem;
280
+ }
281
+
282
+ .inventory_form-grid {
283
+ grid-template-columns: 1fr;
284
+ gap: 1.5rem;
285
+ }
286
+
287
+ .inventory_header h1 {
288
+ font-size: 2rem;
289
+ }
290
+
291
+ .inventory_form-body {
292
+ padding: 1.5rem;
293
+ }
294
+
295
+ .inventory_button-group {
296
+ justify-content: center;
297
+ }
298
+
299
+ .inventory_radio-group {
300
+ flex-direction: column;
301
+ }
302
+
303
+ .inventory_radio-option {
304
+ justify-content: center;
305
+ }
306
+ }
307
+
308
+ /*commodity card design */
309
+
310
+ .commodity-card {
311
+ background: #ffffff;
312
+ border: 1px solid #e2e8f0;
313
+ border-radius: 12px;
314
+ padding: 10px;
315
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
316
+ transition: all 0.3s ease;
317
+ max-width: 400px;
318
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
319
+ }
320
+
321
+ .commodity-card:hover {
322
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
323
+ transform: translateY(-2px);
324
+ }
325
+
326
+ .commodity-card__header {
327
+ position: relative;
328
+ margin-bottom: 16px;
329
+ }
330
+
331
+ .commodity-card__image-container {
332
+ position: relative;
333
+ width: 100%;
334
+ height: 200px;
335
+ background: #f8fafc;
336
+ border-radius: 8px;
337
+ overflow: hidden;
338
+ display: flex;
339
+ align-items: center;
340
+ justify-content: center;
341
+ }
342
+
343
+ .commodity-card__image {
344
+ width: 100%;
345
+ height: 100%;
346
+ object-fit: cover;
347
+ }
348
+
349
+ .commodity-card__placeholder {
350
+ display: flex;
351
+ align-items: center;
352
+ justify-content: center;
353
+ color: #64748b;
354
+ }
355
+
356
+ .commodity-card__badge {
357
+ position: absolute;
358
+ top: 12px;
359
+ left: 12px;
360
+ background: #3b82f6;
361
+ color: white;
362
+ padding: 4px 12px;
363
+ border-radius: 20px;
364
+ font-size: 12px;
365
+ font-weight: 600;
366
+ text-transform: uppercase;
367
+ letter-spacing: 0.5px;
368
+ }
369
+
370
+ .commodity-card__stock {
371
+ position: absolute;
372
+ top: 12px;
373
+ right: 12px;
374
+ padding: 4px 12px;
375
+ border-radius: 20px;
376
+ font-size: 12px;
377
+ font-weight: 600;
378
+ text-transform: uppercase;
379
+ }
380
+
381
+ .commodity-card__stock.in-stock {
382
+ background: #10b981;
383
+ color: white;
384
+ }
385
+
386
+ .commodity-card__stock.out-of-stock {
387
+ background: #ef4444;
388
+ color: white;
389
+ }
390
+
391
+ .commodity-card__body {
392
+ display: flex;
393
+ flex-direction: column;
394
+ gap: 16px;
395
+ }
396
+
397
+ .commodity-card__title-section {
398
+ text-align: left;
399
+ }
400
+
401
+ .commodity-card__title {
402
+ font-size: 20px;
403
+ font-weight: 700;
404
+ color: #1e293b;
405
+ margin: 0 0 4px 0;
406
+ line-height: 1.3;
407
+ }
408
+
409
+ .commodity-card__model {
410
+ font-size: 14px;
411
+ color: #64748b;
412
+ margin: 0 0 8px 0;
413
+ font-weight: 500;
414
+ }
415
+
416
+ .commodity-card__description {
417
+ font-size: 14px;
418
+ color: #475569;
419
+ margin: 0;
420
+ line-height: 1.5;
421
+ }
422
+
423
+ .commodity-card__price-section {
424
+ text-align: center;
425
+ padding: 12px;
426
+ background: #f1f5f9;
427
+ border-radius: 8px;
428
+ }
429
+
430
+ .commodity-card__price {
431
+ font-size: 18px;
432
+ font-weight: 800;
433
+ color: #059669;
434
+ margin-bottom: 4px;
435
+ }
436
+
437
+ .commodity-card__price-label {
438
+ font-size: 12px;
439
+ color: #64748b;
440
+ text-transform: uppercase;
441
+ font-weight: 600;
442
+ letter-spacing: 0.5px;
443
+ }
444
+
445
+ .commodity-card__specs {
446
+ background: #fafafa;
447
+ padding: 12px;
448
+ border-radius: 8px;
449
+ border: 1px solid #e5e7eb;
450
+ }
451
+
452
+ .commodity-card__specs-title {
453
+ font-size: 14px;
454
+ font-weight: 600;
455
+ color: #374151;
456
+ margin: 0 0 8px 0;
457
+ }
458
+
459
+ .commodity-card__specs-list {
460
+ display: flex;
461
+ flex-direction: column;
462
+ gap: 4px;
463
+ }
464
+
465
+ .commodity-card__spec-item {
466
+ display: flex;
467
+ justify-content: space-between;
468
+ font-size: 13px;
469
+ }
470
+
471
+ .commodity-card__spec-label {
472
+ color: #6b7280;
473
+ font-weight: 500;
474
+ }
475
+
476
+ .commodity-card__spec-value {
477
+ color: #374151;
478
+ font-weight: 600;
479
+ }
480
+
481
+ .commodity-card__controls {
482
+ display: flex;
483
+ justify-content: space-between;
484
+ align-items: center;
485
+ gap: 16px;
486
+ }
487
+
488
+ .commodity-card__quantity {
489
+ display: flex;
490
+ align-items: center;
491
+ gap: 8px;
492
+ }
493
+
494
+ .commodity-card__quantity-label {
495
+ font-size: 14px;
496
+ font-weight: 600;
497
+ color: #374151;
498
+ }
499
+
500
+ .commodity-card__quantity-controls {
501
+ display: flex;
502
+ align-items: center;
503
+ gap: 0px;
504
+ background: #f8fafc;
505
+ border: 1px solid #e2e8f0;
506
+ border-radius: 8px;
507
+ padding: 4px;
508
+ }
509
+
510
+ .commodity-card__quantity-btn {
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: center;
514
+ width: 32px;
515
+ height: 32px;
516
+ border: none;
517
+ background: #ffffff;
518
+ border-radius: 4px;
519
+ cursor: pointer;
520
+ transition: all 0.2s ease;
521
+ color: #475569;
522
+ }
523
+
524
+ .commodity-card__quantity-btn:hover:not(:disabled) {
525
+ background: #e2e8f0;
526
+ color: #1e293b;
527
+ }
528
+
529
+ .commodity-card__quantity-btn:disabled {
530
+ opacity: 0.5;
531
+ cursor: not-allowed;
532
+ }
533
+
534
+ .commodity-card__quantity-value {
535
+ min-width: 32px;
536
+ text-align: center;
537
+ font-weight: 600;
538
+ color: #1e293b;
539
+ }
540
+
541
+ .commodity-card__actions {
542
+ display: flex;
543
+ gap: 8px;
544
+ align-items: center;
545
+ }
546
+
547
+ .commodity-card__details-btn {
548
+ display: flex;
549
+ align-items: center;
550
+ justify-content: center;
551
+ width: 40px;
552
+ height: 40px;
553
+ border: 1px solid #e2e8f0;
554
+ background: #ffffff;
555
+ border-radius: 8px;
556
+ cursor: pointer;
557
+ transition: all 0.2s ease;
558
+ color: #64748b;
559
+ padding: 5px;
560
+ }
561
+
562
+ .commodity-card__details-btn:hover {
563
+ background: #f1f5f9;
564
+ border-color: #cbd5e1;
565
+ color: #475569;
566
+ }
567
+
568
+ .commodity-card__add-btn {
569
+ padding: 10px 20px;
570
+ background: #3b82f6;
571
+ color: white;
572
+ border: none;
573
+ border-radius: 8px;
574
+ font-weight: 600;
575
+ cursor: pointer;
576
+ transition: all 0.2s ease;
577
+ font-size: 14px;
578
+ }
579
+
580
+ .commodity-card__add-btn:hover:not(:disabled) {
581
+ background: #2563eb;
582
+ transform: translateY(-1px);
583
+ }
584
+
585
+ .commodity-card__add-btn:disabled {
586
+ background: #94a3b8;
587
+ cursor: not-allowed;
588
+ transform: none;
589
+ }
590
+
591
+ .commodity-card__total {
592
+ display: flex;
593
+ justify-content: space-between;
594
+ align-items: center;
595
+ padding: 12px;
596
+ background: #ecfdf5;
597
+ border: 1px solid #d1fae5;
598
+ border-radius: 8px;
599
+ }
600
+
601
+ .commodity-card__total-label {
602
+ font-size: 14px;
603
+ color: #065f46;
604
+ font-weight: 600;
605
+ }
606
+
607
+ .commodity-card__total-value {
608
+ font-size: 18px;
609
+ font-weight: 800;
610
+ color: #059669;
611
+ }
612
+
613
+ .commodity-card__details {
614
+ background: #f8fafc;
615
+ padding: 16px;
616
+ border-radius: 8px;
617
+ border: 1px solid #e2e8f0;
618
+ }
619
+
620
+ .commodity-card__details-title {
621
+ font-size: 14px;
622
+ font-weight: 600;
623
+ color: #374151;
624
+ margin: 0 0 12px 0;
625
+ }
626
+
627
+ .commodity-card__details-content {
628
+ display: flex;
629
+ flex-direction: column;
630
+ gap: 8px;
631
+ }
632
+
633
+ .commodity-card__detail-item {
634
+ display: flex;
635
+ justify-content: space-between;
636
+ font-size: 13px;
637
+ padding: 4px 0;
638
+ border-bottom: 1px solid #e5e7eb;
639
+ }
640
+
641
+ .commodity-card__detail-item:last-child {
642
+ border-bottom: none;
643
+ }
644
+
645
+ .commodity-card__detail-label {
646
+ color: #6b7280;
647
+ font-weight: 500;
648
+ }
649
+
650
+ .commodity-card__detail-value {
651
+ color: #374151;
652
+ font-weight: 600;
653
+ }
654
+
655
+ /* Configuration Panel Styles */
656
+ .config-panel {
657
+ background: #ffffff;
658
+ border: 1px solid #e2e8f0;
659
+ border-radius: 12px;
660
+ padding: 20px;
661
+ margin-bottom: 24px;
662
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
663
+ }
664
+
665
+ .config-panel__title {
666
+ display: flex;
667
+ align-items: center;
668
+ gap: 8px;
669
+ font-size: 18px;
670
+ font-weight: 600;
671
+ color: #1e293b;
672
+ margin-bottom: 16px;
673
+ }
674
+
675
+ .config-panel__grid {
676
+ display: grid;
677
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
678
+ gap: 16px;
679
+ }
680
+
681
+ .config-panel__field {
682
+ display: flex;
683
+ flex-direction: column;
684
+ gap: 8px;
685
+ }
686
+
687
+ .config-panel__label {
688
+ display: flex;
689
+ align-items: center;
690
+ gap: 8px;
691
+ font-size: 14px;
692
+ font-weight: 500;
693
+ color: #374151;
694
+ text-transform: capitalize;
695
+ }
696
+
697
+ .config-panel__select {
698
+ width: 100%;
699
+ padding: 10px 12px;
700
+ border: 1px solid #d1d5db;
701
+ border-radius: 8px;
702
+ background: #ffffff;
703
+ font-size: 14px;
704
+ color: #374151;
705
+ transition: all 0.2s ease;
706
+ }
707
+
708
+ .config-panel__select:focus {
709
+ outline: none;
710
+ border-color: #3b82f6;
711
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
712
+ }
713
+
714
+ .config-panel__summary {
715
+ margin-top: 16px;
716
+ padding: 12px;
717
+ background: #f0f9ff;
718
+ border: 1px solid #bae6fd;
719
+ border-radius: 8px;
720
+ }
721
+
722
+ .config-panel__summary-text {
723
+ font-size: 14px;
724
+ color: #0c4a6e;
725
+ }
726
+ /* Table Container */
727
+ .Inventory-table {
728
+ width: 100%;
729
+ background-color: #ffffff;
730
+ border-radius: 8px;
731
+ overflow: hidden;
732
+ box-shadow: var(--shadow-md);
733
+ border: 1px solid var(--border-color);
734
+ }
735
+
736
+ /* Table Base Styles */
737
+ .Inventory-table table {
738
+ width: 100%;
739
+ border-collapse: collapse;
740
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
741
+ background-color: #ffffff;
742
+ }
743
+
744
+ /* Table Header */
745
+ .Inventory-table thead {
746
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
747
+ position: sticky;
748
+ top: 0;
749
+ z-index: 10;
750
+ }
751
+
752
+ .Inventory-table thead th {
753
+ padding: 16px 12px;
754
+ text-align: left;
755
+ font-weight: 600;
756
+ font-size: 14px;
757
+ color: #ffffff;
758
+ border-bottom: 2px solid var(--primary-hover);
759
+ text-transform: uppercase;
760
+ letter-spacing: 0.5px;
761
+ white-space: nowrap;
762
+ position: relative;
763
+ }
764
+
765
+ .Inventory-table thead th:hover {
766
+ background-color: var(--primary-hover);
767
+ }
768
+
769
+ .Inventory-table thead th:not(:last-child)::after {
770
+ content: "";
771
+ position: absolute;
772
+ right: 0;
773
+ top: 25%;
774
+ height: 50%;
775
+ width: 1px;
776
+ background-color: rgba(255, 255, 255, 0.2);
777
+ }
778
+
779
+ /* Table Body */
780
+ .Inventory-table tbody {
781
+ background-color: #ffffff;
782
+ }
783
+
784
+ .Inventory-table tbody tr {
785
+ transition: all 0.2s ease-in-out;
786
+ border-bottom: 1px solid var(--border-color);
787
+ }
788
+
789
+ .Inventory-table tbody tr:hover {
790
+ background-color: var(--primary-light) !important;
791
+ transform: translateX(2px);
792
+ box-shadow: inset 3px 0 0 var(--primary-color);
793
+ }
794
+
795
+ .Inventory-table tbody tr.even-row {
796
+ background-color: var(--light-color);
797
+ }
798
+
799
+ .Inventory-table tbody tr.odd-row {
800
+ background-color: #ffffff;
801
+ }
802
+
803
+ .Inventory-table tbody td {
804
+ padding: 12px;
805
+ font-size: 14px;
806
+ color: var(--text-primary);
807
+ vertical-align: middle;
808
+ line-height: 1.5;
809
+ }
810
+
811
+ .Inventory-table tbody td:last-child {
812
+ border-right: none;
813
+ }
814
+
815
+ /* Status Column Highlighting */
816
+ .Inventory-table tbody td[data-column="status"] {
817
+ background-color: #fff7e6 !important;
818
+ font-weight: 500;
819
+ }
820
+
821
+ /* Fixed First Column */
822
+ .table-fixed-first-column thead th:first-child,
823
+ .table-fixed-first-column tbody td:first-child {
824
+ position: sticky;
825
+ left: 0;
826
+ z-index: 5;
827
+ background-color: inherit;
828
+ }
829
+
830
+ .table-fixed-first-column tbody td:first-child {
831
+ border-right: 1px solid #fdf0c4;
832
+ border-bottom: none;
833
+ }
834
+
835
+ /* Sticky Header */
836
+ .table-sticky-header thead {
837
+ position: sticky;
838
+ top: 0;
839
+ z-index: 10;
840
+ }
841
+
842
+ /* Border Styles */
843
+ .table-border-style {
844
+ border: 1px solid var(--border-color);
845
+ }
846
+
847
+ /* Loader Overlay */
848
+ .loader-overlay {
849
+ position: absolute;
850
+ top: 0;
851
+ left: 0;
852
+ right: 0;
853
+ bottom: 0;
854
+ background-color: rgba(255, 255, 255, 0.8);
855
+ display: flex;
856
+ align-items: center;
857
+ justify-content: center;
858
+ z-index: 20;
859
+ }
860
+
861
+ /* Search and Controls Section */
862
+ .table-controls {
863
+ display: flex;
864
+ justify-content: space-between;
865
+ align-items: center;
866
+ margin-bottom: 1rem;
867
+ gap: 1rem;
868
+ flex-wrap: wrap;
869
+ }
870
+
871
+ .table-controls .search-section {
872
+ flex: 1;
873
+ min-width: 250px;
874
+ }
875
+
876
+ .table-controls .info-section {
877
+ display: flex;
878
+ align-items: center;
879
+ gap: 1rem;
880
+ flex-wrap: wrap;
881
+ }
882
+
883
+ .table-controls p {
884
+ margin: 0;
885
+ color: var(--text-secondary);
886
+ font-size: 14px;
887
+ font-weight: 500;
888
+ }
889
+
890
+ /* Responsive Design */
891
+ @media (max-width: 1024px) {
892
+ .Inventory-table {
893
+ font-size: 13px;
894
+ }
895
+
896
+ .Inventory-table thead th,
897
+ .Inventory-table tbody td {
898
+ padding: 10px 8px;
899
+ }
900
+
901
+ .table-controls {
902
+ flex-direction: column;
903
+ align-items: stretch;
904
+ }
905
+
906
+ .table-controls .search-section {
907
+ width: 100%;
908
+ }
909
+
910
+ .table-controls .info-section {
911
+ justify-content: space-between;
912
+ }
913
+ }
914
+
915
+ @media (max-width: 768px) {
916
+ .Inventory-table {
917
+ border-radius: 0;
918
+ margin: 0 -1rem;
919
+ box-shadow: none;
920
+ border-left: none;
921
+ border-right: none;
922
+ }
923
+
924
+ .Inventory-table thead th {
925
+ font-size: 12px;
926
+ padding: 12px 6px;
927
+ }
928
+
929
+ .Inventory-table tbody td {
930
+ font-size: 12px;
931
+ padding: 10px 6px;
932
+ }
933
+
934
+ /* Horizontal scroll for small screens */
935
+ .Inventory-table {
936
+ overflow-x: auto;
937
+ -webkit-overflow-scrolling: touch;
938
+ }
939
+
940
+ .Inventory-table table {
941
+ min-width: 600px;
942
+ }
943
+ }
944
+
945
+ @media (max-width: 480px) {
946
+ .Inventory-table thead th {
947
+ font-size: 11px;
948
+ padding: 10px 4px;
949
+ }
950
+
951
+ .Inventory-table tbody td {
952
+ font-size: 11px;
953
+ padding: 8px 4px;
954
+ }
955
+
956
+ .table-controls {
957
+ gap: 0.5rem;
958
+ }
959
+
960
+ .table-controls .info-section {
961
+ flex-direction: column;
962
+ align-items: stretch;
963
+ gap: 0.5rem;
964
+ }
965
+
966
+ /* Stack table content vertically on very small screens */
967
+ .mobile-card-view .Inventory-table thead {
968
+ display: none;
969
+ }
970
+
971
+ .mobile-card-view .Inventory-table tbody,
972
+ .mobile-card-view .Inventory-table tbody tr,
973
+ .mobile-card-view .Inventory-table tbody td {
974
+ display: block;
975
+ }
976
+
977
+ .mobile-card-view .Inventory-table tbody tr {
978
+ background-color: #ffffff;
979
+ border: 1px solid var(--border-color);
980
+ border-radius: 8px;
981
+ margin-bottom: 10px;
982
+ padding: 12px;
983
+ box-shadow: var(--shadow-sm);
984
+ }
985
+
986
+ .mobile-card-view .Inventory-table tbody td {
987
+ border: none;
988
+ padding: 6px 0;
989
+ display: flex;
990
+ justify-content: space-between;
991
+ align-items: center;
992
+ }
993
+
994
+ .mobile-card-view .Inventory-table tbody td::before {
995
+ content: attr(data-label) ": ";
996
+ font-weight: 600;
997
+ color: var(--text-secondary);
998
+ flex-shrink: 0;
999
+ margin-right: 8px;
1000
+ }
1001
+ }
1002
+
1003
+ /* Print Styles */
1004
+ @media print {
1005
+ .Inventory-table {
1006
+ box-shadow: none;
1007
+ border: 1px solid #000;
1008
+ }
1009
+
1010
+ .Inventory-table thead th {
1011
+ background-color: #f0f0f0 !important;
1012
+ color: #000 !important;
1013
+ }
1014
+
1015
+ .Inventory-table tbody tr:hover {
1016
+ background-color: transparent !important;
1017
+ transform: none !important;
1018
+ box-shadow: none !important;
1019
+ }
1020
+ }
1021
+
1022
+ /* Focus States for Accessibility */
1023
+ .Inventory-table:focus-within {
1024
+ outline: 2px solid var(--primary-color);
1025
+ outline-offset: 2px;
1026
+ }
1027
+
1028
+ /* Custom Scrollbar */
1029
+ .Inventory-table::-webkit-scrollbar {
1030
+ height: 6px;
1031
+ }
1032
+
1033
+ .Inventory-table::-webkit-scrollbar-track {
1034
+ background: var(--secondary-light);
1035
+ }
1036
+
1037
+ .Inventory-table::-webkit-scrollbar-thumb {
1038
+ background: var(--secondary-color);
1039
+ border-radius: 3px;
1040
+ }
1041
+
1042
+ .Inventory-table::-webkit-scrollbar-thumb:hover {
1043
+ background: var(--primary-color);
1044
+ }
1045
+
1046
+ .inv-badge {
1047
+ display: inline-flex;
1048
+ align-items: center;
1049
+ gap: 6px;
1050
+ padding: 4px 10px;
1051
+ border-radius: 999px;
1052
+ font-size: 12px;
1053
+ font-weight: 600;
1054
+ text-transform: capitalize;
1055
+ min-width: 100px;
1056
+ border: 1px solid transparent;
1057
+ background-color: #f5f5f5;
1058
+ color: #444;
1059
+ }
1060
+
1061
+ .inv-badge-dot {
1062
+ width: 8px;
1063
+ height: 8px;
1064
+ border-radius: 50%;
1065
+ }
1066
+
1067
+ .inv-badge-approved {
1068
+ background-color: #e6ffed;
1069
+ color: #0f9d58;
1070
+ border-color: #0f9d58;
1071
+ }
1072
+ .inv-badge-approved .inv-badge-dot {
1073
+ background-color: #0f9d58;
1074
+ }
1075
+
1076
+ .inv-badge-rejected {
1077
+ background-color: #ffe6e6;
1078
+ color: #d93025;
1079
+ border-color: #d93025;
1080
+ }
1081
+ .inv-badge-rejected .inv-badge-dot {
1082
+ background-color: #d93025;
1083
+ }
1084
+
1085
+ .inv-badge-pending {
1086
+ background-color: #fff9e6;
1087
+ color: #fbbc04;
1088
+ border-color: #fbbc04;
1089
+ }
1090
+ .inv-badge-pending .inv-badge-dot {
1091
+ background-color: #fbbc04;
1092
+ }
1093
+
1094
+ .inv-badge-inprogress {
1095
+ background-color: #e6f0ff;
1096
+ color: #1967d2;
1097
+ border-color: #1967d2;
1098
+ }
1099
+ .inv-badge-inprogress .inv-badge-dot {
1100
+ background-color: #1967d2;
1101
+ }
1102
+
1103
+ .inv-badge-default {
1104
+ background-color: #eee;
1105
+ color: #555;
1106
+ border-color: #ccc;
1107
+ }
1108
+ .inv-badge-default .inv-badge-dot {
1109
+ background-color: #aaa;
1110
+ }
1111
+
1112
+ /* Asset Management Section Unique Styles */
1113
+
1114
+ .asset-mgmt-wrapper {
1115
+ background: #ffffff;
1116
+ border-radius: 8px;
1117
+ padding: 24px;
1118
+ margin: 24px 0;
1119
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1120
+ }
1121
+
1122
+ .asset-mgmt-header {
1123
+ margin-bottom: 24px;
1124
+ }
1125
+
1126
+ .asset-mgmt-title {
1127
+ margin: 0 0 8px 0 !important;
1128
+ color: #333 !important;
1129
+ font-size: 18px !important;
1130
+ font-weight: 600 !important;
1131
+ }
1132
+
1133
+ .asset-mgmt-subtitle {
1134
+ margin: 0 !important;
1135
+ color: #666 !important;
1136
+ font-size: 14px !important;
1137
+ }
1138
+
1139
+ .asset-mgmt-id-section {
1140
+ margin-bottom: 16px;
1141
+ }
1142
+
1143
+ .asset-mgmt-label {
1144
+ display: block;
1145
+ margin-bottom: 8px;
1146
+ font-weight: 500;
1147
+ color: #333;
1148
+ }
1149
+
1150
+ .asset-mgmt-input {
1151
+ flex: 1;
1152
+ padding: 12px;
1153
+ border: 1px solid #ddd;
1154
+ border-radius: 4px;
1155
+ font-size: 14px;
1156
+ }
1157
+
1158
+ .asset-mgmt-input:focus {
1159
+ outline: none;
1160
+ border-color: #007bff;
1161
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
1162
+ }
1163
+
1164
+ .asset-mgmt-input:disabled {
1165
+ background-color: #f8f9fa;
1166
+ cursor: not-allowed;
1167
+ }
1168
+
1169
+ .asset-mgmt-error {
1170
+ background-color: #fff5f5;
1171
+ border: 1px solid #fed7d7;
1172
+ border-radius: 4px;
1173
+ padding: 12px;
1174
+ font-size: 14px;
1175
+ color: red;
1176
+ }
1177
+
1178
+ .asset-mgmt-eligibility {
1179
+ background-color: #fffaf0;
1180
+ border: 1px solid #fbd38d;
1181
+ border-radius: 4px;
1182
+ padding: 12px;
1183
+ font-size: 14px;
1184
+ color: orange;
1185
+ }
1186
+
1187
+ .asset-mgmt-incidents {
1188
+ margin: 24px 0;
1189
+ }
1190
+
1191
+ .asset-mgmt-incidents-title {
1192
+ margin: 0 0 16px 0 !important;
1193
+ color: #333 !important;
1194
+ font-size: 16px !important;
1195
+ font-weight: 600 !important;
1196
+ }
1197
+
1198
+ .asset-mgmt-details {
1199
+ margin-top: 24px;
1200
+ }
1201
+
1202
+ .asset-mgmt-details-title {
1203
+ margin: 0 0 16px 0 !important;
1204
+ color: #333 !important;
1205
+ font-size: 16px !important;
1206
+ font-weight: 600 !important;
1207
+ }
1208
+
1209
+ .asset-mgmt-details-card {
1210
+ background-color: #f8f9fa;
1211
+ border: 1px solid #e9ecef;
1212
+ border-radius: 6px;
1213
+ padding: 16px;
1214
+ }
1215
+
1216
+ .asset-mgmt-details-item {
1217
+ margin: 0 0 8px 0 !important;
1218
+ font-size: 14px !important;
1219
+ line-height: 1.5 !important;
1220
+ }
1221
+
1222
+ .asset-mgmt-details-item:last-child {
1223
+ margin-bottom: 0 !important;
1224
+ }
1225
+
1226
+ .asset-mgmt-details-label {
1227
+ color: #333 !important;
1228
+ font-weight: 600 !important;
1229
+ }