/* ========================================================================== PRODUCTION FLOOR & FACILITY CARDS ========================================================================== */ .production-toolbar { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 6px 8px; } .sector-tabs-scroll { display: flex; gap: 6px; width: 100%; } .sector-pill { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--bg-surface-sub); border: 1px solid var(--border-color); padding: 8px 6px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: all 0.15s; box-sizing: border-box; } .sector-pill iconify-icon { font-size: 1.15rem; flex-shrink: 0; } .sector-pill:hover { border-color: var(--text-muted); } .sector-pill.active { background: var(--text-primary); color: #ffffff; border-color: var(--text-primary); } .sector-pill.active iconify-icon { color: #ffffff !important; } .sector-pill.active .sector-pill-rate { color: #a7f3d0; } .production-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; } .facility-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; min-height: 420px; gap: 12px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; position: relative; box-sizing: border-box; } .facility-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-md); } .facility-card.selected { border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } .facility-card.locked-card { opacity: 0.85; background: #fbfcfe; } .facility-header { display: flex; gap: 12px; align-items: flex-start; min-height: 60px; box-sizing: border-box; } .facility-icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-lg { font-size: 1.6rem; } .facility-title-wrap { flex: 1; min-width: 0; overflow: hidden; } .facility-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; height: 22px; flex-wrap: nowrap; margin-bottom: 2px; box-sizing: border-box; } .sector-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .facility-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .facility-type-sub { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .facility-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; } /* Status Badges */ .status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; white-space: nowrap; flex-shrink: 0; height: 20px; line-height: 1; box-sizing: border-box; } .badge-success { background: var(--emerald-light); color: var(--emerald-dark); } .badge-warning { background: var(--amber-light); color: var(--amber-dark); animation: pulseWarning 1.5s infinite; } @keyframes pulseWarning { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } .badge-idle { background: var(--bg-surface-sub); color: var(--text-muted); } /* Cycle Progress Track */ .cycle-bar-track { width: 100%; height: 6px; background: var(--bg-surface-sub); border-radius: 3px; overflow: hidden; } .cycle-bar-fill { height: 100%; transition: width 0.1s linear; } /* Facility Stats Grid */ .facility-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--bg-surface-sub); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 84px; box-sizing: border-box; } .stat-cell { display: flex; flex-direction: column; min-width: 0; } .stat-label { font-size: 0.65rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-value { font-size: 0.78rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-warning { color: var(--amber-dark); } /* Inputs Strip */ .inputs-strip { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: #f8fafc; border: 1px dashed var(--border-color); border-radius: var(--radius-sm); } .inputs-label { font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); } .inputs-chips { display: flex; flex-wrap: wrap; gap: 6px; } .input-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; background: var(--bg-surface); border: 1px solid var(--border-color); padding: 2px 6px; border-radius: 4px; color: var(--text-secondary); } .input-chip.low-stock { border-color: var(--amber-dark); background: var(--amber-light); color: var(--amber-dark); } /* Facility Logistics & Downstream Policy Bar */ .facility-policy-bar { display: flex; gap: 6px; align-items: center; background: #f8fafc; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 4px 6px; } .policy-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-right: 2px; } .btn-policy-toggle { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 3px 7px; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; user-select: none; } .btn-policy-toggle:hover { border-color: var(--border-subtle); background: var(--bg-surface-sub); } .btn-policy-toggle.active { background: #ecfdf5; border-color: #6ee7b7; color: var(--emerald-dark); font-weight: 700; } .btn-policy-toggle.inactive { background: #fef2f2; border-color: #fecaca; color: #b91c1c; font-weight: 700; } /* Action Buttons */ .facility-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .btn-primary-corp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--primary-blue); color: #ffffff; border: none; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s, opacity 0.15s; } .btn-primary-corp:hover:not(:disabled) { background: var(--primary-blue-hover); } .btn-primary-corp:disabled { background: var(--border-subtle); cursor: not-allowed; opacity: 0.65; } .btn-corp-action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--emerald-dark); color: #ffffff; border: none; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .btn-corp-action:hover { background: var(--emerald-profit); } .btn-corp-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 0.75rem; font-weight: 600; color: var(--text-primary); cursor: pointer; white-space: nowrap; } .btn-corp-secondary:hover:not(:disabled) { background: var(--bg-surface-sub); } .btn-corp-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .mgr-hired-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-blue-light); color: var(--primary-blue); font-size: 0.72rem; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; }