html[data-theme="dark"] {
--color-gray-50:  #1a1d27;
--color-gray-100: #1e2130;
--color-gray-150: #212436;
--color-gray-200: #252838;
--color-gray-250: #292c3d;
--color-gray-300: #2d3142;
--color-gray-350: #353949;
--color-gray-400: #3d4150;
--color-gray-450: #575b6a;
--color-gray-500: #6b7280;
--color-slate-50:  #1a1e2e;
--color-slate-100: #1e2235;
--color-slate-200: #252a3c;
--color-slate-300: #2d3348;
--color-slate-400: #6b7a94;
--color-blue-50:  #172033;
--color-blue-100: #1a2640;
--color-blue-200: #1e2d4d;
--color-green-50:  #14261a;
--color-green-100: #162e1e;
--color-green-200: #183824;
--color-yellow-50:  #26220f;
--color-yellow-100: #2e2812;
--color-yellow-200: #362e15;
--color-red-50:  #2a1515;
--color-red-100: #331a1a;
--color-red-200: #3d1f1f;
--color-orange-50:  #271c10;
--color-orange-100: #302214;
--color-orange-200: #3a2918;
--color-orange-300: #44301c;
--color-purple-50:  #1e1533;
--color-purple-100: #221940;
--color-purple-200: #261d4d;
--color-purple-300: #2e2259;
--color-indigo-50:  #1a1a3d;
--color-indigo-100: #1e1e4d;
--color-pink-50: #2a1525;
--color-white: #1a1d27;
--color-black: #f3f4f6;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) {
--color-gray-50:  #1a1d27;
--color-gray-100: #1e2130;
--color-gray-150: #212436;
--color-gray-200: #252838;
--color-gray-250: #292c3d;
--color-gray-300: #2d3142;
--color-gray-350: #353949;
--color-gray-400: #3d4150;
--color-gray-450: #575b6a;
--color-gray-500: #6b7280;
--color-slate-50:  #1a1e2e;
--color-slate-100: #1e2235;
--color-slate-200: #252a3c;
--color-slate-300: #2d3348;
--color-slate-400: #6b7a94;
--color-blue-50:  #172033;
--color-blue-100: #1a2640;
--color-blue-200: #1e2d4d;
--color-green-50:  #14261a;
--color-green-100: #162e1e;
--color-green-200: #183824;
--color-yellow-50:  #26220f;
--color-yellow-100: #2e2812;
--color-yellow-200: #362e15;
--color-red-50:  #2a1515;
--color-red-100: #331a1a;
--color-red-200: #3d1f1f;
--color-orange-50:  #271c10;
--color-orange-100: #302214;
--color-orange-200: #3a2918;
--color-orange-300: #44301c;
--color-purple-50:  #1e1533;
--color-purple-100: #221940;
--color-purple-200: #261d4d;
--color-purple-300: #2e2259;
--color-indigo-50:  #1a1a3d;
--color-indigo-100: #1e1e4d;
--color-pink-50: #2a1525;
--color-white: #1a1d27;
--color-black: #f3f4f6;
}
}
:root {
--color-gray-50:  #fafafa;
--color-gray-100: #f8f9fa;
--color-gray-150: #f5f5f5;
--color-gray-200: #f3f4f6;
--color-gray-250: #e9ecef;
--color-gray-300: #e5e7eb;
--color-gray-350: #dee2e6;
--color-gray-400: #d1d5db;
--color-gray-450: #ccc;
--color-gray-500: #9ca3af;
--color-gray-550: #888;
--color-gray-600: #6b7280;
--color-gray-650: #666;
--color-gray-700: #4b5563;
--color-gray-750: #495057;
--color-gray-800: #374151;
--color-gray-900: #1f2937;
--color-gray-950: #111827;
--color-blue-50:  #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-200: #bfdbfe;
--color-blue-300: #93c5fd;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-800: #1e40af;
--color-blue-900: #1e3a8a;
--color-green-50:  #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #d1fae5;
--color-green-300: #a5d6a7;
--color-green-400: #4ade80;
--color-green-500: #22c55e;
--color-green-600: #16a34a;
--color-green-700: #15803d;
--color-green-800: #166534;
--color-green-900: #065f46;
--color-yellow-50:  #fefce8;
--color-yellow-100: #fef9c3;
--color-yellow-200: #fef3c7;
--color-yellow-300: #fbbf24;
--color-yellow-400: #facc15;
--color-yellow-500: #eab308;
--color-yellow-600: #ca8a04;
--color-yellow-700: #a16207;
--color-yellow-800: #92400e;
--color-red-50:  #fef2f2;
--color-red-100: #fee2e2;
--color-red-200: #fecaca;
--color-red-250: #fca5a5;
--color-red-300: #f87171;
--color-red-400: #ef4444;
--color-red-500: #dc2626;
--color-red-600: #b91c1c;
--color-red-700: #991b1b;
--color-red-800: #991b1b;
--color-red-900: #7f1d1d;
--color-orange-50:  #fff7ed;
--color-orange-100: #fed7aa;
--color-orange-200: #fed7aa;
--color-orange-300: #fdba74;
--color-orange-400: #f97316;
--color-orange-500: #ea580c;
--color-orange-600: #c2410c;
--color-orange-700: #c2410c;
--color-orange-800: #9a3412;
--color-purple-50:  #f3e8ff;
--color-purple-100: #ede9fe;
--color-purple-200: #e0e7ff;
--color-purple-300: #d8b4fe;
--color-purple-400: #a855f7;
--color-purple-500: #8b5cf6;
--color-purple-600: #7c3aed;
--color-purple-700: #6d28d9;
--color-purple-800: #6b21a8;
--color-purple-900: #5b21b6;
--color-indigo-50:  #eef2ff;
--color-indigo-100: #e0e7ff;
--color-indigo-500: #6366f1;
--color-indigo-600: #4f46e5;
--color-indigo-700: #3730a3;
--color-indigo-800: #3730a3;
--color-pink-50:  #fce7f3;
--color-pink-500: #ec407a;
--color-pink-600: #e91e63;
--color-pink-800: #9d174d;
--color-teal-500: #10b981;
--color-teal-600: #059669;
--color-teal-700: #047857;
--color-slate-50:  #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-400: #94a3b8;
--color-slate-500: #64748b;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1e293b;
--color-white: #ffffff;
--color-black: #000000;
}
html[data-theme="dark"] {
color-scheme: dark;
--color-accent:       #2DD4BF;
--color-accent-hover: #5EEAD4;
--color-accent-light: #2DD4BF;
--color-accent-bg:    rgba(45, 212, 191, 0.15);
--color-accent-text:  #99F6E4;
--bg-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l20 20M20 0L0 20' stroke='%23fff' stroke-opacity='0.02' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
--color-bg-page:    #0f1117;
--color-bg-deep:    #0d0f16;
--color-bg-surface: #13151f;
--color-bg-raised:  #1a1d27;
--color-bg-sunken:  #0d0f16;
--color-bg-hover:   #252838;
--color-bg-card:    #1e2130;
--color-bg-input:   #252838;
--color-text-primary:    #e2e4e9;
--color-text-secondary:  #c0c4d0;
--color-text-muted:      #8b8fa3;
--color-text-faint:      #5a5f73;
--color-text-inverse:    #0f1117;
--color-text-on-warning: #1a1a1a;
--color-border-default: rgba(255, 255, 255, 0.06);
--color-border-subtle:  rgba(255, 255, 255, 0.10);
--color-border-strong:  rgba(255, 255, 255, 0.15);
--color-border-accent:  rgba(59, 130, 246, 0.3);
--color-primary:       #3b82f6;
--color-primary-hover: #60a5fa;
--color-primary-light: #60a5fa;
--color-primary-bg:    rgba(59, 130, 246, 0.15);
--color-success:       #22c55e;
--color-success-hover: #4ade80;
--color-success-light: #4ade80;
--color-success-bg:    rgba(34, 197, 94, 0.15);
--color-success-text:  #86efac;
--color-warning:       #f59e0b;
--color-warning-hover: #fbbf24;
--color-warning-light: #fbbf24;
--color-warning-bg:    rgba(245, 158, 11, 0.15);
--color-warning-text:  #fde68a;
--color-danger:       #ef4444;
--color-danger-hover: #f87171;
--color-danger-light: #f87171;
--color-danger-bg:    rgba(239, 68, 68, 0.15);
--color-danger-text:  #fca5a5;
--color-info:       #38bdf8;
--color-info-light: rgba(56, 189, 248, 0.15);
--color-info-hover: #7dd3fc;
--color-orange:       #f97316;
--color-orange-light: #fb923c;
--color-orange-bg:    rgba(249, 115, 22, 0.15);
--color-orange-text:  #fdba74;
--color-orange-hover: #fb923c;
--color-purple:       #a855f7;
--color-purple-light: #c084fc;
--color-purple-bg:    rgba(168, 85, 247, 0.15);
--color-purple-text:  #d8b4fe;
--color-scrollbar-track: #0f1117;
--color-scrollbar-thumb: #2a2d3a;
--color-scrollbar-hover: #3a3d4a;
--color-focus-ring: rgba(59, 130, 246, 0.3);
--color-zebra-tint: rgba(255, 255, 255, 0.08);
--color-highlight-bg:    rgba(250, 204, 21, 0.2);
--color-selected-bg:     rgba(59, 130, 246, 0.15);
--color-selected-border: #3b82f6;
--color-overlay: rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
background-color: var(--color-bg-input);
color: var(--color-text-primary);
border-color: var(--color-border-default);
}
html[data-theme="dark"] .text-gray-400 { color: #8b8fa3; }
html[data-theme="dark"] .text-gray-500 { color: #9ca3af; }
html[data-theme="dark"] .text-gray-600 { color: #c0c4d0; }
html[data-theme="dark"] .text-gray-700 { color: #d1d5db; }
html[data-theme="dark"] .text-gray-800 { color: #e2e4e9; }
html[data-theme="dark"] .text-gray-900 { color: #f3f4f6; }
html[data-theme="dark"] .text-slate-400 { color: #8b96a9; }
html[data-theme="dark"] .text-slate-500 { color: #94a3b8; }
html[data-theme="dark"] .text-slate-600 { color: #b0bec5; }
html[data-theme="dark"] .text-slate-700 { color: #cbd5e1; }
html[data-theme="dark"] .text-slate-800 { color: #e2e8f0; }
html[data-theme="dark"] .text-red-600 { color: #f87171; }
html[data-theme="dark"] .text-red-700 { color: #fca5a5; }
html[data-theme="dark"] .text-red-800 { color: #f87171; }
html[data-theme="dark"] .text-yellow-800 { color: #fde68a; }
html[data-theme="dark"] .bg-white { background-color: var(--color-bg-card); }
html[data-theme="dark"] .bg-gray-600 { background-color: #252838; }
html[data-theme="dark"] .bg-gray-700 { background-color: #1e2130; }
html[data-theme="dark"] .bg-gray-800 { background-color: #13151f; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) {
color-scheme: dark;
--color-accent:       #2DD4BF;
--color-accent-hover: #5EEAD4;
--color-accent-light: #2DD4BF;
--color-accent-bg:    rgba(45, 212, 191, 0.15);
--color-accent-text:  #99F6E4;
--bg-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l20 20M20 0L0 20' stroke='%23fff' stroke-opacity='0.02' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
--color-bg-page:    #0f1117;
--color-bg-deep:    #0d0f16;
--color-bg-surface: #13151f;
--color-bg-raised:  #1a1d27;
--color-bg-sunken:  #0d0f16;
--color-bg-hover:   #252838;
--color-bg-card:    #1e2130;
--color-bg-input:   #252838;
--color-text-primary:    #e2e4e9;
--color-text-secondary:  #c0c4d0;
--color-text-muted:      #8b8fa3;
--color-text-faint:      #5a5f73;
--color-text-inverse:    #0f1117;
--color-text-on-warning: #1a1a1a;
--color-border-default: rgba(255, 255, 255, 0.06);
--color-border-subtle:  rgba(255, 255, 255, 0.10);
--color-border-strong:  rgba(255, 255, 255, 0.15);
--color-border-accent:  rgba(59, 130, 246, 0.3);
--color-primary:       #3b82f6;
--color-primary-hover: #60a5fa;
--color-primary-light: #60a5fa;
--color-primary-bg:    rgba(59, 130, 246, 0.15);
--color-success:       #22c55e;
--color-success-hover: #4ade80;
--color-success-light: #4ade80;
--color-success-bg:    rgba(34, 197, 94, 0.15);
--color-success-text:  #86efac;
--color-warning:       #f59e0b;
--color-warning-hover: #fbbf24;
--color-warning-light: #fbbf24;
--color-warning-bg:    rgba(245, 158, 11, 0.15);
--color-warning-text:  #fde68a;
--color-danger:       #ef4444;
--color-danger-hover: #f87171;
--color-danger-light: #f87171;
--color-danger-bg:    rgba(239, 68, 68, 0.15);
--color-danger-text:  #fca5a5;
--color-info:       #38bdf8;
--color-info-light: rgba(56, 189, 248, 0.15);
--color-info-hover: #7dd3fc;
--color-orange:       #f97316;
--color-orange-light: #fb923c;
--color-orange-bg:    rgba(249, 115, 22, 0.15);
--color-orange-text:  #fdba74;
--color-orange-hover: #fb923c;
--color-purple:       #a855f7;
--color-purple-light: #c084fc;
--color-purple-bg:    rgba(168, 85, 247, 0.15);
--color-purple-text:  #d8b4fe;
--color-scrollbar-track: #0f1117;
--color-scrollbar-thumb: #2a2d3a;
--color-scrollbar-hover: #3a3d4a;
--color-focus-ring: rgba(59, 130, 246, 0.3);
--color-zebra-tint: rgba(255, 255, 255, 0.08);
--color-highlight-bg:    rgba(250, 204, 21, 0.2);
--color-selected-bg:     rgba(59, 130, 246, 0.15);
--color-selected-border: #3b82f6;
--color-overlay: rgba(0, 0, 0, 0.7);
}
html:not([data-theme="light"]):not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html:not([data-theme="light"]):not([data-theme="dark"]) select,
html:not([data-theme="light"]):not([data-theme="dark"]) textarea {
background-color: var(--color-bg-input);
color: var(--color-text-primary);
border-color: var(--color-border-default);
}
html:not([data-theme="light"]):not([data-theme="dark"]) .text-gray-400 { color: #8b8fa3; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-gray-500 { color: #9ca3af; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-gray-600 { color: #c0c4d0; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-gray-700 { color: #d1d5db; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-gray-800 { color: #e2e4e9; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-gray-900 { color: #f3f4f6; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-slate-400 { color: #8b96a9; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-slate-500 { color: #94a3b8; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-slate-600 { color: #b0bec5; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-slate-700 { color: #cbd5e1; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-slate-800 { color: #e2e8f0; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-red-600 { color: #f87171; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-red-700 { color: #fca5a5; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-red-800 { color: #f87171; }
html:not([data-theme="light"]):not([data-theme="dark"]) .text-yellow-800 { color: #fde68a; }
html:not([data-theme="light"]):not([data-theme="dark"]) .bg-white { background-color: var(--color-bg-card); }
html:not([data-theme="light"]):not([data-theme="dark"]) .bg-gray-600 { background-color: #252838; }
html:not([data-theme="light"]):not([data-theme="dark"]) .bg-gray-700 { background-color: #1e2130; }
html:not([data-theme="light"]):not([data-theme="dark"]) .bg-gray-800 { background-color: #13151f; }
}
html[data-theme="dark"] .job-tooltip {
background: var(--color-bg-card);
color: var(--color-text-primary);
}
html[data-theme="dark"] .scheduled-item.highlighted .mo-label {
color: #f48fb1;  
}
html[data-theme="dark"] .machine-color-0  { background: #1565c0; }  
html[data-theme="dark"] .machine-color-2  { background: #2e7d32; }  
html[data-theme="dark"] .machine-color-3  { background: #e65100; }  
html[data-theme="dark"] .machine-color-5  { background: #00838f; }  
html[data-theme="dark"] .machine-color-8  { background: #558b2f; }  
html[data-theme="dark"] .machine-color-9  { background: #d84315; }  
html[data-theme="dark"] .machine-color-11 { background: #00695c; }  
.ftr-filter-btn {
background-color: #f3f4f6;  
color: #374151;              
cursor: pointer;
}
.ftr-filter-btn:hover {
background-color: #e5e7eb;  
}
.ftr-filter-btn--active {
background-color: #2563eb;  
color: #ffffff;
}
.ftr-filter-btn--active:hover {
background-color: #1d4ed8;  
}
html[data-theme="dark"] .ftr-filter-btn {
background-color: #2d3142;  
color: #e2e4e9;              
}
html[data-theme="dark"] .ftr-filter-btn:hover {
background-color: #353949;  
}
html[data-theme="dark"] .ftr-filter-btn--active {
background-color: #2563eb;  
color: #e2e4e9;              
}
html[data-theme="dark"] .ftr-filter-btn--active:hover {
background-color: #1d4ed8;  
}
.ftr-row--unclear   { background-color: #fffbeb; }  
.ftr-row--confirmed { background-color: #eff6ff; }  
.ftr-row--done      { background-color: #f0fdf4; }  
.ftr-badge--unclear   { background-color: #fef3c7; color: #92400e; }  
.ftr-badge--confirmed { background-color: #dbeafe; color: #1e40af; }  
.ftr-badge--done      { background-color: #dcfce7; color: #166534; }  
.ftr-btn--confirm {
border-color: #22c55e;  
color: #15803d;          
}
.ftr-btn--confirm:hover {
background-color: #f0fdf4;  
}
.ftr-btn--done {
border-color: #6366f1;  
color: #4338ca;          
}
.ftr-btn--done:hover {
background-color: #eef2ff;  
}
.ftr-btn--disabled {
border-color: #d1d5db;  
color: #9ca3af;          
}
html[data-theme="dark"] .ftr-row--unclear   { background-color: rgba(245, 158, 11, 0.08); }
html[data-theme="dark"] .ftr-row--confirmed { background-color: rgba(59, 130, 246, 0.08); }
html[data-theme="dark"] .ftr-row--done      { background-color: rgba(34, 197, 94, 0.08); }
html[data-theme="dark"] .ftr-badge--unclear   { background-color: rgba(245, 158, 11, 0.2); color: #fde68a; }
html[data-theme="dark"] .ftr-badge--confirmed { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html[data-theme="dark"] .ftr-badge--done      { background-color: rgba(34, 197, 94, 0.2); color: #86efac; }
html[data-theme="dark"] .ftr-thead { background-color: var(--color-bg-surface); }
html[data-theme="dark"] .ftr-progress-track { background-color: var(--color-bg-raised); }
html[data-theme="dark"] .ftr-btn--confirm {
border-color: #22c55e;
color: #4ade80;  
}
html[data-theme="dark"] .ftr-btn--confirm:hover {
background-color: rgba(34, 197, 94, 0.1);
}
html[data-theme="dark"] .ftr-btn--done {
border-color: #6366f1;
color: #a5b4fc;  
}
html[data-theme="dark"] .ftr-btn--done:hover {
background-color: rgba(99, 102, 241, 0.1);
}
html[data-theme="dark"] .ftr-btn--disabled {
border-color: var(--color-border-default);
color: var(--color-text-faint);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-row--unclear   { background-color: rgba(245, 158, 11, 0.08); }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-row--confirmed { background-color: rgba(59, 130, 246, 0.08); }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-row--done      { background-color: rgba(34, 197, 94, 0.08); }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-badge--unclear   { background-color: rgba(245, 158, 11, 0.2); color: #fde68a; }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-badge--confirmed { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-badge--done      { background-color: rgba(34, 197, 94, 0.2); color: #86efac; }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-thead { background-color: var(--color-bg-surface); }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-progress-track { background-color: var(--color-bg-raised); }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-btn--confirm {
border-color: #22c55e;
color: #4ade80;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-btn--confirm:hover {
background-color: rgba(34, 197, 94, 0.1);
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-btn--done {
border-color: #6366f1;
color: #a5b4fc;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-btn--done:hover {
background-color: rgba(99, 102, 241, 0.1);
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-btn--disabled {
border-color: var(--color-border-default);
color: var(--color-text-faint);
}
html:not([data-theme="light"]):not([data-theme="dark"]) .job-tooltip {
background: var(--color-bg-card);
color: var(--color-text-primary);
}
html:not([data-theme="light"]):not([data-theme="dark"]) .scheduled-item.highlighted .mo-label {
color: #f48fb1;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-0  { background: #1565c0; }
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-2  { background: #2e7d32; }
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-3  { background: #e65100; }
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-5  { background: #00838f; }
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-8  { background: #558b2f; }
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-9  { background: #d84315; }
html:not([data-theme="light"]):not([data-theme="dark"]) .machine-color-11 { background: #00695c; }
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-filter-btn {
background-color: #2d3142;
color: #e2e4e9;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-filter-btn:hover {
background-color: #353949;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-filter-btn--active {
background-color: #2563eb;
color: #e2e4e9;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .ftr-filter-btn--active:hover {
background-color: #1d4ed8;
}
}
:root {
--font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--color-accent:       #0D9488;
--color-accent-hover: #0F766E;
--color-accent-light: #99F6E4;
--color-accent-bg:    rgba(13, 148, 136, 0.10);
--color-accent-text:  #115E59;
--bg-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l20 20M20 0L0 20' stroke='%23000' stroke-opacity='0.03' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
--color-bg-page:    var(--color-gray-200);
--color-bg-deep:    var(--color-gray-300);
--color-bg-surface: #fff;
--color-bg-raised:  var(--color-gray-100);
--color-bg-sunken:  var(--color-gray-200);
--color-bg-hover:   var(--color-gray-200);
--color-bg-card:    #fff;
--color-bg-input:   #fff;
--color-text-primary:   var(--color-gray-900);
--color-text-secondary: var(--color-gray-650);
--color-text-muted:     var(--color-gray-550);
--color-text-faint:     var(--color-gray-500);
--color-text-inverse:    #fff;
--color-text-on-warning: #1a1a1a;
--color-border-default: #ddd;
--color-border-subtle:  var(--color-gray-300);
--color-border-strong:  var(--color-gray-400);
--color-border-accent:  rgba(0, 123, 255, 0.3);
--color-primary:       #007bff;
--color-primary-hover: #0056b3;
--color-primary-light: var(--color-blue-100);
--color-primary-bg:    var(--color-blue-50);
--color-success:       var(--color-green-500);
--color-success-hover: var(--color-green-600);
--color-success-light: var(--color-green-100);
--color-success-bg:    var(--color-green-50);
--color-success-text:  var(--color-green-800);
--color-warning:       #ffc107;
--color-warning-hover: #e0a800;
--color-warning-light: var(--color-yellow-200);
--color-warning-bg:    var(--color-yellow-50);
--color-warning-text:  var(--color-yellow-800);
--color-danger:       var(--color-red-500);
--color-danger-hover: #c82333;
--color-danger-light: var(--color-red-100);
--color-danger-bg:    var(--color-red-50);
--color-danger-text:  var(--color-red-700);
--color-info:       #17a2b8;
--color-info-light: #d1ecf1;
--color-info-hover: #138496;
--color-orange:       var(--color-orange-400);
--color-orange-light: var(--color-orange-100);
--color-orange-bg:    var(--color-orange-50);
--color-orange-text:  var(--color-orange-600);
--color-orange-hover: var(--color-orange-500);
--color-purple:       var(--color-purple-500);
--color-purple-light: var(--color-purple-100);
--color-purple-bg:    var(--color-purple-50);
--color-purple-text:  var(--color-purple-800);
--color-scrollbar-track: var(--color-slate-100);
--color-scrollbar-thumb: var(--color-slate-300);
--color-scrollbar-hover: var(--color-slate-400);
--color-focus-ring: rgba(59, 130, 246, 0.15);
--color-zebra-tint: rgba(0, 0, 0, 0.06);
--color-highlight-bg:    #fef08a;
--color-selected-bg:     #f0f7ff;
--color-selected-border: #007bff;
--color-overlay: rgba(0, 0, 0, 0.5);
--primary: var(--color-primary);
--primary-hover: var(--color-primary-hover);
--primary-light: var(--color-primary-light);
--success: var(--color-success);
--success-light: var(--color-success-light);
--success-dark: var(--color-success-text);
--warning: var(--color-warning);
--warning-light: var(--color-warning-light);
--warning-dark: var(--color-warning-text);
--danger: var(--color-danger);
--danger-light: var(--color-danger-light);
--danger-dark: var(--color-danger-text);
--info: var(--color-info);
--info-light: var(--color-info-light);
--dark: var(--color-text-primary);
--light: var(--color-gray-150);
--white: var(--color-bg-surface);
--border: var(--color-border-default);
--gray-100: var(--color-gray-100);
--gray-200: var(--color-gray-200);
--gray-300: var(--color-gray-300);
--gray-400: var(--color-gray-400);
--gray-500: var(--color-gray-500);
--gray-600: var(--color-gray-600);
--gray-700: var(--color-gray-700);
--gray-800: var(--color-gray-800);
--gray-900: var(--color-gray-900);
}
:root {
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 24px;
--font-size-3xl: 28px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-2xl: 24px;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab {
padding: 10px 20px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
font-size: var(--font-size-base);
transition: all 0.2s;
}
.tab:hover {
border-color: var(--primary);
}
.tab.active {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.tab-nav {
display: flex;
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 0 16px;
}
.tab-btn {
padding: 14px 24px;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: var(--font-size-base);
color: var(--color-text-secondary);
transition: all 0.2s;
white-space: nowrap;
}
.tab-btn:hover {
color: var(--dark);
background: var(--color-bg-hover);
}
.tab-btn.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.tab-content {
background: var(--white);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow);
min-height: 400px;
}
.section {
display: none;
}
.section.active {
display: block;
}
.grid {
display: grid;
gap: 20px;
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.grid-2,
.grid-3 {
grid-template-columns: 1fr;
}
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-size-base);
font-weight: 500;
line-height: 1.5;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn:active {
transform: scale(0.95);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-sm {
padding: 4px 8px;
font-size: var(--font-size-xs);
}
.btn-primary {
background: var(--primary);
color: var(--white);
}
.btn-primary:hover {
background: var(--primary-hover);
}
.btn-secondary {
background: var(--color-gray-600);
color: var(--color-bg-surface);
}
.btn-secondary:hover {
background: var(--color-gray-700);
}
.btn-success {
background: var(--success);
color: var(--white);
}
.btn-success:hover {
background: var(--color-success-hover);
}
.btn-danger {
background: var(--danger);
color: var(--white);
}
.btn-danger:hover {
background: var(--color-danger-hover);
}
.btn-warning {
background: var(--warning);
color: var(--dark);
}
.btn-warning:hover {
background: var(--color-warning-hover);
}
.btn-outline {
background: var(--white);
border: 1px solid var(--border);
color: var(--color-text-secondary);
}
.btn-outline:hover {
background: var(--color-bg-hover);
}
.view-btn {
background: var(--color-bg-hover);
color: var(--color-text-primary);
font-weight: 600;
padding: 8px 16px;
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: all 0.2s;
}
.view-btn:hover {
background: var(--color-bg-raised);
}
.view-btn.active {
background: var(--primary);
color: var(--white);
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: 6px;
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-muted);
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.form-info {
background: var(--color-bg-raised);
border-radius: var(--radius-sm);
padding: 12px;
font-size: var(--font-size-sm);
}
.form-info p {
margin-bottom: 6px;
}
.form-info p:last-child {
margin-bottom: 0;
}
.search-box {
display: flex;
gap: 8px;
}
.search-box input {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
}
.search-box button {
padding: 8px 12px;
background: var(--primary);
color: var(--white);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
}
.search-box button:hover {
background: var(--primary-hover);
}
.filter-bar {
display: flex;
gap: 12px;
margin-bottom: 16px;
background: var(--color-bg-raised);
padding: 12px;
border-radius: var(--radius);
flex-wrap: wrap;
align-items: center;
}
.filter-bar select,
.filter-bar input[type="text"] {
padding: 6px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-overlay.active,
.modal-overlay.show {
display: flex;
}
.modal {
background: var(--white);
border-radius: var(--radius-lg);
width: 500px;
max-width: 90%;
max-height: 90vh;
overflow: auto;
box-shadow: var(--shadow-lg);
}
.modal-large {
width: 900px;
max-width: 95%;
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-size: var(--font-size-lg);
font-weight: 600;
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--color-text-secondary);
padding: 4px;
line-height: 1;
}
.modal-close:hover {
color: var(--dark);
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: 500;
white-space: nowrap;
}
.status-badge.active,
.status-badge.running,
.status-badge.success {
background: var(--color-success-light);
color: var(--color-success-text);
}
.status-badge.idle,
.status-badge.pending {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.status-badge.setup,
.status-badge.warning,
.status-badge.in-progress {
background: var(--color-orange-bg);
color: var(--color-orange-text);
}
.status-badge.error,
.status-badge.danger,
.status-badge.failed {
background: var(--color-danger-light);
color: var(--color-danger);
}
.status-badge.info {
background: var(--color-primary-light);
color: var(--color-blue-800);
}
.priority-critical {
background: var(--color-danger-bg);
color: var(--color-danger-text);
}
.priority-high {
background: var(--color-orange-bg);
color: var(--color-orange-text);
}
.priority-normal {
background: var(--color-primary-light);
color: var(--color-blue-800);
}
.priority-low {
background: var(--color-gray-250);
color: var(--color-slate-600);
}
.article-type-badge {
padding: 6px 12px;
border-radius: 16px;
font-size: var(--font-size-xs);
font-weight: 500;
white-space: nowrap;
}
.hours-badge {
background: var(--color-bg-hover);
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
font-size: var(--font-size-xs);
}
.progress-bar {
height: 8px;
background: var(--color-bg-hover);
border-radius: var(--radius-sm);
overflow: hidden;
margin: 10px 0;
}
.progress-bar .fill,
.progress-bar .progress {
height: 100%;
border-radius: var(--radius-sm);
transition: width 0.3s ease;
}
.progress-bar .fill.good,
.progress-bar .progress {
background: var(--success);
}
.progress-bar .fill.warning {
background: var(--warning);
}
.progress-bar .fill.danger {
background: var(--danger);
}
.progress-text {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: 4px;
text-align: right;
}
#toast-container {
position: fixed;
top: 16px;
right: 16px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
pointer-events: auto;
min-width: 250px;
max-width: 420px;
padding: 12px 16px;
border-radius: var(--radius);
color: var(--white);
font-size: var(--font-size-base);
line-height: 1.4;
box-shadow: var(--shadow-lg);
cursor: pointer;
transform: translateX(calc(100% + 20px));
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.toast-visible {
transform: translateX(0);
opacity: 1;
}
.toast-hiding {
transform: translateX(calc(100% + 20px));
opacity: 0;
}
.toast-success {
background: var(--success);
}
.toast-error {
background: var(--danger);
}
.toast-warning {
background: var(--color-orange);
}
.toast-info {
background: var(--info);
}
.card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 15px;
box-shadow: var(--shadow);
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.card h3 {
font-size: var(--font-size-lg);
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.machine-card {
border-left: 4px solid var(--success);
}
.machine-card.warning {
border-left-color: var(--warning);
}
.machine-card.danger {
border-left-color: var(--danger);
}
.machine-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.machine-name {
font-weight: 600;
font-size: var(--font-size-xl);
}
.stat-card {
background: var(--color-bg-raised);
padding: 16px;
border-radius: var(--radius-lg);
text-align: center;
}
.stat-value {
font-size: 28px;
font-weight: 600;
color: var(--dark);
}
.stat-value.good {
color: var(--success);
}
.stat-value.warning {
color: var(--warning);
}
.stat-value.bad {
color: var(--danger);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: 4px;
}
.stats {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.stat {
flex: 1;
min-width: 120px;
padding: 15px;
background: var(--color-bg-raised);
border-radius: var(--radius);
text-align: center;
}
.header {
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.header-actions {
display: flex;
gap: 8px;
margin-left: auto;
}
.back-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--color-text-secondary);
padding: 4px 8px;
}
.back-btn:hover {
color: var(--dark);
}
.toolbar {
padding: 12px 16px;
background: var(--white);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
}
.toolbar-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
.loading {
text-align: center;
padding: 40px;
color: var(--color-text-muted);
}
.loading-spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 3px solid var(--color-border-strong);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.empty-state {
text-align: center;
padding: 48px 24px;
color: var(--color-text-secondary);
}
.empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.table,
.data-table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td,
.data-table th,
.data-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.table th,
.data-table th {
font-weight: 600;
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
background: var(--color-bg-raised);
}
.table tr:hover,
.data-table tr:hover {
background: var(--color-bg-hover);
}
.table tr:last-child td,
.data-table tr:last-child td {
border-bottom: none;
}
.advanced-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.advanced-table th,
.advanced-table td {
border: 1px solid var(--color-border-subtle);
padding: 8px 12px;
text-align: left;
}
.advanced-table th {
background: var(--color-bg-raised);
font-weight: 600;
cursor: pointer;
}
.advanced-table th:hover {
background: var(--color-bg-hover);
}
.advanced-table tr:hover {
background: var(--color-selected-bg);
cursor: pointer;
}
.sortable-header {
user-select: none;
cursor: pointer;
transition: background-color 0.15s;
}
.sortable-header:hover {
background-color: var(--color-bg-hover);
}
.sortable-header .sort-indicator {
display: inline-flex;
align-items: center;
margin-left: 4px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-muted {
color: var(--color-text-secondary);
}
.font-bold {
font-weight: 600;
}
.hidden {
display: none !important;
}
.article-link {
color: var(--primary);
text-decoration: none;
cursor: pointer;
}
.article-link:hover {
text-decoration: underline;
color: var(--primary-hover);
}
.schedule-row {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.schedule-time {
width: 100px;
font-weight: 600;
}
.schedule-content {
flex: 1;
}
.section-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border-subtle);
}
.info-item {
background: var(--color-bg-raised);
padding: 12px 16px;
border-radius: var(--radius);
}
.info-label {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-bottom: 4px;
}
.info-value {
font-size: var(--font-size-base);
color: var(--dark);
font-weight: 500;
}
.info-value.highlight {
color: var(--primary);
}
.info-value.warning {
color: var(--color-orange-text);
}
.info-value.success {
color: var(--color-success-text);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--color-bg-page);
color: var(--color-text-primary);
}
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-scrollbar-hover);
}
.sidebar-link {
transition: all 0.2s;
}
.sidebar-link:hover,
.sidebar-link.active {
background-color: var(--color-gray-900);
color: var(--color-text-inverse);
}
html[data-theme="dark"] .sidebar-link:hover,
html[data-theme="dark"] .sidebar-link.active {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-link:hover,
html:not([data-theme="light"]):not([data-theme="dark"]) .sidebar-link.active {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
}
.task-card {
transition: all 0.3s ease-in-out;
border-left-width: 8px;
}
.view-btn {
background-color: var(--color-gray-300);
color: var(--color-gray-800);
font-weight: 600;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.view-btn:hover {
background-color: var(--color-gray-400);
}
.view-btn.active {
background-color: var(--color-blue-500);
color: var(--color-text-inverse);
}
@keyframes flash-yellow-green {
0%,
100% {
background-color: var(--color-warning-bg);
border-left-color: var(--color-yellow-400);
}
50% {
background-color: var(--color-success-bg);
border-left-color: var(--color-success);
}
}
.animate-flash-yellow-green {
animation: flash-yellow-green 2s infinite;
}
@keyframes flash-red-green {
0%,
100% {
background-color: var(--color-danger-light);
border-left-color: var(--color-red-400);
}
50% {
background-color: var(--color-success-bg);
border-left-color: var(--color-success);
}
}
.animate-flash-red-green {
animation: flash-red-green 2s infinite;
}
@keyframes flash-red {
0%,
100% {
background-color: var(--color-danger-light);
border-left-color: var(--color-red-400);
}
50% {
background-color: var(--color-danger-bg);
}
}
.animate-flash-red {
animation: flash-red 1.5s infinite;
}
body.tv-mode {
background-color: #111827;
overflow: hidden;
}
body.tv-mode .hide-in-tv {
display: none !important;
}
body.tv-mode .machine-card {
font-size: 1.1em;
padding: 1.25rem;
}
.machine-card.border-green-500 {
border-left-color: var(--color-success);
}
.machine-card.border-yellow-500 {
border-left-color: var(--color-yellow-500);
}
.machine-card.border-red-500 {
border-left-color: var(--color-red-400);
}
#machines-table {
min-width: 700px;
}
#machines-table tbody tr {
border-bottom: 1px solid var(--color-bg-page);
}
#machines-table tbody tr:nth-child(even) {
background-color: var(--color-gray-50);
}
#machines-table tbody tr:nth-child(even):hover {
background-color: var(--color-bg-page);
}
#machines-table tbody tr.bg-red-50:nth-child(even) {
background-color: var(--color-danger-bg);
}
#machines-table tbody tr.bg-yellow-50:nth-child(even) {
background-color: var(--color-warning-bg);
}
@media (max-width: 768px) {
#machines-table thead th:nth-child(2),
#machines-table tbody td:nth-child(2),
#machines-table thead th:nth-child(5),
#machines-table tbody td:nth-child(5) {
display: none;
}
#machines-table thead th,
#machines-table tbody td {
padding: 0.5rem 0.25rem;
font-size: 0.75rem;
}
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-lg, 8px);
border: 1px solid var(--color-border-subtle, #e5e7eb);
background: var(--color-bg-surface, #fff);
color: var(--color-text-secondary, #6b7280);
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.theme-toggle:hover {
background: var(--color-bg-hover, #f3f4f6);
color: var(--color-text-primary, #111827);
}
.theme-icon { display: none; }
.theme-toggle[data-active-icon="light"] .theme-icon--light { display: block; }
.theme-toggle[data-active-icon="dark"] .theme-icon--dark { display: block; }
.submenu-arrow {
transition: transform 0.2s ease;
}
.submenu-arrow.rotate-180 {
transform: rotate(180deg);
}
#sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 16rem;
z-index: 50;
transform: translateX(-100%);
transition: transform 0.3s ease;
overflow-y: auto;
}
#sidebar.sidebar-open {
transform: translateX(0);
}
#sidebar.sidebar-closed {
transform: translateX(-100%);
}
#sidebar.sidebar-closed > * {
opacity: 0;
transition: opacity 0.15s ease;
}
#sidebar.sidebar-open > * {
opacity: 1;
transition: opacity 0.2s ease 0.1s;
}
.kanban-board {
display: flex;
gap: 1rem;
overflow-x: auto;
padding-bottom: 1rem;
min-height: calc(100vh - 200px);
}
.kanban-column {
flex: 0 0 300px;
background: var(--color-bg-hover);
border-radius: 0.75rem;
display: flex;
flex-direction: column;
max-height: calc(100vh - 220px);
}
.kanban-column-header {
padding: 1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid;
background: var(--color-bg-surface);
border-radius: 0.75rem 0.75rem 0 0;
}
.kanban-column-cards {
flex: 1;
overflow-y: auto;
padding: 0.75rem;
min-height: 100px;
}
.kanban-card {
background: var(--color-bg-card);
border-radius: 0.5rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
cursor: grab;
transition: transform 0.15s, box-shadow 0.15s;
border-left: 3px solid transparent;
}
.kanban-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.kanban-card.dragging {
opacity: 0.5;
cursor: grabbing;
}
.kanban-card.drag-over {
border-top: 2px solid var(--color-blue-500);
}
.kanban-card[data-type="feature"] {
border-left-color: var(--color-blue-500);
}
.kanban-card[data-type="bug"] {
border-left-color: var(--color-red-400);
}
.kanban-card[data-type="task"] {
border-left-color: var(--color-teal-500);
}
.kanban-card[data-type="module"] {
border-left-color: var(--color-purple);
}
.kanban-card-title {
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.kanban-card-meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.kanban-badge {
font-size: 0.65rem;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
font-weight: 500;
text-transform: uppercase;
}
.kanban-badge-type {
background: var(--color-bg-raised);
color: var(--color-text-primary);
}
.kanban-badge-type.feature { background: var(--color-primary-light); color: var(--color-blue-700); }
.kanban-badge-type.bug { background: var(--color-danger-light); color: var(--color-red-600); }
.kanban-badge-type.task { background: var(--color-green-200); color: var(--color-teal-700); }
.kanban-badge-type.module { background: var(--color-purple-light); color: var(--color-purple-700); }
.kanban-badge-priority {
background: var(--color-warning-light);
color: var(--color-warning-text);
}
.kanban-badge-priority.P0 { background: var(--color-danger-light); color: var(--color-red-600); }
.kanban-badge-priority.P1 { background: var(--color-warning-light); color: var(--color-warning-text); }
.kanban-badge-priority.P2 { background: var(--color-bg-raised); color: var(--color-text-primary); }
.kanban-badge-module {
background: var(--color-bg-hover);
color: var(--color-text-secondary);
}
.column-backlog { border-color: var(--color-border-strong); }
.column-todo { border-color: var(--color-blue-500); }
.column-inprogress { border-color: var(--color-yellow-300); }
.column-review { border-color: var(--color-purple); }
.column-done { border-color: var(--color-teal-500); }
.board-switcher {
display: flex;
gap: 0.25rem;
padding: 0 0.25rem;
margin-bottom: 0.5rem;
}
.board-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--color-text-muted);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.board-tab:hover {
color: var(--color-text-primary);
}
.board-tab.active {
color: var(--color-blue-500);
border-bottom-color: var(--color-blue-500);
}
.board-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.375rem;
border-radius: 9999px;
background: var(--color-bg-tertiary);
color: var(--color-text-muted);
font-size: 0.75rem;
font-weight: 600;
}
.board-tab.active .board-tab-count {
background: var(--color-primary-bg);
color: var(--color-blue-500);
}
.kanban-add-card {
padding: 0.5rem;
border: 2px dashed var(--color-border-strong);
border-radius: 0.5rem;
color: var(--color-text-muted);
text-align: center;
cursor: pointer;
transition: all 0.15s;
}
.kanban-add-card:hover {
border-color: var(--color-blue-500);
color: var(--color-blue-500);
background: var(--color-primary-bg);
}
.wip-warning {
color: var(--color-yellow-300);
}
.wip-exceeded {
color: var(--color-red-400);
}
.kanban-filters {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
padding: 1rem;
background: var(--color-bg-surface);
border-radius: 0.75rem;
margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.kanban-filter-select {
padding: 0.5rem 1rem;
border: 1px solid var(--color-border-strong);
border-radius: 0.5rem;
background: var(--color-bg-input);
font-size: 0.875rem;
}
.kanban-filter-select:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.kanban-search {
flex: 1;
min-width: 200px;
padding: 0.5rem 1rem;
border: 1px solid var(--color-border-strong);
border-radius: 0.5rem;
font-size: 0.875rem;
}
.kanban-search:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.kanban-modal {
position: fixed;
inset: 0;
background: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.kanban-modal.active {
opacity: 1;
visibility: visible;
}
.kanban-modal-content {
background: var(--color-bg-surface);
border-radius: 0.75rem;
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95);
transition: transform 0.2s;
}
.kanban-modal.active .kanban-modal-content {
transform: scale(1);
}
.kanban-modal-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-border-default);
display: flex;
align-items: center;
justify-content: space-between;
}
.kanban-modal-body {
padding: 1.5rem;
}
.kanban-modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--color-border-default);
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
.kanban-form-group {
margin-bottom: 1rem;
}
.kanban-form-label {
display: block;
font-weight: 500;
margin-bottom: 0.375rem;
color: var(--color-text-primary);
font-size: 0.875rem;
}
.kanban-form-input,
.kanban-form-textarea,
.kanban-form-select {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border-strong);
border-radius: 0.5rem;
font-size: 0.875rem;
}
.kanban-form-input:focus,
.kanban-form-textarea:focus,
.kanban-form-select:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.kanban-form-textarea {
min-height: 100px;
resize: vertical;
}
.card-detail-header {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.card-detail-type-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.card-detail-type-icon.feature { background: var(--color-primary-light); color: var(--color-blue-700); }
.card-detail-type-icon.bug { background: var(--color-danger-light); color: var(--color-red-600); }
.card-detail-type-icon.task { background: var(--color-green-200); color: var(--color-teal-700); }
.card-detail-type-icon.module { background: var(--color-purple-light); color: var(--color-purple-700); }
.card-detail-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-primary);
}
.card-detail-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin: 1.5rem 0;
padding: 1rem;
background: var(--color-gray-50);
border-radius: 0.5rem;
}
.card-detail-meta-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.card-detail-meta-label {
font-size: 0.75rem;
color: var(--color-text-secondary);
text-transform: uppercase;
}
.card-detail-meta-value {
font-weight: 500;
color: var(--color-text-primary);
}
.card-detail-description {
margin-bottom: 1.5rem;
}
.card-detail-description h4 {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
}
.card-detail-description p {
color: var(--color-text-secondary);
line-height: 1.6;
}
.card-comments {
border-top: 1px solid var(--color-border-default);
padding-top: 1rem;
}
.card-comments h4 {
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.card-comment {
padding: 0.75rem;
background: var(--color-gray-50);
border-radius: 0.5rem;
margin-bottom: 0.5rem;
}
.card-comment-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.card-comment-author {
font-weight: 500;
color: var(--color-text-primary);
font-size: 0.875rem;
}
.card-comment-time {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.card-comment-content {
color: var(--color-text-secondary);
font-size: 0.875rem;
}
.card-history {
border-top: 1px solid var(--color-border-default);
padding-top: 1rem;
margin-top: 1rem;
}
.card-history h4 {
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.card-history-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem 0;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.card-history-dot {
width: 0.5rem;
height: 0.5rem;
background: var(--color-border-strong);
border-radius: 50%;
margin-top: 0.375rem;
flex-shrink: 0;
}
.kanban-column-cards.drop-active {
background: var(--color-primary-bg);
}
.column-count {
background: var(--color-bg-raised);
color: var(--color-text-primary);
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.kanban-badge-effort {
background: var(--color-bg-raised);
color: var(--color-text-primary);
font-weight: 600;
}
.kanban-badge-effort.effort-XS { background: var(--color-green-200); color: var(--color-teal-700); }
.kanban-badge-effort.effort-S { background: var(--color-primary-light); color: var(--color-blue-700); }
.kanban-badge-effort.effort-M { background: var(--color-warning-light); color: var(--color-warning-text); }
.kanban-badge-effort.effort-L { background: var(--color-orange-light); color: var(--color-orange-text); }
.kanban-badge-effort.effort-XL { background: var(--color-danger-light); color: var(--color-red-600); }
.kanban-badge-progress {
background: var(--color-bg-raised);
color: var(--color-text-primary);
font-size: 0.65rem;
}
.kanban-badge-progress.complete {
background: var(--color-green-200);
color: var(--color-teal-700);
}
.monospace {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 0.8125rem;
}
.card-subtasks {
border-top: 1px solid var(--color-border-default);
padding-top: 1rem;
margin-bottom: 1rem;
}
.card-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.card-section-header h4 {
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.subtask-progress-badge {
font-size: 0.75rem;
color: var(--color-text-secondary);
font-weight: 500;
}
.subtask-progress-bar {
height: 4px;
background: var(--color-border-default);
border-radius: 2px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.subtask-progress-fill {
height: 100%;
background: var(--color-teal-500);
border-radius: 2px;
transition: width 0.3s ease;
}
.subtask-list {
margin-bottom: 0.75rem;
}
.subtask-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: var(--color-gray-50);
border-radius: 0.375rem;
margin-bottom: 0.25rem;
transition: background 0.15s;
}
.subtask-item:hover {
background: var(--color-bg-hover);
}
.subtask-item.completed .subtask-title {
text-decoration: line-through;
color: var(--color-text-muted);
}
.subtask-checkbox-wrapper {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.subtask-checkbox-wrapper input[type="checkbox"] {
width: 1rem;
height: 1rem;
cursor: pointer;
accent-color: var(--color-teal-500);
}
.subtask-title {
flex: 1;
font-size: 0.875rem;
color: var(--color-text-primary);
}
.subtask-delete {
opacity: 0;
padding: 0.25rem;
color: var(--color-text-muted);
background: transparent;
border: none;
cursor: pointer;
border-radius: 0.25rem;
transition: opacity 0.15s, color 0.15s;
}
.subtask-item:hover .subtask-delete {
opacity: 1;
}
.subtask-delete:hover {
color: var(--color-red-400);
}
.subtask-add {
display: flex;
gap: 0.5rem;
}
.subtask-add input {
flex: 1;
}
.btn-add-subtask {
padding: 0.5rem;
background: var(--color-bg-hover);
border: 1px solid var(--color-border-strong);
border-radius: 0.5rem;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
justify-content: center;
}
.btn-add-subtask:hover {
background: var(--color-blue-500);
border-color: var(--color-blue-500);
color: var(--color-text-inverse);
}
.card-files-section {
border-top: 1px solid var(--color-border-default);
padding-top: 1rem;
margin-bottom: 1rem;
}
.card-files-section h4 {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.files-list {
background: var(--color-bg-page);
border-radius: 0.5rem;
padding: 0.75rem;
max-height: 150px;
overflow-y: auto;
}
.file-item {
color: var(--color-text-faint);
padding: 0.25rem 0;
font-size: 0.8125rem;
border-bottom: 1px solid var(--color-border-strong);
}
.file-item:last-child {
border-bottom: none;
}
.card-acceptance-section {
border-top: 1px solid var(--color-border-default);
padding-top: 1rem;
margin-bottom: 1rem;
}
.card-acceptance-section h4 {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.acceptance-list {
background: var(--color-gray-50);
border-radius: 0.5rem;
padding: 0.75rem;
}
.acceptance-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.25rem 0;
font-size: 0.875rem;
color: var(--color-text-primary);
}
.acceptance-item.checked {
color: var(--color-teal-500);
}
.acceptance-item.checked span:last-child {
text-decoration: line-through;
color: var(--color-text-muted);
}
.acceptance-checkbox {
width: 1rem;
height: 1rem;
border: 1px solid var(--color-border-strong);
border-radius: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
flex-shrink: 0;
background: var(--color-bg-input);
}
.acceptance-item.checked .acceptance-checkbox {
background: var(--color-teal-500);
border-color: var(--color-teal-500);
color: var(--color-text-inverse);
}
@media (max-width: 768px) {
.kanban-column {
flex: 0 0 280px;
}
.kanban-filters {
flex-direction: column;
}
.kanban-search {
width: 100%;
}
}
.role-item {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.15s;
}
.role-item:hover {
background-color: var(--color-bg-page);
}
.role-item.selected {
background-color: var(--color-primary-light);
border: 1px solid var(--color-blue-300);
}
.role-item.system {
border-left: 3px solid var(--color-indigo-500);
}
.sync-btn {
padding: 0.5rem 1rem;
background-color: var(--color-teal-600);
color: white;
border-radius: 0.375rem;
font-weight: 500;
transition: background-color 0.15s;
}
.sync-btn:hover {
background-color: var(--color-teal-700);
}
.sync-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.audit-details-cell {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audit-details-cell:hover {
white-space: normal;
word-break: break-word;
}
.audit-action-badge {
display: inline-block;
padding: 0.125rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.audit-action-badge.create {
background-color: var(--color-green-200);
color: var(--color-green-900);
}
.audit-action-badge.update {
background-color: var(--color-primary-light);
color: var(--color-blue-800);
}
.audit-action-badge.delete {
background-color: var(--color-danger-light);
color: var(--color-red-700);
}
.audit-action-badge.login {
background-color: var(--color-warning-light);
color: var(--color-warning-text);
}
.audit-action-badge.logout {
background-color: var(--color-purple-bg);
color: var(--color-purple-text);
}
.settings-modal-overlay {
position: fixed;
inset: 0;
background-color: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
}
.settings-modal {
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 1.5rem;
max-width: 32rem;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}
.settings-modal-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.settings-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--color-gray-600);
}
.settings-loading-spinner {
width: 1.5rem;
height: 1.5rem;
border: 2px solid var(--color-border-subtle);
border-top-color: var(--color-blue-600);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 0.75rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.holidays-mini-month {
background: white;
border: 1px solid var(--color-border-subtle);
border-radius: 0.5rem;
padding: 0.75rem;
}
.holidays-mini-month-title {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-gray-800);
text-align: center;
margin-bottom: 0.5rem;
}
.holidays-mini-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.holidays-day-header {
font-size: 0.625rem;
font-weight: 500;
color: var(--color-text-faint);
text-align: center;
padding: 2px 0;
}
.holidays-day,
.holidays-day-empty {
font-size: 0.7rem;
text-align: center;
padding: 2px;
border-radius: 2px;
line-height: 1.6;
cursor: default;
}
.holidays-day-weekend {
background-color: var(--color-bg-page);
color: var(--color-text-faint);
}
.holidays-day-public {
background-color: var(--color-danger);
color: white;
font-weight: 600;
border-radius: 50%;
}
.holidays-day-vacation {
background-color: var(--color-orange-500);
color: white;
font-weight: 500;
}
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: auto;
}
.info-box {
background: var(--color-bg-raised);
border: 1px solid var(--color-border-subtle);
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-width: 0;
}
.info-box-title {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.info-box-content {
font-size: 0.875rem;
font-weight: 700;
color: var(--color-text-primary);
}
@keyframes flash-yellow-green {
0%, 100% { background-color: var(--color-warning-bg); }
50% { background-color: var(--color-success-bg); }
}
.animate-flash-yellow-green {
animation: flash-yellow-green 2s infinite;
}
@keyframes flash-red-green {
0%, 100% { background-color: var(--color-danger-bg); }
50% { background-color: var(--color-success-bg); }
}
.animate-flash-red-green {
animation: flash-red-green 2s infinite;
}
@keyframes flash-red {
0%, 100% { background-color: var(--color-danger-bg); }
50% { background-color: var(--color-bg-raised); }
}
.animate-flash-red {
animation: flash-red 1.5s infinite;
}
.dash-scope {
background: var(--color-bg-page);
color: var(--color-text-primary);
min-height: 300px;
border-radius: 12px;
}
.dash-grid-area {
padding: 24px;
}
.dash-card {
background: var(--color-bg-card);
border-radius: 12px;
border: 1px solid var(--color-border-default);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 400px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.dash-card:hover {
border-color: var(--color-border-strong);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}
.dash-card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.dash-section-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-secondary);
margin-bottom: 4px;
}
.dash-scrap-value {
font-size: 2.25rem;
font-weight: 900;
letter-spacing: -0.05em;
color: var(--color-text-primary);
}
.dash-scrap-value--warning { color: var(--color-warning); }
.dash-scrap-value--danger  { color: var(--color-danger); }
.dash-product-value {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-muted {
font-size: 0.875rem;
color: var(--color-text-muted);
}
.dash-faint {
color: var(--color-text-faint);
}
.dash-detail {
font-size: 0.625rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.dash-text-success { color: var(--color-success); }
.dash-text-warning { color: var(--color-warning); }
.dash-text-danger  { color: var(--color-danger); }
.dash-text-blue    { color: var(--color-primary); }
.dash-text-purple  { color: var(--color-purple); }
.dash-divider {
border: none;
border-top: 1px solid var(--color-border-subtle);
margin: 16px 0;
}
.dash-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
background-color: var(--color-text-faint);
}
.dash-dot--active {
background-color: var(--color-success);
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
animation: dash-pulse 2s infinite;
}
.dash-dot--warning {
background-color: var(--color-warning);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.dash-dot--danger {
background-color: var(--color-danger);
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
@keyframes dash-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.dash-page-header {
background: var(--color-bg-card);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border-default);
padding: 24px;
position: sticky;
top: 0;
z-index: 10;
border-radius: 12px 12px 0 0;
}
.dash-page-title {
font-size: 1.5rem;
font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
.dash-icon-box {
background: var(--color-primary);
color: #fff;
padding: 8px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.dash-btn-primary {
padding: 8px 16px;
background-color: var(--color-primary);
color: #fff;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: background-color 0.15s;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.dash-btn-primary:hover {
background-color: var(--color-primary-hover);
}
.dash-btn-danger {
padding: 8px 16px;
background-color: var(--color-danger);
color: #fff;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 700;
border: none;
cursor: pointer;
transition: background-color 0.15s;
}
.dash-btn-danger:hover {
background-color: var(--color-danger-hover);
}
.dash-tv-overlay {
background: var(--color-bg-page);
padding: 32px;
overflow: auto;
}
.dash-tv-title {
font-size: 2.5rem;
font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -0.03em;
}
.dash-tv-timestamp {
font-size: 1.25rem;
color: var(--color-text-secondary);
font-family: ui-monospace, monospace;
}
.dash-loading {
color: var(--color-text-muted);
text-align: center;
padding: 32px 0;
}
.sortable-header {
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease;
}
.sortable-header:hover {
background-color: var(--color-bg-page);
}
.sortable-header .sort-icon {
display: inline-block;
width: 1rem;
text-align: center;
opacity: 0.7;
}
.sortable-header:hover .sort-icon {
opacity: 1;
}
#orders-table-body tr {
transition: background-color 0.15s ease;
}
#orders-table-body tr:hover {
background-color: var(--color-gray-100);
}
#machine-filter {
min-width: 180px;
}
#machine-filter:focus {
border-color: var(--color-blue-500);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
#orders-count {
font-weight: 600;
color: var(--color-gray-800);
}
@media (max-width: 768px) {
#machine-filter {
min-width: 120px;
}
.orders-table th:nth-child(5),
.orders-table td:nth-child(5),
.orders-table th:nth-child(8),
.orders-table td:nth-child(8) {
display: none;
}
}
.mep-view-container {
min-height: 200px;
}
.mep-view-container.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.5rem;
align-items: start;
}
@media (min-width: 768px) {
.mep-view-container.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.mep-view-container.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1280px) {
.mep-view-container.grid {
grid-template-columns: repeat(4, 1fr);
}
}
.container,
.today-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
background: var(--color-bg-card);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header h1 {
font-size: 24px;
margin-bottom: 5px;
}
.header .date {
color: var(--color-text-secondary);
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab {
padding: 10px 20px;
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.tab:hover {
border-color: var(--color-primary);
}
.tab.active {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.grid {
display: grid;
gap: 20px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
.grid-2, .grid-3 { grid-template-columns: 1fr; }
}
.machine-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.machine-name {
font-weight: 600;
font-size: 18px;
}
.progress-bar {
height: 8px;
background: var(--color-gray-300);
border-radius: 4px;
margin: 10px 0;
overflow: hidden;
}
.progress-bar .fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s;
}
.progress-bar .fill.good { background: var(--color-success); }
.progress-bar .fill.warning { background: var(--color-warning); }
.progress-bar .fill.danger { background: var(--color-danger); }
.table {
width: 100%;
border-collapse: collapse;
}
.table th, .table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid var(--color-border-default);
}
.table th {
font-weight: 600;
color: var(--color-text-secondary);
font-size: 12px;
text-transform: uppercase;
}
.table tr:hover { background: var(--color-bg-hover); }
.stats {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.stat {
flex: 1;
min-width: 120px;
padding: 15px;
background: var(--color-bg-raised);
border-radius: 6px;
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: var(--color-primary);
}
.stat-label {
font-size: 12px;
color: var(--color-text-secondary);
margin-top: 5px;
}
.priority-critical { background: var(--color-danger-bg); color: var(--color-danger-text); }
.priority-high { background: var(--color-orange-bg); color: var(--color-orange-text); }
.priority-normal { background: var(--color-primary-light); color: var(--color-blue-700); }
.priority-low { background: var(--color-gray-250); color: var(--color-gray-600); }
.schedule-row {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--color-border-default);
}
.schedule-time {
width: 100px;
font-weight: 600;
}
.schedule-content {
flex: 1;
}
.loading {
text-align: center;
padding: 40px;
color: var(--color-text-faint);
}
.section { display: none; }
.section.active { display: block; }
.article-link {
color: var(--color-primary);
text-decoration: none;
cursor: pointer;
}
.article-link:hover {
text-decoration: underline;
color: var(--color-primary-hover);
}
* {
box-sizing: border-box;
}
.planning-wrapper {
height: 100vh;
}
.planning-sidebar {
width: 14%;
min-width: 210px;
max-width: 280px;
transition: min-width 0.2s, max-width 0.2s;
background: var(--color-bg-surface);
border-left: 1px solid var(--color-border-default);
display: flex;
flex-direction: column;
flex-shrink: 0;
order: 2; 
}
.planning-sidebar.sidebar--compact {
min-width: 180px;
max-width: 220px;
}
#ganttSidebar,
#assistantsSidebar {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.planning-sidebar-header {
padding: 12px;
border-bottom: 1px solid var(--color-border-default);
background: var(--color-bg-raised);
}
.planning-sidebar-header h2 {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
.search-box {
display: flex;
gap: 6px;
}
.search-box input {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--color-border-default);
border-radius: 4px;
font-size: 12px;
min-width: 0;
}
.search-box button {
padding: 6px 12px;
background: var(--color-primary);
color: var(--color-text-inverse);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
flex-shrink: 0;
}
.search-box button:hover {
background: var(--color-primary-hover);
}
.unplanned-list {
flex: 1;
overflow-y: auto;
padding: 6px;
scrollbar-width: thin;
}
.unplanned-list::-webkit-scrollbar {
width: 6px;
}
.unplanned-list::-webkit-scrollbar-track {
background: var(--color-scrollbar-track);
}
.unplanned-list::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: 3px;
}
.unplanned-list::-webkit-scrollbar-thumb:hover {
background: var(--color-scrollbar-hover);
}
.unplanned-item {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.2s;
}
.unplanned-item:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.15);
}
.unplanned-item.selected {
border-color: var(--color-primary);
background: var(--color-selected-bg);
}
.unplanned-item.overdue {
border-left: 4px solid var(--color-danger);
}
.mo-number {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.quantity-info {
font-size: 13px;
color: var(--color-blue-600);
font-weight: 500;
margin-bottom: 4px;
}
.article-info {
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 8px;
}
.unplanned-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--color-text-muted);
}
.hours-badge {
background: var(--color-gray-250);
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
}
.hours-badge.hours-missing {
background: var(--color-warning-light);
color: var(--color-warning-text);
cursor: help;
}
.deadline {
color: var(--color-text-secondary);
}
.deadline.overdue {
color: var(--color-danger);
font-weight: 500;
}
.machines-list {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 6px;
}
.gantt-sidebar-tabs {
display: flex;
border-bottom: 1px solid var(--color-border-default);
padding: 0 8px;
flex-shrink: 0;
}
.gantt-sidebar-tab {
flex: 1;
padding: 8px 4px;
font-size: 12px;
font-weight: 600;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
color: var(--color-text-muted);
transition: color 0.15s, border-color 0.15s;
}
.gantt-sidebar-tab.active {
color: var(--color-text-primary);
border-bottom-color: var(--color-primary);
}
.gantt-sidebar-tab:hover:not(.active) {
color: var(--color-text-secondary);
}
.gantt-sidebar-content {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.gantt-sidebar-content:not(.active) {
display: none;
}
.sidebar-operator-header {
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-bottom: 1px solid var(--color-border-default);
flex-shrink: 0;
}
.sidebar-operator-week-label {
font-size: 11px;
font-weight: 600;
color: var(--color-text-secondary);
}
.sidebar-shift-select {
font-size: 11px;
padding: 3px 6px;
border: 1px solid var(--color-border-default);
border-radius: 4px;
background: var(--color-bg-surface);
color: var(--color-text-primary);
max-width: 120px;
}
.sidebar-operator-list {
flex: 1;
overflow-y: auto;
padding: 4px 0;
}
.sidebar-operator-card {
padding: 8px 12px;
border-bottom: 1px solid var(--color-border-subtle);
cursor: default;
transition: background 0.1s;
}
.sidebar-operator-card:hover {
background: var(--color-bg-raised);
}
.sidebar-operator-card.expanded {
background: var(--color-bg-raised);
}
.sidebar-operator-name {
font-size: 13px;
font-weight: 600;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 6px;
}
.sidebar-operator-shift-badge {
font-size: 10px;
padding: 1px 5px;
border-radius: 3px;
font-weight: 500;
}
.sidebar-operator-machine-count {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 2px;
}
.sidebar-machine-toggles {
padding: 6px 12px 6px 24px;
display: none;
}
.sidebar-operator-card.expanded .sidebar-machine-toggles {
display: block;
}
.sidebar-machine-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 12px;
color: var(--color-text-secondary);
cursor: pointer;
}
.sidebar-machine-toggle input[type="checkbox"] {
accent-color: var(--color-primary);
}
.sidebar-machine-toggle .machine-name {
flex: 1;
}
.sidebar-machine-toggle .machine-has-mo {
font-size: 10px;
color: var(--color-text-muted);
}
.sidebar-operator-card.active-for-assign {
background: var(--accent-color-light, #eff6ff);
border-left: 3px solid var(--accent-color, #3b82f6);
padding-left: 9px; 
}
.sidebar-operator-card.active-for-assign .sidebar-operator-name {
color: var(--accent-color, #3b82f6);
font-weight: 600;
}
.sidebar-operator-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.sidebar-operator-name:hover {
text-decoration: underline;
cursor: pointer;
}
.sidebar-expand-btn {
background: none;
border: none;
padding: 2px 4px;
font-size: 11px;
color: var(--color-text-muted);
cursor: pointer;
transition: transform 0.15s ease;
line-height: 1;
flex-shrink: 0;
}
.sidebar-expand-btn:hover {
color: var(--color-text-primary);
}
.sidebar-operator-card.expanded .sidebar-expand-btn {
transform: rotate(180deg);
}
.sidebar-toggles-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.sidebar-toggles-warning {
font-size: 10px;
color: #b45309;
margin-bottom: 4px;
}
.mo-group {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: 6px;
margin-bottom: 8px;
overflow: hidden;
}
.mo-group.overdue {
border-left: 4px solid var(--color-danger);
}
.mo-group.expanded {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.operation-item {
background: var(--color-bg-raised);
border: 1px solid var(--color-border-subtle);
border-radius: 4px;
padding: 8px 10px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.2s;
}
.operation-item:last-child {
margin-bottom: 0;
}
.operation-item:hover {
border-color: var(--color-primary);
}
.operation-item.selected {
border-color: var(--color-primary);
background: var(--color-primary-light);
}
.operation-item.ready {
border-left: 3px solid var(--color-success);
}
.operation-item.blocked {
border-left: 3px solid var(--color-warning);
opacity: 0.8;
cursor: not-allowed;
}
.operation-item.blocked:hover {
border-color: var(--color-warning);
}
.op-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.op-sequence {
font-weight: 600;
font-size: 11px;
background: var(--color-gray-600);
color: white;
padding: 1px 6px;
border-radius: 3px;
}
.op-name {
font-size: 13px;
color: var(--color-text-primary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.op-details {
display: flex;
gap: 8px;
font-size: 11px;
color: var(--color-text-secondary);
}
.op-machine {
flex: 1;
}
.op-cycle {
color: var(--color-text-muted);
}
.op-qty {
font-size: 0.85em;
color: var(--color-text-secondary);
}
.op-qty.complete {
color: var(--color-success);  
}
.op-qty.over-produced {
color: var(--color-orange);  
}
.op-hours {
font-weight: 600;
color: var(--color-success);
}
.op-hours.complete {
color: var(--color-gray-600);
}
.op-scheduling-status {
display: inline-block;
font-size: 10px;
padding: 1px 5px;
border-radius: 8px;
font-weight: 600;
margin-left: auto;
}
.op-scheduling-status.fully-scheduled {
background: var(--color-success-light);
color: var(--color-success-text);
}
.op-scheduling-status.partially-scheduled {
background: var(--color-warning-light);
color: var(--color-warning-text);
}
.op-scheduling-status.not-scheduled {
background: var(--color-gray-250);
color: var(--color-gray-600);
}
.parallel-indicator {
display: inline-block;
font-size: 11px;
color: var(--color-primary);
margin-left: 4px;
font-weight: 600;
cursor: help;
}
.op-hours-detail {
font-size: 11px;
color: var(--color-gray-750);
font-weight: 500;
}
.op-blocked-reason {
margin-top: 4px;
font-size: 11px;
color: var(--color-warning-text);
background: var(--color-warning-light);
padding: 3px 6px;
border-radius: 3px;
}
.blocked-icon {
margin-right: 4px;
}
.no-operations {
padding: 20px;
text-align: center;
color: var(--color-text-secondary);
font-size: 13px;
}
.planning-sidebar .status-section {
display: block;
margin-bottom: 8px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--color-border-subtle);
}
.status-section-header {
display: flex;
align-items: center;
padding: 10px 12px;
cursor: pointer;
transition: background 0.2s;
font-size: 13px;
font-weight: 500;
gap: 8px;
user-select: none;
}
.status-section-header:hover {
filter: brightness(0.97);
}
.section-expand-icon {
font-size: 10px;
color: var(--color-text-secondary);
width: 12px;
flex-shrink: 0;
}
.section-label {
flex: 1;
}
.section-count {
background: rgba(0, 0, 0, 0.1);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.section-hours {
font-size: 11px;
color: var(--color-text-secondary);
font-weight: 400;
}
.status-section-content {
padding: 6px;
background: var(--color-bg-surface);
}
.status-section.status-not-scheduled .status-section-header {
background: var(--color-gray-150);
border-left: 4px solid var(--color-gray-500);
color: var(--color-gray-800);
}
.status-section.status-not-scheduled .section-count {
background: var(--color-border-subtle);
color: var(--color-gray-800);
}
.status-section.status-partial .status-section-header {
background: var(--color-warning-bg);
border-left: 4px solid var(--color-warning);
color: var(--color-yellow-700);
}
.status-section.status-partial .section-count {
background: var(--color-yellow-300);
color: var(--color-yellow-700);
}
.status-section.status-complete .status-section-header {
background: var(--color-success-bg);
border-left: 4px solid var(--color-success);
color: var(--color-green-700);
}
.status-section.status-complete .section-count {
background: var(--color-green-300);
color: var(--color-green-800);
}
.status-section-content .mo-group {
margin-bottom: 6px;
}
.status-section-content .mo-group:last-child {
margin-bottom: 0;
}
.mo-card {
background: var(--color-bg-surface);
border: 1px solid var(--color-border-subtle);
border-radius: 6px;
margin-bottom: 4px;
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.mo-card:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.mo-card.overdue {
border-left: 3px solid var(--color-danger);
}
.mo-card-header {
display: flex;
align-items: center;
padding: 4px 6px;
background: var(--color-bg-raised);
border-bottom: 1px solid var(--color-border-subtle);
gap: 4px;
min-height: 24px;
}
.mo-card-number {
font-weight: 700;
font-size: 11px;
color: var(--color-text-primary);
flex-shrink: 0;
cursor: pointer;
}
.mo-card-number:hover {
color: var(--color-primary);
text-decoration: underline;
}
.mo-card-product {
flex: 1;
font-size: 10px;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
min-width: 0;
}
.mo-card-deadline {
font-size: 10px;
color: var(--color-text-secondary);
flex-shrink: 0;
white-space: nowrap;
}
.mo-card-deadline.overdue {
color: var(--color-danger);
font-weight: 600;
}
.mo-card-operations {
display: flex;
flex-direction: row;
gap: 4px;
padding: 4px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
.mo-card-operations::-webkit-scrollbar {
height: 6px;
}
.mo-card-operations::-webkit-scrollbar-track {
background: var(--color-scrollbar-track);
border-radius: 3px;
}
.mo-card-operations::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: 3px;
}
.mo-card-operations::-webkit-scrollbar-thumb:hover {
background: var(--color-scrollbar-hover);
}
.op-box {
flex-shrink: 0;
min-width: 72px;
width: 72px;
height: 52px;
padding: 3px 5px;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transition: all 0.15s ease;
user-select: none;
}
.op-box-sequence {
font-size: 9px;
color: var(--color-text-muted);
font-weight: 500;
}
.op-box-machine {
font-size: 11px;
font-weight: 700;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.op-box-hours {
font-size: 9px;
color: var(--color-text-secondary);
}
.op-box-check {
position: absolute;
top: 2px;
right: 2px;
font-size: 9px;
}
.op-box.op-box-not-scheduled {
background: var(--color-bg-surface);
border: 1px solid var(--color-gray-350);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
cursor: grab;
}
.op-box.op-box-not-scheduled:hover {
border-color: var(--color-primary);
box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2);
transform: translateY(-1px);
}
.op-box.op-box-not-scheduled:active {
cursor: grabbing;
}
.op-box.op-box-partial {
background: var(--color-bg-surface);
border: 2px solid var(--color-warning);
cursor: grab;
}
.op-box.op-box-partial:hover {
border-color: var(--color-warning-hover);
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}
.op-box.op-box-partial .op-box-hours {
color: var(--color-warning-text);
font-weight: 600;
}
.op-box.op-box-complete {
background: var(--color-success-bg);
border: 2px solid var(--color-success);
cursor: default;
}
.op-box.op-box-complete .op-box-sequence,
.op-box.op-box-complete .op-box-machine,
.op-box.op-box-complete .op-box-hours {
color: var(--color-text-secondary);
opacity: 0.8;
}
.op-box.op-box-complete .op-box-check {
color: var(--color-green-700);
}
.op-box.op-box-sequential-pending {
background: var(--color-orange-bg);
border: 2px dashed var(--color-orange);
cursor: grab;
position: relative;
}
.op-box.op-box-sequential-pending:hover {
border-color: var(--color-orange-500);
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}
.op-box.op-box-sequential-pending .op-box-sequence-indicator {
position: absolute;
top: 2px;
right: 2px;
font-size: 12px;
color: var(--color-orange-500);
font-weight: bold;
}
.op-box.selected {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
.kmpl-badge {
display: inline-block;
background: var(--color-purple-600);
color: var(--color-text-inverse);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
flex-shrink: 0;
white-space: nowrap;
line-height: 16px;
}
.op-box.op-box-kmpl {
background: var(--color-purple-100);
border: 2px solid var(--color-purple-600);
cursor: default;
}
.op-box.op-box-kmpl .op-box-sequence {
color: var(--color-purple-700);
}
.op-box.op-box-kmpl .op-box-machine {
color: var(--color-purple-900);
}
.op-box.op-box-kmpl .op-box-hours {
color: var(--color-purple-600);
}
.status-section-content .mo-card {
margin-bottom: 6px;
}
.status-section-content .mo-card:last-child {
margin-bottom: 0;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-gray-150);
order: 1; 
}
.header-planning-tools {
display: flex;
align-items: center;
gap: 8px;
margin-left: 16px;
}
.header-planning-tools button {
padding: 4px 10px;
background: var(--color-bg-raised);
border: 1px solid var(--color-border-default);
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: var(--color-text-primary);
transition: background 0.15s;
}
.header-planning-tools button:hover {
background: var(--color-gray-250);
}
.header-planning-tools .week-label {
font-weight: 600;
font-size: 14px;
min-width: 130px;
text-align: center;
color: var(--color-text-primary);
}
.header-planning-sep {
width: 1px;
height: 20px;
background: var(--color-border-default);
margin: 0 4px;
}
.header-regime-selector {
display: flex;
align-items: center;
gap: 6px;
}
.header-regime-selector label {
font-size: 13px;
color: var(--color-text-secondary);
}
.header-regime-selector select {
padding: 4px 8px;
border: 1px solid var(--color-border-default);
border-radius: 4px;
font-size: 13px;
background: var(--color-bg-raised);
color: var(--color-text-primary);
}
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.btn-primary:hover {
background: var(--color-primary-hover);
}
.btn-secondary {
background: var(--color-gray-600);
color: var(--color-text-inverse);
}
.btn-danger {
background: var(--color-danger);
color: var(--color-text-inverse);
}
.btn-danger:hover {
background: var(--color-danger-hover);
}
.tab-nav {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--color-bg-surface);
border-bottom: 1px solid var(--color-border-default);
padding: 0 16px;
}
.tab-nav-tabs {
display: flex;
}
.tab-nav .planning-toggles-center {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
padding: 4px 0;
}
.tab-btn {
padding: 12px 20px;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-size: 14px;
color: var(--color-text-secondary);
transition: all 0.2s;
}
.tab-btn:hover {
color: var(--color-text-primary);
}
.tab-btn.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.tab-btn-split-wrapper {
position: relative;
display: inline-flex;
align-items: stretch;
}
.tab-btn-split-wrapper.active .tab-btn-split-trigger {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.tab-btn-split-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: none;
flex-direction: row;
background: var(--color-bg-surface);
border: 1px solid var(--color-border-default);
border-top: 2px solid var(--color-primary);
border-radius: 0 0 6px 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 100;
overflow: hidden;
white-space: nowrap;
}
.tab-btn-split-wrapper:hover .tab-btn-split-dropdown {
display: flex;
}
.tab-btn-split-option {
padding: 8px 16px;
border: none;
background: var(--color-bg-surface);
color: var(--color-text-secondary);
cursor: pointer;
font-size: 13px;
transition: background 0.15s, color 0.15s;
}
.tab-btn-split-option:first-child {
border-right: 1px solid var(--color-border-default);
}
.tab-btn-split-option:hover {
background: var(--color-primary);
color: white;
}
.tab-btn-split-option.active {
color: var(--color-primary);
font-weight: 600;
}
.gantt-container {
flex: 1;
overflow: auto;
padding: 0;
position: relative;
}
.gantt-table {
border-collapse: separate;
border-spacing: 0;
background: var(--color-bg-surface);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.gantt-table th,
.gantt-table td {
border: 1px solid var(--color-border-subtle);
border-left: none;
border-top: none;
padding: 0;
}
.gantt-table th:first-child,
.gantt-table td:first-child {
border-left: 1px solid var(--color-border-subtle);
}
.gantt-table thead tr:first-child th {
border-top: 1px solid var(--color-border-subtle);
}
.gantt-table th {
background: var(--color-bg-raised);
font-weight: 500;
font-size: 12px;
color: var(--color-text-secondary);
}
.gantt-table thead {
position: sticky;
top: 0;
z-index: 20;
}
.gantt-table thead th {
background: var(--color-bg-raised);
}
.gantt-table th.machine-name,
.gantt-table td.machine-name {
position: sticky;
left: 0;
z-index: 10;
background: var(--color-bg-raised);
}
.gantt-table thead th.machine-name {
z-index: 30;
}
.gantt-table thead tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.gantt-table thead tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.gantt-table tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.gantt-table tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.gantt-table tbody tr.drag-target-highlight {
background: var(--color-warning-bg) !important;
outline: 2px solid var(--color-warning);
outline-offset: -2px;
z-index: 5;
position: relative;
}
.gantt-table tbody tr.drag-target-highlight td.machine-name {
background: var(--color-warning-light) !important;
font-weight: 700;
color: var(--color-text-primary);
}
.gantt-table tbody tr.drag-target-highlight .shift-cell {
background: rgba(255, 248, 225, 0.5);
}
.day-header {
padding: 2px 4px;
text-align: center;
border-bottom: 1px solid var(--color-border-default);
white-space: nowrap;
line-height: 1.3;
}
.day-name {
font-weight: 600;
color: var(--color-text-primary);
font-size: 12px;
}
.day-date {
font-size: 11px;
color: var(--color-text-muted);
margin-left: 2px;
}
.shift-headers {
display: flex;
}
.shift-header {
flex: 1;
padding: 1px 2px;
text-align: center;
font-size: 10px;
border-right: 1px solid var(--color-border-subtle);
line-height: 1.4;
}
.shift-header:last-child {
border-right: none;
}
.pgv2-day-header-cell.pgv2-today,
.day-header-cell.pgv2-today {
background: var(--color-primary-bg);
border-top: 3px solid var(--color-primary);
}
.pgv2-day-cell.pgv2-today,
td.day-cell.pgv2-today {
background: var(--color-primary-bg);
}
.machine-name {
padding: 2px;
background: var(--color-bg-raised);
font-weight: 500;
min-width: 44px;
max-width: 44px;
vertical-align: middle;
font-size: 11px;
text-align: center;
border-right: 1px solid var(--color-border-subtle);
}
.machine-name .status-dot {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
margin: 0 auto 6px auto;
}
.machine-name .status-dot.ok {
background: var(--color-success);
}
.machine-name .status-dot.warning {
background: var(--color-warning);
}
.machine-name .status-dot.error {
background: var(--color-danger);
}
.machine-name-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2px;
height: 100%;
}
.machine-checkbox {
cursor: pointer;
user-select: none;
font-size: 14px;
color: var(--color-text-muted);
flex-shrink: 0;
line-height: 1;
}
.machine-checkbox:hover {
color: var(--color-primary);
}
.machine-name-clickable {
cursor: pointer;
user-select: none;
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
display: inline-block;
padding: 4px 0;
font-size: 13px;
transform: rotate(180deg); 
}
.machine-name-clickable:hover {
color: var(--color-primary);
text-decoration: none; 
background-color: var(--color-selected-bg);
border-radius: 4px;
}
.machine-header-vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
white-space: nowrap;
display: inline-block;
padding: 4px 0;
font-size: 11px;
color: var(--color-text-secondary);
}
.machine-name.selected {
background: var(--color-primary-light);
}
.machine-name.selected .machine-name-clickable {
font-weight: bold;
color: var(--color-primary);
}
.machine-name.selected .machine-checkbox {
color: var(--color-primary);
}
.selection-bar {
background: var(--color-primary-light);
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--color-blue-200);
}
.selection-bar .selection-actions {
display: flex;
align-items: center;
gap: 12px;
}
.selection-bar .clear-btn {
cursor: pointer;
color: var(--color-blue-700);
text-decoration: underline;
}
.selection-bar .clear-btn:hover {
color: var(--color-blue-900);
}
.filter-indicator {
background: var(--color-warning-light);
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-warning);
}
.filter-indicator .clear-btn {
cursor: pointer;
color: var(--color-warning-text);
text-decoration: underline;
}
.filter-indicator .clear-btn:hover {
color: var(--color-yellow-700);
}
.day-cell {
vertical-align: top;
min-width: 160px;
}
.shift-cells {
display: flex;
height: 70px;
}
.shift-cell {
flex: 1;
padding: 2px;
border-right: 1px solid var(--color-border-subtle);
height: 70px;
max-height: 70px;
overflow: hidden;
cursor: pointer;
transition: background 0.2s;
position: relative;
display: flex;
flex-direction: row;
}
.shift-cells.height-tier-1 { height: 70px; }
.shift-cells.height-tier-2 { height: 110px; }
.shift-cells.height-tier-3 { height: 150px; }
.shift-cells.height-tier-4 { height: 190px; }
.shift-cells.height-tier-1 .shift-cell { height: 70px; max-height: 70px; }
.shift-cells.height-tier-2 .shift-cell { height: 110px; max-height: 110px; }
.shift-cells.height-tier-3 .shift-cell { height: 150px; max-height: 150px; }
.shift-cells.height-tier-4 .shift-cell { height: 190px; max-height: 190px; }
.shift-cell-content {
flex: 1;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.scheduled-items-area {
flex: 1;
overflow: hidden;
min-height: 0;
}
.operator-vertical {
writing-mode: vertical-rl;
text-orientation: mixed;
font-size: 11px;
font-weight: 600;
padding: 2px 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 3px 3px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 18px;
flex-shrink: 0;
}
.operator-vertical.has-operator {
color: var(--color-green-800);
background: var(--color-green-300);
}
.operator-vertical.no-operator {
color: var(--color-warning-text);
background: var(--color-warning-light);
}
.shift-cell:last-child {
border-right: none;
}
.shift-cell:hover {
background: var(--color-selected-bg);
}
.shift-cell.heatmap-empty {
background: var(--color-bg-surface);
}
.shift-cell.heatmap-scheduled {
background: var(--color-success-bg); 
}
.shift-cell.heatmap-conflict {
background: var(--color-danger-bg); 
border-left: 2px solid var(--color-red-200);
}
.shift-cell.heatmap-empty:hover {
background: var(--color-gray-150);
}
.shift-cell.heatmap-scheduled:hover {
background: var(--color-green-300);
}
.shift-cell.heatmap-conflict:hover {
background: var(--color-red-200);
}
.shift-cell.blocked {
background: var(--color-danger-light);
cursor: not-allowed;
}
.shift-cell.blocked:hover {
background: var(--color-danger-light);
}
.shift-cell.needs-operator {
border-left: 3px solid var(--color-warning);
}
.shift-cell-overflow {
position: absolute;
bottom: 1px;
right: 1px;
background: color-mix(in srgb, var(--color-primary) 90%, transparent);
color: white;
font-size: 9px;
font-weight: 600;
padding: 1px 4px;
border-radius: 3px;
cursor: pointer;
z-index: 5;
}
.shift-cell-overflow:hover {
background: var(--color-primary-hover);
}
.weekend-divider-header,
.weekend-divider {
width: 24px;
min-width: 24px;
max-width: 24px;
background: linear-gradient(135deg, var(--color-gray-300) 0%, var(--color-gray-350) 100%);
cursor: pointer;
transition: background 0.2s;
vertical-align: middle;
}
.gantt-table thead th.weekend-divider-header {
position: sticky;
top: 0;
z-index: 20;
}
.weekend-divider-header:hover,
.weekend-divider:hover {
background: linear-gradient(135deg, var(--color-gray-350) 0%, var(--color-gray-400) 100%);
}
.weekend-divider-header.drag-hover,
.weekend-divider.drag-hover {
background: linear-gradient(135deg, var(--color-green-300) 0%, var(--color-green-300) 100%);
}
.weekend-divider-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
font-size: 9px;
font-weight: 600;
color: var(--color-text-muted);
letter-spacing: 1px;
}
.weekend-divider-content span {
writing-mode: vertical-rl;
text-orientation: mixed;
}
.toolbar {
flex-wrap: nowrap;
}
.toolbar .btn-sm {
padding: 4px 10px;
font-size: 11px;
white-space: nowrap;
}
.gantt-container {
padding: 0;
}
.operator-paint-mode {
cursor: crosshair;
}
.operator-paint-mode .pgv2-shift-cell {
cursor: crosshair;
}
.operator-paint-mode .operator-vertical {
cursor: pointer;
transition: outline 0.1s, background-color 0.1s;
pointer-events: auto;
}
.operator-paint-mode .operator-vertical:hover {
outline: 2px solid var(--accent-color, #3b82f6);
outline-offset: -2px;
}
.operator-paint-mode .operator-vertical.will-assign:hover {
outline: 2px solid var(--accent-color, #3b82f6);
outline-offset: -2px;
background-color: rgba(59, 130, 246, 0.12);
}
.operator-paint-mode .operator-vertical.will-replace:hover {
outline: 2px solid var(--color-warning, #f59e0b);
outline-offset: -2px;
background-color: rgba(245, 158, 11, 0.08);
}
.operator-paint-mode .operator-vertical.will-remove:hover {
outline: 2px dashed var(--color-danger, #ef4444);
outline-offset: -2px;
background-color: rgba(239, 68, 68, 0.08);
}
.pgv2-wrapper .pgv2-grid {
display: flex;
flex-direction: column;
background: transparent;
border: none;
box-shadow: none;
width: 100%;
}
.pgv2-wrapper .pgv2-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--color-bg-raised);
}
.pgv2-wrapper .pgv2-header-row {
display: flex;
}
.pgv2-wrapper .pgv2-body {
display: flex;
flex-direction: column;
}
.pgv2-wrapper .pgv2-row {
display: flex;
border-top: 1px solid var(--color-border-subtle);
}
.pgv2-wrapper .pgv2-body .pgv2-row:first-child {
border-top: none;
}
.pgv2-wrapper .pgv2-cell {
border-right: 1px solid var(--color-border-subtle);
padding: 0;
box-sizing: border-box;
}
.pgv2-wrapper .pgv2-cell:last-child {
border-right: none;
}
.pgv2-wrapper .pgv2-header-row .pgv2-cell {
background: var(--color-bg-raised);
font-weight: 500;
font-size: 12px;
color: var(--color-text-secondary);
}
.pgv2-wrapper .pgv2-day-header-cell {
flex: 1 1 0;
min-width: 0;
}
.pgv2-wrapper .pgv2-day-cell {
flex: 1 1 0;
min-width: 0;
}
.pgv2-wrapper .pgv2-cell.pgv2-machine-name {
position: sticky;
left: 0;
z-index: 10;
flex: 0 0 44px;
min-width: 44px;
max-width: 44px;
background: var(--color-bg-raised);
}
.pgv2-wrapper .pgv2-header-row .pgv2-cell.pgv2-machine-name {
z-index: 30;
}
.pgv2-wrapper .pgv2-weekend-divider {
flex: 0 0 24px;
min-width: 24px;
max-width: 24px;
}
.pgv2-wrapper .pgv2-shift-cells {
display: flex;
min-height: 56px;
}
.pgv2-wrapper .pgv2-shift-cells.height-tier-1 { min-height: 56px; }
.pgv2-wrapper .pgv2-shift-cells.height-tier-2 { min-height: 86px; }
.pgv2-wrapper .pgv2-shift-cells.height-tier-3 { min-height: 116px; }
.pgv2-wrapper .pgv2-shift-cells.height-tier-4 { min-height: 150px; }
.pgv2-wrapper .pgv2-shift-cells,
.pgv2-wrapper .pgv2-shift-cells .shift-cell {
height: auto;
max-height: none;
}
.pgv2-wrapper .pgv2-row.drag-target-highlight {
background: var(--color-warning-bg);
outline: 2px solid var(--color-warning);
outline-offset: -2px;
z-index: 5;
position: relative;
}
.pgv2-wrapper .pgv2-row.drag-target-highlight .pgv2-machine-name {
background: var(--color-warning-light);
font-weight: 700;
color: var(--color-text-primary);
}
.pgv2-wrapper .pgv2-row.drag-target-highlight .shift-cell {
background: rgba(255, 248, 225, 0.5);
}
.pgv2-wrapper .pgv2-scheduled-item .mo-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pgv2-wrapper .pgv2-scheduled-item .job-client-code {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pgv2-wrapper .pgv2-scheduled-item {
background: var(--machine-color-15, var(--color-bg-raised));
border: 1px solid var(--machine-color-30, var(--color-gray-350));
border-left: 1px solid var(--machine-color-30, var(--color-gray-350));
border-radius: 3px;
font-size: 10px;
padding: 2px 5px;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.pgv2-wrapper .pgv2-scheduled-item:hover {
background: var(--machine-color-30, var(--color-gray-250));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.pgv2-wrapper .pgv2-scheduled-item .mo-label {
font-size: 10px;
}
.pgv2-wrapper .pgv2-scheduled-item .job-client-code {
font-size: 9px;
}
.pgv2-wrapper .pgv2-scheduled-item.in-progress {
border-left: 2px solid var(--color-orange);
}
.pgv2-wrapper .pgv2-scheduled-item.in-progress::before {
content: '';
position: absolute;
top: 4px;
left: 3px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-orange);
animation: pgv2-pulse 2s ease-in-out infinite;
z-index: 1;
}
@keyframes pgv2-pulse {
0%, 100% { opacity: 0.5; box-shadow: 0 0 0 0 transparent; }
50% { opacity: 1; box-shadow: 0 0 4px 1px var(--color-orange); }
}
.pgv2-wrapper .pgv2-scheduled-item.completed {
opacity: 0.55;
border-color: var(--color-green-300);
}
.pgv2-wrapper .pgv2-scheduled-item.completed::before {
content: '\2713';
position: absolute;
top: 1px;
right: 2px;
font-size: 8px;
font-weight: 700;
color: var(--color-success);
line-height: 1;
z-index: 1;
}
.pgv2-wrapper .pgv2-scheduled-item.completed:hover {
opacity: 0.85;
}
.pgv2-wrapper .pgv2-scheduled-item.overdue {
border-color: rgba(239, 68, 68, 0.35);
}
.pgv2-wrapper .pgv2-scheduled-item.over-planned {
border-color: rgba(147, 51, 234, 0.3);
}
.pgv2-wrapper .pgv2-scheduled-item.over-planned::before {
content: '\26A0';
position: absolute;
top: 0px;
right: 1px;
font-size: 8px;
line-height: 1;
color: var(--color-purple-600);
z-index: 1;
}
.pgv2-wrapper .pgv2-scheduled-item.has-mrp-changes {
border-left: 2px solid var(--color-orange);
}
.pgv2-wrapper .pgv2-scheduled-item.has-mrp-changes::after {
content: '';
position: absolute;
top: 2px;
right: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-orange);
z-index: 1;
}
.pgv2-wrapper .pgv2-scheduled-item.has-parallel {
border-right: 2px solid rgba(59, 130, 246, 0.5);
}
.pgv2-wrapper .pgv2-scheduled-item.highlighted {
outline: 2px solid #e91e63;
outline-offset: 1px;
box-shadow: 0 2px 8px rgba(233, 30, 99, 0.35);
}
.pgv2-wrapper .gantt-container {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.pgv2-wrapper .gantt-container::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.pgv2-wrapper .gantt-container::-webkit-scrollbar-track {
background: transparent;
}
.pgv2-wrapper .gantt-container::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
.pgv2-wrapper .gantt-container::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
.pgv2-wrapper .gantt-container::-webkit-scrollbar-corner {
background: transparent;
}
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-empty,
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-under,
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-near,
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-over {
background: transparent;
}
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-empty:hover,
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-under:hover,
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-near:hover,
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-over:hover {
background: var(--color-selected-bg);
}
.pgv2-wrapper .pgv2-shift-cell::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
z-index: 2;
pointer-events: none;
border-radius: 0 0 1px 1px;
}
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-empty::before {
background: transparent;
}
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-under::before {
background: var(--color-success, #22c55e);
}
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-near::before {
background: var(--color-warning, #f59e0b);
}
.pgv2-wrapper .pgv2-shift-cell.pgv2-cap-over::before {
background: var(--color-danger, #ef4444);
}
.pgv2-wrapper .pgv2-shift-cell.blocked::before {
background: transparent;
}
.pgv2-wrapper .gantt-cell--public-holiday {
background: rgba(239, 68, 68, 0.08) !important;
border-top: 3px solid rgba(239, 68, 68, 0.25);
}
.pgv2-wrapper .gantt-cell--collective-vacation {
background: rgba(251, 191, 36, 0.06) !important;
border-top: 3px solid rgba(251, 191, 36, 0.25);
}
.pgv2-wrapper .gantt-header--holiday .day-name,
.pgv2-wrapper .gantt-header--holiday .day-date {
color: rgba(239, 68, 68, 0.7);
}
.pgv2-wrapper .holiday-name-badge--public {
background: rgba(239, 68, 68, 0.15);
color: rgba(239, 68, 68, 0.8);
border: 1px solid rgba(239, 68, 68, 0.25);
}
.pgv2-wrapper .holiday-name-badge--vacation {
background: rgba(251, 191, 36, 0.12);
color: rgba(251, 191, 36, 0.8);
border: 1px solid rgba(251, 191, 36, 0.25);
}
.pgv2-wrapper .gantt-cell--public-holiday .shift-cell.drag-over {
background: rgba(239, 68, 68, 0.15) !important;
}
.pgv2-wrapper .gantt-cell--public-holiday .shift-cell:not(.blocked) {
opacity: 0.85;
}
.scheduled-item {
background: var(--color-bg-raised);
border: 1px solid var(--color-gray-350);
border-left: 3px solid var(--color-primary);
border-radius: 3px;
padding: 3px 6px;
margin-bottom: 2px;
font-size: 11px;
cursor: pointer;
position: relative;
transition: all 0.15s ease;
}
.scheduled-item:hover {
background: var(--color-gray-250);
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.scheduled-item .mo-label {
display: flex;
align-items: center;
font-weight: 600;
font-size: 11px;
color: var(--color-text-primary);
margin-bottom: 1px;
overflow: hidden;
white-space: nowrap;
}
.scheduled-item .mo-label .job-status-tag {
margin-left: auto;
}
.scheduled-item .job-client-code {
display: flex;
align-items: center;
font-size: 10px;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
gap: 4px;
}
.scheduled-item .job-product-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
border-right: 1px solid var(--color-gray-350);
padding-right: 4px;
}
.scheduled-item .job-right-info {
flex-shrink: 0;
}
.scheduled-item .due-date {
color: inherit;
}
.scheduled-item .due-date.overdue {
color: var(--color-danger);
font-weight: 500;
}
.job-status-tag {
display: inline-block;
font-size: 8px;
font-weight: 600;
padding: 1px 4px;
border-radius: 2px;
margin-left: 4px;
vertical-align: middle;
}
.job-status-tag.fai {
background: var(--color-success-light);
color: #166534;
}
.job-status-tag.overdue {
background: var(--color-danger-light);
color: var(--color-danger-text);
}
.job-status-tag.material {
background: var(--color-warning-light);
color: var(--color-warning-text);
}
.job-status-tag.mrp-change {
background: var(--color-orange-light);
color: var(--color-orange-text);
font-weight: bold;
}
.scheduled-item.has-mrp-changes {
border-left: 3px solid var(--color-orange) !important;
background: linear-gradient(90deg, var(--color-orange-bg) 0%, transparent 30%);
}
.scheduled-item.has-mrp-changes .mo-label {
color: var(--color-orange-text);
}
.job-tooltip {
position: fixed;
background: white;
border: 1px solid var(--color-border-default);
border-radius: 6px;
padding: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
z-index: 10000;
min-width: 200px;
max-width: 280px;
font-size: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
overflow: hidden;
word-break: break-word;
}
.job-tooltip.visible {
opacity: 1;
}
.job-tooltip-header {
font-weight: 600;
font-size: 14px;
color: var(--color-text-primary);
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-gray-300);
}
.job-tooltip-row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.job-tooltip-row .label {
color: var(--color-text-secondary);
}
.job-tooltip-row .value {
font-weight: 500;
color: var(--color-text-primary);
max-width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.job-tooltip-ops {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--color-gray-300);
font-size: 11px;
}
.job-tooltip-ops .op-item {
padding: 2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.job-tooltip-ops .op-item.current {
font-weight: 600;
color: var(--color-primary);
}
.job-tooltip-ops .op-item.done {
color: var(--color-success);
}
.job-tooltip-ops .op-item.pending {
color: var(--color-text-secondary);
}
.scheduled-item.highlighted {
outline: 3px solid #e91e63;
outline-offset: 1px;
z-index: 10;
position: relative;
box-shadow: 0 2px 12px rgba(233, 30, 99, 0.5);
background: rgba(233, 30, 99, 0.06);
}
.scheduled-item.highlighted .mo-label {
color: #c2185b;
}
.scheduled-item.highlighted .op-badge {
background: #e91e63;
}
.connector-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
overflow: visible;
}
.connector-line {
stroke: #e91e63;
stroke-width: 2.5;
fill: none;
stroke-dasharray: 5, 3;
opacity: 0.8;
}
.connector-arrow {
fill: #e91e63;
}
.click-outside-hint {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.click-outside-hint.visible {
opacity: 1;
}
.scheduled-item:hover {
background: var(--color-blue-200);
}
.scheduled-item.in-progress {
background: var(--color-orange-bg);
border-color: var(--color-orange-100);
}
.scheduled-item.completed {
background: var(--color-success-bg);
border-color: var(--color-green-300);
}
.scheduled-item.overdue {
border-left: 3px solid var(--color-danger);
}
.scheduled-item.over-planned {
border-left: 3px solid var(--color-purple-600);
background: linear-gradient(135deg, var(--color-purple-bg) 0%, var(--color-bg-surface) 50%);
}
.op-badge {
display: inline-block;
font-size: 9px;
padding: 1px 4px;
border-radius: 3px;
background: var(--color-gray-600);
color: white;
font-weight: 600;
margin-right: 4px;
vertical-align: middle;
}
.op-badge.parallel {
background: var(--color-primary);
}
.scheduled-item.has-parallel {
border-right: 3px solid var(--color-primary);
}
.scheduled-item .mo-label {
font-weight: 600;
margin-bottom: 2px;
}
.scheduled-item .progress-bar {
height: 4px;
background: var(--color-border-subtle);
border-radius: 2px;
margin-top: 4px;
overflow: hidden;
}
.scheduled-item .progress-bar .progress {
height: 100%;
background: var(--color-success);
transition: width 0.3s;
}
.scheduled-item .progress-bar {
background: var(--color-border-subtle);
border-radius: 1px;
overflow: hidden;
}
.scheduled-item .progress-bar .progress {
background: var(--color-success);
height: 100%;
transition: width 0.2s ease;
}
.unplanned-item[draggable="true"],
.scheduled-item[draggable="true"] {
cursor: grab;
}
.unplanned-item.dragging,
.scheduled-item.dragging {
opacity: 0.5;
cursor: grabbing;
}
.shift-cell.drag-over {
background: var(--color-green-300) !important;
border: 2px dashed var(--color-success);
}
.shift-cell.blocked.drag-over {
background: var(--color-red-200) !important;
border: 2px dashed var(--color-red-400);
}
.shift-cell.drag-over-invalid {
background: var(--color-red-200) !important;
border: 2px dashed var(--color-red-400);
}
.block-marker {
background: var(--color-danger-bg);
border: 1px dashed var(--color-red-200);
border-radius: 3px;
padding: 4px 6px;
margin-bottom: 2px;
font-size: 10px;
color: var(--color-red-600);
text-align: center;
}
.free-time {
font-size: 10px;
color: var(--color-text-muted);
text-align: center;
padding: 2px;
flex-shrink: 0;
}
#weekendToggleBtn {
background: var(--color-bg-raised);
border: 1px solid var(--color-border-default);
color: var(--color-text-secondary);
}
#weekendToggleBtn:hover {
background: var(--color-gray-250);
color: var(--color-text-primary);
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: var(--color-overlay);
z-index: 9999;
align-items: center;
justify-content: center;
}
.modal-overlay.active {
display: flex;
}
.modal-overlay > .modal {
background: var(--color-bg-surface) !important;
background-color: var(--color-bg-surface) !important;
border-radius: 8px;
width: 500px;
min-width: 300px;
min-height: 200px;
max-width: 90%;
max-height: 90vh;
overflow: auto;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transform: none !important;
}
.modal-overlay > .modal.modal-large {
width: 900px;
max-width: 95%;
}
.modal-overlay > .modal.modal-planning {
position: fixed;
top: 50%;
transform: translateY(-50%) !important;
left: 16px;
right: 288px;
width: auto;
max-width: none;
margin: 0;
}
.modal-header {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-default);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-size: 16px;
}
.modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--color-text-secondary);
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 16px 20px;
border-top: 1px solid var(--color-border-default);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 13px;
color: var(--color-text-secondary);
margin-bottom: 6px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border-default);
border-radius: 4px;
font-size: 14px;
}
.form-info {
background: var(--color-bg-raised);
border-radius: 4px;
padding: 12px;
font-size: 13px;
}
.form-info p {
margin-bottom: 6px;
}
.form-info p:last-child {
margin-bottom: 0;
}
.summary-panel {
display: none;
}
.summary-stats {
display: flex;
gap: 24px;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 24px;
font-weight: 600;
color: var(--color-text-primary);
}
.stat-label {
font-size: 12px;
color: var(--color-text-muted);
}
.stat-item.warning .stat-value {
color: var(--color-warning);
}
.stat-item.danger .stat-value {
color: var(--color-danger);
}
.create-slot-modal {
width: 520px;
max-width: 95%;
}
.create-slot-modal .slot-info {
background: var(--color-bg-raised);
border-radius: 6px;
padding: 12px 16px;
}
.create-slot-modal .slot-info-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
}
.create-slot-modal .slot-info-row .label {
color: var(--color-text-secondary);
}
.create-slot-modal .slot-info-row .value {
font-weight: 600;
}
.create-slot-modal .hours-input {
padding: 8px 12px;
border: 1px solid var(--color-border-default);
border-radius: 4px;
font-size: 14px;
text-align: center;
}
.create-slot-modal .hours-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}
.create-slot-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: var(--color-bg-raised);
border: 1px solid var(--color-gray-350);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: var(--color-gray-750);
transition: all 0.2s ease;
}
.create-slot-btn:hover {
background: var(--color-gray-250);
border-color: var(--color-primary);
color: var(--color-primary);
}
.preview-affected,
.preview-conflicts,
.preview-empty {
border-radius: 6px;
margin-bottom: 12px;
}
.split-warning {
padding: 12px;
background: var(--color-warning-light);
border: 1px solid var(--color-warning);
border-radius: 6px;
margin-bottom: 12px;
}
.suggested-time {
margin-top: 8px;
padding: 10px 12px;
background: var(--color-success-light);
border-radius: 4px;
border-left: 3px solid var(--color-success);
}
.consolidate-pos {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.consolidate-pos--current {
background: var(--color-slate-100);
color: var(--color-slate-600);
}
.consolidate-pos--new {
background: var(--color-primary-light);
color: var(--color-blue-700);
font-weight: 600;
}
.consolidate-arrow {
color: var(--color-slate-400);
font-size: 18px;
padding: 0 4px;
}
.consolidate-table tr:nth-child(even) {
background: var(--color-slate-50);
}
.operators-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
padding: 16px;
}
.operator-card {
background: var(--color-bg-surface);
border-radius: 8px;
padding: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.operator-card h4 {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.operator-avatar {
width: 32px;
height: 32px;
background: var(--color-gray-250);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--color-text-secondary);
}
.operator-schedule {
font-size: 13px;
}
.schedule-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--color-gray-300);
}
.schedule-row:last-child {
border-bottom: none;
}
.schedule-row:hover {
background: var(--color-bg-raised);
}
.schedule-day {
color: var(--color-text-secondary);
}
.schedule-machines {
color: var(--color-text-primary);
font-weight: 500;
}
.assistants-container {
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.submenu-arrow {
transition: transform 0.2s ease;
}
.submenu-arrow.rotate-180 {
transform: rotate(180deg);
}
#sidebar {
min-width: 0;
transition: width 0.3s ease, opacity 0.3s ease;
}
#sidebar.sidebar-open {
width: 16rem; 
}
#sidebar.sidebar-closed {
width: 0 !important;
overflow: hidden;
padding: 0;
}
#sidebar.sidebar-closed > * {
opacity: 0;
transition: opacity 0.15s ease;
}
#sidebar.sidebar-open > * {
opacity: 1;
transition: opacity 0.3s ease 0.1s;
}
.operator-gantt-container {
overflow-x: auto;
background: var(--color-bg-surface);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.operator-gantt-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
}
.operator-gantt-table thead th {
background: var(--color-bg-raised);
border-bottom: 2px solid var(--color-gray-350);
padding: 0;
position: sticky;
top: 0;
z-index: 10;
}
.operator-gantt-table .operator-name-header {
width: 150px;
min-width: 150px;
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: var(--color-text-primary);
border-right: 2px solid var(--color-gray-350);
}
.operator-gantt-table .day-header-cell {
text-align: center;
border-right: 1px solid var(--color-border-subtle);
}
.operator-gantt-table .day-header-cell:last-child {
border-right: none;
}
.operator-gantt-table .day-header {
padding: 8px 4px;
border-bottom: 1px solid var(--color-border-subtle);
}
.operator-gantt-table .day-header .day-name {
font-weight: 600;
color: var(--color-text-primary);
}
.operator-gantt-table .day-header .day-date {
font-size: 11px;
color: var(--color-text-secondary);
}
.operator-gantt-table .shift-headers {
display: flex;
}
.operator-gantt-table .shift-header {
flex: 1;
padding: 6px 4px;
font-size: 11px;
color: var(--color-text-secondary);
text-align: center;
border-right: 1px solid var(--color-gray-300);
}
.operator-gantt-table .shift-header:last-child {
border-right: none;
}
.operator-gantt-table tbody tr {
border-bottom: 1px solid var(--color-border-subtle);
}
.operator-gantt-table tbody tr:hover {
background: var(--color-bg-raised);
}
.operator-gantt-table tbody tr:last-child {
border-bottom: none;
}
.operator-gantt-table .operator-name-cell {
padding: 12px 16px;
border-right: 2px solid var(--color-gray-350);
background: var(--color-gray-50);
}
.operator-gantt-table .operator-name-cell .operator-info {
display: flex;
align-items: center;
gap: 10px;
}
.operator-gantt-table .operator-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.operator-gantt-table .operator-name {
font-weight: 500;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.operator-gantt-table .day-cell {
padding: 0;
border-right: 1px solid var(--color-border-subtle);
vertical-align: top;
}
.operator-gantt-table .day-cell:last-child {
border-right: none;
}
.operator-gantt-table .shift-cells {
display: flex;
min-height: 50px;
}
.operator-gantt-table .shift-cell {
flex: 1;
padding: 3px;
border-right: 1px solid var(--color-gray-300);
cursor: pointer;
min-height: 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
align-content: start;
transition: background 0.15s ease;
}
.operator-gantt-table .shift-cell:last-child {
border-right: none;
}
.operator-gantt-table .shift-cell:hover {
background: var(--color-primary-light);
}
.operator-gantt-table .shift-cell.has-assignments {
background: var(--color-success-bg);
}
.operator-gantt-table .shift-cell.has-assignments:hover {
background: var(--color-green-300);
}
.operator-machine-badge {
display: block;
padding: 3px 3px;
border-radius: 3px;
font-size: 11px;
font-weight: 500;
color: white;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
transition: opacity 0.15s ease;
}
.operator-machine-badge:hover {
opacity: 0.85;
}
.operator-machine-badge.multi-assigned {
outline: 2px solid var(--color-gray-450);
outline-offset: -1px;
}
.machine-color-0  { background: #42A5F5; }  
.machine-color-1  { background: #EF5350; }  
.machine-color-2  { background: #66BB6A; }  
.machine-color-3  { background: #FFA726; }  
.machine-color-4  { background: #AB47BC; }  
.machine-color-5  { background: #26C6DA; }  
.machine-color-6  { background: #EC407A; }  
.machine-color-7  { background: #5C6BC0; }  
.machine-color-8  { background: #9CCC65; }  
.machine-color-9  { background: #FF7043; }  
.machine-color-10 { background: #8D6E63; }  
.machine-color-11 { background: #26A69A; }  
.operator-shift-empty {
grid-column: 1 / -1;
color: var(--color-gray-450);
font-size: 18px;
text-align: center;
line-height: 42px;
}
.operator-gantt-table .weekend-divider-header,
.operator-gantt-table .weekend-divider {
width: 30px;
min-width: 30px;
max-width: 30px;
background: linear-gradient(135deg, var(--color-gray-150) 25%, var(--color-border-subtle) 50%, var(--color-gray-150) 75%);
cursor: pointer;
text-align: center;
vertical-align: middle;
}
.operator-gantt-table .weekend-divider-header:hover,
.operator-gantt-table .weekend-divider:hover {
background: linear-gradient(135deg, var(--color-primary-light) 25%, var(--color-blue-200) 50%, var(--color-primary-light) 75%);
}
.operator-gantt-table .weekend-divider-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 600;
color: var(--color-text-secondary);
padding: 8px 2px;
}
.operator-gantt-loading {
padding: 40px;
text-align: center;
color: var(--color-text-secondary);
}
.operator-gantt-empty {
padding: 40px;
text-align: center;
color: var(--color-text-secondary);
}
.operator-gantt-empty p {
margin: 8px 0;
}
.operator-gantt-empty p:first-child {
font-size: 14px;
}
.operator-gantt-empty p:last-child {
font-size: 12px;
color: var(--color-gray-500);
}
.operator-drop-zone {
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.operator-drop-zone.machine-selected {
cursor: pointer;
}
.operator-drop-zone.machine-selected:hover {
background-color: rgba(13, 110, 253, 0.1) !important;
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.operator-shift-empty {
font-size: 10px;
color: var(--color-gray-400);
text-align: center;
padding: 2px 0;
}
.operator-shift-empty.no-shift-cross {
font-size: 14px;
color: var(--color-border-default);
cursor: default;
}
.shift-cell.no-shift {
cursor: default;
opacity: 0.6;
}
.shift-cell.no-shift:hover {
background-color: transparent !important;
outline: none !important;
}
.operator-shift-loading {
font-size: 11px;
color: var(--color-gray-600);
text-align: center;
font-style: italic;
}
.machines-sidebar-list {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px;
overflow-y: auto;
flex: 1;
}
.sidebar-machine-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
user-select: none;
transition: all 0.15s ease;
background: var(--color-bg-surface);
border: 2px solid transparent;
}
.sidebar-machine-item:hover {
background: var(--color-slate-100);
transform: translateX(2px);
}
.sidebar-machine-item.selected {
border-color: var(--color-primary);
background: var(--color-primary-bg);
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.sidebar-machine-item.fully-assigned {
opacity: 0.45;
pointer-events: none;
}
.sidebar-machine-item.fully-assigned .sidebar-machine-name {
color: var(--color-gray-500);
text-decoration: line-through;
}
.sidebar-machine-slots {
font-size: 11px;
color: var(--color-gray-500);
white-space: nowrap;
margin-left: auto;
}
.sidebar-machine-color {
width: 16px;
height: 16px;
border-radius: 4px;
flex-shrink: 0;
}
.sidebar-machine-name {
font-size: 13px;
font-weight: 500;
color: var(--color-text-primary);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.machines-sidebar-hint {
padding: 12px;
font-size: 12px;
color: var(--color-gray-600);
text-align: center;
border-top: 1px solid var(--color-gray-250);
background: var(--color-bg-raised);
}
.machines-sidebar-hint.active {
color: var(--color-primary);
font-weight: 500;
background: var(--color-primary-bg);
}
.operator-footer-hint {
font-size: 13px;
color: var(--color-gray-600);
}
.operator-footer-hint.active {
color: var(--color-primary);
font-weight: 500;
}
.operator-coverage-bar {
padding: 10px 14px;
border-radius: 8px;
margin-bottom: 12px;
font-size: 13px;
border: 1px solid transparent;
}
.operator-coverage-bar.warning {
background: var(--color-warning-light);
border-color: var(--color-warning);
}
.operator-coverage-bar.success {
background: var(--color-success-light);
border-color: var(--color-success);
}
.coverage-summary {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: var(--color-text-primary);
}
.operator-coverage-bar.warning .coverage-summary i {
color: var(--color-warning-text);
}
.operator-coverage-bar.success .coverage-summary i {
color: var(--color-green-900);
}
html[data-theme="dark"] .operator-coverage-bar.warning .coverage-summary {
color: #1a1500;
}
html[data-theme="dark"] .operator-coverage-bar.warning .coverage-summary i {
color: #92400e;
}
html[data-theme="dark"] .operator-coverage-bar.warning .coverage-toggle {
color: #78350f;
}
.coverage-toggle {
background: none;
border: none;
font-size: 12px;
color: var(--color-gray-600);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
margin-left: auto;
}
.coverage-toggle:hover {
background: rgba(0, 0, 0, 0.08);
color: var(--color-text-primary);
}
.coverage-gaps {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.coverage-gaps.collapsed {
display: none;
}
.gap-item {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
background: rgba(0, 0, 0, 0.07);
color: var(--color-text-primary);
white-space: nowrap;
}
.operator-coverage-bar.warning .gap-item {
background: rgba(133, 100, 4, 0.12);
color: var(--color-yellow-700);
}
.gap-item .gap-day {
font-weight: 600;
}
.blocked-day-cell {
background: var(--color-warning-light) !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-height: 50px;
}
.blocked-day-cell:hover {
background: var(--color-yellow-100) !important;
}
.blocked-day-badge {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: var(--color-yellow-700);
background: color-mix(in srgb, var(--color-warning) 25%, transparent);
white-space: nowrap;
}
.blocked-day-icon {
font-size: 13px;
}
.blocked-day-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
#bulkMachineCheckboxes label.bulk-machine-taken {
border-color: var(--color-yellow-300);
background: var(--color-yellow-50);
}
.bulk-taken-indicator {
font-size: 10px;
color: var(--color-warning-text);
margin-left: 2px;
}
#operatorStats .stat-item.warning .stat-value {
color: var(--color-danger);
}
#operatorStats .stat-item.no-warning .stat-value {
color: var(--color-success);
}
.plan-full-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
margin-top: 12px;
background: var(--color-bg-raised);
border-top: 1px solid var(--color-border-subtle);
position: sticky;
bottom: 0;
}
.plan-full-toggle .toggle-label {
font-size: 13px;
color: var(--color-text-primary);
font-weight: 500;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-gray-450);
transition: 0.3s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider {
background-color: var(--color-success);
}
.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(20px);
}
.toggle-switch input:focus + .toggle-slider {
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}
.plan-full-toggle-floating {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--color-slate-100);
border-radius: 24px;
border: 1px solid var(--color-gray-350);
}
.plan-full-toggle-floating .toggle-label {
font-size: 13px;
color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
}
.delete-shift-toggle-floating {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--color-danger-bg);
border-radius: 24px;
border: 1px solid var(--color-red-200);
}
.delete-shift-toggle-floating .toggle-label {
font-size: 13px;
color: var(--color-danger-text);
font-weight: 500;
white-space: nowrap;
}
.toggle-slider.delete-slider {
background-color: var(--color-gray-450);
}
.toggle-switch input:checked + .toggle-slider.delete-slider {
background-color: var(--color-danger);
}
body.delete-shift-mode .scheduled-item {
cursor: pointer;
transition: all 0.15s ease;
}
body.delete-shift-mode .scheduled-item:hover {
background: var(--color-danger-bg) !important;
border-color: var(--color-danger) !important;
border-left-color: var(--color-danger) !important;
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
}
body.delete-shift-mode .scheduled-item:hover .mo-label {
color: var(--color-danger);
}
body.delete-shift-mode .scheduled-item.in_progress:hover {
background: var(--color-warning-light) !important;
border-color: var(--color-warning) !important;
border-left-color: var(--color-warning) !important;
box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.3);
cursor: not-allowed;
}
body.delete-shift-mode .scheduled-item.in_progress:hover .mo-label {
color: var(--color-warning-text);
}
.delete-shift-toggle-floating:has(input:checked) {
background: var(--color-danger-light);
border-color: var(--color-red-200);
}
.delete-shift-toggle-floating:has(input:checked) .toggle-label {
color: var(--color-danger-text);
font-weight: 600;
}
.delete-mo-machine-toggle-floating {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--color-danger-bg);
border-radius: 24px;
border: 1px solid var(--color-red-200);
}
.delete-mo-machine-toggle-floating .toggle-label {
font-size: 13px;
color: var(--color-danger-text);
font-weight: 500;
white-space: nowrap;
}
.delete-mo-machine-toggle-floating:has(input:checked) {
background: var(--color-danger-light);
border-color: var(--color-red-200);
}
.delete-mo-machine-toggle-floating:has(input:checked) .toggle-label {
color: var(--color-danger-text);
font-weight: 600;
}
body.delete-mo-machine-mode .scheduled-item {
cursor: pointer;
transition: all 0.15s ease;
}
body.delete-mo-machine-mode .scheduled-item:hover {
background: var(--color-danger-bg) !important;
border-color: var(--color-danger) !important;
border-left-color: var(--color-danger) !important;
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
}
body.delete-mo-machine-mode .scheduled-item:hover .mo-label {
color: var(--color-danger);
}
.consolidate-toggle-floating {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--color-primary-bg);
border-radius: 24px;
border: 1px solid var(--color-blue-200);
}
.consolidate-toggle-floating .toggle-label {
font-size: 13px;
color: var(--color-blue-800);
font-weight: 500;
white-space: nowrap;
}
.toggle-slider.consolidate-slider {
background-color: var(--color-gray-450);
}
.toggle-switch input:checked + .toggle-slider.consolidate-slider {
background-color: var(--color-blue-600);
}
.consolidate-toggle-floating:has(input:checked) {
background: var(--color-primary-light);
border-color: var(--color-blue-300);
}
.consolidate-toggle-floating:has(input:checked) .toggle-label {
color: var(--color-blue-800);
font-weight: 600;
}
.custom-start-time-toggle-floating {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #f0fdfa;
border-radius: 24px;
border: 1px solid #99f6e4;
}
.custom-start-time-toggle-floating .toggle-label {
font-size: 13px;
color: #0f766e;
font-weight: 500;
white-space: nowrap;
}
.toggle-slider.custom-start-time-slider {
background-color: var(--color-gray-450);
}
.toggle-switch input:checked + .toggle-slider.custom-start-time-slider {
background-color: #14b8a6;
}
.custom-start-time-toggle-floating:has(input:checked) {
background: #ccfbf1;
border-color: #5eead4;
}
.custom-start-time-toggle-floating:has(input:checked) .toggle-label {
color: #0f766e;
font-weight: 600;
}
.start-time-badge {
display: inline-block;
background: #14b8a6;
color: white;
font-size: 0.65rem;
padding: 1px 4px;
border-radius: 3px;
margin-right: 4px;
font-weight: 600;
}
body.consolidate-mode .shift-cell.consolidate-gap {
border: 2px dashed var(--color-blue-500) !important;
background: var(--color-primary-bg) !important;
cursor: pointer;
}
body.consolidate-mode .shift-cell.consolidate-gap:hover {
background: var(--color-primary-light) !important;
border-color: var(--color-blue-600) !important;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
body.consolidate-mode .shift-cell.consolidate-gap .consolidate-gap-label {
color: var(--color-blue-600);
font-weight: 600;
font-size: 11px;
}
.shift-assignment-view {
padding: 16px;
background: var(--color-bg-surface);
height: 100%;
overflow: auto;
}
.shift-assignment-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 12px;
background: var(--color-bg-raised);
border-radius: 6px;
}
.shift-assignment-nav .btn {
padding: 6px 12px;
font-size: 13px;
border: 1px solid var(--color-border-default);
background: var(--color-bg-surface);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.shift-assignment-nav .btn:hover {
background: var(--color-gray-300);
border-color: var(--color-gray-400);
}
.current-week-label {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
min-width: 200px;
text-align: center;
}
.current-week-label .week-dates {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--color-text-secondary);
margin-top: 2px;
}
.shift-assignment-table-wrapper {
overflow-x: auto;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.shift-assignment-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
min-width: 800px;
}
.shift-assignment-table thead {
position: sticky;
top: 0;
z-index: 10;
}
.shift-assignment-table .month-row th {
background: var(--color-gray-250);
border-bottom: 1px solid var(--color-gray-350);
padding: 8px 4px;
font-weight: 600;
font-size: 12px;
color: var(--color-gray-750);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.shift-assignment-table .week-row th {
background: var(--color-bg-raised);
border-bottom: 2px solid var(--color-gray-350);
padding: 8px 4px;
}
.shift-assignment-table .operator-name-header {
width: 160px;
min-width: 160px;
padding: 12px 16px;
text-align: left;
font-weight: 600;
color: var(--color-text-primary);
border-right: 2px solid var(--color-gray-350);
background: var(--color-bg-raised) !important;
}
.shift-assignment-table .month-row .operator-name-header {
background: var(--color-gray-250) !important;
}
.shift-assignment-month-cell {
text-align: center;
border-left: 1px solid var(--color-gray-350);
}
.shift-assignment-month-cell:first-of-type {
border-left: none;
}
.shift-assignment-header-cell {
text-align: center;
border-left: 1px solid var(--color-border-subtle);
min-width: 80px;
padding: 6px 4px;
}
.shift-assignment-header-cell:first-of-type {
border-left: none;
}
.shift-assignment-header-cell .week-number {
font-weight: 600;
color: var(--color-text-primary);
font-size: 13px;
}
.shift-assignment-header-cell .week-start {
font-size: 10px;
color: var(--color-text-secondary);
margin-top: 2px;
}
.shift-assignment-header-cell.current-week {
background: var(--color-primary-bg) !important;
border-left-color: var(--color-primary);
border-right-color: var(--color-primary);
}
.shift-assignment-header-cell.current-week .week-number {
color: var(--color-primary);
}
.shift-assignment-table tbody tr {
border-bottom: 1px solid var(--color-border-subtle);
}
.shift-assignment-table tbody tr:hover {
background: var(--color-gray-50);
}
.shift-assignment-table tbody tr:last-child {
border-bottom: none;
}
.shift-assignment-table .operator-name-cell {
padding: 10px 12px;
border-right: 2px solid var(--color-gray-350);
background: var(--color-gray-50);
}
.shift-assignment-table .operator-name-cell .operator-info {
display: flex;
align-items: center;
gap: 10px;
}
.shift-assignment-table .operator-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-gray-600);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.shift-assignment-table .operator-name {
font-weight: 500;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shift-assignment-cell {
padding: 8px 4px;
text-align: center;
border-left: 1px solid var(--color-border-subtle);
cursor: pointer;
transition: background 0.15s ease;
min-height: 48px;
vertical-align: middle;
}
.shift-assignment-cell:first-of-type {
border-left: none;
}
.shift-assignment-cell:hover {
background: var(--color-primary-light);
}
.shift-assignment-cell.has-shift:hover {
background: var(--color-green-300);
}
.shift-assignment-cell.current-week {
background: var(--color-selected-bg);
border-left: 2px solid var(--color-primary);
border-right: 2px solid var(--color-primary);
}
.shift-assignment-cell.current-week:hover {
background: var(--color-blue-100);
}
.shift-assignment-cell .shift-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: white;
white-space: nowrap;
}
.shift-assignment-cell .empty-cell {
color: var(--color-gray-450);
font-size: 14px;
}
.shift-assignment-empty {
text-align: center;
padding: 40px;
color: var(--color-text-secondary);
font-size: 14px;
}
.shift-option-btn {
display: flex;
align-items: center;
width: 100%;
text-align: left;
transition: all 0.15s ease;
}
.shift-option-btn:hover {
border-color: var(--color-gray-500) !important;
background: var(--color-gray-150) !important;
}
.shift-option-btn.selected {
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.block-count-indicator {
font-size: 10px;
color: var(--color-danger);
font-weight: 600;
margin-top: 2px;
line-height: 1.2;
}
.shift-block-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
color: var(--color-yellow-700);
background: var(--color-warning);
white-space: nowrap;
}
.shift-assignment-cell.fully-blocked {
background: var(--color-warning-light);
}
.shift-assignment-cell.fully-blocked:hover {
background: var(--color-yellow-100);
}
.shift-assignment-cell.partially-blocked {
background: linear-gradient(to bottom, transparent 70%, var(--color-warning-light) 70%);
}
@media (max-width: 768px) {
.shift-assignment-nav {
flex-wrap: wrap;
gap: 8px;
}
.current-week-label {
width: 100%;
order: -1;
}
.shift-assignment-table {
font-size: 11px;
}
.shift-assignment-table .operator-name-header {
width: 120px;
min-width: 120px;
padding: 8px;
}
.shift-assignment-table .operator-avatar {
width: 24px;
height: 24px;
font-size: 11px;
}
.shift-assignment-cell .shift-badge {
padding: 3px 6px;
font-size: 10px;
}
}
:root {
--wgv2-name-width: 120px;
--wgv2-cell-width: 110px;
--wgv2-radius-sm: 4px;
--wgv2-radius-md: 6px;
--wgv2-radius-lg: 10px;
}
.wgv2-wrapper {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
background: var(--color-bg-page);
color: var(--color-text-primary);
font-family: inherit;
overflow: hidden;
}
.wgv2-grid-area {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.wgv2-scroll-container {
flex: 1;
overflow: auto;
}
.wgv2-grid {
display: inline-flex;
flex-direction: column;
min-width: 100%;
}
.wgv2-scroll-container::-webkit-scrollbar,
.wgv2-kmpl-list::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.wgv2-scroll-container::-webkit-scrollbar-track,
.wgv2-kmpl-list::-webkit-scrollbar-track {
background: var(--color-bg-page);
}
.wgv2-scroll-container::-webkit-scrollbar-thumb,
.wgv2-kmpl-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 4px;
}
.wgv2-scroll-container::-webkit-scrollbar-thumb:hover,
.wgv2-kmpl-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
.wgv2-scroll-container::-webkit-scrollbar-corner {
background: var(--color-bg-page);
}
.wgv2-day-headers {
position: sticky;
top: 0;
z-index: 20;
background: var(--color-bg-surface);
}
.wgv2-day-headers .wgv2-name-cell {
z-index: 30;
border-bottom: 1px solid var(--color-border-subtle);
}
.wgv2-header-corner {
}
.wgv2-day-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 3px 0;
border-right: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
background: var(--color-bg-surface);
}
.wgv2-day-header[data-colspan="1"] { width: var(--wgv2-cell-width); min-width: var(--wgv2-cell-width); }
.wgv2-day-header[data-colspan="2"] { width: calc(var(--wgv2-cell-width) * 2); min-width: calc(var(--wgv2-cell-width) * 2); }
.wgv2-day-header[data-colspan="3"] { width: calc(var(--wgv2-cell-width) * 3); min-width: calc(var(--wgv2-cell-width) * 3); }
.wgv2-day-header:last-child {
border-right: none;
}
.wgv2-day-title {
display: flex;
align-items: baseline;
gap: 4px;
}
.wgv2-day-name {
font-size: 12px;
font-weight: 600;
color: var(--color-text-primary);
}
.wgv2-day-date {
font-size: 10px;
color: var(--color-text-muted);
}
.wgv2-day--today {
background: var(--color-primary-bg);
border-top: 3px solid var(--color-primary);
}
.wgv2-day--today .wgv2-day-name {
color: var(--color-primary-hover);
}
.wgv2-holiday-badge {
font-size: 9px;
font-weight: 600;
padding: 1px 6px;
border-radius: 3px;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.wgv2-holiday-badge--public {
background: rgba(239, 68, 68, 0.15);
color: var(--color-danger-light);
border: 1px solid rgba(239, 68, 68, 0.25);
}
.wgv2-holiday-badge--vacation {
background: rgba(251, 191, 36, 0.12);
color: var(--color-warning-light);
border: 1px solid rgba(251, 191, 36, 0.25);
}
.wgv2-shift-headers {
position: sticky;
top: 27px;
z-index: 20;
background: var(--color-bg-raised);
}
.wgv2-shift-headers .wgv2-name-cell {
z-index: 30;
background: var(--color-bg-raised);
font-size: 10px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--color-border-subtle);
}
.wgv2-shift-corner {
}
.wgv2-shift-header {
width: var(--wgv2-cell-width);
min-width: var(--wgv2-cell-width);
padding: 3px 6px;
border-right: 1px solid var(--color-border-default);
border-bottom: 1px solid var(--color-border-subtle);
background: var(--color-bg-raised);
display: flex;
align-items: center;
gap: 4px;
}
.wgv2-shift-label {
font-size: 10px;
font-weight: 700;
}
.wgv2-shift-time {
font-size: 9px;
color: var(--color-text-faint);
}
.wgv2-row {
display: flex;
}
.wgv2-row--zebra .wgv2-name-cell {
background: var(--color-bg-raised);
}
.wgv2-name-cell {
width: var(--wgv2-name-width);
min-width: var(--wgv2-name-width);
flex-shrink: 0;
position: sticky;
left: 0;
z-index: 10;
background: var(--color-bg-surface);
border-right: 1px solid var(--color-border-subtle);
border-bottom: 2px solid var(--color-border-default);
padding: 4px 6px;
display: flex;
flex-direction: column;
justify-content: center;
}
.wgv2-assistant-name {
font-size: 11px;
font-weight: 700;
color: var(--color-text-primary);
line-height: 1.2;
}
.wgv2-shift-badge {
display: inline-block;
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
margin-top: 2px;
width: fit-content;
}
.wgv2-cell {
position: relative;
width: var(--wgv2-cell-width);
min-width: var(--wgv2-cell-width);
border-right: 1px solid var(--color-border-default);
border-bottom: 2px solid var(--color-border-default);
padding: 3px 4px;
font-size: 11px;
}
.wgv2-cell:last-child {
border-right: none;
}
.wgv2-cell--today {
background-color: var(--color-primary-bg);
}
.wgv2-cell--inactive {
background: var(--color-bg-deep);
color: var(--color-text-faint);
text-align: center;
}
.wgv2-cell--blocked {
background: rgba(239, 68, 68, 0.08);
border-left: 3px solid rgba(239, 68, 68, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.wgv2-cell--blocked-partial {
background: rgba(59, 130, 246, 0.08);
border-left: 3px solid rgba(59, 130, 246, 0.5);
}
.wgv2-cell--active {
background: var(--color-bg-surface);
display: flex;
flex-direction: column;
gap: 2px;
min-height: 40px;
}
.wgv2-cell--active.wgv2-cell--today {
background: var(--color-primary-bg);
}
.wgv2-row--zebra > .wgv2-cell::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-zebra-tint);
pointer-events: none;
}
.wgv2-capacity-bar {
display: flex;
align-items: center;
gap: 3px;
margin-bottom: 1px;
}
.wgv2-cap-track {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.wgv2-cap-fill {
height: 100%;
border-radius: 2px;
transition: width 0.2s ease;
}
.wgv2-cap-label {
font-size: 8px;
font-weight: 600;
min-width: 24px;
text-align: right;
white-space: nowrap;
}
.wgv2-task-tag {
display: inline-flex;
align-items: center;
gap: 3px;
border-radius: 3px;
padding: 2px 5px;
font-size: 9px;
line-height: 1.3;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
}
.wgv2-task-tag--kmpl {
}
.wgv2-task-tag--general {
cursor: pointer;
}
.wgv2-tag-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.wgv2-tag-label {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
}
.wgv2-tag-time {
color: var(--color-text-muted);
font-size: 9px;
}
.wgv2-tag-remove {
cursor: pointer;
color: var(--color-text-faint);
margin-left: 2px;
font-size: 11px;
line-height: 1;
transition: color 0.15s;
}
.wgv2-tag-remove:hover {
color: var(--color-danger-light);
}
.wgv2-cell-footer {
display: flex;
align-items: center;
gap: 4px;
margin-top: auto;
}
.wgv2-free-indicator {
font-size: 9px;
color: var(--color-text-faint);
white-space: nowrap;
}
.wgv2-add-btn {
background: none;
border: 1px dashed rgba(255, 255, 255, 0.12);
border-radius: 3px;
padding: 1px 6px;
font-size: 8px;
color: var(--color-text-faint);
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s, color 0.15s;
}
.wgv2-add-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary-hover);
}
.wgv2-add-btn--general:hover {
border-color: #0d9488;
color: #14b8a6;
}
.wgv2-block-icon {
font-size: 16px;
line-height: 1;
}
.wgv2-block-label {
font-size: 9px;
color: var(--color-danger-light);
font-weight: 600;
}
.wgv2-block-reason-hint {
font-size: 8px;
color: var(--color-text-faint);
font-style: italic;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wgv2-cell--partial {
border-left: 3px solid rgba(59, 130, 246, 0.6);
}
.wgv2-partial-badge {
font-size: 9px;
font-weight: 700;
color: var(--color-primary);
background: rgba(59, 130, 246, 0.1);
padding: 1px 6px;
border-radius: 3px;
align-self: flex-start;
cursor: pointer;
}
.wgv2-partial-badge-icon {
font-size: 10px;
}
.wgv2-capacity-summary-row {
background: var(--color-bg-deep);
border-top: 2px solid var(--color-border-default);
}
.wgv2-summary-label {
font-size: 10px;
font-weight: 700;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wgv2-summary-cell {
display: flex;
flex-direction: column;
gap: 2px;
padding: 3px 4px;
}
.wgv2-summary-stats {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
.wgv2-summary-line {
font-size: 9px;
color: var(--color-text-muted);
line-height: 1.4;
}
.wgv2-summary--planned {
color: var(--color-text-secondary);
font-weight: 600;
}
.wgv2-summary--free {
color: #22c55e;
font-weight: 600;
}
.wgv2-divider {
height: 2px;
width: 100%;
}
.wgv2-pool-row {
border-top: 2px solid var(--color-primary);
}
.wgv2-pool-label {
background: var(--color-bg-raised);
border-bottom: 1px solid var(--color-border-default);
}
.wgv2-pool-title {
font-size: 10px;
font-weight: 700;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.wgv2-pool-hint {
font-size: 9px;
color: var(--color-text-faint);
margin-top: 2px;
}
.wgv2-pool-cell {
background: var(--color-bg-raised);
vertical-align: top;
padding: 5px;
}
.wgv2-pool-cell--empty {
color: var(--color-text-faint);
text-align: center;
background: var(--color-bg-page);
}
.wgv2-pool-cards {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.wgv2-coverage-bar {
display: flex;
align-items: center;
gap: 4px;
}
.wgv2-cov-track {
flex: 1;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.wgv2-cov-fill {
height: 100%;
border-radius: 2px;
transition: width 0.2s ease;
}
.wgv2-cov-pct {
font-size: 9px;
font-weight: 600;
min-width: 28px;
text-align: right;
}
.wgv2-need-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--wgv2-radius-sm);
padding: 5px 6px;
font-size: 9px;
transition: transform 0.12s, box-shadow 0.12s, border-color 0.15s;
}
.wgv2-need-card--open {
cursor: grab;
}
.wgv2-need-card--open:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
border-color: var(--color-primary);
}
.wgv2-need-card--open:active {
cursor: grabbing;
transform: translateY(0);
}
.wgv2-need-card--done {
opacity: 0.5;
cursor: default;
}
.wgv2-need-header {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.wgv2-need-mo {
font-weight: 700;
font-size: 9px;
padding: 1px 5px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
}
.wgv2-need-check {
color: var(--color-success);
font-weight: 700;
font-size: 9px;
}
.wgv2-need-machine {
flex: 1;
min-width: 0;
font-size: 9px;
font-weight: 600;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wgv2-need-product {
font-size: 8px;
color: var(--color-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wgv2-need-time {
display: flex;
align-items: center;
gap: 2px;
margin-top: 2px;
font-size: 9px;
color: var(--color-text-muted);
min-width: 0;
}
.wgv2-need-assigned {
font-weight: 600;
color: var(--color-text-secondary);
}
.wgv2-need-sep {
color: var(--color-text-faint);
}
.wgv2-need-total {
color: var(--color-text-faint);
}
.wgv2-kmpl-panel {
background: var(--color-bg-raised);
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.wgv2-kmpl-header {
padding: 8px 10px 6px;
border-bottom: 1px solid var(--color-border-default);
flex-shrink: 0;
}
.wgv2-kmpl-title-row {
display: flex;
align-items: center;
gap: 8px;
}
.wgv2-kmpl-title {
font-size: 13px;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
}
.wgv2-kmpl-badge {
font-size: 10px;
font-weight: 700;
background: rgba(124, 58, 237, 0.15);
color: var(--color-purple);
padding: 1px 8px;
border-radius: 10px;
}
.wgv2-kmpl-hint {
font-size: 10px;
color: var(--color-text-faint);
margin: 4px 0 0;
}
.wgv2-kmpl-search {
padding: 4px 8px 4px;
flex-shrink: 0;
}
.wgv2-kmpl-search-input {
width: 100%;
padding: 5px 8px;
font-size: 11px;
border: 1px solid var(--color-border-default);
border-radius: var(--wgv2-radius-md, 6px);
background: var(--color-bg-card);
color: var(--color-text-primary);
outline: none;
transition: border-color 0.15s;
box-sizing: border-box;
}
.wgv2-kmpl-search-input::placeholder {
color: var(--color-text-faint);
}
.wgv2-kmpl-search-input:focus {
border-color: var(--color-purple);
}
.wgv2-kmpl-list {
flex: 1;
overflow-y: auto;
padding: 4px 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.wgv2-kmpl-empty {
text-align: center;
color: var(--color-text-faint);
font-size: 11px;
padding: 24px 8px;
}
.wgv2-kmpl-card {
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--wgv2-radius-md);
padding: 6px 8px;
cursor: grab;
transition: transform 0.12s, box-shadow 0.12s, border-color 0.15s;
}
.wgv2-kmpl-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
border-color: var(--color-purple);
}
.wgv2-kmpl-card:active {
cursor: grabbing;
transform: translateY(0);
}
.wgv2-kmpl-done {
opacity: 0.45;
cursor: default;
}
.wgv2-kmpl-done:hover {
transform: none;
box-shadow: none;
border-color: var(--color-border-subtle);
}
.wgv2-kmpl-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
.wgv2-kmpl-mo {
font-weight: 700;
font-size: 11px;
color: var(--color-purple);
}
.wgv2-kmpl-check {
color: var(--color-success);
font-weight: 700;
font-size: 12px;
}
.wgv2-kmpl-product {
font-size: 10px;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.wgv2-kmpl-deadline {
font-size: 9px;
color: var(--color-text-faint);
margin-bottom: 4px;
}
.wgv2-kmpl-progress {
height: 4px;
border-radius: 2px;
background: var(--color-border-subtle);
overflow: hidden;
margin-bottom: 4px;
}
.wgv2-kmpl-progress-fill {
height: 100%;
border-radius: 2px;
transition: width 0.2s ease;
}
.wgv2-kmpl-hours {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 10px;
color: var(--color-text-muted);
}
.wgv2-kmpl-remaining {
font-size: 9px;
color: var(--color-purple);
font-weight: 500;
}
.wgv2-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(2px);
}
.wgv2-modal-box {
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-radius: var(--wgv2-radius-lg);
padding: 20px 24px;
width: 380px;
max-width: 95vw;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
color: var(--color-text-primary);
}
.wgv2-modal-title {
font-size: 15px;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 10px;
}
.wgv2-modal-subtitle {
font-size: 11px;
color: var(--color-text-muted);
margin-bottom: 14px;
}
.wgv2-modal-body {
font-size: 12px;
color: var(--color-text-secondary);
margin-bottom: 14px;
line-height: 1.5;
}
.wgv2-modal-body p {
margin: 0 0 6px;
}
.wgv2-modal-body strong {
color: var(--color-text-primary);
}
.wgv2-modal-detail {
font-size: 11px;
color: var(--color-text-muted);
font-style: italic;
}
.wgv2-modal-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wgv2-modal-btn {
padding: 7px 14px;
border: none;
border-radius: var(--wgv2-radius-sm);
cursor: pointer;
font-size: 12px;
font-weight: 600;
font-family: inherit;
transition: background 0.15s, transform 0.1s;
color: var(--color-text-primary);
background: var(--color-bg-input);
}
.wgv2-modal-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.wgv2-modal-btn:active {
transform: scale(0.97);
}
.wgv2-btn-primary {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.wgv2-btn-primary:hover {
background: var(--color-primary-hover);
}
.wgv2-btn-warning {
background: var(--color-warning);
color: var(--color-text-on-warning);
}
.wgv2-btn-warning:hover {
background: var(--color-warning-light);
}
.wgv2-btn-cancel {
background: var(--color-bg-input);
color: var(--color-text-muted);
}
.wgv2-btn-cancel:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-text-secondary);
}
.wgv2-btn-small {
padding: 3px 10px;
font-size: 10px;
font-weight: 500;
background: rgba(255, 255, 255, 0.05);
color: var(--color-text-muted);
border: 1px solid var(--color-border-subtle);
}
.wgv2-btn-small:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
border-color: var(--color-primary);
}
.wgv2-partial-input {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0;
}
.wgv2-partial-input label {
font-size: 12px;
color: var(--color-text-muted);
}
.wgv2-hours-input {
background: var(--color-bg-input);
border: 1px solid var(--color-border-subtle);
border-radius: var(--wgv2-radius-sm);
padding: 6px 10px;
color: var(--color-text-primary);
font-size: 14px;
width: 80px;
font-family: inherit;
transition: border-color 0.15s;
}
.wgv2-hours-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.wgv2-partial-hint {
font-size: 11px;
color: var(--color-text-muted);
margin-top: 2px;
opacity: 0.7;
}
.wgv2-modal-quick-btns {
display: flex;
gap: 6px;
margin-bottom: 4px;
}
.wgv2-modal-btn-sick {
background: rgba(239, 68, 68, 0.12);
color: var(--color-danger-light);
border: 1px solid rgba(239, 68, 68, 0.25);
flex: 1;
}
.wgv2-modal-btn-sick:hover {
background: rgba(239, 68, 68, 0.2);
}
.wgv2-modal-btn-partial {
background: rgba(59, 130, 246, 0.1);
color: var(--color-primary);
border: 1px solid rgba(59, 130, 246, 0.25);
flex: 1;
}
.wgv2-modal-btn-partial:hover {
background: rgba(59, 130, 246, 0.18);
}
.wgv2-modal-btn-other {
background: rgba(251, 191, 36, 0.1);
color: var(--color-warning-light);
border: 1px solid rgba(251, 191, 36, 0.25);
flex: 1;
}
.wgv2-modal-btn-other:hover {
background: rgba(251, 191, 36, 0.18);
}
.wgv2-modal-btn--active {
outline: 2px solid currentColor;
outline-offset: -2px;
opacity: 1;
}
.wgv2-modal-btn[data-type]:not(.wgv2-modal-btn--active) {
opacity: 0.6;
}
.wgv2-partial-section {
margin: 10px 0 4px;
padding: 8px 10px;
background: rgba(59, 130, 246, 0.05);
border-radius: var(--wgv2-radius-sm);
border: 1px solid rgba(59, 130, 246, 0.15);
}
.wgv2-reason-section {
margin-top: 12px;
}
.wgv2-reason-label {
font-size: 11px;
color: var(--color-text-muted);
display: block;
margin-bottom: 4px;
}
.wgv2-reason-input {
width: 100%;
background: var(--color-bg-input);
border: 1px solid var(--color-border-subtle);
border-radius: var(--wgv2-radius-sm);
padding: 6px 10px;
color: var(--color-text-primary);
font-size: 12px;
font-family: inherit;
resize: vertical;
transition: border-color 0.15s;
box-sizing: border-box;
}
.wgv2-reason-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.wgv2-modal-footer {
display: flex;
gap: 8px;
margin-top: 14px;
}
.wgv2-modal-footer .wgv2-btn-primary {
flex: 1;
}
.wgv2-modal-footer .wgv2-btn-primary:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.wgv2-modal-footer .wgv2-btn-cancel {
flex: 0 0 auto;
}
.wgv2-btn-danger {
background: rgba(239, 68, 68, 0.12);
color: var(--color-danger-light);
border: 1px solid rgba(239, 68, 68, 0.25);
flex: 1;
}
.wgv2-btn-danger:hover {
background: rgba(239, 68, 68, 0.25);
}
.wgv2-drag-over {
outline: 2px dashed var(--color-primary);
outline-offset: -2px;
background: rgba(59, 130, 246, 0.08) !important;
box-shadow: inset 0 0 12px rgba(59, 130, 246, 0.12);
}
@media (max-width: 1200px) {
:root {
--wgv2-cell-width: 95px;
--wgv2-name-width: 120px;
}
}
@media (max-width: 900px) {
:root {
--wgv2-cell-width: 85px;
--wgv2-name-width: 100px;
}
}
.wgv2-modal-box--wide {
width: 440px;
}
.wgv2-gen-hours,
.wgv2-gen-mo-search,
.wgv2-gen-desc {
margin-bottom: 16px;
}
.wgv2-gen-label {
display: block;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-text-muted);
margin-bottom: 8px;
}
.wgv2-gen-req {
color: var(--color-danger);
font-weight: 700;
}
.wgv2-gen-radios {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.wgv2-gen-radio {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--wgv2-radius-sm);
cursor: pointer;
font-size: 12px;
color: var(--color-text-secondary);
transition: background 0.15s;
}
.wgv2-gen-radio:hover {
background: rgba(255, 255, 255, 0.04);
}
.wgv2-gen-radio input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--color-border-strong);
border-radius: 50%;
background: transparent;
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: border-color 0.15s;
}
.wgv2-gen-radio input[type="radio"]:checked {
border-color: var(--color-primary);
}
.wgv2-gen-radio input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: var(--color-primary);
border-radius: 50%;
}
.wgv2-gen-radio:has(input:checked) {
color: var(--color-text-primary);
background: rgba(59, 130, 246, 0.06);
}
.wgv2-gen-radio span {
line-height: 1.3;
}
.wgv2-gen-input,
.wgv2-gen-textarea {
width: 100%;
box-sizing: border-box;
background: var(--color-bg-input);
border: 1px solid var(--color-border-subtle);
border-radius: var(--wgv2-radius-sm);
padding: 8px 10px;
color: var(--color-text-primary);
font-size: 13px;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.wgv2-gen-input:focus,
.wgv2-gen-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.wgv2-gen-input::placeholder,
.wgv2-gen-textarea::placeholder {
color: var(--color-text-faint);
}
.wgv2-gen-mo-search {
position: relative;
}
.wgv2-gen-mo-input-wrap {
position: relative;
}
.wgv2-gen-mo-results {
position: absolute;
left: 0;
right: 0;
z-index: 10;
max-height: 200px;
overflow-y: auto;
background: var(--color-bg-card);
border: 1px solid var(--color-border-subtle);
border-top: none;
border-radius: 0 0 var(--wgv2-radius-sm) var(--wgv2-radius-sm);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.wgv2-gen-mo-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
cursor: pointer;
font-size: 12px;
color: var(--color-text-secondary);
transition: background 0.1s;
border-bottom: 1px solid var(--color-border-subtle);
}
.wgv2-gen-mo-item:last-child {
border-bottom: none;
}
.wgv2-gen-mo-item:hover {
background: rgba(59, 130, 246, 0.08);
color: var(--color-text-primary);
}
.wgv2-gen-mo-code {
font-weight: 600;
color: var(--color-primary);
white-space: nowrap;
flex-shrink: 0;
}
.wgv2-gen-mo-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text-muted);
}
.wgv2-gen-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: 600;
color: #fff;
white-space: nowrap;
flex-shrink: 0;
}
.wgv2-gen-no-results {
padding: 12px 10px;
font-size: 12px;
color: var(--color-text-muted);
text-align: center;
font-style: italic;
}
.wgv2-gen-mo-selected {
margin-top: 8px;
}
.wgv2-gen-mo-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 10px;
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: var(--wgv2-radius-sm);
font-size: 12px;
font-weight: 500;
color: var(--color-primary);
}
.wgv2-gen-tag-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--color-text-muted);
font-size: 14px;
cursor: pointer;
line-height: 1;
transition: background 0.15s, color 0.15s;
}
.wgv2-gen-tag-remove:hover {
background: rgba(239, 68, 68, 0.15);
color: var(--color-danger);
}
.wgv2-gen-textarea {
resize: vertical;
min-height: 60px;
}
.wgv2-gen-char-count {
text-align: right;
font-size: 10px;
color: var(--color-text-faint);
margin-top: 4px;
}
.wgv2-gen-dupe-warn {
padding: 8px 10px;
margin-bottom: 12px;
border-radius: var(--wgv2-radius-sm);
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.25);
color: var(--color-warning-light);
font-size: 12px;
line-height: 1.4;
}
.pgv2-day-header-cell.day-col-odd {
background: rgba(255, 255, 255, 0.055);
}
.pgv2-day-cell.day-col-odd {
background: rgba(255, 255, 255, 0.055);
}
.pgv2-day-header-cell.pgv2-today.day-col-odd,
.pgv2-day-cell.pgv2-today.day-col-odd {
background: var(--color-primary-bg);
}
.wgv2-day-header.day-col-odd {
background: rgba(255, 255, 255, 0.055);
}
.wgv2-shift-header.day-col-odd {
background: rgba(255, 255, 255, 0.055);
}
.wgv2-cell.day-col-odd {
background: rgba(255, 255, 255, 0.055);
}
.wgv2-day-header.wgv2-day--today.day-col-odd {
background: var(--color-primary-bg);
}
.wgv2-cell--today.day-col-odd {
background-color: var(--color-primary-bg);
}
.gantt-cell--public-holiday {
background: var(--color-danger-light) !important;
border-top: 3px solid var(--color-danger);
}
.gantt-cell--collective-vacation {
background: var(--color-orange-bg) !important;
border-top: 3px solid var(--color-orange-500);
}
.gantt-cell--public-holiday .shift-cell:not(.blocked) {
cursor: not-allowed;
opacity: 0.7;
}
.gantt-header--holiday .day-name,
.gantt-header--holiday .day-date {
color: var(--color-danger);
font-weight: 600;
}
.gantt-header--vacation .day-name,
.gantt-header--vacation .day-date {
color: var(--color-orange-500);
}
.holiday-name-badge {
font-size: 10px;
line-height: 1.2;
padding: 1px 4px;
border-radius: 3px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.holiday-name-badge--public {
background: var(--color-danger-light);
color: var(--color-danger);
}
.holiday-name-badge--vacation {
background: var(--color-orange-bg);
color: var(--color-orange-500);
}
.gantt-cell--public-holiday .shift-cell.drag-over {
background: var(--color-red-200) !important;
cursor: not-allowed;
}
.operator-gantt-table .gantt-cell--public-holiday {
background: var(--color-danger-light) !important;
}
.operator-gantt-table .gantt-cell--collective-vacation {
background: var(--color-orange-bg) !important;
}
html[data-theme="dark"] .holiday-name-badge--public {
color: #fff;
}
@media (min-width: 2560px) {
.day-cell {
min-width: 200px;
}
.shift-cells {
height: 85px;
}
.shift-cell {
height: 85px;
max-height: 85px;
}
.shift-cells.height-tier-1 { height: 85px; }
.shift-cells.height-tier-2 { height: 130px; }
.shift-cells.height-tier-3 { height: 175px; }
.shift-cells.height-tier-4 { height: 220px; }
.shift-cells.height-tier-1 .shift-cell { height: 85px; max-height: 85px; }
.shift-cells.height-tier-2 .shift-cell { height: 130px; max-height: 130px; }
.shift-cells.height-tier-3 .shift-cell { height: 175px; max-height: 175px; }
.shift-cells.height-tier-4 .shift-cell { height: 220px; max-height: 220px; }
.scheduled-item {
padding: 5px 8px;
font-size: 12px;
}
.planning-sidebar {
min-width: 350px;
}
}
@media (max-width: 1600px) {
.planning-sidebar {
width: 280px;
min-width: 250px;
}
.day-cell {
min-width: 140px;
}
}
.planning-sidebar .unplanned-item[draggable="true"],
.planning-sidebar .operation-item[draggable="true"] {
cursor: grab;
}
.planning-sidebar .unplanned-item.dragging,
.planning-sidebar .operation-item.dragging {
opacity: 0.5;
cursor: grabbing;
}
.drag-ghost {
background: white;
border: 2px solid var(--color-primary);
border-radius: 6px;
padding: 6px 12px;
font-size: 11px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.drag-ghost {
position: fixed;
pointer-events: none;
z-index: 9999;
background: white;
border: 2px solid var(--color-primary);
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translate(-50%, -50%);
}
.drag-ghost.drag-ghost-enhanced {
min-width: 150px;
max-width: 200px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.drag-ghost-mo {
font-weight: 700;
font-size: 12px;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.drag-ghost-machine {
font-size: 11px;
color: var(--color-primary);
font-weight: 600;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.drag-ghost-hours {
font-size: 11px;
color: var(--color-text-secondary);
}
.planning-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--color-gray-900);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 10000;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.planning-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.planning-toast.planning-toast-warning {
background: var(--color-warning-text);
border: 1px solid var(--color-warning);
}
.planning-toast.planning-toast-error {
background: var(--color-danger-text);
border: 1px solid var(--color-danger);
}
.table-container {
max-height: calc(100vh - 200px);
overflow: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid var(--color-border-strong);
padding: 8px 12px;
text-align: left;
white-space: nowrap;
}
th {
background: var(--color-bg-page);
position: sticky;
top: 0;
z-index: 10;
}
tr:nth-child(even) {
background: var(--color-gray-50);
}
tr:hover {
background: var(--color-border-subtle);
}
.time-seconds {
background: var(--color-success-light);
color: var(--color-success-text);
font-weight: 600;
}
.time-percentage {
background: var(--color-warning-light);
color: var(--color-warning-text);
font-weight: 600;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.status-ok {
background: var(--color-teal-500);
}
.status-inproduction {
background: var(--color-blue-500);
color: white;
}
.status-insetup {
background: var(--color-yellow-300);
color: white;
}
.status-maintenance {
background: var(--color-purple);
color: white;
}
.status-repair {
background: var(--color-red-400);
color: white;
}
.status-external {
background: var(--color-indigo-500);
color: white;
}
.status-returnedtoclient {
background: var(--color-gray-600);
color: white;
}
.status-failure {
background: var(--color-danger);
color: white;
animation: pulse-red 2s infinite;
}
.status-instorage {
background: var(--color-gray-500);
color: white;
}
@keyframes pulse-red {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.availability-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
text-transform: capitalize;
}
.availability-ready {
background: var(--color-teal-500);
color: white;
}
.availability-needs-maintenance {
background: var(--color-yellow-300);
color: white;
}
.availability-needs-repair {
background: var(--color-red-400);
color: white;
}
.availability-blocked {
background: var(--color-gray-600);
color: white;
}
.tab-btn {
transition: all 0.2s;
border-bottom: 3px solid transparent;
}
.tab-btn:hover {
background: var(--color-bg-page);
}
.tab-btn.active {
border-bottom-color: var(--color-blue-500);
color: var(--color-blue-500);
font-weight: 600;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.data-field {
background: var(--color-gray-50);
border-radius: 8px;
padding: 12px;
}
.data-field label {
font-size: 12px;
color: var(--color-gray-600);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.data-field .value {
font-size: 16px;
font-weight: 500;
color: var(--color-gray-900);
margin-top: 4px;
}
.critical-notes {
background: linear-gradient(to right, var(--color-danger-bg), var(--color-bg-surface));
border-left: 4px solid var(--color-red-400);
padding: 16px;
border-radius: 0 8px 8px 0;
}
.shot-progress {
height: 8px;
border-radius: 4px;
background: var(--color-gray-300);
overflow: hidden;
}
.shot-progress-bar {
height: 100%;
border-radius: 4px;
transition: width 0.5s ease;
}
.maintenance-item {
border-left: 3px solid var(--color-gray-300);
padding-left: 16px;
margin-left: 8px;
position: relative;
}
.maintenance-item::before {
content: '';
position: absolute;
left: -7px;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: white;
border: 3px solid var(--color-blue-500);
}
.modal {
display: none;
position: fixed;
inset: 0;
background: var(--color-overlay);
z-index: 100;
align-items: center;
justify-content: center;
}
.modal.active {
display: flex;
}
.mold-row {
cursor: pointer;
transition: all 0.15s ease;
}
.mold-row:hover {
background: var(--color-bg-page);
transform: translateX(4px);
}
.spinner {
border: 3px solid var(--color-bg-page);
border-top: 3px solid var(--color-blue-500);
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-scrollbar-hover);
}
@media print {
.no-print {
display: none !important;
}
.print-break {
page-break-before: always;
}
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-border-strong);
}
.header h1 {
font-size: 1.8rem;
color: var(--color-text-primary);
}
.header .datetime {
font-size: 1.2rem;
color: var(--color-text-muted);
}
.header-controls {
display: flex;
gap: 15px;
align-items: center;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
height: calc(100vh - 100px);
}
.column {
background: var(--color-bg-surface);
border-radius: 12px;
padding: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.column-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border-strong);
}
.column-title {
font-size: 1.3rem;
font-weight: 600;
}
.column.mep .column-title {
color: var(--color-orange);
}
.column.changeovers .column-title {
color: var(--color-info);
}
.summary-row {
display: flex;
gap: 10px;
}
.summary-item {
font-size: 0.85rem;
padding: 4px 10px;
border-radius: 15px;
background: var(--color-bg-sunken);
}
.summary-item.overdue {
color: var(--color-danger);
}
.summary-item.urgent {
color: var(--color-orange);
}
.summary-item.ready {
color: var(--color-success);
}
.summary-item.waiting {
color: var(--color-orange);
}
.item-list {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.mep-card {
background: var(--color-bg-sunken);
border-radius: 8px;
padding: 15px;
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 15px;
align-items: center;
border-left: 3px solid var(--color-text-faint);
}
.mep-card.priority-critical {
border-left-color: var(--color-danger);
}
.mep-card.priority-high {
border-left-color: var(--color-danger);
}
.mep-card.priority-medium {
border-left-color: var(--color-orange);
}
.mep-card.priority-low {
border-left-color: var(--color-success);
}
.mep-timer {
text-align: center;
font-family: 'Courier New', monospace;
}
.mep-timer .time {
font-size: 1.3rem;
font-weight: bold;
}
.mep-timer .time.overdue {
color: var(--color-danger);
}
.mep-timer .time.urgent {
color: var(--color-orange);
}
.mep-timer .time.normal {
color: var(--color-success);
}
.mep-timer .label {
font-size: 0.7rem;
color: var(--color-text-muted);
}
.mep-details .material {
font-weight: 600;
color: var(--color-orange);
margin-bottom: 3px;
}
.mep-details .info {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.mep-status {
text-align: right;
}
.mep-status .badge {
font-size: 0.75rem;
padding: 3px 8px;
border-radius: 10px;
font-weight: 600;
}
.mep-status .badge.critical {
background: var(--color-danger);
color: var(--color-text-inverse);
}
.mep-status .badge.high {
background: var(--color-danger);
color: var(--color-text-inverse);
}
.mep-status .badge.medium {
background: var(--color-orange);
color: var(--color-text-on-warning);
}
.mep-status .badge.low {
background: var(--color-success);
color: var(--color-text-inverse);
}
.changeover-card {
background: var(--color-bg-sunken);
border-radius: 8px;
padding: 15px;
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 15px;
align-items: center;
border-left: 3px solid var(--color-text-faint);
}
.changeover-card.mep-ready {
border-left-color: var(--color-success);
}
.changeover-card.mep-waiting {
border-left-color: var(--color-orange);
}
.changeover-card.blocked {
border-left-color: var(--color-danger);
}
.changeover-time {
text-align: center;
}
.changeover-time .time {
font-size: 1.3rem;
font-weight: bold;
color: var(--color-text-primary);
}
.changeover-time .duration {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.changeover-details .machine {
font-weight: 600;
color: var(--color-info);
margin-bottom: 3px;
}
.changeover-details .mold {
font-size: 0.9rem;
color: var(--color-text-primary);
}
.changeover-details .info {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.changeover-status {
text-align: right;
}
.changeover-status .mep-badge {
font-size: 0.75rem;
padding: 3px 8px;
border-radius: 10px;
display: inline-block;
margin-bottom: 5px;
}
.changeover-status .mep-badge.ready {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.changeover-status .mep-badge.waiting {
background: var(--color-orange-bg);
color: var(--color-orange-text);
}
.changeover-status .status-badge {
font-size: 0.75rem;
padding: 3px 8px;
border-radius: 10px;
display: block;
}
.changeover-status .status-badge.pending {
background: var(--color-border-strong);
color: var(--color-text-primary);
}
.changeover-status .status-badge.in-progress {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.changeover-status .status-badge.completed {
background: var(--color-success-hover);
color: var(--color-text-inverse);
}
.empty-state {
text-align: center;
padding: 40px 20px;
color: var(--color-text-faint);
}
.loading {
text-align: center;
padding: 40px;
color: var(--color-text-faint);
}
.refresh-btn {
background: var(--color-info);
color: var(--color-text-inverse);
border: none;
padding: 8px 16px;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
}
.refresh-btn:hover {
background: var(--color-info-hover);
}
.article-link {
color: var(--color-orange);
text-decoration: none;
cursor: pointer;
}
.article-link:hover {
text-decoration: underline;
color: var(--color-orange-hover);
}
@media (max-width: 1200px) {
.dashboard {
grid-template-columns: 1fr;
height: auto;
}
.column {
max-height: 50vh;
}
}
.item-list::-webkit-scrollbar {
width: 6px;
}
.item-list::-webkit-scrollbar-track {
background: var(--color-scrollbar-track);
border-radius: 3px;
}
.item-list::-webkit-scrollbar-thumb {
background: var(--color-scrollbar-thumb);
border-radius: 3px;
}
.item-list::-webkit-scrollbar-thumb:hover {
background: var(--color-scrollbar-hover);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-border-strong);
}
.header h1 {
font-size: 1.8rem;
color: var(--color-orange);
}
.header .datetime {
font-size: 1.2rem;
color: var(--color-text-muted);
}
.summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.summary-card {
background: var(--color-bg-surface);
border-radius: 10px;
padding: 15px;
text-align: center;
}
.summary-card .count {
font-size: 2.5rem;
font-weight: bold;
}
.summary-card .label {
font-size: 0.9rem;
color: var(--color-text-muted);
margin-top: 5px;
}
.summary-card.total .count {
color: var(--color-orange);
}
.summary-card.overdue .count {
color: var(--color-danger);
}
.summary-card.urgent .count {
color: var(--color-danger);
}
.summary-card.done .count {
color: var(--color-success);
}
.tasks-title {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--color-orange);
}
.task-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.task-card {
background: var(--color-bg-surface);
border-radius: 10px;
padding: 20px;
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 20px;
align-items: center;
border-left: 4px solid var(--color-text-faint);
transition: transform 0.2s, box-shadow 0.2s;
}
.task-card:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px var(--color-overlay);
}
.task-card.priority-critical {
border-left-color: var(--color-danger);
background: var(--color-danger-bg);
}
.task-card.priority-high {
border-left-color: var(--color-danger);
}
.task-card.priority-medium {
border-left-color: var(--color-orange);
}
.task-card.priority-low {
border-left-color: var(--color-success);
}
.task-card.completed {
opacity: 0.6;
border-left-color: var(--color-success);
}
.timer-section {
text-align: center;
}
.timer-section .countdown {
font-size: 1.4rem;
font-weight: bold;
font-family: 'Courier New', monospace;
}
.timer-section .countdown.overdue {
color: var(--color-danger);
}
.timer-section .countdown.urgent {
color: var(--color-danger);
}
.timer-section .countdown.normal {
color: var(--color-success);
}
.timer-section .label {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 3px;
}
.timer-section .drying-info {
font-size: 0.85rem;
color: var(--color-text-secondary);
margin-top: 5px;
}
.details-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.details-section .material {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-orange);
}
.details-section .machine {
font-size: 1rem;
color: var(--color-info);
}
.details-section .order {
font-size: 0.9rem;
color: var(--color-text-primary);
}
.details-section .quantity {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.details-section .drying-params {
font-size: 0.85rem;
color: var(--color-text-muted);
background: var(--color-bg-sunken);
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
}
.material-handler-detail .status-section,
.task-detail .status-section {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end;
}
.priority-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
}
.priority-badge.critical {
background: var(--color-danger);
color: var(--color-text-inverse);
}
.priority-badge.high {
background: var(--color-danger);
color: var(--color-text-inverse);
}
.priority-badge.medium {
background: var(--color-orange);
color: var(--color-text-on-warning);
}
.priority-badge.low {
background: var(--color-success);
color: var(--color-text-inverse);
}
.action-btn {
padding: 8px 16px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
transition: background 0.2s;
}
.action-btn.start-drying {
background: var(--color-orange);
color: var(--color-text-on-warning);
}
.action-btn.start-drying:hover {
background: var(--color-orange-hover);
}
.action-btn.complete {
background: var(--color-success);
color: var(--color-text-inverse);
}
.action-btn.complete:hover {
background: var(--color-success-hover);
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--color-text-faint);
}
.empty-state h2 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--color-success);
}
.loading {
text-align: center;
padding: 60px;
color: var(--color-text-faint);
}
.loading::after {
content: '';
display: inline-block;
width: 30px;
height: 30px;
border: 3px solid var(--color-border-strong);
border-top-color: var(--color-orange);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 15px;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.article-link {
color: var(--color-info);
text-decoration: none;
cursor: pointer;
}
.article-link:hover {
text-decoration: underline;
color: var(--color-info-hover);
}
.header-controls {
display: flex;
gap: 15px;
align-items: center;
}
.refresh-btn {
background: var(--color-orange);
color: var(--color-text-on-warning);
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.refresh-btn:hover {
background: var(--color-orange-hover);
}
.history-section {
margin-top: 40px;
}
.history-section .tasks-title {
color: var(--color-success);
}
@media (max-width: 768px) {
.summary {
grid-template-columns: repeat(2, 1fr);
}
.task-card {
grid-template-columns: 1fr;
gap: 15px;
}
.timer-section {
text-align: left;
}
.status-section {
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-border-strong);
}
.header h1 {
font-size: 1.8rem;
color: var(--color-info);
}
.header .date {
font-size: 1.2rem;
color: var(--color-text-muted);
}
.summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 25px;
}
.summary-card {
background: var(--color-bg-surface);
border-radius: 10px;
padding: 15px;
text-align: center;
}
.summary-card .count {
font-size: 2.5rem;
font-weight: bold;
}
.summary-card .label {
font-size: 0.9rem;
color: var(--color-text-muted);
margin-top: 5px;
}
.summary-card.total .count {
color: var(--color-info);
}
.summary-card.ready .count {
color: var(--color-success);
}
.summary-card.waiting .count {
color: var(--color-orange);
}
.summary-card.blocked .count {
color: var(--color-danger);
}
.queue-title {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--color-info);
}
.changeover-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.changeover-card {
background: var(--color-bg-surface);
border-radius: 10px;
padding: 20px;
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 20px;
align-items: center;
border-left: 4px solid var(--color-text-faint);
transition: transform 0.2s, box-shadow 0.2s;
}
.changeover-card:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px var(--color-overlay);
}
.changeover-card.mep-ready {
border-left-color: var(--color-success);
}
.changeover-card.mep-waiting {
border-left-color: var(--color-orange);
}
.changeover-card.mold-blocked {
border-left-color: var(--color-danger);
}
.time-section {
text-align: center;
}
.time-section .time {
font-size: 1.5rem;
font-weight: bold;
color: var(--color-text-primary);
}
.time-section .duration {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 3px;
}
.details-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.details-section .machine {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-info);
}
.details-section .mold {
font-size: 1rem;
color: var(--color-text-primary);
}
.details-section .order {
font-size: 0.9rem;
color: var(--color-text-muted);
}
.details-section .location {
font-size: 0.85rem;
color: var(--color-text-secondary);
}
.mold-changer-detail .status-section,
.changeover-detail .status-section {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.status-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
}
.status-badge.pending {
background: var(--color-border-strong);
color: var(--color-text-primary);
}
.status-badge.in-progress {
background: var(--color-primary);
color: var(--color-text-inverse);
}
.status-badge.completed {
background: var(--color-success-hover);
color: var(--color-text-inverse);
}
.mep-status {
font-size: 0.85rem;
padding: 4px 10px;
border-radius: 15px;
}
.mep-status.ready {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.mep-status.waiting {
background: var(--color-orange-bg);
color: var(--color-orange-text);
}
.mold-status {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.mold-status.needs-maintenance {
color: var(--color-orange);
}
.mold-status.needs-repair {
color: var(--color-danger);
}
.mold-status.blocked {
color: var(--color-danger);
font-weight: 600;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--color-text-faint);
}
.empty-state h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.loading {
text-align: center;
padding: 60px;
color: var(--color-text-faint);
}
.loading::after {
content: '';
display: inline-block;
width: 30px;
height: 30px;
border: 3px solid var(--color-border-strong);
border-top-color: var(--color-info);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 15px;
vertical-align: middle;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.refresh-btn {
background: var(--color-info);
color: var(--color-text-inverse);
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.refresh-btn:hover {
background: var(--color-info-hover);
}
@media (max-width: 768px) {
.summary {
grid-template-columns: repeat(2, 1fr);
}
.changeover-card {
grid-template-columns: 1fr;
gap: 15px;
}
.time-section {
text-align: left;
}
.status-section {
align-items: flex-start;
}
}
.article-type-badge {
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.article-section {
margin-bottom: 24px;
}
.article-section:last-child {
margin-bottom: 0;
}
.article-section-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border-subtle);
}
.article-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.article-info-item {
background: var(--color-bg-raised);
padding: 12px 16px;
border-radius: 6px;
}
.article-info-label {
font-size: 12px;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.article-info-value {
font-size: 14px;
color: var(--color-text-primary);
font-weight: 500;
}
.article-info-value.highlight {
color: var(--color-primary);
}
.article-info-value.warning {
color: var(--color-orange-text);
}
.article-info-value.success {
color: var(--color-success-text);
}
.article-table {
width: 100%;
border-collapse: collapse;
}
.article-table th,
.article-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(--color-border-subtle);
}
.article-table th {
font-weight: 500;
color: var(--color-text-secondary);
font-size: 13px;
background: var(--color-bg-raised);
}
.article-table tbody tr:hover {
background: var(--color-bg-raised);
}
.article-table tbody tr:last-child td {
border-bottom: none;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
.stat-card {
background: var(--color-bg-raised);
padding: 16px;
border-radius: 8px;
text-align: center;
}
.stat-value {
font-size: 28px;
font-weight: 600;
color: var(--color-text-primary);
}
.stat-value.good {
color: var(--color-success);
}
.stat-value.warning {
color: var(--color-warning);
}
.stat-value.bad {
color: var(--color-danger);
}
.stat-label {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 4px;
}
.order-card {
background: var(--color-bg-raised);
border-radius: 6px;
padding: 16px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 16px;
}
.order-card:last-child {
margin-bottom: 0;
}
.order-status {
width: 12px;
height: 12px;
border-radius: 50%;
}
.order-status.planned {
background: var(--color-gray-600);
}
.order-status.in-progress {
background: var(--color-warning);
}
.order-status.completed {
background: var(--color-success);
}
.order-info {
flex: 1;
}
.order-number {
font-weight: 600;
color: var(--color-text-primary);
}
.order-details {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 4px;
}
.order-progress {
width: 100px;
}
.progress-bar {
height: 6px;
background: var(--color-gray-250);
border-radius: 3px;
overflow: hidden;
}
.progress-bar .progress {
height: 100%;
background: var(--color-success);
transition: width 0.3s;
}
.progress-text {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
text-align: right;
}
.stock-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.stock-card {
background: var(--color-bg-raised);
border-radius: 8px;
padding: 16px;
}
.stock-location {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 12px;
}
.stock-quantities {
display: flex;
gap: 16px;
}
.stock-qty {
flex: 1;
}
.stock-qty-label {
font-size: 12px;
color: var(--color-text-muted);
}
.stock-qty-value {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary);
}
.stock-qty-value.available {
color: var(--color-success);
}
.stock-qty-value.booked {
color: var(--color-orange-text);
}
.mold-link-card {
background: var(--color-selected-bg);
border: 1px solid var(--color-blue-200);
border-radius: 8px;
padding: 16px;
display: flex;
align-items: center;
gap: 16px;
}
.mold-link-card.warning {
background: var(--color-orange-bg);
border-color: var(--color-orange-100);
}
.mold-icon {
width: 48px;
height: 48px;
background: var(--color-primary-light);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.mold-info {
flex: 1;
}
.mold-name {
font-weight: 600;
color: var(--color-text-primary);
}
.mold-details {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 4px;
}
.instruction-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.instruction-item {
background: var(--color-bg-raised);
border-radius: 6px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: all 0.2s;
}
.instruction-item:hover {
background: var(--color-gray-250);
}
.instruction-icon {
width: 40px;
height: 40px;
background: var(--color-bg-surface);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 18px;
}
.instruction-info {
flex: 1;
}
.instruction-name {
font-weight: 500;
color: var(--color-text-primary);
}
.instruction-meta {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
}
.history-list {
max-height: 500px;
overflow-y: auto;
}
.history-item {
display: flex;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.history-item:last-child {
border-bottom: none;
}
.history-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-gray-250);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.history-icon.bom {
background: var(--color-primary-light);
color: var(--color-blue-700);
}
.history-icon.routing {
background: var(--color-orange-bg);
color: var(--color-orange-text);
}
.history-icon.sync {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.history-content {
flex: 1;
}
.history-title {
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 4px;
}
.history-description {
font-size: 13px;
color: var(--color-text-secondary);
}
.history-meta {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 6px;
}
.drying-card {
background: var(--color-orange-bg);
border: 1px solid var(--color-orange-100);
border-radius: 8px;
padding: 16px;
display: flex;
align-items: center;
gap: 16px;
}
.drying-icon {
font-size: 32px;
}
.drying-params {
display: flex;
gap: 24px;
}
.drying-param {
text-align: center;
}
.drying-value {
font-size: 24px;
font-weight: 600;
color: var(--color-orange-text);
}
.drying-label {
font-size: 12px;
color: var(--color-text-secondary);
}
.empty-state {
text-align: center;
padding: 48px 24px;
color: var(--color-text-muted);
}
.empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.comparison-stat {
flex: 1;
padding: 16px;
border-radius: 8px;
text-align: center;
}
.comparison-stat.added {
background: var(--color-success-bg);
}
.comparison-stat.removed {
background: var(--color-danger-bg);
}
.comparison-stat.changed {
background: var(--color-orange-bg);
}
.comparison-stat-value {
font-size: 24px;
font-weight: 600;
}
.comparison-stat.added .comparison-stat-value { color: var(--color-success-text); }
.comparison-stat.removed .comparison-stat-value { color: var(--color-danger-text); }
.comparison-stat.changed .comparison-stat-value { color: var(--color-orange-text); }
.comparison-stat-label {
font-size: 12px;
color: var(--color-text-secondary);
margin-top: 4px;
}
.comparison-item {
padding: 8px 12px;
border-radius: 4px;
margin-bottom: 4px;
font-size: 14px;
}
.comparison-item.added {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.comparison-item.removed {
background: var(--color-danger-bg);
color: var(--color-danger-text);
text-decoration: line-through;
}
.comparison-item.changed {
background: var(--color-orange-bg);
color: var(--color-orange-text);
}
.comparison-item .old-value {
text-decoration: line-through;
opacity: 0.7;
margin-right: 8px;
}
.comparison-item .new-value {
font-weight: 500;
}
.compare-versions-btn {
margin-left: auto;
padding: 6px 12px;
font-size: 13px;
background: var(--color-bg-raised);
border: 1px solid var(--color-border-default);
border-radius: 4px;
cursor: pointer;
display: none;
}
.compare-versions-btn:hover {
background: var(--color-gray-250);
}
.compare-versions-btn.visible {
display: inline-flex;
align-items: center;
gap: 6px;
}
#articles-table-body tr {
cursor: pointer;
transition: background-color 0.15s;
}
#articles-table-body tr:hover {
background-color: var(--color-slate-50);
}
.sortable-header {
user-select: none;
transition: background-color 0.15s;
}
.sortable-header:hover {
background-color: var(--color-gray-300);
}
.sortable-header .sort-indicator {
display: inline-flex;
align-items: center;
margin-left: 4px;
}
.sortable-header:hover .sort-indicator i {
color: var(--color-gray-600);
}
.column-filter-input {
font-weight: normal;
background-color: var(--color-bg-surface);
}
.column-filter-input:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.column-filter-input::placeholder {
color: var(--color-text-faint);
font-weight: normal;
}
#clear-filters-btn {
transition: all 0.2s ease;
}
#clear-filters-btn:hover {
background-color: var(--color-danger-bg);
border-color: var(--color-red-200);
}
#clear-filters-btn:hover i {
color: var(--color-red-400);
}
#article-tab-content {
min-height: 0;
}
@media (max-width: 768px) {
.article-info-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.stock-grid {
grid-template-columns: 1fr;
}
.order-card {
flex-wrap: wrap;
}
.order-progress {
width: 100%;
margin-top: 8px;
}
}
.overlap-parallel,
.overlap-sequential {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.overlap-parallel {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.overlap-sequential {
background: var(--color-gray-150);
color: var(--color-text-secondary);
}
.routing-table td.align-top {
vertical-align: top;
}
.routing-table .operation-cell {
max-width: 400px;
line-height: 1.5;
}
.operation-title {
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 6px;
}
.operation-list {
margin: 0;
padding-left: 20px;
font-size: 13px;
color: var(--color-gray-700);
}
.operation-list li {
margin-bottom: 4px;
line-height: 1.4;
}
.operation-list li:last-child {
margin-bottom: 0;
}
ol.operation-list {
list-style-type: decimal;
}
ul.operation-list {
list-style-type: disc;
}
.operation-long {
font-size: 13px;
color: var(--color-gray-700);
line-height: 1.5;
word-wrap: break-word;
white-space: normal;
}
.tab-active {
border-bottom: 2px solid var(--color-blue-500);
color: var(--color-blue-500);
}
.match-exact {
background-color: var(--color-success-light);
}
.match-partial {
background-color: var(--color-yellow-100);
}
.match-manual {
background-color: var(--color-primary-light);
}
.verified {
opacity: 0.6;
}
.modal {
display: none;
}
.modal.active {
display: flex;
}
.autocomplete-container {
position: relative;
}
.autocomplete-input {
width: 200px;
padding: 4px 8px;
border: 1px solid var(--color-border-strong);
border-radius: 6px;
font-size: 12px;
}
.autocomplete-input:focus {
outline: none;
border-color: var(--color-blue-500);
box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
background: white;
border: 1px solid var(--color-border-strong);
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
display: none;
}
.autocomplete-dropdown.show {
display: block;
}
.autocomplete-item {
padding: 8px 12px;
cursor: pointer;
font-size: 12px;
border-bottom: 1px solid var(--color-bg-page);
}
.autocomplete-item:hover {
background: var(--color-primary-bg);
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item .code {
font-weight: 600;
color: var(--color-text-primary);
}
.autocomplete-item .name {
color: var(--color-gray-600);
font-size: 11px;
}